Object.assign() 通過(guò)復(fù)制一個(gè)或多個(gè)對(duì)象來(lái)創(chuàng)建一個(gè)新的對(duì)象。
1.Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
Object.create() 使用指定的原型對(duì)象和屬性創(chuàng)建一個(gè)新對(duì)象。
2削咆、Object.create()方法創(chuàng)建一個(gè)新對(duì)象翰蠢,使用現(xiàn)有的對(duì)象來(lái)提供新創(chuàng)建的對(duì)象的proto橡卤。
const person = {
isHuman: false,
printIntroduction: function () {
console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
}
};
const me = Object.create(person);
me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten
me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"
Object.defineProperty() 給對(duì)象添加一個(gè)屬性并指定該屬性的配置最盅。
3.Object.defineProperties() 方法直接在一個(gè)對(duì)象上定義新的屬性或修改現(xiàn)有屬性驻右,并返回該對(duì)象什黑。
語(yǔ)法 Object.defineProperties(obj, props) obj在其上定義或修改屬性的對(duì)象。props要定義其可枚舉屬性或修改的屬性描述符的對(duì)象堪夭。對(duì)象中存在的屬性描述符主要有兩種:數(shù)據(jù)描述符和訪問(wèn)器描述符(更多詳情愕把,請(qǐng)參閱Object.defineProperty())。
描述符具有以下鍵:configurabletrue 當(dāng)且僅當(dāng)該屬性描述符的類型可以被改變并且該屬性可以從對(duì)應(yīng)對(duì)象中刪除森爽。 默認(rèn)為 falseenumerabletrue 當(dāng)且僅當(dāng)在枚舉相應(yīng)對(duì)象上的屬性時(shí)該屬性顯現(xiàn)恨豁。 默認(rèn)為 falsevalue與屬性關(guān)聯(lián)的值∨莱伲可以是任何有效的JavaScript值(數(shù)字橘蜜,對(duì)象,函數(shù)等)雕旨。
默認(rèn)為 undefined.writabletrue當(dāng)且僅當(dāng)與該屬性相關(guān)聯(lián)的值可以用assignment operator改變時(shí)扮匠。 默認(rèn)為 falseget作為該屬性的 getter 函數(shù),如果沒有 getter 則為undefined凡涩。函數(shù)返回值將被用作屬性的值棒搜。 默認(rèn)為 undefinedset作為屬性的 setter 函數(shù),如果沒有 setter 則為undefined活箕。函數(shù)將僅接受參數(shù)賦值給該屬性的新值力麸。 默認(rèn)為 undefined返回值節(jié) 傳遞給函數(shù)的對(duì)象。
var obj = {};
Object.defineProperties(obj, {
'property1': {
value: true,
writable: true
},
'property2': {
value: 'Hello',
writable: false
}
// etc. etc.
});
Object.defineProperties() 給對(duì)象添加多個(gè)屬性并分別指定它們的配置。
Object.defineProperty() 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性克蚂,或者修改一個(gè)對(duì)象的現(xiàn)有屬性闺鲸, 并返回這個(gè)對(duì)象。
語(yǔ)法 Object.defineProperty(obj, prop, descriptor) obj要在其上定義屬性的對(duì)象埃叭。prop要定義或修改的屬性的名稱摸恍。descriptor將被定義或修改的屬性描述符。返回值節(jié) 被傳遞給函數(shù)的對(duì)象赤屋。在ES6中立镶,由于 Symbol類型的特殊性,用Symbol類型的值來(lái)做對(duì)象的key與常規(guī)的定義或修改不同类早,而Object.defineProperty 是定義key為Symbol的屬性的方法之一媚媒。
Object.entries() 返回給定對(duì)象自身可枚舉屬性的[key, value]數(shù)組。
4涩僻、Object.entries()方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組缭召,其排列與使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致(區(qū)別在于 for-in 循環(huán)也枚舉原型鏈中的屬性)
const object1 = { foo: 'bar', baz: 42 };
console.log(Object.entries(object1)[1]);
// expected output: Array ["baz", 42]
const object2 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(object2)[2]);
// expected output: Array ["2", "c"]
const result = Object.entries(object2).sort((a, b) => a - b);
console.log(Object.entries(result)[1]);
// expected output: Array ["1", Array ["1", "b"]]
Object.freeze() 凍結(jié)對(duì)象:其他代碼不能刪除或更改任何屬性。
Object.freeze() 方法可以凍結(jié)一個(gè)對(duì)象逆日。一個(gè)被凍結(jié)的對(duì)象再也不能被修改嵌巷;凍結(jié)了一個(gè)對(duì)象則不能向這個(gè)對(duì)象添加新的屬性,不能刪除已有屬性室抽,不能修改該對(duì)象已有屬性的可枚舉性晴竞、可配置性、可寫性狠半,以及不能修改已有屬性的值噩死。此外,凍結(jié)一個(gè)對(duì)象后該對(duì)象的原型也不能被修改神年。freeze() 返回和傳入的參數(shù)相同的對(duì)象已维。
const object1 = {
property1: 42
};
const object2 = Object.freeze(object1);
object2.property1 = 33;
// Throws an error in strict mode
console.log(object2.property1);
// expected output: 42
Object.is() 比較兩個(gè)值是否相同。所有 NaN 值都相等(這與==和===不同)已日。
Object.is('foo', 'foo'); // true
Object.is(window, window); // true
Object.is('foo', 'bar'); // false
Object.is([], []); // false
var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false
Object.is(null, null); // true
// 特例
Object.is(0, -0); // false
Object.is(-0, -0); // true
Object.is(NaN, 0/0); // true
Object.isExtensible() 判斷對(duì)象是否可擴(kuò)展垛耳。
Object.fromEntries() 把鍵值對(duì)列表轉(zhuǎn)換為一個(gè)對(duì)象。
Map 轉(zhuǎn)化為 Object
通過(guò) Object.fromEntries飘千, 可以將 Map 轉(zhuǎn)化為 Object:
const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }
Array 轉(zhuǎn)化為 Object
通過(guò) Object.fromEntries堂鲜, 可以將 Array 轉(zhuǎn)化為 Object:
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }
對(duì)象轉(zhuǎn)換為Object
Object.fromEntries 是 Object.entries() 的反轉(zhuǎn)函數(shù), 借用 array manipulation methods 可以轉(zhuǎn)換對(duì)象护奈,如下:
const object1 = { a: 1, b: 2, c: 3 };
const object2 = Object.fromEntries(
Object.entries(object1)
.map(([ key, val ]) => [ key, val * 2 ])
);
console.log(object2);
// { a: 2, b: 4, c: 6 }
Object.isFrozen() 判斷對(duì)象是否已經(jīng)凍結(jié)缔莲。
// 使用Object.freeze是凍結(jié)一個(gè)對(duì)象最方便的方法.
var frozen = { 1: 81 };
Object.isFrozen(frozen) //=== false
Object.freeze(frozen);
Object.isFrozen(frozen) //=== true
// 一個(gè)凍結(jié)對(duì)象也是一個(gè)密封對(duì)象.
Object.isSealed(frozen) //=== true
// 當(dāng)然,更是一個(gè)不可擴(kuò)展的對(duì)象.
Object.isExtensible(frozen) //=== false
在 ES5 中,如果參數(shù)不是一個(gè)對(duì)象類型霉旗,將拋出一個(gè)TypeError異常痴奏。在 ES2015 中蛀骇,非對(duì)象參數(shù)將被視為一個(gè)凍結(jié)的普通對(duì)象,因此會(huì)返回true读拆。
Object.isFrozen(1);
// TypeError: 1 is not an object (ES5 code)
Object.isFrozen(1);
// true (ES2015 code)
Object.isSealed() 判斷對(duì)象是否已經(jīng)密封擅憔。
示例1:檢測(cè)一個(gè)對(duì)象是否密封
var obj = { a: 1 };
Object.isSealed(obj); // false
Object.seal(obj);
Object.isSealed(obj); // true
var obj2 = { b: 2 };
Object.preventExtensions(obj2);
Object.isSealed(obj2); // false
示例2:創(chuàng)建一個(gè)原生密封的對(duì)象
var obj = Object.defineProperty({}, 'a', {
value: 1,
enumerable: true,
writable: true,
configurable: false
});
Object.preventExtensions(obj);
Object.isSealed(obj); // true 注意這里沒有調(diào)研Object.seal()方法
Object.keys() 返回一個(gè)包含所有給定對(duì)象自身可枚舉屬性名稱的數(shù)組。
Object.keys() 方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組檐晕,數(shù)組中屬性名的排列順序和使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致 暑诸。
// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']
// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']
// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
getFoo: {
value: function () { return this.foo; }
}
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']
Object.values() 返回給定對(duì)象自身可枚舉值的數(shù)組。
Object.values()方法返回一個(gè)給定對(duì)象自身的所有可枚舉屬性值的數(shù)組辟灰,值的順序與使用for...in循環(huán)的順序相同 ( 區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性 )屠列。
var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']
// array like object with random key ordering
// when we use numeric keys, the value returned in a numerical order according to the keys
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']
// getFoo is property which isn't enumerable
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 'bar';
console.log(Object.values(my_obj)); // ['bar']
// non-object argument will be coerced to an object
console.log(Object.values('foo')); // ['f', 'o', 'o']