1. 程式人生 > 實用技巧 >js物件方法大全

js物件方法大全

JavaScript中Object建構函式的方法

Object建構函式的方法節

Object.assign()

通過複製一個或多個物件來建立一個新的物件。

Object.create()

使用指定的原型物件和屬性建立一個新物件。

Object.defineProperty()

給物件新增一個屬性並指定該屬性的配置。

Object.defineProperties()

給物件新增多個屬性並分別指定它們的配置。

Object.entries()

返回給定物件自身可列舉屬性的[key, value]陣列。

Object.freeze()

凍結物件:其他程式碼不能刪除或更改任何屬性。

Object.is()

比較兩個值是否相同。所有 NaN 值都相等(這與==和===不同)。

Object.isExtensible()

判斷物件是否可擴充套件。

Object.isFrozen()

判斷物件是否已經凍結。

Object.isSealed()

判斷物件是否已經密封。

Object.keys()

返回一個包含所有給定物件自身可列舉屬性名稱的陣列。

Object.values()

返回給定物件自身可列舉值的陣列。

1、Object.assign()方法用於將所有可列舉屬性的值從一個或多個源物件複製到目標物件。它將返回目標物件。

 1  
 2 const target = { a: 1, b: 2 };
3 4 const source = { b: 4, c: 5 }; 5 6 const returnedTarget = Object.assign(target, source); 7 8 console.log(target); 9 10 // expected output: Object { a: 1, b: 4, c: 5 } 11 12 console.log(returnedTarget); 13 14 // expected output: Object { a: 1, b: 4, c: 5 }

2、Object.create()方法建立一個新物件,使用現有的物件來提供新建立的物件的__proto__。

 1  
 2 const person = {
 3  
 4   isHuman: false,
 5  
 6   printIntroduction: function () {
 7  
 8     console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
 9  
10   }
11  
12 };
13  
14  
15  
16 const me = Object.create(person);
17  
18  
19  
20 me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
21  
22 me.isHuman = true; // inherited properties can be overwritten
23  
24  
25  
26 me.printIntroduction();
27  
28 // expected output: "My name is Matthew. Am I human? true"

3、Object.defineProperties()方法直接在一個物件上定義新的屬性或修改現有屬性,並返回該物件。

語法 Object.defineProperties(obj,props) obj在其上定義或修改屬性的物件。props要定義其可列舉屬性或修改的屬性描述符的物件。物件中存在的屬性描述符主要有兩種:資料描述符和訪問器描述符(更多詳情,請參閱Object.defineProperty())。描述符具有以下鍵:configurabletrue 當且僅當該屬性描述符的型別可以被改變並且該屬性可以從對應物件中刪除。 預設為 falseenumerabletrue 當且僅當在列舉相應物件上的屬性時該屬性顯現。 預設為 falsevalue與屬性關聯的值。可以是任何有效的JavaScript值(數字,物件,函式等)。 預設為 undefined.writabletrue當且僅當與該屬性相關聯的值可以用assignment operator改變時。 預設為 falseget作為該屬性的 getter 函式,如果沒有 getter 則為undefined。函式返回值將被用作屬性的值。 預設為 undefinedset作為屬性的 setter 函式,如果沒有 setter 則為undefined。函式將僅接受引數賦值給該屬性的新值。 預設為 undefined返回值節 傳遞給函式的物件。

 1  
 2 var obj = {};
 3  
 4 Object.defineProperties(obj, {
 5  
 6 'property1': {
 7  
 8 value: true,
 9  
10 writable: true
11  
12 },
13  
14 'property2': {
15  
16 value: 'Hello',
17  
18 writable: false
19  
20 }
21  
22 // etc. etc.
23  
24 });

4、Object.defineProperty()方法會直接在一個物件上定義一個新屬性,或者修改一個物件的現有屬性, 並返回這個物件。

語法Object.defineProperty(obj, prop, descriptor) obj要在其上定義屬性的物件。prop要定義或修改的屬性的名稱。descriptor將被定義或修改的屬性描述符。返回值節 被傳遞給函式的物件。在ES6中,由於 Symbol型別的特殊性,用Symbol型別的值來做物件的key與常規的定義或修改不同,而Object.defineProperty是定義key為Symbol的屬性的方法之一。

