一小时学会ECMAScript6新特性（二）

1、对象属性名

　　es5中我们为一个对象添加属性可以用如下代码：

let foods = {};

foods.dessert = '蛋糕';

console.log(foods)

　　但是属性名中间有空格则不能用点的形式添加，es6中的属性名可以有空格：

let foods = {};

foods.dessert = '蛋糕';
foods['hot drink'] = '可乐'

console.log(foods)

　　方括号中还可以用变量的形式引入：

let foods = {},
    drink  = 'hot drink';

foods.dessert = '蛋糕';
foods[drink] = '可乐'

console.log(foods)

2、对比两个值是否相等

　　方括号中还可以用变量的形式引入：ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。 JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。

　　ES6 提出 “Same-value equality” （同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（ === ）的行为基本一致，Object.is()括号中放的是对比的两个值。

+0 === -0 //true  
NaN === NaN // false  
Object.is(+0, -0) // false  
Object.is(NaN, NaN) // true  

　　

3、把一个对象的值复制到另一个对象里 Object.assign()

　　Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

　　Object.assign(target, ...sources)

　　参数

　　target

　　目标对象。

　　sources

　　(多个)源对象。

　　返回值

　　目标对象。

　　如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

let breakfast = {drink: '咖啡'},
    foods = {drink: '蛋糕'};

Object.assign(
    breakfast,
    foods
)

console.log(breakfast)

4、创建新对象 Object.create()

　　Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象。

　　Object.create(proto, [ propertiesObject ])

　　参数

　　proto

　　一个对象，应该是新创建的对象的原型。

　　propertiesObject

　　可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符（这些属性描述符的结构与Object.defineProperties()的第二个参数一样）。注意：该参数对象不能是 undefined，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。

　　抛出异常

　　　　    如果 propertiesObject 参数不是 null 也不是对象，则抛出一个 TypeError 异常。

let breakfast = {
    getDrink() {
        return '咖啡';
    }
};

let dinner = {
    getDrink() {
        return '牛奶';
    }
};

let sunday = Object.create(breakfast);
console.log(sunday.getDrink())

5、设置对象的prototype Object.setPrototypeOf()  （现在这个方法只是草案 推荐用__proto__）

　　Object.setPrototypeOf() 方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或  null。

　　Object.setPrototypeOf(obj, prototype)
　　

　　参数

　　obj

　　要设置其原型的对象。.

　　prototype

　　该对象的新原型(一个对象 或 null).

let breakfast = {
    getDrink() {
        return '咖啡';
    }
};

let dinner = {
    getDrink() {
        return '牛奶';
    }
};

let sunday = Object.create(breakfast);
console.log(sunday.getDrink());
console.log(Object.getPrototypeOf(sunday) === breakfast); // 判断原型是否相同

Object.setPrototypeOf(sunday, dinner);
console.log(sunday.getDrink())

6、__proto__ （前后各两个下划线）

let breakfast = {
    getDrink() {
        return '咖啡';
    }
};

let dinner = {
    getDrink() {
        return '牛奶';
    }
};

let sunday = {
    __proto__: breakfast
}

console.log(sunday.getDrink());
console.log(Object.getPrototypeOf(sunday) === breakfast);

sunday.__proto__ = dinner;
console.log(sunday.getDrink());
console.log(Object.getPrototypeOf(sunday) === dinner);

7、super （得到方法返回的内容）

　　super 关键字用于调用一个对象的父对象上的函数。

　　 super.prop 和 super[expr] 表达式在类 和 对象字面量 任何 方法定义 中都是有效的。

let breakfast = {
    getDrink() {
        return '咖啡';
    }
};

let dinner = {
    getDrink() {
        return '牛奶';
    }
};

let sunday = {
    __proto__: breakfast,
    getDrink() {
        return '返回了 ' + super.getDrink();
    }
}

console.log(sunday.getDrink())

8、迭代器 Iterators （轮流交换）

　　Iterator 函数返回一个对象，它实现了遗留的迭代协议，并且迭代了一个对象的可枚举属性。

　　Iterator(object, [keyOnly]) 每次执行返回一个对象 {value: xx, done: true/false} //value 返回的值； done 还有没有可以迭代的东西，没有返回true。

