脚本宝典收集整理的这篇文章主要介绍了

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();

总结

以上是脚本宝典为你收集整理的

ECMAScript6 新特性——“对象的扩展”

全部内容,希望文章能够帮你解决

ECMAScript6 新特性——“对象的扩展”

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过