5、Object.entries()方法返回一個給定物件自身可列舉屬性的鍵值對陣列,其排列與使用for...in迴圈遍歷該物件時返回的順序一致(區別在於 for-in 迴圈也列舉原型鏈中的屬性)

 
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"]]

6、Object.freeze()方法可以凍結一個物件。一個被凍結的物件再也不能被修改;凍結了一個物件則不能向這個物件新增新的屬性,不能刪除已有屬性,不能修改該物件已有屬性的可列舉性、可配置性、可寫性,以及不能修改已有屬性的值。此外,凍結一個物件後該物件的原型也不能被修改。freeze()返回和傳入的引數相同的物件。

 1  
 2 const object1 = {
 3  
 4 property1: 42
 5  
 6 };
 7  
 8  
 9  
10 const object2 = Object.freeze(object1);
11  
12  
13  
14 object2.property1 = 33;
15  
16 // Throws an error in strict mode
17  
18  
19  
20 console.log(object2.property1);
21  
22 // expected output: 42

7、Object.fromEntries()把鍵值對列表轉換為一個物件。

 
Map 轉化為 Object
 
通過 Object.fromEntries, 可以將 Map 轉化為 Object:
 
 
 
const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
 
const obj = Object.fromEntries(map);
 
console.log(obj); // { foo: "bar", baz: 42 }
 
 
 
Array 轉化為 Object
 
通過 Object.fromEntries, 可以將 Array 轉化為 Object:
 
 
 
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
 
const obj = Object.fromEntries(arr);
 
console.log(obj); // { 0: "a", 1: "b", 2: "c" }
 
物件轉換為Object
 
Object.fromEntries 是 Object.entries() 的反轉函式, 借用 array manipulation methods 可以轉換物件,如下:
 
 
 
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 }

8、Object.is()方法判斷兩個值是否是相同的值

 
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

9、Object.isFrozen()方法判斷一個物件是否被凍結

 1  
 2 // 使用Object.freeze是凍結一個物件最方便的方法.
 3  
 4 var frozen = { 1: 81 };
 5  
 6 Object.isFrozen(frozen) //=== false
 7  
 8 Object.freeze(frozen);
 9  
10 Object.isFrozen(frozen) //=== true
11  
12  
13  
14 // 一個凍結物件也是一個密封物件.
15  
16 Object.isSealed(frozen) //=== true
17  
18  
19  
20 // 當然,更是一個不可擴充套件的物件.
21  
22 Object.isExtensible(frozen) //=== false
23  
24 在 ES5 中,如果引數不是一個物件型別,將丟擲一個TypeError異常。在 ES2015 中,非物件引數將被視為一個凍結的普通物件,因此會返回true。
25  
26  
27  
28 Object.isFrozen(1);
29  
30 // TypeError: 1 is not an object (ES5 code)
31  
32  
33  
34 Object.isFrozen(1);
35  
36 // true (ES2015 code)

10、Object.keys()方法會返回一個由一個給定物件的自身可列舉屬性組成的陣列,陣列中屬性名的排列順序和使用for...in迴圈遍歷該物件時返回的順序一致 。

 
// 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']

11、Object.values()方法返回一個給定物件自身的所有可列舉屬性值的陣列,值的順序與使用for...in迴圈的順序相同 ( 區別在於 for-in 迴圈列舉原型鏈中的屬性 )。

 1  
 2 var obj = { foo: 'bar', baz: 42 };
 3  
 4 console.log(Object.values(obj)); // ['bar', 42]
 5  
 6  
 7  
 8 // array like object
 9  
10 var obj = { 0: 'a', 1: 'b', 2: 'c' };
11  
12 console.log(Object.values(obj)); // ['a', 'b', 'c']
13  
14  
15  
16 // array like object with random key ordering
17  
18 // when we use numeric keys, the value returned in a numerical order according to the keys
19  
20 var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
21  
22 console.log(Object.values(an_obj)); // ['b', 'c', 'a']
23  
24  
25  
26 // getFoo is property which isn't enumerable
27  
28 var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
29  
30 my_obj.foo = 'bar';
31  
32 console.log(Object.values(my_obj)); // ['bar']
33  
34  
35  
36 // non-object argument will be coerced to an object
37  
38 console.log(Object.values('foo')); // ['f', 'o', 'o']