　　参数

　　object

　　要迭代属性的对象。

　　keyOnly

 　　如果keyOnly是真值，Iterator.prototype.next 只返回property_name 。

　模拟迭代器

function chef(foods) {
    let i = 0;

    return {
        next() {
            let done = (i >=foods.length);
            let value = !done ? foods[i++] : undefined;

            return {
                value: value,
                done: done
            }
        }
    }
}

let yang =chef(['西红柿', '鸡蛋']);
console.log(yang.next());
console.log(yang.next());
console.log(yang.next());

9、迭代生成器 Generators 　　

function* chef(){
    yield '西红柿';
    yield '鸡蛋';
}

let yang = chef();

console.log(yang.next());

　　还可以以数组的形式传入

function* chef(foods){
    for (let i = 0; i<foods.length; i++){
        yield foods[i];
    }
}

let yang = chef(['西红柿', '鸡蛋']);

console.log(yang.next());

10、Classes 类

 　　ECMAScript 2015 中引入的 JavaScript 类主要是 JavaScript 现有的基于原型的继承的语法糖。 类语法不是向JavaScript引入一个新的面向对象的继承模型。JavaScript类提供了一个更简单和更清晰的语法来创建对象并处理继承。

　　 类实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。

类声明

定义一个类的一种方法是使用一个类声明。要声明一个类，你可以使用带有class关键字的类名（这里是“Rectangle”）。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

提升

函数声明和类声明之间的一个重要区别是函数声明会声明提升，类声明不会。你首先需要声明你的类，然后访问它，否则像下面的代码会抛出一个ReferenceError：

let p = new Rectangle(); 

// ReferenceError

class Rectangle {}

　　声明实例使用类

class Chef {
    constructor(food) {
        this.food = food;
    }

    cook() {
        console.log(this.food)
    }
}

let yang = new Chef('番茄');
yang.cook();

11、类中的 get （得到东西的方法）与 set（设置东西的方法）

class Chef {
    constructor(food) {
        this.food = food;
        this.dish = [];
    }

    get menu() {
        return this.dish;
    }

    set menu(dish) {
        this.dish.push(dish);
    }

    cook() {
        console.log(this.food)
    }
}

let yang = new Chef();
console.log(yang.menu = '番茄');
console.log(yang.menu = '鸡蛋');
console.log(yang.menu)

12、静态方法 static

class Chef {
    constructor(food) {
        this.food = food;
        this.dish = [];
    }

    get menu() {
        return this.dish;
    }

    set menu(dish) {
        this.dish.push(dish);
    }

    static cook(food) {
        console.log(food)
    }
}

Chef.cook('番茄')

12、继承 extends

class Person {
    constructor(name, birthday) {
        this.name = name;
        this.birthday = birthday;
    }

    intro() {
        return `${this.name}, ${this.birthday}`;
    }
}

class Chef extends Person{
    constructor(name, birthday) {
        super(name, birthday);
    }
}

let yang = new Chef('yang', '01-30');
console.log(yang.intro())

13、set

　　Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。（和数组类似，但是set中不能有重复的内容，即 Set 中的元素是唯一的。）

let dessert = new Set('123');
dessert.add('4'); //添加一个内容
dessert.delete('1'); //删除一个
let len = dessert.size; //Set 的length
let blen = dessert.has('1'); //Set 中有没有某个值
dessert.clear(); //清空Set;

console.log(dessert);

/*循环获取Set中的内容*/
dessert.forEach(dessert => {
    console.log(dessert);
})

14、Map

　　Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

let food = new Map();
let fruit = {}, cook = function() {}, dessert = '甜点';

food.set(fruit, '香蕉'); //添加项目
food.set(cook, '下面');
food.set(dessert, '蛋糕');
let len = food.size; //Map 的length
let getFruit = food.get(fruit); //得到其中一个项目
food.delete(fruit); //删除某个项目
let boole = food.has(fruit) //查看有没有某个项目

console.log(boole);

food.forEach((value, key) => {
    console.log(`${key} = ${value}`)
})

food.clear(); //清空Map

15、Module 模块

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

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

　　引用

import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));

16、默认导出

export default function () { ... };

export { D as default };