對象字面量全解釋

一、對象字面理解

對象字面量是JavaScript中創建對象的一種方式，可以在一個代碼塊中創建或初始化一個對象，對象字面量通常由大括號包圍，並且由零個或多個鍵值對組成。

對象字面量可以用來創建簡單的對象或者自定義對象，可以通過它來構建JSON格式數據。

二、對象字面量表示法

對象字面量的基本組成方式為鍵值對，它由一組用逗號分隔的鍵值對構成。鍵是一個字符串，而值可以是任何一個JavaScript表達式，可以是函數、對象或者任何其他表達式。對象字面量鍵和值之間使用冒號`:`來分隔，多個鍵值對之間使用逗號`,`分隔。

let person = {
  name: 'Tom',
  age: 20
};

對象字面量表示法還支持對象屬性的訪問器（getter和setter），下面的例子展示了這個寫法。

let person = {
  _name: 'Tom',
  get name() {
    return this._name;
  },
  set name(val) {
    this._name = val;
  }
};

三、對象字面量是什麼意思

字面量表示常量的值，我們通過字面量定義的值是固定的，不能被重複定義或更改。因此，對象字面量僅用於創建對象，而不是對對象屬性進行修改。

同一個JavaScript文件中多個對象字面量，則它們也是獨立的，不會相互干擾，可以使用對任何一個對象字面量進行訪問和操作，這樣就實現了代碼的模塊化和封裝。

四、對象字面量創建

創建對象字面量的方式有兩種：一種是使用對象字面值直接創建，另一種是使用工廠方法創建。

1、使用對象字面值直接創建

let student = {
  name: 'Jerry',
  age: 18,
  gender: 'Male',
  score: [98, 100, 88],
  showScore: function() {
    console.log(this.score);
  }
};

2、使用工廠方法創建

function createStudent(name, age, gender, score) {
  return {
    name: name,
    age: age,
    gender: gender,
    score: score,
    showScore: function() {
      console.log(this.score);
    }
  };
}
let student1 = createStudent('Tom', 20, 'Male', [88, 92, 95]);
let student2 = createStudent('Jerry', 18, 'Male', [98, 100, 88]);

五、對象字面量增強

ES6提供了一種更簡潔的語法來創建對象字面量，稱之為對象字面量增強。使用對象字面量增強的方式，可以不用再書寫鍵和值，只需要書寫鍵即可。

1、簡寫鍵名

let name = 'Tom';
let age = 20;
let person = {
  name,
  age
};

2、對象方法簡寫

let person = {
  name: 'Tom',
  sayName() {
    console.log(this.name);
  }
};

3、計算屬性名

let key = 'name';
let person = {
  [key]: 'Tom'
};

六、對象字面量創建對象

常見的創建對象的方法有三種：工廠模式、構造函數模式和Object.create()方法。

1、工廠模式

function createPerson(name, age, gender) {
  return {
    name: name,
    age: age,
    gender: gender
  };
}
let person1 = createPerson('Tom', 20, 'Male');
let person2 = createPerson('Jerry', 18, 'Male');

2、構造函數模式

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
let person1 = new Person('Tom', 20, 'Male');
let person2 = new Person('Jerry', 18, 'Male');

3、Object.create()方法

let person = {
  name: 'Tom',
  age: 20,
  gender: 'Male',
  sayName: function() {
    console.log(this.name);
  }
};
let newPerson = Object.create(person);

七、對象字面量的形式

對象字面量的形式有兩種，一種是鍵值對形式，另一種是函數式。

1、鍵值對形式

let person = {
  name: 'Tom',
  age: 20,
  gender: 'Male',
  sayName: function() {
    console.log(this.name);
  }
};

2、函數式

let person = function(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayName = function() {
    console.log(this.name);
  };
};

八、對象字面量鍵值排序

對象字面量創建的鍵值順序是按照書寫順序排列的。如果希望按照特定的順序排列鍵值，可以將它們按照所期望的順序排序後再創建字面量。

let person = {
  name: 'Tom',
  gender: 'Male',
  age: 20
};

以上代碼的鍵值順序為按照字母序排列的”name”、”age”和”gender”。

如果希望按照”gender”、”name”和”age”的順序排列鍵值，則需要將它們按照順序排序後再寫入鍵值對。

let person = {
  gender: 'Male',
  name: 'Tom',
  age: 20
};

九、對象字面量鍵值排序代碼示例

let person = {
  name: 'Tom',
  gender: 'Male',
  age: 20
};