ES6常用知识点总结

字符串拼接

• es6使用 包裹字符串，插入变量数据${变量名}

  // 字符模板的写法
  var ss= '苹果';
  var str = `我要吃${ss}`;
  console.log(str);
  

解构赋值

• 合并赋值，数组的解构需并一一对应

  var [a,b,c] = [11,22,33];
  console.log(a,b,c); // 11 22 33
  var [b,a,c] = [11,22,33];
  console.log(a,b,c); // 22 11 33
  

• 复杂解构

  let [foo,[[bar],[baz]]] = [111,[[222],[333]]];
  console.log(foo,bar,baz); // 111 222 333
  
  let [head,...foot] = [1,2,3,4];
  console.log(head,foot); // 1 [2,3,4]
  
  var [bar3,foo3] = [1000];
  console.log(bar3,foo3); // 1000 undefined
  
  let [x,y] = [10000,20000,30000];
  console.log(x,y); // 10000 20000
  

• 设置默认值

  let [a=1,b=a] = [2,3];
  console.log(a,b); // 2 3
  
  var {x,y=5} = {x:1};
  console.log(x,y); // 1 5
  

• 对象的解构，无序，变量必须与属性同名，才能取到正确的值

  var {a,b} = {a:'apple',b:'banana'};
  console.log(a,b); // apple banana
  var {b,a} = {a:'apple',b:'banana'};
  console.log(a,b); // apple banana
  

数组复制

• 传统数组的浅拷贝，引用之间的拷贝，没有实现数组的真正复制

  var arr1 = [1, 2, 3];
  var arr2 = arr1;
  arr2.push(4);
  console.log(arr1, arr2); //[1, 2, 3, 4] [1, 2, 3, 4]
  

• ES5数组深拷贝

  const a1 = [1, 2];
  const a2 = a1.concat();
  a2[0] = 2;
  a1 // [1, 2]
  

• ES6实现的数组的深拷贝方法

  var arr1 = [1,2,3];
  var arr2 = Array.from(arr1);
  // 数组尾部添加
  arr2.push(100);
  console.log(arr1,arr2); // [1, 2, 3] [1, 2, 3, 100]
  

• ES6中扩展运算符进行数组深拷贝

  const a1 = [1, 2];
  // 写法一
  const a2 = [...a1];
  // 写法二
  const [...a2] = a1;
  

箭头函数

• function(){ } 变成 ()=>{ }

• 不能用作构造函数，不能使用new

• 箭头函数的this永远指向其上下文的 this，任何方法都改变不了其指向，如call(), bind(), apply()

  var obj = {
      a: 10,
      b: function(){
         console.log(this.a); //输出10
      },
      c: function() {
         return ()=>{
         console.log(this.a); 
        //输出10，捕获了上面obj的this作为自己的this
        //c方法里面return的那个箭头函数捕获的是c:function(){}
        //这个环境的this，而这个环境的this是obj
     }
    }
  }
  obj.b(); 
  obj.c()();
  
  var obj = {
      a: 10,
      b: function() {
         console.log(this.a); //10
         console.log(this); //obj{...}
      },
      c: () => {
        console.log(this.a); //undefined
        console.log(this); //window
        //c箭头函数捕获的是obj{}这个对象的环境，然后这个环境的this指向的是window
    }
  }
  obj.b(); 
  obj.c();
  

模块化 export 和 import

• import 导入模块、export 导出模块

• 可以直接在任何变量或者函数前面加上一个 export 关键字，就可以将它导出

  // 书写方式一  
  //ex.js
  let a = 1;
  let b = 2;
  let c = 3;
  export {
    a,
    b,
    c as cc // as是别名，使用的时候只能用别名，特别注意下
  };
  
  //im.js
  // 导入模块的方式
  import {
    a,
    b,
    cc // cc是导出的，as别名
  } from './ex.js';
  console.log(a); // 1
  console.log(b); // 2
  console.log(cc); // 3
  
  
  //书写方式二
  // default方式的优点，import无需知道变量名，就可以直接使用
  // 每个模块只允许一个默认出口
  //mod.js
  var name = 'cat';
  var age = '8';
  export default {
    name,
    age,
    default(){
        console.log('welcome to china!');
    },
    getName(){
        return 'dog';
    },
    getAge(){
        return 2;
   }
  };
  
  //index.js
  // 导入模块的方式
  import mainAttr from './mod.js';
  // 直接调用
  console.log(`我的英文名是:${mainAttr.name}我的年龄是 ${mainAttr.age}`);
  mainAttr.default(); // welcome to china!
  console.log(mainAttr.getName()); // dog
  console.log(mainAttr.getAge()); // 2
  

类和继承（class和extends）

• 传统面向对象的写法

  function Person(name,age){ // 类、构造函数
      this.name = name;
      this.age = age;
  }
  Person.prototype.showName = function(){
      return this.name;
  };
  Person.prototype.showAge = function(){
     return this.age;
  };
  var p1 = new Person('cat',28);
  var p2 = new Person('dog',101);
  console.log(p1.showName()); // cat
  console.log(p2.showAge()); // 101
  

• ES6面向对象写法

  class Person{
    // 构造器
   constructor(name,age){
    this.name = name;
    this.age = age;
  }
   showName(){
    return this.name;
  }
  showAge(){
    return this.age;
  }
  }
  var p1 = new Person('A',18);
  var p2 = new Person('B',20);
  console.log(p1.name); // A
  console.log(p1.showName()); // A
  console.log(p2.showAge()); // 20
  

• ES6面向对象给class赋值默认值

  class Person{
    // 构造器
    constructor(name='default',age=0){
    this.name = name;
    this.age = age;
  }
  showName(){
    return this.name;
  }
  showAge(){
    return this.age;
  }
  }
  var person = new Person();
  console.log(person .name); // 构造器里面给的默认值 default
  console.log(person .age); // 构造器里面给的默认值 0
  

• ES6面向对象实现类继承

  class Person{
    // 构造器
    constructor(name,age){
      this.name = name;
      this.age = age;
    }
  showName(){
    return this.name;
  }
  showAge(){
    return this.age;
  }
  }
  class Worker extends Person{
  constructor(name,age,job='eat'){
    // 继承超父类的属性
    super(name,age);
    this.job = job;
  }
  showJob(){
    return this.job;
  }
  }
  var p1 = new Person('cat',1);
  var w1 = new Person('dog',3);
  var w2 = new Worker('小红',9);
  console.log(w1.showName()); // dog
  console.log(w2.showJob()); // 默认给的值 ‘eat’