『JavaScript 基礎』 Object

這是一門在Udemy 課程，是同學介紹的。主要是因為想要運用到過年前這段時間好好的增進自己的JavaScript的基礎能力，讓自己能往前端工程師更近一步。主要還是會以筆記的形式做呈現！

之前我們有提到，object 是 name value pairs的集合

name就是我們自己設定的名稱，那value是什麼？或是說value可以放什麼呢？

在object可以放入的值有以下3種：

在 object 中的每一個 Property 或是 Method 都會占據電腦當中一個記憶體的位置，在需要使用到的時候，把它們呼叫出來。

接下來是建構物件的方式，建立新物件會有更好的方法但現階段用下面這個解說會更好。

方法1，使用[]:

[]在 JavaScript 中被稱做 Computed Member Access，我們可以在運算子那個表格看到他，以下是範例：

1
2
3

var person = new Object();
person['firstName'] = 'Jeff';
person['lastName'] = 'Wang'

首先我們先建立一個物件並取名叫做 person ，接著開始給它『名稱 - 值』(name value pairs)配對
例如：firstName 是屬性的名稱，Jeff 是他的值。
當物件建立好了就是呼叫，當[]裡面放的是字串時記的要加上引號’’，例如：

1	console.log(person[`firstName`]);

透過這個方法有一個很特別的地方就是可以放變數，一樣可以提取裡面的值，這是等等要介紹的第二個方法辦不到的。範例如下：

1 2	var firstNameProperty = 'firstName' console.log(person[firstNameProperty]) //Jeff

補充：當今天我們是在person這個object裡呼叫變數時，變數裡面存的就是記憶體裡面儲存firstName的位子，我們可以把它想像firstNameProperty放了一個門牌，我們可以透過這個門牌找到firstName住的地方

建立物件的方法2，使用.:
.在 JavaScript 中被稱做 Member Access，我們可以在運算子那個表格看到他

person.address = new Object();
person.address.street = "111 Main St.";
person.address.city = "New York";
person.address.state = "NY";

用最簡單的方式來理解，我們可以把.翻譯做的，就可以比較好理解，例如：person.address= new Object()可以解釋為在person的address創建一個新的物件
呼叫的方法一樣：

1 2	console.log(person.address.street); console.log(person.address.city);

.跟[]是可以交替使用的，在這段課程中講師有提到new Object 不是建立物件最好的方式，這點會在之後的課程再作說明。另外，雖然使用這兩個方法都可以拿來建立物件和讀取物件，但他還是建議盡量使用.做為建立物件和呼叫物件的方法

剛剛有提到new Object 不是建立物件最好的方式，大部分的時候我們會使用object literal syntax的方法，也就是使用”{ }”來快速又簡便的建立物件。

var Jeff = {
  firstName: "Jeff",
  lastName: "Wang",
  address: {
    street: "111 Main St.",
    city: "New York",
    state: "NY",
  },
};

另外也可以使用這個方式：

var Jeff = {
  firstName: "Jeff",
  lastName: "Wang",
};

Jeff.address = {
  street: "111 Main St.",
  city: "New York",
  state: "NY",
};

基本上就是看自己的習慣以及閱讀性來去寫就可以了，個人是比較常用第一個方式。

物件建立好後我們可以搭配函式來執行看看：

function greet(person) {
  console.log("Hi " + person.firstName);
}

greet(Jeff);

這樣我們就可以在console看到 Hi Jeff。

另外還有一總方式是我沒有遇過的：

function greet(person) {
  console.log("Hi " + person.firstName);
}
greet({
  firstName: "Mary",
  lastName: "Doe",
});

在傳入參數時才創建新的object，但他其實就是跟我們直接在function的參數輸入是一樣的意思。我們把這種直接在函式的參數中建立物件的方法稱做”creating object on the fly”。

其實不管使用哪一種方法，再經過JavaScript轉譯後，本質上都是做同樣的事情。它都會將這個物件建立在記憶體中，並建立該物件的屬性（property）和方法（method）在記憶體中。