ES6知识整理(一)--- let/const/箭头函数

早在17年初就读了《ES6 标准入门》并在博客上做了笔记(《ES6 标准入门》读书笔记),工作中也有用到一些。一年后再回过头来看这些知识,又跟初看的时候的感觉完全不同了。对很多新特性的好处有了更具体的认识。也有一些知识依然了解不够,所以在这里重新整理一波,夯实基础。

箭头函数

箭头函数主要有两个好处:
1. 减少代码量
2. 绑定函数定义时的作用域
对于1,这里记录一个比较刁钻的小例子:

let multiply = (a, b) => b === undefined ? b => a * b : a * b;
let double = multiply(2);
double(3); // => 6  
multiply(2, 3); // => 6
// 也就是
function multiply(a, b) {
    if (b === undefined) {
        return function(b) {
            return a * b;
        }
    }
    return a * b;
}
let double = multiply(2);
double(3); // => 6  
multiply(2, 3); // => 6

对于2的使用比较普遍,尤其是在一些会改变作用域的地方。比较常见的例子是setInterval,我们知道setInterval中的this指向的是window对象。如果不使用箭头函数,我们要这样写:

// 给this赋值
let obj = {
  time: 3,
  count () {
    let self = this
    console.log(this.time)
    this.interval = setInterval(function () {
      console.log(self.time);
    }, 1000)
  }
}
obj.count()
// 使用bind方法
let obj = {
   time: 3,
   count () {
     console.log(this.time)
     this.interval = setInterval(function () {
       console.log(this.time);
     }.bind(this), 1000)
   }
 }
 obj.count()

可以说是很麻烦了,但是如果使用箭头函数,会自动绑定函数声明时的作用域。完全不用理会这个问题:

let obj = {
  time: 3,
  count () {
    console.log(this.time)
    this.interval = setInterval(() => {
      console.log(this.time)
    }, 1000)
  }
}
obj.count()

let/const关键字

使用let/const定义变量之后,就可以完全代替var了。
let/const没有变量提升,所以一定要先声明后使用。
let/const为js增加了块级作用域,例如:

function f1() {
    let n = 5;
    if (true) {
        let n = 10;
    }
    console.log(n); // 5
}

const声明一个只读常量,一旦声明要立即初始化。const声明的对象,只是对象的地址不变,对象本身是可变的。const声明的数组可以使用数组的方法但无法重新赋值。
从ES6开始,全局变量将逐步与全局对象的属性脱钩。let,const,class声明的全局变量,不再属于全局对象的属性,例如:

var a = 1
window.a // 1
let b = 1;
window.b // undefined

猜你喜欢

转载自blog.csdn.net/creabine/article/details/79016811
今日推荐