iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
1
Modern Web

一個 JS 學習者的日常系列 第 4

一個 JS 學習者的日常 day3

聽說 JavaScript 所有東西都是物件?錯。
應該是除了六個(或七個)基本型別外,其他才是物件。

六個基本型別:

  • string
  • number
  • boolean
  • null
  • undefined
  • object

而物件的宣告方式分為兩種:字面值,以及建構形式

字面值

var myObj = {
   key: value
   // ...
}

建構式

var myObj = new Object();
myObj.key = value

思考:
知道了基本的樣子,但是到底什麼是物件呢?物件就像是
一個群集,包含了資料跟處理資料的方法。他可能長成這樣:

var introduction = {
  name: 'Jim',
  favFood: 'Sushi',
  breakIce: function(){
    console.log(`Hello I am ${this.name}, My favFood is ${this.favFood}`)
  }
}

introduction.breakIce()
//結果:Hello I am Jim, My favFood is Sushi

introduction['breakIce']()
//結果:Hello I am Jim, My favFood is Sushi

當我們擁有了一個物件後,如何呼叫與存取呢?
有兩種方式分為特性存取(property access)與鍵值存取(key access)

特性存取利用.去連結後面的東西,但只接受識別字
鍵值存取用[..]呼叫,可包含UTF-8或Unicode特性名稱

大部分時間我們使用特性存取,但某些必要狀況必須因為
特性差異改用鍵值存取,例如非識別字或鍵值計算

var firstName = 'Hu'

var ages = {
  'Hu Jim': 28,
  'Hu Koa': 60
}

console.log(ages[firstName + ' Jim'])

ages[firstName + ' Ge'] = 30

console.log(ages)
//結果:28
VM178:13 {Hu Jim: 28, Hu Koa: 60, Hu Ge: 30}

我們可以看到空格包含在key值當中,這並非一般使用狀況
,但當遇到時還有應辦的辦法。我們也可以以同樣的方式存取
回去。

最後,我們應該學複製一個物件。


var firstName = 'Hu'

var ages = {
  'Hu Jim': 28,
  'Hu Koa': 60
}

// Shallow Clone
var agesNextYear = ages

agesNextYear[firstName + ' Jim'] = 29

console.log('Shallow Clone ages: ' + ages[firstName + ' Jim'])
console.log('Shallow Clone agesNextYear: ' + agesNextYear[firstName + ' Jim'])

//Deep Clone

var ages = {
  'Hu Jim': 28,
  'Hu Koa': 60
}

var agesNextYear = Object.assign({}, ages);

agesNextYear[firstName + ' Jim'] = 29

console.log('Deep Clone ages: ' + ages[firstName + ' Jim'])
console.log('Deep Clone agesNextYear: ' + agesNextYear[firstName + ' Jim'])

複製物件有兩種方式分為 Shallow Clone 與 Deep Clone ,
因為 JavaScript call by sharing 的特性,
所以物件裡,特性(property)都是以「位置」去紀錄資料的,
當我們直接指示一個物件給新宣告的物件,
新物件所擁有的特性(property)名稱,
參考到的是同一個物件的資料位置,當我們再給值進去時,
便會將新的資料(新值)位置賦予舊的特性(property)名稱
而覆蓋原本的值。視覺話之後如下圖。


上一篇
一個 JS 學習者的日常 day2
下一篇
一個 JS 學習者的日常 day 4
系列文
一個 JS 學習者的日常30

1 則留言

0
陳董 Don
iT邦新手 5 級 ‧ 2017-12-23 16:39:47

素晴らしい~

我要留言

立即登入留言