創(chuàng)建一個JavaScript對象的不同方式有哪些？

• 構(gòu)造函數(shù)模式：像Object和Array這樣的原生構(gòu)造函數(shù)，在運行時會自動出現(xiàn)在執(zhí)行環(huán)境中，此外我們也可以創(chuàng)建自定義的構(gòu)造函數(shù)，從而定義自定義對象類型的屬性和方法

function student (name, age) {
  this.name = name;
  this.age = age;
  this.greeting = function() {
    console.log('Hi, I am ' + this.name);
  }
}
var obj = new student('Bob', 20);

• 用new關(guān)鍵字創(chuàng)建一個Object的實例，再為它添加屬性和方法

var student = new Object();
student.name = 'Bob';
student.age = 20;
student.greeting = function() {
  console.log('Hi, I am ' + this.name);
}

• 對象字面量

var student = {
  name: 'Bob',
  age: 20,
  greeting: function() {
    console.log('Hi, I am ' + this.name);
  }
}

基礎(chǔ)的創(chuàng)建對象的方式一般即為以上三種，其余方法為基礎(chǔ)方法之外的方法，現(xiàn)挑選部分方法羅列如下：

• ECMASCRIPT 6 引入了新的關(guān)鍵字class來創(chuàng)建對象，此方法并沒有添加新的邏輯或內(nèi)容給javascript，只是對于習(xí)慣使用其他面向?qū)ο缶幊陶Z言的開發(fā)人員來說更為友好，例子如下：

class student {
  constructor(name, age) {
    this.name = name;
    this.age = age;

    this.greeting = function() {
      console.log('Hi, I am ' + this.name);
    }
  }
}
var student1 = new student('Bob', 20);

• 利用Object.create()方法來創(chuàng)建對象

var student = {
  name: 'Bob',
  age: 20,
  greeting: function() {
    console.log('Hi, I am ' + this.name);
  }
}
var student2 = Object.create(student);
student2.name = 'Alice';
student2.age = 21;

如何添加/刪除屬性？

我們先來看一段代碼：

var student = {
  name: 'Bob',
  age: 20,
  greeting: function() {
    console.log('Hi, I am ' + this.name);
  }
}
delete student.age;
student.gender = 'Male';
console.log(student);

輸出結(jié)果為：

{ name: 'Bob', greeting: [Function: greeting], gender: 'Male' }

在上述代碼中，首先我們創(chuàng)建了一個名為student的對象，對應(yīng)有屬性name，age和方法greeting().
然后我們通過delete刪除了其中的一個屬性age，并且通過直接賦值的方式為其添加了一個屬性gender.

通過[]和 .訪問/修改對象屬性的區(qū)別是什么？

首先明確一點，不論是通過[]還是.都可以順利的訪問和修改已經(jīng)定義過的對象的任何屬性，然而在某些場景下，這兩個還是有區(qū)別的。

• 需要新添加一個屬性，該屬性名中含有空格
  假設(shè)還是前文提到的student對象，如果我們想要給他新增加一個屬性名為class number的屬性。如果此時我們想通過.的方式來增加屬性，則應(yīng)該寫為：

  student.class number = 2;//SyntaxError: Unexpected identifier
  

  很明顯此時會報錯。但如果我們使用[]的方式來添加，則沒有任何問題：

  student['class number'] = 2;
  

• 需要新添加一個屬性，屬性名需要動態(tài)變化，舉例如下：

  for (var i=0; i<=4; i++) {
    myObject['prop' + i] = i;
  }
  

  在上述例子中，我們需要添加的屬性名的一部分包含一個變量，只能借由for循環(huán)和[]的方式添加。

  如何分別獲取對象中屬性和值？

  首先明確一點，對于JavaScriptd中的對象，我們可以認(rèn)為其是由鍵值對（key value pair）組成的，屬性名即為key，屬性值即為value.

  假設(shè)我們想單獨的提取出一個對象中的所有屬性或者屬性值，并存入對應(yīng)的數(shù)組中，應(yīng)該怎么做？我們只需要調(diào)用Object.keys()和Object.values()即可。示例請看如下代碼：

  var student = {
  name: 'Bob',
  age: 20,
  greeting: function() {
    console.log('Hi, I am ' + this.name);
    }
  }
  var prop = Object.keys(student);
  var value = Object.values(student);
  console.log(prop);  //  輸出為  [ 'name', 'age', 'greeting' ]
  console.log(value); //  輸出為  [ 'Bob', 20, [Function: greeting] ]
  

如何遍歷對象的屬性和值？

在上一小節(jié)我們知道了如何分別獲取對象中的屬性和值，并且把他們存入了不同數(shù)組中。但在實際使用中，有時候我們并不需要把對象的屬性和值分別拿出來，而是需要遍歷處理。

那么如何進行遍歷處理呢？我們可以通過for in的語法去遍歷一個對象，舉例如下：

var fruit = {
  apple: 20,
  pear: 20,
  peach: 10
};
var totalNum = 0;
for (let fruitElem in fruit) {
  if (fruit.hasOwnProperty(fruitElem)) {
    totalNum = fruit[fruitElem] + totalNum;
  }
}
console.log(totalNum);

在此例中，我們有一個名為fruit的對象，我們做的是遍歷處理該對象，將對象所有屬性的值相加并且打印輸出。
在此需要注意的是，使用for in遍歷對象時, 需要使用hasOwnProperty過濾掉原型中的屬性，從而保證我們所處理的都是自己定義的屬性。

淺談JSON

聊到JavaScript對象，就不得不也同時聊一聊JSON.

首先，先看定義，JSON是一種輕量級的數(shù)據(jù)交換格式，全稱為JavaScript對象表示法（JavaScript Object Notation）。所以說我們其實可以把JSON看作是一種存儲數(shù)據(jù)的格式類型，或者說一種數(shù)據(jù)規(guī)范。

JSON這種數(shù)據(jù)格式用JS對象字面量的表示方法進行描述，那么描述JSON的語法就是JS對象字面量表示法語法的一個子集。但是于JavaScript不同的是，要注意JSON在描述屬性時，屬性需要用雙引號包含住，并且JSON描述的對象不能有任何方法存在。

他的本質(zhì)是文本文檔，只不過需要按照J(rèn)SON的格式書寫，并且其文件后綴為.json.

更多關(guān)于JSON的詳細(xì)介紹，請移步MDN官方的JSON使用簡介.