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

Clect 发布于2019-08-19 18:05 / 644人阅读

摘要：属性的简洁表示法允许直接写入变量和函数作为对象的属性和方法。，中有返回一个数组，成员是参数对象自身的不含继承的所有可遍历属性的键名。对象的扩展运算符目前，有一个提案，将解构赋值扩展运算符引入对象。

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

idc机房托管专线服务对象的扩展新特性新特性整理新特性总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79184.html

ECMAScript6 新特性——“数值的扩展”

摘要：二进制和八进制表示法提供了二进制和八进制数值的新的写法，分别用前缀或和或表示。用来检查是否为有穷以及是否为这两个新方法只对数值有效，非数值一律返回。引入了和这两个常量，用来表示这个范围的上下限。因为有精度限制，超过的次方的值无法精确表示。 1 二进制和八进制表示法 ES6提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。 console.log(0b10...

Dean 2019-08-19 18:02 评论0 收藏0
ECMAScript6 新特性——“let和const命令”

摘要：基本用法所声明的变量，只在命令所在的代码块内有效。在循环中适合使用不存在变量提升不像那样会发生变量提升现象暂时性死区只要块级作用域内存在命令，它所声明的变量就绑定这个区域，不再受外部的影响。块级作用域实际上为新增了块级作用域。 1 let 基本用法所声明的变量，只在let命令所在的代码块内有效。 { let b = 100; console.log(b); //100...

PascalXie 2019-08-19 17:59 评论0 收藏0
ECMAScript6 新特性——“正则的扩展”

摘要：第二个参数指定修饰符，如果存在则使用指定的修饰符。属性表示是否设置了修饰符属性的属性返回正则表达式的正文的属性返回正则表达式的修饰符字符串必须转义，才能作为正则模式。 1 RegExp构造函数 ES6 允许RegExp构造函数接受正则表达式作为参数。第二个参数指定修饰符，如果存在则使用指定的修饰符。 var regexp = new RegExp(/xyz/i, ig); consol...

Shisui 2019-08-19 18:00 评论0 收藏0
ECMAScript6 新特性——“变量的解构赋值”

摘要：数组的解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。如果变量名与属性名不一致，必须写成下面这样。 1 数组的解构赋值 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。基本用法 { var [a,[b,c],d,,...f] = [1,[2,3],4,5,6,7]; console...

Eric 2019-08-19 17:59 评论0 收藏0
ECMAScript6 新特性——“字符串的扩展”

摘要：吉字符串的遍历器接口为字符串添加了遍历器接口，使得字符串可以被循环遍历。提供字符串实例的方法，用来将字符的不同表示方法统一为同样的形式，这称为正规化。返回布尔值，表示参数字符串是否在源字符串的头部。 1 字符串的Unicode表示法 ES6 只要将码点放入大括号，就能正确解读该字符； var x = u20bb7; document.write(x); //₻7 var x = u{2...

BlackMass 2019-08-19 17:59 评论0 收藏0