es6新增内容简单概览

箭头函数 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值的遍历
}

你可能感兴趣的:(es6)