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
9let [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
18let 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 | let arr1 = [1, 2, 3, 4, 5] |
求数组的最大/最小值
1 | 利用扩展运算符结合Math函数 |
数组的去重
1 | [...new Set([])] || Array.from(new Set([])) |
Object
利用Object.values() 与 0bject.entries() 对Object遍历
1 | // 直接取出Object的value |
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
实际用途视需求而定。