[Day -7] 資料型別(data types)(3)

2023 iThome 鐵人賽

DAY 7

自我挑戰組

重新複習JavaScript系列第 7 篇

15th鐵人賽

jeff

2023-09-07 09:33:27

328 瀏覽

分享至

接下來就剩下object了，但本篇只會介紹到array跟object，function因為篇幅的關係會獨立一章，雖然我把他們分開介紹，但大家不要忘記function也是objects喔

但在進入正提前，首先讓我們先了解什麼是 name/value pair 。

name/value pair

A name which maps to a unique value（這個名稱映射到的唯一值）

在一段執行的code中，名稱可能會被賦予不同的值，但他都只對應到唯一一個值

例如：

var Address = '100 Main St.'

var ->宣告

Address ->變數名

“100 Main St.” ->值(字串)

但該值可能會是多組 name/value 的集合，也就是 object

例如：

var Add = {
	Address: {
		Street: 'Main',
		Number: 100
		Apartment: {
			Floor: 3,
			Number: 301
		}
	}
}

在JavaScript中，object本質還是 name/value 的配對組合。

Property 跟 Method

剛剛有提到，object 是 name value pairs的集合

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

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

primitive：像是布林值(Boolean)、數值(Number)或是字串(String)，我們把這類的值稱做屬性(Property)。
object：意思是我們可以在一個object裡再放入一個object，這種情況我們也把它稱作屬性(Property)。
function：在物件的情況下，我們會把這種函式稱做方法(method)。

我們稍微總結一下：

Property：靜態的資料，用於描述物件的狀態。
Method：物件的功能，或說物件的行為。

用圖表我們會更加清楚：

PropertyMethod

是不是清楚很多了。

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

接下來真的要來介紹object跟array了：

object

剛剛我們有介紹過，物件（object）是 JavaScript 中的一種複合資料型別，用於儲存多個name/value 的配對組合。

建構物件的方式：

建立新物件會有更好的方法但現階段我先用這兩個方式解說。

方法1，使用[]:

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

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

首先我們先建立一個物件並取名叫做 person ，接著開始給它『名稱 - 值』(name value pairs)配對

例如：firstName 是屬性的名稱，Jeff 是他的值。

當物件建立好了就是呼叫，當[]裡面放的是字串時記的要加上引號’’，例如：

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

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

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創建一個新的物件

呼叫的方法一樣：

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

.跟[]是可以交替使用的。雖然使用這兩個方法都可以拿來建立物件和讀取物件，但還是建議盡量使用.做為建立物件和呼叫物件的方法。

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）在記憶體中。

Array

陣列（array）是一種有序的資料結構，用於儲存一組相關的值。

當我們用判斷類型：typeof時，會得到object的回傳值，因此Array屬於object

typeofArray

我們可以透過array literal (陣列實字)來宣告一個空陣列：

const arrayName = [item1, item2, ...];

Access the Elements of an Array（存取陣列）:

陣列中的每一個值我們稱做一個元素，每一個元素儲存在陣列中固定的位置，我們稱做索引 (index)，索引值從 0 開始，表示陣列中的第一個元素，第二個之後的元素索引值則依序加 1

const myFriends = ['派大星', '章魚哥', '小蝸', '蟹老闆', '珊迪']
console.log(myFriends[0]) // '派大星'

要知道一個陣列有多少資料，可以使用 length，例如：

const myFriends = ['派大星', '章魚哥', '小蝸', '蟹老闆', '珊迪']
console.log(myFriends.length) // 5

讀取或更改陣列中某個元素的值：

讓我們直接看範例：

const myFriends = ['派大星', '章魚哥', '小蝸', '蟹老闆', '珊迪']
const first = myFriends[0] // 派大星
const last = myFriends[myFriends.length - 1] // 珊迪
myFriends[0] = '海綿寶寶'
console.log(myFriends) // ["海綿寶寶", "章魚哥", "小蝸", "蟹老闆", "珊迪"]