ES6 之 Object 的方法總結

閱讀：Object

1、obj的"." 或 "[]"方法

讀取對象的屬性或方法

對象屬性的讀取：ES6中被Proxy的get(target, propKey, receiver)攔截

 

2、obj.key = value 或 obj[key] = value

設置對象的屬性的方法

對象屬性的設置：ES6中被Proxy的set(target, propKey, value, receiver)攔截，返回一個boolean值

call()、apply()、bind()

// 用 apply 
var array = ['a', 'b', 'c'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", "c", 0, 1, 2]

let numbers = [1,2,4,5,7,4,2];
let max = Math.max.apply(null, numbers);
console.log(max); // 7
let min = Math.min.apply(null, numbers);
console.log(min); // 1

// 用 call
let animals = [
    { name: 'Lion', age: 17},
    { name: 'Whale', age: 18}
];
for (let i = 0; i < animals.length; i++) {
    (function (i) {
        this.print = function () {
            console.log('#' + i + ' ' + this.name + ', ' + this.age);
        }
        this.print();
    }).call(animals[i], i);
}
// 0 Lion, 17
// 1 Whale, 18

 

3、obj.func()

對象的方法調用

對象的方法調用：ES6中被Proxy的apply(target, object, args)攔截，apply 方法攔截函數的調用、call 和 apply的操作。例如：proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

 

4、key in obj

判斷對象中是否包含某個屬性或方法

判斷對象存在與否：ES6中被Proxy的 has(target, propKey) 攔截，返回一個布爾值。

 

5、construct構造函數

構造函數的調用

ES6中被Proxy的 construct(target, args) 攔截 Proxy 實例作為構造函數調用的操作，比如 new proxy(...args)。

let obj = new Object({name: houfee})

 

6、delete obj.key

刪除對象中的某個屬性

刪除對象中的某個屬性：ES6中被Proxy的 deleteProperty(target, propKey) 攔截，返回一個布爾值。

 

 

7、Object.defineProperty(obj, prop, descriptor)

該方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。

obj：要在其上定義屬性的對象。

prop：要定義或修改的屬性的名稱。

descriptor：將被定義或修改的屬性描述符。

返回值：被傳遞給函數的對象

默認情況下，使用 Object.defineProperty() 添加的屬性值是不可修改的。

MDN：Object.defineProperty

 

ES6中被Proxy的 defineProperty(target, propKey, propDesc) 攔截，返回一個布爾值。

注意：defineProperty(target, propKey, propDesc) 還攔截 Object.defineProperties(proxy, propDesc)，返回一個布爾值。

 

 

8、Object.getOwnPropertyDescriptor(target, propKey)

該方法返回指定對象上一個自有屬性對應的屬性描述符。（自有屬性指的是直接賦予該對象的屬性，不需要從原型鏈上進行查找的屬性）

// 獲取自己的屬性描述符
target: 需要查找的目標對象
propKey: 目標對象內屬性名稱
返回值：如果指定的屬性存在於對象上，則返回其屬性描述符對象（property descriptor），否則返回 undefined。

返回對象指定的屬性配置。

該方法允許對一個屬性的描述進行檢索。在 Javascript 中， 屬性 由一個字符串類型的“名字”（name）和一個“屬性描述符”（property descriptor）對象構成。

一個屬性描述符是一個記錄，由下面屬性當中的某些組成的：

value：該屬性的值(僅針對數據屬性描述符有效)

writable：當且僅當屬性的值可以被改變時為true。(僅針對數據屬性描述有效)

get：獲取該屬性的訪問器函數（getter）。如果沒有訪問器， 該值為undefined。(僅針對包含訪問器或設置器的屬性描述有效)

set：獲取該屬性的設置器函數（setter）。 如果沒有設置器， 該值為undefined。(僅針對包含訪問器或設置器的屬性描述有效)

configurable：當且僅當指定對象的屬性描述可以被改變或者屬性可被刪除時，為true。

enumerable：當且僅當指定對象的屬性可以被枚舉出時，為 true。

ES6中被 Proxy的getOwnPropertyDescriptor(target, propKey)攔截，返回屬性的描述對象。

 

 

9、Object.getPrototypeOf(obj)

Object.getPrototypeOf() 方法返回指定對象的原型（內部[[Prototype]]屬性的值）。

obj:要返回其原型的對象
返回值：給定對象的原型。如果沒有繼承屬性，則返回 null 

 

const prototype1 = {};
const object1 = Object.create(prototype1);

console.log(Object.getPrototypeOf(object1) === prototype1); // true

 

ES6中被 Proxy的getPrototypeOf(target)攔截，返回一個對象。

 

10、Object.isExtensible(obj)

Object.isExtensible() 方法判斷一個對象是否是可擴展的（是否可以在它上面添加新的屬性）。

obj：需要檢測的對象

返回值：表示給定對象是否可擴展的一個Boolean

默認情況下，對象是可擴展的：即可以為他們添加新的屬性。以及它們的 __proto__ 屬性可以被更改。Object.preventExtensions，Object.seal 或 Object.freeze 方法都可以標記一個對象為不可擴展（non-extensible）。

// 新對象默認是可擴展的.
var empty = {};
Object.isExtensible(empty); // === true

// ...可以變的不可擴展.
Object.preventExtensions(empty);
Object.isExtensible(empty); // === false

// 密封對象是不可擴展的.
var sealed = Object.seal({});
Object.isExtensible(sealed); // === false

// 凍結對象也是不可擴展.
var frozen = Object.freeze({});
Object.isExtensible(frozen); // === false

注意：在 ES5 中，如果參數不是一個對象類型，將拋出一個 TypeError 異常。在 ES6 中， non-object 參數將被視為一個不可擴展的普通對象，因此會返回 false 。

 

ES6中被 Proxy的isExtensible(target)攔截，返回一個布爾值。

 

11、Object.getOwnPropertyNames(obj)、 Object.getOwnPropertySymbols(obj)、Object.keys(obj)

 

11.1、Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames()方法返回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性但不包括Symbol值作為名稱的屬性）組成的數組。

obj：一個對象，其自身的可枚舉和不可枚舉屬性的名稱被返回。

返回值：在給定對象上找到的自身屬性對應的字符串數組。

描述

Object.getOwnPropertyNames() 返回一個數組，該數組對的元素是 obj自身擁有的枚舉或不可枚舉屬性名稱字符串。 數組中枚舉屬性的順序與通過 for...in 循環（或 Object.keys）迭代該對象屬性時一致。數組中不可枚舉屬性的順序未定義。

 

11.2、Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols() 方法返回一個給定對象自身的所有 Symbol 屬性的數組。

obj：要返回 Symbol 屬性的對象。

返回值：在給定對象自身上找到的所有 Symbol 屬性的數組

因為所有的對象在初始化的時候不會包含任何的 Symbol，除非你在對象上賦值了 Symbol 否則Object.getOwnPropertySymbols()只會返回一個空的數組。

 

11.3、Object.keys (obj)

Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列順序和使用 for...in 循環遍歷該對象時返回的順序一致 。如果對象的鍵-值都不可枚舉，那么將返回由鍵組成的數組。

obj：要返回其枚舉自身屬性的對象。

返回值：一個表示給定對象的所有可枚舉屬性的字符串數組。

 

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

ES6中，Proxy的ownKeys(target)方法攔截Object.getOwnPropertyNames(proxy)、 Object.getOwnPropertySymbols(proxy)、Object.keys(proty)，返回一個數組。

該方法返回目標對象所有自身屬性的屬性名，而 Object.keys() 的返回結果僅包括目標對象自身的可遍歷屬性。

 

12、Object.preventExtensions(obj)

**Object.preventExtensions()**方法讓一個對象變的不可擴展，也就是永遠不能再添加新的屬性。

obj：將要變得不可擴展的對象。

返回值：已經不可擴展的對象。

Object.preventExtensions()僅阻止添加自身的屬性。但屬性仍然可以添加到對象原型。

一旦使其不可擴展，就無法再對象進行擴展。

例子

// Object.preventExtensions將原對象變的不可擴展,並且返回原對象.
var obj = {};
var obj2 = Object.preventExtensions(obj);
obj === obj2;  // true
 
// 字面量方式定義的對象默認是可擴展的.
var empty = {};
Object.isExtensible(empty) //=== true
 
// ...但可以改變.
Object.preventExtensions(empty);
Object.isExtensible(empty) //=== false
 
// 使用Object.defineProperty方法為一個不可擴展的對象添加新屬性會拋出異常.
var nonExtensible = { removable: true };
Object.preventExtensions(nonExtensible);
Object.defineProperty(nonExtensible, "new", { value: 8675309 }); // 拋出TypeError異常

// 一個不可擴展對象的原型是不可更改的,__proto__是個非標准魔法屬性,可以更改一個對象的原型.
var fixed = Object.preventExtensions({});
fixed.__proto__ = { oh: "hai" }; // 拋出TypeError異常

 

在 ES5 中，如果參數不是一個對象類型，將拋出一個TypeError異常。在 ES2015 中，非對象參數將被視為一個不可擴展的普通對象，因此會被直接返回。

 

ES6 Proxy中 preventExtensions(target)方法攔截Object.preventExtensions() 。該方法必須返回一個布爾值，否則會被自動轉為布爾值。

只有目標對象不可擴展時（即 Object.isExtensible(proxy) 為 false ）， proxy.preventExtensions 才能返回 true ，否則會報錯。

 

13、Object.setPrototypeOf(obj, prototype)

Object.setPrototypeOf() 方法設置一個指定的對象的原型 ( 即, 內部[[Prototype]]屬性）到另一個對象或  null。

 

obj：要設置其原型的對象。

prototype：該對象的新原型(一個對象 或 null)

如果對象的[[Prototype]]被修改成不可擴展(通過 Object.isExtensible()查看)，就會拋出 TypeError異常。如果prototype參數不是一個對象或者null(例如，數字，字符串，boolean，或者 undefined)，則什么都不做。否則，該方法將obj的[[Prototype]]修改為新的值。

ES6中，setPrototypeOf(target, proto)攔截 Object.setPrototypeOf(target, proto)，返回一個布爾值。