ECMAScript2015(ES6)概要

简介：ES6是Javascript的一个新标准，现在很多浏览器也已经实施这套标准。ECMAScript开始以年代命名，也就是ES6也被称为ECMA2015。

1.let块级作用域，并且可以给它一个初始化值。let 允许把变量的作用域限制在块级域中。与 var 不同处是：var 申明变量要么是全局的，要么是函数级的，而无法是块级的。

{
    let value1 = "apple"; 
}
alert(value1); // error

Uncaught ReferenceError: value1 is not defined(…)

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

const fruit = 'fruit';
//fruit = "apple"; // error
console.log(fruit);
const  colorArray = [];
colorArray.push('yellow');//right
console.log(colorArray);

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

function day() {
    return ['one', 'two', 'three'];
}
let [a, b, c] = day();
console.log(a, b, c); //one two three

4.对象的解构赋值

function day() {
    return {a:'a', b:'b', c:'c'};
}
let {a, b ,c} = day();
console.log(a, b, c); // a b c

5.模版字符串

let nice = '不错';
let sunny = '日丽';
let content = `今天天气${nice},挺风和${sunny}`;
console.log(content); // 今天天气不错,挺风和日丽

6.带标签的模版字符串

let nice = '不错';
let sunny = '日丽';
let content = tag`今天天气${nice},挺风和${sunny}`;

function tag(stings, ...values) {
    console.log(stings);  // ["今天天气", ",挺风和", "", raw: Array[3]]
    console.log(values);  // ["不错", "日丽"]

}

7.默认参数的设值，如果不传参则使用函数的默认值

function dog(eat='粗梁', run='慢跑') {
    console.log(eat, run);
}
dog(undefined, '快跑'); // 粗梁 快跑

8.Spread\Rest运行算(...)

let day = ['monday', 'sunday'];
let dd = ['a', ...day]; // 此处...的作用是将数组自动展开
console.log(...day); // monday sunday
console.log(...dd); // a monday sunday

// 此处为可变参数的作用，'value3'和'value4'将被以数组的形式放在param3
function dog(param1, param2, ...param3) {
    console.log(param1, param2, param3);
}
dog('value1', 'value2', 'value3', 'value4'); //value1 value2 ["value3", "value4"]

9.解构参数

function dog(run, {eat, drink} = {}) {
    console.log(run, eat, drink);
}
dog('跑', {eat:'吃', drink:'喝'});  // 跑 吃 喝

10.箭头函数=>, 表示符左则为参数，右则为返回值，如果右则有大括号，则为函数体

let dog = eat => {
    console.log(eat);
}
dog('吃'); // 吃

11.对象表达式

let drink = '喝';
let eat = '吃';
let obj = {
    drink,
    eat,
    run() {
        console.log('运动');
    }
}
console.log(obj.drink + obj.eat);
obj.run();

12.判断两个值是否相等‘==’，‘===’，Object.is

console.log(Object.is(+0, -0));  // true

13.对象复值Object.assign

let cat = {
    eat : '吃',
    name : '猫'
}
let dog = {
    name : '狗'
}
console.log(Object.assign({},cat, dog)); //Object {eat: "吃", name: "狗"}

14.设置和获取对象的ProtoTypeOf

let cat = {
    eat : '吃',
    name : '猫'
}
let dog = {
    name : '狗'
}

let c1 = Object.create(cat);
let d1 = Object.create(dog);
console.log(Object.getPrototypeOf(c1) === Object.getPrototypeOf(d1));  // false
Object.setPrototypeOf(c1, dog);
console.log(Object.getPrototypeOf(c1) === Object.getPrototypeOf(d1));  // true

15.__proto__设置对象类型

let cat = {
    eat : '吃',
    name : '猫'
}
let c1 = {
    __proto__ : cat
}
c1.__proto__ = cat;

console.log(c1.eat);  // 吃

16.super方法

let cat = {
    eat() {
        return '苹果';
    }
}
let c1 = {
    __proto__ : cat,
    eat() {
        return super.eat() + '桃';
    }

}
console.log(c1.eat()); // 苹果桃

17.生成器 ,调用next()依次返回生成器里的值，当完全返回之后，done为true

function* foods() {
    yield '桃';
    yield '苹果';
}
let obj = foods();
console.log(obj.next()); // Object {value: "桃", done: false}
console.log(obj.next()); // Object {value: "苹果", done: false}
console.log(obj.next()); // Object {value: undefined, done: true}

18.class get set static this

class Person {
    // 构造
    constructor() {
        // 初始状态
        this.state = {
            eat : '吃'
        };
    }
    setEat(eat) {
        this.state.eat = eat;
    }
    getEat() {
        return this.state.eat;
    }
    static drink() {
        console.log('喝水');
    }
}

let yeputi = new Person();
console.log(yeputi.getEat());  //吃
yeputi.setEat('喝牛奶');
console.log(yeputi.getEat());  //喝牛奶
Person.drink();  // 喝水

19.extends 继承

class Person {
    getFoods() {
        return '牛肉';
    }
}
class Yeputi extends Person {
    getFoods() {
        return super.getFoods();
    }
}

let yeputi = new Yeputi();
console.log(yeputi.getFoods()); //牛肉

class Person {
    getFoods() {
        return '牛肉';
    }
}
class Yeputi extends Person {
    getFoods() {
        return super.getFoods();
    }
}

let yeputi = new Yeputi();
console.log(yeputi.getFoods()); //牛肉

20.Map

let yeputi = new Map();
yeputi.set('one', '苹果');  // 添加
yeputi.set('two', '梨');
console.log(yeputi.size);
console.log(yeputi.has('one'));  // 检查map里的值
yeputi.forEach((key, value) => {  // 遍历map里的值
    console.log('key : ' + key + ', value : ' + value);
})
yeputi.delete('two');
yeputi.clear();  // 清空map里的值