ES6总结

1. const let

使用var声明的函数和变量会被提升至作用域的最顶部,变量提升的规则:

• 变量声明会被提升
• 函数声明会使整个函数体提升到最顶部

	console.log(name);
	foo(); // 'foo'
	
	var name = 'ian';
	
	function foo(){
	 console.log('foo');
	};

1
2
3
4
5
6
7
8
9

const 和 let是对var问题的补充和修复,使用const和let声明的变量不会提升

2. 模板字符串

• 模板字符串可以换行使用,空格也会被保留
• 模板字符串以${}占位符的形式使用变量,比变量拼接更好用

	 var student = 'ian';
	
	 var welcome = `hello, ${student}, i am your teacher,
	 welcole to school ! `;
	
	 consol.log(welocme);
1
2
3
4
5
6

模板字符串做函数参数的时候与普通的函数参数有所区别

     const teacher = 'ian';
     const student = 'tom';
     function sayHello(stringTemplate, ...rest){
      console.log(stringTemplate,rest);
     };
     sayHello `hello,${student},i am ${teacher},welcome!`
1
2
3
4
5
6

3. 箭头函数

箭头函数内的this指向上级作用域的this,也就是箭头函数本身所在的词法作用域的this

    var name = 'globalName';
    var user = {
      name: 'ian',
      age: 21,
      test: function () {
        function foo() {
          console.log(this.name); //globalName
        };
        const bar = () => {
          console.log(this.name); //age
        };
        foo();
        bar();
      }
    };
    user.test();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. 解构赋值

4.1 数组的解构

    var a, b;
    var [a,b] = ['jack','tom','ian','lisa'];
    console.log(a,b)//jack tom

    //不借助临时变量进行值的交换
    var c = 1,d=2;
    [c,d]=[d,c];
    console.log(c,d);//2 ,1
1
2
3
4
5
6
7
8

4.2对象的解构赋值

    var user = { name: 'ian', age: 21, gender: 'male', phone: 1111111 };
    var { name, age } = user;
    console.log(name, age); //ian 21
1
2
3

5. 拓展运算符

5.1 基础使用
使用拓展运算符可以从对象或数组中获取部分参数,而剩下的部分可以通过…拓展运算符获取

    //在数组中使用拓展运算符
    var names = ['jack', 'tom', 'ian', 'lisa'];
    var [student1, student2] = [student1, student2, ...rest] = names;
    console.log(student1, student2, rest); //jack tom ['ian', 'lisa']

    //在对象中使用拓展运算符、
    var user = { name: 'ian', age: 21, gender: 'male', phone: 111111 };
    var { name, age, ...rest } = user;
    console.log(name, age, rest); //ian 21 {gender: 'male', phone: 111111}
1
2
3
4
5
6
7
8
9

5.2 使用拓展运算符合并数组/对象

 var arr1 = ['a', 'b', 'c'];
    var arr2 = [1, 2, 3];
    var arrs = [...arr1, ...arr2, 4, 5];
    console.log(arrs); //['a', 'b', 'c', 1, 2, 3, 4, 5]

    var obj1 = { name: 'ian', age: 21 };
    var obj2 = { gender: 'male', phone: 111111 };
    var obj = { ...obj1, ...obj2, gender: 'female' };
    console.log(obj); //{name: 'ian', age: 21, gender: 'female', phone: 111111}
1
2
3
4
5
6
7
8
9

数组在合并的时候按照从左往右的顺序,对象在合并的时候相同的属性会被后面的覆盖掉

6 函数的剩余参数和默认值

6.1 使用拓展运算符获取函数参数

   // 使用arguments获取函数的全部参数
    function add() {
      var arrs = Array.slice.call(arguments);
      let total = 0;
      for (var i = 0; i < arrs.length, i++;) {
        total += arr[i]
      };
      return total;
    };

    //使用拓展运算符获取函数参数
    function add(...rest) {
      console.log(rest.length)
      let total = 0;
      for (var i = 0; i < rest.length; i++) {
        total += rest[i]
      };
      return total;
    }

    //使用拓展运算符获取函数的的剩余参数
    function add(a, ...rest) {
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

6.2 函数的默认值

//es6之前给函数设置默认值
function welcome(name1, name2) {
  name1 = name1 || 'jack';
  name2 = name2 || 'rose';
  console.log(`Hello, i am ${name1},welcome ${name2}`);
};
//使用es6给函数设置默认值
function welcome(name1 = 'jack', name2 = 'rose') {
  console.log(`Hello, i am ${name1},welcome ${name2}`);
};
1
2
3
4
5
6
7
8
9
10

7. 对象属性简写

当对象属性的的key和value使用相同的变量名字时,value可以省略

    //不使用简写
    var name = 'name';
    var age = 21;
    var user = {
      name: name,
      age: age,
    };

    //使用简写
    var user = {
      name,
      age,
    };
1
2
3
4
5
6
7
8
9
10
11
12
13

8. 空值运算符

8.1 空值合并运算符
空值合并运算符由??组成,a??b a为空值(undefined或者null)的时候取b,否则取a的值

    var a;
    var b = 5;
    var c = a ?? b; // c=5
    console.log(undefined ?? 0); // 0
    console.log(0 ?? 1);// 0
1
2
3
4
5

8.2 空值赋值运算符
当左侧为空值(null或者undefined)的时候才赋值

    var a;
    a ??= 2; //a =2
    a ??=5; //a=2
1
2
3

9. Map、Set、WeakMap、WeapSet

待更新…

10. esm

待更新…

11. 可选链

待更新…

12.类和装饰器

待更新…