是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2019-05-17 克服JS奇怪的部分系列

[JS奇怪的世界]No.23 物件與物件實體

#JavaScript #JavaScript 全攻略:克服JS奇怪的部分

前言

這章節準備來講解另一種建立物件的方式，還記得上一個章節我們是使用 new Object(); 來建立物件的吧?其實這個方式對於開發者來講非常不直覺 ↓

1
var person = new Object();

所以這章節將要講解另一種建立物件的方式，那就是物件實體語法，使用的方法非常簡單，使用花括號即可 ↓

1
2
3
4
var person = {
  fistname: 'Tony',
  lastname: 'Alicea',
};

但是要注意花括號並不是一個運算子，當語法解析器發現你不是使用 if 或 for 的時候，它認為你是在建立一個物件，而這個做法又稱物件實體語法，在開發者對於開發者來講是比較直覺且淺顯易懂的，讓我們回頭比較一下上一章節的寫法 ↓

1
2
3
var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';

當然這兩種都是在建立物件，但是物件實體語法比較容易打且方便辨識。

那物件中塞入物件呢? ↓

1
2
3
4
5
6
7
var person = {
  fistname: 'Tony',
  lastname: 'Alicea',
  address: {
   street: '111 Main',
 },
};

而上一章節呢? ↓

1
2
3
4
5
var person = new Object();
person['fistname'] = 'Tony';
person['lastname'] = 'Alicea';
person.address = new Object();
person.address.street = '111 Main';

這兩者比較之後可以發現物件實體寫法是真的比較容易撰寫及分析的。

課程也舉了一個範例，可以透過這種方式呼叫物件 ↓

1
2
3
4
5
6
7
8
9
10
11
12
13
var person = {
  fistname: 'Tony',
  lastname: 'Alicea',
  address: {
   street: '111 Main',
 },
};

function green(name){
 console.log('Hi ' + name.fistname)
};

green(person);

然後也可以用這樣做 ↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var person = {
  fistname: 'Tony',
  lastname: 'Alicea',
  address: {
   street: '111 Main',
 },
};

function green(name){
 console.log('Hi ' + name.fistname)
};

green(person);

green({
 fistname: 'Mary',
 lastname: 'Doe',
});

JavaScript 也接受你使用這種方式建立物件。

1
2
3
4
green({
 fistname: 'Mary',
 lastname: 'Doe',
});

物件實體語法;

圖源

JavaScript 全攻略:克服 JS 奇怪的部分

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

Buy Me A Coffee | Portaly

Terminal

相關文章

[JS奇怪的世界]No.? 閉包番外篇

2019-05-27

[JS奇怪的世界]No.68 JavaScript奇怪的部分

2019-05-25

[JS奇怪的世界]No.67 增加jQuery的支援

2019-05-25

[JS奇怪的世界]No.66 屬性與可鏈結方法

2019-05-25

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme