JavaScript物件概述

Miss木不發表於2019-02-25

物件是JavaScript中非常重要的資料結構。

1.基礎

  • JavaScript的物件是一種無序的集合資料型別,它由若干鍵值對組成。
  • 一個JavaScript物件可以有很多屬性,屬性定義了物件的特徵。
  • 訪問屬性是通過.操作符完成的,但這要求屬性名必須是一個有效的變數名;物件的屬性也可以通過方括號訪問或者設定。

一個屬性的名稱如果不是一個有效的 JavaScript 識別符號(例如,一個由空格或連字元,或者以數字開頭的屬性名),就只能通過方括號標記訪問。

2.Symbol

ES6 為什麼引入了Symbol?

ES5 的物件屬性名都是字串,這容易造成屬性名的衝突。比如,你使用了一個他人提供的物件,但又想為這個物件新增新的方法(mixin 模式),新方法的名字就有可能與現有方法產生衝突。如果有一種機制,保證每個屬性的名字都是獨一無二的就好了,這樣就從根本上防止屬性名的衝突。這就是 ES6 引入Symbol的原因。
Symbol 值通過Symbol函式生成。這就是說,物件的屬性名現在可以有兩種型別,一種是原來就有的字串,另一種就是新增的 Symbol 型別。凡是屬性名屬於 Symbol 型別,就都是獨一無二的,可以保證不會與其他屬性名產生衝突。 –阮一峰

作為屬性名,每一個Symbol值都是不相等的。

// 無引數
let a = Symbol();
let b = Symbol();
a === b //false

// 有引數
let c = Symbol(`foo`);
let d = Symbol(`foo`);
c === c //false
複製程式碼

注意:

  • Symbol 值作為物件屬性名時,不能用點運算子。
  • 在物件內部,使用Symbol定義屬性時,Symbol值必須放在方括號[]內。

3.列舉一個物件的所有屬性

  • for...in 迴圈:該方法依次訪問一個物件及其原型鏈中所有可列舉的屬性(不含 Symbol 屬性)。
  • Object.keys(obj):該方法返回一個物件 obj 自身包含(不包括原型中)的所有屬性的名稱的陣列。
  • Object.getOwnPropertyNames(obj):該方法返回一個陣列,它包含了物件 obj 所有擁有的屬性(無論是否可列舉)的名稱。
  • Object.getOwnPropertySymbols(obj):返回一個陣列,包含物件自身的所有 Symbol 屬性的鍵名。
  • Reflect.ownKeys(obj)Reflect.ownKeys返回一個陣列,包含物件自身的所有鍵名,不管鍵名是 Symbol 或字串,也不管是否可列舉。

3.建立物件(建立物件一共有七種方式,這裡只列舉了幾種常見的)

  • 物件字面量
let person = {
    name: `Luna`,
    age: `18`,
    hobby: `reading`,
    greeting: function() {
        console.log(`hello,I am ` + this.name)
    }
};
複製程式碼
  • 使用new表示式
let person = new Object();
person.name = `Luna`;
person.age = `18`;
person.hobby = `reading`;
person.greeting = function () {
    console.log(`hello,I am ` + this.name)
}

複製程式碼
  • 使用建構函式:
function Person(name, age, hobby) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.greeting = function () {
    console.log(`hello,I am ` + this.name)
    }
}
let person = new Person(`Luna`,`18`,`reading`);
複製程式碼
  • 使用工廠模式
function ceatePerson(name, age, hobby) {
    let obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.hobby = hobby;
    this.greeting = function () {
    console.log(`hello,I am ` + this.name)
    }
    return obj;
}
let person = cratePerson(`Luna`,`18`,`reading`);
複製程式碼
  • 原型模式
function Person () {}
Person.prototype.name = `Luna`;
Person.prototype.age = `18`;
Person.prototype.hobby = `reading`;
Person.prototype.greeting = function () {
     console.log(`hello,I am ` + this.name)
}
let person = new Person()
複製程式碼

4.物件的方法

  1. Object.is():ES6 提出“Same-value equality”(同值相等)演算法(ES5:JavaScript 缺乏一種運算,在所有環境中,只要兩個值是一樣的,它們就應該相等。),用Object.is()解決嚴格相等的問題。

與”===”的區別:

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
複製程式碼
  1. Object.assign():通過複製一個或多個物件來建立一個新的物件(屬於淺拷貝【Object.assign()淺拷貝在後面章節會進行講解】)。
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
複製程式碼
  1. Object.create():使用指定的原型物件和屬性建立一個新物件。
const person = {
    name: `Luna`,
    age: `18`,
    hobby: `reading`,
    greeting: function() {
        console.log(`hello,I am ` + this.name)
    }
};

const me = Object.create(person);
me.name = `Bella`;

複製程式碼
  1. Object.defineProperty()/Object.defineProperties():給物件新增一個/多個屬性並指定該屬性的配置。

  2. Object.entries():返回給定物件自身可列舉屬性的[key, value]陣列。

  3. Object.freeze()/Object.isFrozen():凍結物件:其他程式碼不能刪除或更改任何屬性/判斷物件是否已經凍結。

  4. Object.getOwnPropertyDescriptor():返回物件指定的屬性配置。

  5. Object.getOwnPropertyNames():返回一個陣列,它包含了指定物件所有的可列舉或不可列舉的屬性名。

  6. Object.getOwnPropertySymbols():返回一個陣列,它包含了指定物件自身所有的符號屬性。

  7. Object.getPrototypeOf():返回指定物件的原型物件。

  8. Object.isExtensible():判斷物件是否可擴充套件。

  9. Object.isSealed()/Object.seal():判斷物件是否已經密封。/防止其他程式碼刪除物件的屬性。

  10. Object.keys():返回一個包含所有給定物件自身可列舉屬性名稱的陣列。

  11. Object.preventExtensions():防止物件的任何擴充套件。

  12. Object.setPrototypeOf():設定物件的原型(即內部[Prototype]屬性)。

  13. Object.values():返回給定物件自身可列舉值的陣列

參考:
ECMAScript 6 入門 –阮一峰
Object|MDN

相關文章