发表于： 2020-02-27 20:47:42

0 1716

今天完成的事情：

使用var声明的变量存在变量提升，即可在声明变量之前使用变量。使用let、const声明的变量不能在声明变量之前使用变量。

函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升会把变量声明挪到作用域顶部

打印的结果并不是原本以为的，按秒输出1,2,3,...,7,8,。而是按秒输出9,9,9,...,9,9，共输出8个9。

原因是setTimeout()是一个异步函数，会先把循环执行完，所以i的值是9，然后再按1秒一个，共输出8个9。

for (var i = 1; i <= 8; i++) {
                setTimeout(function () {
                    console.log(i)//结果：每秒输出一个9，共输出8个9
                }, i * 1000)
            }   

可以用let替代var来定义i

for (let i = 1; i <= 8; i++) {
                setTimeout(function () {
                    console.log(i)//结果：按秒输出1,2,3,...,8
                }, i * 1000)
            }  

闭包

for (var i = 1; i <= 8; i++) {
                ; (function (j) {
                    setTimeout(function () {
                        console.log(j)//结果：按秒输出1,2,3,...,8
                    }, j * 1000)
                })(i)
            } 

let所声明的变量，只在使用let所在的代码块内有效，在代码块外调用let声明的变量则会报错

不存在变量提升，使用let命令声明的变量，只能在声明后使用，语法上称为“暂时性死区”

ES65声明变量有两种方法：

var 命令和function命令

ES6声明变量有六种方法：

var命令、function命令、let命令、const命令、import命令和class命令

解构赋值

let [a,b,c] = [1,2,3]
console.log(a,b,c)// [1,2,3]

等号两边结构一致
定义和赋值同时完成
若等号两边结构不一致，则会报错

箭头函数

(arg1,arg2)=>{
...
}

如果只有一个参数，则()可省略

arg1 => {
...
}

如果函数体只有一句，则{}可省略

let add_salary = salary => salary + 2000;
console.log(add_salary(1000)) // 3000

箭头函数中：

this所在函数定义在哪个对象下，this就指向谁。注意this就指向定义时所作的对象，而不是使用时所在对象。

模板字符串

用``，可以当普通字符串使用，也可以在字符串中嵌入变量

let [name,age] = ["Peter",10];
console.log(`hi ${name}, ${age}`) //hi Peter,10

数组方法

扩展运算符（...）

扩展运算符三个点（...）是将一个数组转为用逗号分隔的参数序列。

复制数组

let arr2 = [...arr1]

合并数组

let arr3 = [...arr1,...arr2]

与解构赋值结合来生成数组

这里扩展运算符必须放在参数的最后一位，否则会报错

let [a,...args] = [1,2,3,4];
console.log('a',a) // a,1
console.log('args',args) // args,[2,3,4]

Webkit内核的css滚动条选择器

::-webkit-scrollbar — 整个滚动条设置宽度和滚动条背景颜色

::-webkit-scrollbar:horizontal 水平的滚动条

::-webkit-scrollbar-track 滚动条轨道设置颜色

::-webkit-scrollbar-thumb 竖直的滑块

::-webkit-scrollbar-thumb:horizontal 水平的滑块

// 可设置图片

::-webkit-scrollbar-button:decrement 滚动条上的按钮--竖直滚动条向上

::-webkit-scrollbar-button:increment 滚动条上的按钮--竖直滚动条向下

::-webkit-scrollbar-button:horizontal:decrement 滚动条上的按钮--水平滚动条向左

::-webkit-scrollbar-button:horizontal:increment 滚动条上的按钮--水平滚动条向右

::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分

::-webkit-scrollbar-corner — 边角，即当同时有垂直滚动条和水平滚动条时交汇的部分

::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

IE自定义滚动条样式

scrollbar-arrow-color — 滚动条三角箭头的颜色

scrollbar-face-color — 滚动条上滚动滑块颜色

scrollbar-track-color— 滚动条轨道、按钮背景的颜色

scrollbar-shadow-color— 滚动框上滑块边框的颜色

明天计划的事情：

继续学习ES6

遇到的问题：

无

收获：

学习ES6

返回列表

【任务2】 [北京|结业弟子]JS-朱春雨 | 2020年02月27日 的日报