es6 javascript物件的擴充套件運算子

2021-07-25 02:30:46 字數 2806 閱讀 1709

目前， es7 有乙個提案，將 rest 解構賦值 / 擴充套件運算子（ ... ）引入物件。 babel 轉碼器已經支援這項功能。

（ 1 ） rest 解構賦值

物件的 rest 解構賦值用於從乙個物件取值，相當於將所有可遍歷的、但尚未被讀取的屬性，分配到指定的物件上面。所有的鍵和它們的值，都會拷貝到新物件上面。

let  = ;


x // 1


y // 2


z //
上面**中，變數z是 rest 解構賦值所在的物件。它獲取等號右邊的所有尚未讀取的鍵（a和b），將它們和它們的值拷貝過來。

由於 rest 解構賦值要求等號右邊是乙個物件，所以如果等號右邊是undefined或null，就會報錯，因為它們無法轉為物件。

let  = null; //  執行時錯誤


let = undefined; // 執行時錯誤


//rest 解構賦值必須是最後乙個引數，否則會報錯。


let = obj; // 句法錯誤


let = obj; // 句法錯誤
上面**中， rest 解構賦值不是最後乙個引數，所以會報錯。

注意， rest 解構賦值的拷貝是淺拷貝，即如果乙個鍵的值是復合型別的值（陣列、物件、函式）、那麼 rest 解構賦值拷貝的是這個值的引用，而不是這個值的副本。

let obj =  };


let = obj;


obj.a.b = 2;


x.a.b // 2
上面**中，x是 rest 解構賦值所在的物件，拷貝了物件obj的a屬性。a屬性引用了乙個物件，修改這個物件的值，會影響到 rest 解構賦值對它的引用。

另外， rest 解構賦值不會拷貝繼承自原型物件的屬性。

let o1 = ;


let o2 = ;


o2.__proto__ = o1;


let o3 = ;


o3 //
上面**中，物件o3是o2的拷貝，但是只複製了o2自身的屬性，沒有複製它的原型物件o1的屬性。

下面是另乙個例子。

var o = object.create();


o.z = 3;


let } = o;


x // 1


y // undefined


z // 3
上面**中，變數x是單純的解構賦值，所以可以讀取繼承的屬性； rest 解構賦值產生的變數y和z，只能讀取物件自身的屬性，所以只有變數z可以賦值成功。

rest 解構賦值的乙個用處，是擴充套件某個函式的引數，引入其他操作。

function basefunction() 


// 使用 x 和 y 引數進行操作


// 其餘引數傳給原始函式


return basefunction(restconfig);


}


（ 2 ）擴充套件運算子


擴充套件運算子（...）用於取出引數物件的所有可遍歷屬性，拷貝到當前物件之中。


let z = ;


let n = ;


n //
這等同於使用object.assign方法。

let aclone = ;


// 等同於


let aclone = object.assign({}, a);
擴充套件運算子可以用於合併兩個物件。

let ab = ;


// 等同於


let ab = object.assign({}, a, b);
如果使用者自定義的屬性，放在擴充套件運算子後面，則擴充套件運算子內部的同名屬性會被覆蓋掉。

let awithoverrides = ;


// 等同於


let awithoverrides = };


// 等同於


let x = 1, y = 2, awithoverrides = ;


// 等同於


let awithoverrides = object.assign({}, a, );
上面**中，a物件的x屬性和y屬性，拷貝到新物件後會被覆蓋掉。

這用來修改現有物件部分的部分屬性就很方便了。

let newversion = ;
上面**中，newversion物件自定義了name屬性，其他屬性全部複製自previousversion物件。

如果把自定義屬性放在擴充套件運算子前面，就變成了設定新物件的預設屬性值。

let awithdefaults = ;


// 等同於


let awithdefaults = object.assign({}, , a);


// 等同於


let awithdefaults = object.assign(, a);
擴充套件運算子的引數物件之中，如果有取值函式get，這個函式是會執行的。

//  並不會丟擲錯誤，因為 x 屬性只是被定義，但沒執行


let awithxgetter = 


};// 會丟擲錯誤，因為 x 屬性被執行了


let runtimeerror = 


}};
如果擴充套件運算子的引數是null或undefined，這個兩個值會被忽略，不會報錯。

let emptyobject = ; //  不報錯

es6 javascript物件屬性的簡潔表示法

es6 允許直接寫入變數和函式，作為物件的屬性和方法。這樣的書寫更加簡潔。var foo bar var baz baz 等同於 var baz 上面 表明，es6 允許在物件之中，只寫屬性名，不寫屬性值。這時，屬性值等於屬性名所代表的變數。下面是另乙個例子。function f x,y 等同於 f...

es6 javascript屬性的可列舉性

物件的每個屬性都有乙個描述物件 descriptor 用來控制該屬性的行為。object.getownpropertydescriptor方法可以獲取該屬性的描述物件。let obj object.getownpropertydescriptor obj,foo 描述物件的enumerable屬性，...

ES6 JavaScript 的深複製和淺複製

react中，我們會遇到乙個有趣的問題，那就是物件的複製，為什麼說有趣，是因為直覺和結果差距很大。我們看一下這個例子 let a let b a a.title 淺複製 那麼我們會獲得兩個物件，乙個a，乙個b，a的title是淺複製，b的title是深複製。但結果真是這樣嗎？我們console.lo...