es6新增内容简单概览-CSDN博客

箭头函数 arrow function

es6新增内容，用箭头语法简写函数,且this会自动绑定当前上下文：

[1, 2, 3, 4].map(d => d * d);//单行
    //也可以写多行
[1, 2, 3, 4].map(d => {
        console.log(this)
        return d * d
    })

等价于

 [1, 2, 3, 4].map(function (d) {
        return d * d
    })

class关键字

现在原生支持 class 关键字来声明一个类了，虽然只是一个语法糖，最终还是基于原型继承实现的。但是毕竟可以很方便的实现创建和继承一个类了。

class People{
        constructor(name){
            this.name=name;
        }
        sayName(){
            console.log(this.name)
        }
    }
    var pp = new People('张三');
    pp.sayName();

等价于

function People(name) {
        this.name = name
    };
    People.prototype.sayName = function () {
        console.log(this.name);
    };
    var pp = new People('张三');
    pp.sayName();

变量的解构

es6允许多对变量直接赋值，写法上属于“模式匹配”，即等号两边模式相同，右边的值就会根据位置赋予左边变量对应的值。

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

    let [, , c] = [1, 2, 3]
    //c=3;

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

    let [a, b, c, ...d] = [1]
    //a=1;
    //b=undefined;
    //c=undefined;
    //d=[];

函数声明的延伸属性

es6在构建一个函数时候，参数可以不需要指定个数，用延伸属性代替具体位数

function aa(x,...y) {
        console.log(y)//2,3,4
    }
    aa(1,2,3,4)

函数默认变量

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

let和const命令

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

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

a // ReferenceError: a is not defined.
b // 1

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

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

iterator遍历器和for..of循环

iterator是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。
Iterator 的遍历过程是这样的。

（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

var it = makeIterator(['a', 'b']);

it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }

function makeIterator(array) {
  var nextIndex = 0;
  return {
    next: function() {
      return nextIndex < array.length ?{value: array[nextIndex++], done: false} : {value: undefined, done: true};
    }
  };
}

一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，就可以用for…of循环遍历它的成员。也就是说，for…of循环内部调用的是数据结构的Symbol.iterator方法，for…of 是对值的遍历。

var arr = ['a', 'b', 'c', 'd'];

for (let a in arr) {
  console.log(a); // 0 1 2 3键名的遍历
}

for (let a of arr) {
  console.log(a); // a b c d值的遍历
}