原生js物件合併物件拷貝Object.assign()方法的es5、es6實現
阿新 • • 發佈:2019-02-08
實現思路:支援es6的瀏覽器,可以直接用Object.assign()合併物件,只支援es5的瀏覽器,我們用pollyfill的方法。
作用
Object.assign() 方法用於把一個或多個源物件的可列舉屬性值複製到目標物件中,返回值為目標物件。
語法
Object.assign(target, ...sources)
引數
target: 目標物件
sources: 源物件
返回值
目標物件
描述
Object.assign 方法只複製源物件中可列舉的屬性和物件自身的屬性。它在源物件上使用 [[Get]], 在目標物件上使用 [[Set]], 會呼叫 getter 和 setter。它不適合用於把一個包含 getter 的物件屬性合併到一個原型中。如果要把屬性定義連同可列舉性複製到一個原型中,應該使用 Object.getOwnPropertyDescriptor() 和 Object.defineProperty() 方法。
String 和 Symbol 型別的屬性都會被複制。
當發生錯誤時,例如有一個屬性是不可寫的,將會丟擲一個 TypeError 錯誤,目標物件保持不變。
注意 Object.assign() 源物件為 null 或 undefined 時不會報錯。
jian示例
克隆物件
var obj = {a: 1};
var copy = Object.assign({}, obj);
console.log(copy); // {a: 1};
合併物件
var o1 = {a: 1}; var o2 = {b: 2}; var o3 = {c: 3}; var obj = Object.assign(o1, o2, o3); console.log(obj); //{a: 1, b: 2, c: 3} console.log(o1); //{a: 1, b: 2, c: 3}, 目標物件被改變了
ES5版本實現方法
/** * 物件合併polyfill * */ function zyEs6AssignPolyfill() { if (!Object.assign) { Object.defineProperty(Object, "assign", { enumerable: false, configurable: true, writable: true, value: function (target, firstSource) { "use strict"; if (target === undefined || target === null) throw new TypeError("Cannot convert first argument to object"); var to = Object(target); for (var i = 1; i < arguments.length; i++) { var nextSource = arguments[i]; if (nextSource === undefined || nextSource === null) continue; var keysArray = Object.keys(Object(nextSource)); for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) { var nextKey = keysArray[nextIndex]; var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey); if (desc !== undefined && desc.enumerable) to[nextKey] = nextSource[nextKey]; } } return to; } }); } }
參考文獻:http://www.cnblogs.com/heiye168/p/5689006.html