JavaScript物件概述

Miss木不發表於2019-02-25
JavaScript物件

物件是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

相關文章