发表于: 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 = 1i <= 8i++) {
                setTimeout(function () {
                    console.log(i)//结果:每秒输出一个9,共输出8个9
                }, i * 1000)
            }   


可以用let替代var来定义i

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

            }  



闭包

for (var i = 1i <= 8i++) {
                ; (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


返回列表 返回列表
评论

    分享到