對象的新增方法
1.object.is()
ES5 比較兩個值是否相等入宦,只有兩個運算符:相等運算符(==)和嚴格相等運算符(===)偿乖。它們都有缺點冶伞,前者會自動轉(zhuǎn)換數(shù)據(jù)類型,后者的NaN不等于自身筑凫,以及+0等于-0。JavaScript 缺乏一種運算并村,在所有環(huán)境中巍实,只要兩個值是一樣的,它們就應(yīng)該相等橘霎。
+0===-0//true
NaN===NaN// false
Object.is(+0,-0)// false
Object.is(NaN,NaN)// true
2.object.assign()
Object.assign()方法用于對象的合并蔫浆,將源對象(source)的所有可枚舉屬性,復(fù)制到目標對象(target)姐叁。
consttarget={a:1};
constsource1={b:2};
constsource2={c:3};
Object.assign(target,source1,source2);
target// {a:1, b:2, c:3}
Object.assign()拷貝的屬性是有限制的瓦盛,只拷貝源對象的自身屬性(不拷貝繼承屬性)洗显,也不拷貝不可枚舉的屬性(enumerable: false)。
Object.assign({b:'c'},
Object.defineProperty({},'invisible', {
enumerable:false,
value:'hello'
? })
)
// { b: 'c' }
注意點
(1)淺拷貝
Object.assign()方法實行的是淺拷貝原环,而不是深拷貝挠唆。也就是說,如果源對象某個屬性的值是對象嘱吗,那么目標對象拷貝得到的是這個對象的引用玄组。
constobj1={a: {b:1}};
constobj2=Object.assign({},obj1);
obj1.a.b=2;
obj2.a.b// 2
上面代碼中,源對象obj1的a屬性的值是一個對象谒麦,Object.assign()拷貝得到的是這個對象的引用俄讹。這個對象的任何變化,都會反映到目標對象上面绕德。
(2)同名屬性的替換
對于這種嵌套的對象患膛,一旦遇到同名屬性,Object.assign()的處理方法是替換耻蛇,而不是添加踪蹬。
consttarget={a: {b:'c',d:'e'} }
constsource={a: {b:'hello'} }
Object.assign(target,source)
// { a: { b: 'hello' } }
(3)數(shù)組的處理
Object.assign()可以用來處理數(shù)組,但是會把數(shù)組視為對象臣咖。
Object.assign([1,2,3], [4,5])
// [4, 5, 3]
(4)取值函數(shù)的處理
Object.assign()只能進行值的復(fù)制跃捣,如果要復(fù)制的值是一個取值函數(shù),那么將求值后再復(fù)制夺蛇。
constsource={
getfoo() {return1}
};
consttarget={};
Object.assign(target,source)
// { foo: 1 }
上面代碼中疚漆,source對象的foo屬性是一個取值函數(shù),Object.assign()不會復(fù)制這個取值函數(shù)蚊惯,只會拿到值以后愿卸,將這個值復(fù)制過去。
(1)為對象添加屬性
classPoint{
constructor(x,y) {
Object.assign(this, {x,y});
? }
}// this 指的是當(dāng)前的對象
上面方法通過Object.assign()方法截型,將x屬性和y屬性添加到Point類的對象實例趴荸。
(2)為對象添加方法
Object.assign(SomeClass.prototype, {
someMethod(arg1, arg2) {
···
},
anotherMethod() {
···
}? ? // 把當(dāng)前對象添加到SomeClass.prototype 里面
});
// 等同于下面的寫法
SomeClass.prototype.someMethod = function (arg1, arg2) {
···
};
SomeClass.prototype.anotherMethod = function () {
···
};
上面代碼使用了對象屬性的簡潔表示法,直接將兩個函數(shù)放在大括號中宦焦,再使用assign()方法添加到SomeClass.prototype之中发钝。
(3)克隆對象
function clone(origin) {
return Object.assign({}, origin);
}
上面代碼將原始對象拷貝到一個空對象,就得到了原始對象的克隆波闹。
不過酝豪,采用這種方法克隆,只能克隆原始對象自身的值精堕,不能克隆它繼承的值孵淘。如果想要保持繼承鏈,可以采用下面的代碼歹篓。
function clone(origin) {
let originProto = Object.getPrototypeOf(origin);
return Object.assign(Object.create(originProto), origin);
}
(4)合并多個對象
const merge =
(target, ...sources) => Object.assign(target, ...sources);
如果希望合并后返回一個新對象瘫证,可以改寫上面函數(shù)揉阎,對一個空對象合并
const merge =
(...sources) => Object.assign({}, ...sources);
(5)為屬性指定默認值
const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
};
function processContent(options) {
options = Object.assign({}, DEFAULTS, options);
console.log(options);
// ...
}
上面代碼中,DEFAULTS對象是默認值背捌,options對象是用戶提供的參數(shù)毙籽。Object.assign()方法將DEFAULTS和options合并成一個新對象,如果兩者有同名屬性毡庆,則options的屬性值會覆蓋DEFAULTS的屬性值坑赡。
注意,由于存在淺拷貝的問題么抗,DEFAULTS對象和options對象的所有屬性的值毅否,最好都是簡單類型,不要指向另一個對象乖坠。否則搀突,DEFAULTS對象的該屬性很可能不起作用。
3.object.getOwnPropertyDescriptOrs()
ES5 的Object.getOwnPropertyDescriptor()方法會返回某個對象屬性的描述對象(descriptor)熊泵。ES2017 引入了Object.getOwnPropertyDescriptors()方法,返回指定對象所有自身屬性(非繼承屬性)的描述對象甸昏。
const obj = {
foo: 123,
get bar() { return 'abc' }
};
Object.getOwnPropertyDescriptors(obj)
// { foo:
//? ? { value: 123,
//? ? ? writable: true,
//? ? ? enumerable: true,
//? ? ? configurable: true },
//? bar:
//? ? { get: [Function: get bar],
//? ? ? set: undefined,
//? ? ? enumerable: true,
//? ? ? configurable: true } }
4.? _ _ proto? _ _ 屬性 ,object.setPrototypeOf(),object.setPrototypeOf()
__proto__屬性(前后各兩個下劃線)顽分,用來讀取或設(shè)置當(dāng)前對象的原型對象
// es5 的寫法
const obj = {
method: function() { ... }
};
obj.__proto__ = someOtherObj;
// es6 的寫法
var obj = Object.create(someOtherObj);
obj.method = function() { ... };
該屬性沒有寫入 ES6 的正文,而是寫入了附錄施蜜,原因是__proto__前后的雙下劃線卒蘸,說明它本質(zhì)上是一個內(nèi)部屬性,而不是一個正式的對外的 API翻默,只是由于瀏覽器廣泛支持缸沃,才被加入了? ES6。標準明確規(guī)定修械,只有瀏覽器必須部署這個屬性趾牧,其他運行環(huán)境不一定需要部署,而且新的代碼最好認為這個屬性是不存在的肯污。因此翘单,無論從語義的角度,還是從兼容性的角度蹦渣,都不要使用這個屬性哄芜,而是使用下面的Object.setPrototypeOf()(寫操作)、Object.getPrototypeOf()(讀操作)柬唯、Object.create()(生成操作)代替认臊。
Object.setPrototypeOf()
Object.setPrototypeOf方法的作用與__proto__相同,用來設(shè)置一個對象的原型對象(prototype)锄奢,返回參數(shù)對象本身失晴。它是 ES6 正式推薦的設(shè)置原型對象的方法剧腻。
// 格式
Object.setPrototypeOf(object, prototype)
// 用法
const o = Object.setPrototypeOf({}, null);
Object.getPrototypeOf()
該方法與Object.setPrototypeOf方法配套,用于讀取一個對象的原型對象师坎。
Object.getPrototypeOf(obj);
function Rectangle() {
// ...
}
const rec = new Rectangle();
Object.getPrototypeOf(rec) === Rectangle.prototype
// true
Object.setPrototypeOf(rec, Object.prototype);
Object.getPrototypeOf(rec) === Rectangle.prototype
// false
如果參數(shù)不是對象恕酸,會被自動轉(zhuǎn)為對象
// 等同于 Object.getPrototypeOf(Number(1))
Object.getPrototypeOf(1)
// Number {[[PrimitiveValue]]: 0}
// 等同于 Object.getPrototypeOf(String('foo'))
Object.getPrototypeOf('foo')
// String {length: 0, [[PrimitiveValue]]: ""}
// 等同于 Object.getPrototypeOf(Boolean(true))
Object.getPrototypeOf(true)
// Boolean {[[PrimitiveValue]]: false}
Object.getPrototypeOf(1) === Number.prototype // true
Object.getPrototypeOf('foo') === String.prototype // true
Object.getPrototypeOf(true) === Boolean.prototype // true
5.object.keys(),object.values() object.entries()
Object.keys()
ES5 引入了Object.keys方法,返回一個數(shù)組胯陋,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵名蕊温。
varobj={foo:'bar',baz:42};
Object.keys(obj)
// ["foo", "baz"]
Object.values()
Object.values方法返回一個數(shù)組,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值遏乔。
constobj={foo:'bar',baz:42};
Object.values(obj)
// ["bar", 42]
Object.entries()
Object.entries()方法返回一個數(shù)組义矛,成員是參數(shù)對象自身的(不含繼承的)所有可遍歷(enumerable)屬性的鍵值對數(shù)組。
constobj={foo:'bar',baz:42};
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
6.object.fromEntries()
Object.fromEntries()方法是Object.entries()的逆操作盟萨,用于將一個鍵值對數(shù)組轉(zhuǎn)為對象凉翻。
Object.fromEntries([
['foo','bar'],
['baz',42]
])
// { foo: "bar", baz: 42 }
該方法的主要目的,是將鍵值對的數(shù)據(jù)結(jié)構(gòu)還原為對象捻激,因此特別適合將 Map 結(jié)構(gòu)轉(zhuǎn)為對象制轰。
// 例一
constentries=newMap([
['foo','bar'],
['baz',42]
]);
Object.fromEntries(entries)
// { foo: "bar", baz: 42 }
// 例二
constmap=newMap().set('foo',true).set('bar',false);
Object.fromEntries(map)
// { foo: true, bar: false }
該方法的一個用處是配合URLSearchParams對象,將查詢字符串轉(zhuǎn)為對象胞谭。
Object.fromEntries(newURLSearchParams('foo=bar&baz=qux'))
// { foo: "bar", baz: "qux" }