ES6 知识点梳理

ES6 知识点梳理

let const

  • let

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // ES5
    var x = 1

    // ES6
    let x = 1

    尽量在声明定义变量时使用let关键字。
    由于Js作用域的缺陷,使用var声明定义的变量极容易发生变量提升到全局作用域,导致命名空间的混乱冲突等后果。

    * 建议应该了解Js作用域,函数作用域,及变量声明提升。相信对于js会有更深的理解。
  • const

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // const多用于定义常量
    const PI = 3.14

    // 约定俗成常量的命名多用大写字母。
    * 常量定义后值便不能再更改,否则报错。
    * 若值的类型为数组,object等动态类型,我们可以更改数组内部某项的值,或object某个属性值。
    * 其实只要保证变量的指向不发生改变。

    ****当变量的值为静态类型,number,string等等时为何便不能更改呢?
    感兴趣的可以看看值引用,值复制。

    数组与object的深拷贝便是为了解决它们的地址引用问题。

函数

  • ES6对于函数的新增特性,箭头函数是重中之重亦是最常用到的。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // ES5
    var func = function(x){ console.log(x) }

    //ES6
    let func = x => console.log(x)

    // 当函数没有形参或不止一个时,不能省略圆括号。
    // 当函数体内的语句只有一条时,可省略花括号。
    * 函数的形参可以指定默认值。
    * 箭头函数中的this亦是重中之重,需要着重了解。

    * 函数的形参也可以使用解构赋值的方式

解构

利用解构赋值同时定义多个变量

  • 数组解构赋值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let [vari, vari1, vari2] = [1, 2, 3]

    // 顺序一一对应。
    // 三个变量vari, vari1, vari2的值便依次为1, 2, 3。
    // 对于同时需要声明定义多个变量时特别有效,代码美观简洁

    let [vari = 1, vari1, vari2] = [undefined, 2, 3]

    // 变量也可以同时拥有默认值,当赋值为undefined时,变量的值为默认值否则为赋值。
  • 对象解构赋值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 首先我有两个变量
    let a, b;
    ({x : a, y : b} = {x : 1, y : 10})

    // 那么此时变量x与y的值分别为1,10。
    // 对象解构赋值不是依据顺序,而是依据同名属性。
    // 当右边的属性名x匹配到了左边的同名属性名x,右边的属性名x对应的属性值1便会赋值给变量a。

    // 建议解构赋值应该与声明变量同时进行,而不是像我上面那样先声明再复赋值
    let {x : a, y : b} = {x : 1, y : 10}
    // 由于对象可以采用简写方式
    {x : x, y : y} 可以写成 {x ,y}
    // 所以我们的解构赋值尽量变量名与匹配的属性名同名,还是以变量a,b为例。我们可以简写成
    let {a, b} = {a : 1, b : 10}

    * 记住,对象的解构赋值,属性名是起匹配作用的。有时我们可以利用这个与对象的简写方式写出极为简洁的代码,如

    let {a, b} = {a, b}

还有嵌套解构赋值等操作,不大建议使用。变量的声明应极其明显简洁,当过多的嵌套赋值,反而会增加代码阅读的成本。

  • 利用解构赋值实现多重赋值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    let a = 1,
    b = 2;

    通常我们要交换a与b的值,需要另外一个中间变量保存某个值。

    let c = a;
    a = b;
    b = c;

    // ES5
    a = [b, b = a][0]

    // ES6
    [a, b] = [b, a]

    此时,a为2,b为1;a与b交换了各自的值。

    比之ES5看起来更加简单,直观易于理解。

数组

扩展运算符“…”是ES6数组新增特性中极为重要的,需要着重掌握。

对数组的深拷贝

1
2
3
4
5
let arr1 = [1, 2, 3, 4, 5]

// ES6 let arr2 = [...arr1] || let [...arr2] = arr1

// ES5 let arr2 = arr.concat()

求数组的最大/最小值

1
2
3
4
5
利用扩展运算符结合Math函数

// 最大值 Math.max(...[])

// 最小值 Math.min(...[])

数组的去重

1
2
3
4
5
6
7
8
9
[...new Set([])] || Array.from(new Set([]))

这里首先都是利用Set的特性,将数组中的重复元素去除。再转回数组类型

第一种利用扩展运算符将Set转数组

第二种利用ES6的一个数组新方法Array.from()能将类数组结构对象转为数组

所谓的类数组结构,便是内部具有迭代器iterator(可以使用for...of..进行遍历)或者具有length属性的对象。

Object

利用Object.values() 与 0bject.entries() 对Object遍历

1
2
3
4
5
6
7
// 直接取出Object的value

for(item of Object.values(obj)){
console.log(item)
}

object.entries() 同上,不过是键值对组成的数组。

proxy 代理

proxy,对JS的默认行为进行编辑。亦可以理解为在js解释器解释相关代码的过程中,给这个过程插入了一层拦截。于是乎在解释代码时都会经过这层拦截触发某些自定义处理事件。

1
2
3
4
5
6
// 首先,我声明赋值一个对象

let obj = {
name : 'aning',
age : 18
}

当我们对这个对象进行新增属性,修改属性的操作时默认是不会有任何明显反应提示的。

我们可以通过对这个对象增加一个代理,让其提示我们是否新增成功,修改成功。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 使用Proxy构造函数添加代理
let proxy = new Proxy(obj, {
get(target, key, receiver){
console.log(target, key, receiver)
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver) {
console.log(target, key, value, receiver)
return Reflect.set(target, key, value, receiver)
}
})

// 第一个参数,便是我们代理的对象,第二个对象参数,包含了一系列对代理的对象操作时所触发的相关操作。

当我们需要获取这个对象上的某个属性值时,如我们直接写 obj.name, 便会触发get函数。
第一个参数为目标对象,第二个便是对象的属性(key),第三个参数是对象的镜像,可选。
参数名可以自定义,但位置顺序是不能更改的。

Reflect对象方法是不可缺少的,会导致实际操作无效。如修改属性值,新增属性值没有实际效果。

set便是我们对该对象进行修改属性值,新增属性值时会触发的操作。
还有其余的函数,可以深入了解一下。如has

实际用途视需求而定。

文章作者: Luo Jun
文章链接: /2018/05/08/ES6/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Aning