ES6常用知识点总结（一）

发表于 | 分类于

介绍

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6新增的东西很多，我们不可能马上就掌握所有知识点，所以在这把常用到的知识点总结下。

let 和 const

let

let和var类似，都是用来声明变量的，但它和var又有些不同：

  1. let 声明的变量仅在包含它的代码块里有效

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //let实际上为 JavaScript 新增了块级作用域，let声明的变量只在包含它的 {} 里有效，在代码块外面访问不到它

    {
        var a = 1;
        let b = 2;
    }

    console.log(a);    //1
    console.log(b);    //Uncaught ReferenceError: b is not defined

  2. let 不存在变量提升

    1
    2
    3
    4
    5
    6
    7
    //var情况
    console.log(a);     //undefined
    var a = 1;


    console.log(b);    //Uncaught ReferenceError: b is not defined
    let b = 2;

  3. 暂时性死区

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    //只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响，所以在let声明变量之前，这个变量都是不可用的，这块区域就是“暂时性死区”

    if(true){
        a = 1;     //ReferenceError
        console.log(a);  //ReferenceError
        
        let a;       //此处结束死区
        console.log(a);   //undefined
        
        
        a = 2;
        console.log(a);    //2
        
        //上面代码中，在 let 命令声明变量 a 之前，都属于变量 a 的“死区”。
        //其实就是不允许变量提升的结果。
    }

  4. let 不允许重复声明

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    {
    	var a = 1;
    	var a = 2;      //不报错
    }

    {
    	let a = 1;
    	var a = 2;     //Identifier 'a' has already been declared
    }

    {
    	let a = 1;
    	let b = 2;     //Identifier 'a' has already been declared
    }


    //只要同作用域里有let声明了同一个变量，就会报错

const

const声明一个只读的常量。一旦声明，常量的值就不能改变。

1
2
3
4
const a = 1;
console.log(a);    //1

a = 2;   //"a" is read-only

值得注意的是，不是变量的值不可改动，而是变量指向的那个内存地址不得改动。

对于简单类型的数据（数值、字符串、布尔值），一旦被赋值就不可改动，但是对于引用类型，主要是对象和数组，可以修改里面的属性值。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const arr = [1,2,3];
arr[0] = 0;
arr[3] = 4;
console.log(arr);    //[0, 2, 3, 4]


const obj = {
	a:1
}
obj.a = 2;
obj.b = 3;
console.log(obj);  //{a: 2, b: 3}


//由上可知，对于引用类型，不管是修改属性值，还是添加值，都不会出错。
//但这并不代表你可以直接重新赋值，如下：

const obj = {
	a:1
}
obj = {
	a:2
}             //报错


你懂了吗！！！

const其他特性和let相同，即上面let中的四点。

结构赋值

官方点说，ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

其实讲得明白点，就是左右匹配赋值，举个例子就明白了。

数组解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//先前给变量赋值，你需要一个一个赋值
let a = 1;
let b = 2;
let c = 3;

//ES6的结构赋值
let [a,b,c] = [1,2,3];  
//上面情况就是从数组中提取值，按照对应位置，对变量赋值


//你可以嵌套，只要等号两边的模式相同
let [a, [[b], c]] = [1, [[2], 3]];
a //1
b //2
c //3



//如果解构不成功，变量的值就等于 undefined
let [b] = [];   
let [a, b] = [1];   
//这两种情况 b 都是undefined，解构不成功，但第二种 a 成功了，为1



//等号左边的模式，只匹配一部分的等号右边的数组
let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4



//你也可以指定默认值
let [a = 1] = [];
a // 1

//很好理解不是嘛

对象解构

对于对象，同数组，需要注意的就是，数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

不就是属性名相同吗

1
2
3
4
5
6
7
let {a,b} = {'a':1, 'b':2}
a //1
b //2

let {a,b} = {'b':1, 'a':2}
a //2
b //1

字符串解构

1
2
3
4
5
6
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

模板字符串

ES6在字符串中扩展了不少东西，其中模板字符串简直就是神器

在之前拼接一个字符串，你需要这样：

1
'hello'+obj.name+','+'i am your friend'

ES6中你可以这样：

1
2
3
4
`hello ${obj.name} ,i am your friend`

// ` 是反引号，在键盘数字 1 键左边，Tab键上面；
// ${}用来放变量

这样你或许看不出来这种优势，但是如果字符串很长时，这就是利器：

1
2
3
4
5
6
`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`

没错，它可以直接输出html结构，记住是保留空格和缩进的哟。当然如果你不想保留，也可以使用trim方法消除它，但我想用了这个方法的就不会想像之前那样一大串吧，所以就不多赘述了。

模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

1
2
3
4
5
6
7
8
9
10
11
12
let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

也可以调用函数

1
2
3
4
5
function fn() {
  return "Hello";
}

`${fn()}  world`   //hello world

参考：http://es6.ruanyifeng.com/