ECMAScript6 新特征——“对象的扩大”

1 属性的简约示意法

ES6许可直接写入变量和函数作为对象的属性和要领。

写入属性

var name = "value";
var obj = {
    name
};
console.log(obj.name); //value

写入要领

var func = function(){return "function"};
var obj = {
    func
};
console.log(obj.func()); //function

举个例子:

let name = "Oliver";
let sayName = function() {
    console.log(this.name);
};
let person = {
    name,
    sayName
};
console.log(person.name); //Oliver
person.sayName(); //Oliver

传统的写法:

let person = {
    name: "Oliver",
    sayName: function() {
        console.log(this.name);
    }
};
console.log(person.name); //Oliver
person.sayName(); //Oliver

不必必须填写属性的值

function log(x, y) {
    return {x, y};
}
console.log(log(1, 2)); //Object {x: 1, y: 2}

传统的写法:

function log(x, y) {
    return {x: x, y: y};
}
console.log(log(1, 2)); //Object {x: 1, y: 2}

须要注重的是这类写法中的属性名老是字符串。

2 属性名表达式

JavaScript言语定义对象的属性,有两种要领:

var o = {};
function f() {return "boo" + "lean";}
o.bool = true; //要领一
o[f()] = false; //要领二
console.log(o); //Object {bool: true, boolean: false}

然则在字面亮体式格局定义对象的时刻只能运用要领一:

var o = {
    bool: true
};
console.log(o); //Object {bool: true}

ES6支撑运用要领二:

function f() {
    return "bool" + "ean";
}
var o = {
    bool: true,
    [f()]: false
};
console.log(o); //Object {bool: true, boolean: false}

3 要领的name属性

函数的name属性返回函数名,对象要领也是函数,因而也有name属性。

4 Object.is()

该要领与(===)基础一致,差别的是+0不即是-0,NaN即是本身:

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

5 Object.assign()

用来将源对象(source)的一切可罗列属性复制到目的对象(target),第一个参数为目的对象,以后的参数都是源对象

var o1 = {
    a: 1
};
var o2 = {
    b: 2,
    c: 3
};
Object.assign(o1, o2);
console.log(o1); //Object {a: 1, b: 2, c: 3}

同名属性,背面的会掩盖前面的:

var o1 = {
    a: 1
};
var o2 = {
    a: 2,
    b: 3
};
Object.assign(o1, o2);
console.log(o1); //Object {a: 2, b: 3}

嵌套对象,处置惩罚要领是替代,而不是增加:

var o1 = {
    a: {
        b: 1,
        c: 2
    },
    d: 1
};
var o2 = {
    a: {
        b: "str"
    },
    d: 4
};
Object.assign(o1, o2);
console.log(o1);
//Object {a: Object, d: 4}
    //a:Object
        //b:"str"
    //__proto__:Object
    //d:4
//__proto__:Object

数组,处置惩罚要领是视为对象:

var a = [1, 2, 3, 4, 5];
var b = [2, 0];
Object.assign(a, b);
console.log(a); //[2, 0, 3, 4, 5]

6 属性的遍历

ES6一共有6种要领能够遍历对象的属性。

  • for...in: for…in轮回遍历对象本身的和继续的可罗列属性(不含Symbol属性)。

  • Object.keys(obj): Object.keys返回一个数组,包括对象本身的(不含继续的)一切可罗列属性(不含Symbol属性)。

  • Object.getOwnPropertyNames(obj): Object.getOwnPropertyNames返回一个数组,包括对象本身的一切属性(不含Symbol属性,然则包括不可罗列属性)。

  • Object.getOwnPropertySymbols(obj): Object.getOwnPropertySymbols返回一个数组,包括对象本身的一切Symbol属性。

  • Reflect.ownKeys(obj): Reflect.ownKeys返回一个数组,包括对象本身的一切属性,不论是属性名是Symbol或字符串,也不论是不是可罗列。

  • Reflect.enumerate(obj): Reflect.enumerate返回一个Iterator对象,遍历对象本身的和继续的一切可罗列属性(不含Symbol属性),与for…in轮回雷同。

以上的6种要领遍历对象的属性,都恪守一样的属性遍历的序次划定规矩。

  • 起首遍历一切属性名为数值的属性,根据数字排序。

  • 其次遍历一切属性名为字符串的属性,根据天生时候排序。

  • 末了遍历一切属性名为Symbol值的属性,根据天生时候排序。

7 Object.getPrototypeOf()和Object.setPrototypeOf()

只管防止运用__proto__猎取prototype。

而是运用下面的Object.setPrototypeOf()(写操纵)Object.getPrototypeOf()(读操纵)Object.create()(天生操纵)替代。

var o = {
    name: "Oliver",
    age: 18
};
var proto = {};
Object.setPrototypeOf(o, proto);

proto.getName = function() {
    return this.name;
};

console.log(o.getName()); //Oliver
console.log(Object.getPrototypeOf(o));
//Object {} getName : () __proto__ : Object

8 ES7:Object.values(),Object.entries()

ES5中有Object.keys返回一个数组,成员是参数对象本身的(不含继续的)一切可遍历(enumerable)属性的键名。

var o = {
    name: "Oliver",
    age: 18
};
console.log(Object.keys(o)); //["name", "age"]

ES7提案或将到场Object.values(),Object.entries()两个要领

相似数组的上述几种要领。

9 ES7:对象的扩大运算符

现在,ES7有一个提案,将Rest解构赋值/扩大运算符(…)引入对象。

10 ES7:Object.getOwnPropertyDescriptors()

ES5中有Object.getOwnPropertyDescriptor();

    原文作者:JS菌
    原文地址: https://segmentfault.com/a/1190000004910914
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