ECMAScript6 新特性——“對象的擴展”

Clect 發布于2019-08-19 18:05 / 751人閱讀

摘要：屬性的簡潔表示法允許直接寫入變量和函數作為對象的屬性和方法。，中有返回一個數組，成員是參數對象自身的不含繼承的所有可遍歷屬性的鍵名。對象的擴展運算符目前，有一個提案，將解構賦值擴展運算符引入對象。

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

云服務器 GPU云服務器對象的擴展新特性新特性整理新特性總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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