一小时学会ECMAScript6新特性

Posted 2020-10-01 Three stones

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一小时学会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()括号中放的是对比的两个值。

1 +0 === -0 //true  
2 NaN === NaN // false  
3 Object.is(+0, -0) // false  
4 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());