iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
0
自我挑戰組

半路出家的工程師重新認識 JavaScript系列 第 10

10. Speaking JavaScript - 基礎篇 (4)

  • 分享至 

  • xImage
  •  

陣列 (Arrays) 概觀


> var arr = ['a', 'b', 'c']; // 宣告一個陣列
> arr[0] // 取得元素 0
'a'

> arr[0] = 'apple'; // 設定元素 0
> arr
['apple', 'b', 'c']

> arr.length // 使用陣列特性 length
3

> arr.length = 2; // 將陣列移除到剩兩個元素
> arr
['apple', 'b']

> arr[arr.length] = 'banana' // 陣列新增一個元素
> arr
['apple', 'b', 'banana']


陣列是索引(index)對值的映射(maps)

換句話說,陣列可能不是連續的。

> var arr = [];
> arr[0] = 'apple';
'apple'
> arr[2] = 'banana';
'banana'
> arr
['apple', , 'banana']

後面會講解這種空缺的情況

多數 JavaScript 引擎內部會最佳化有空缺處的陣列,並連續儲存他們


陣列也可以有特性

陣列仍然是物件,所以可以也可以擁有物件的特性

> var arr = ['a', 'b', 'c'];
> var arr.foo = '123';
> arr
['a', 'b', 'c']
> arr.foo
'123'

建立陣列

> ['a', 'b'].length
2
> ['a', 'b',].length
2
>['a','b', ,].length
3

也可以利用 Array 建構子來建立

> var arr = new Array(2);
> arr.length
2
> arr
[, ,]

// 盡可能不要這樣使用 Array 建構子
> var arr = new Array('a', 'b'); // 不要這樣
> var arr = ['a', 'b'] // 請這樣

多維陣列

在陣列的元素中,當然也是可以塞陣列

> var arr = [];
> arr[0] = [];
> arr[0][0] = [];

陣列索引

  • 索引的範圍為 0 ≤ i < 2的32次方 -1
  • 索引最大的長度為 2 的32次方
  • 超出索引都會視為特性索引(字串)
> var arr = [];

// 超出索引,轉變為特性索引(字串)
> arr[-1] = 'x';
> arr['-1']
'x'

in 運算子

> var arr = ['a', , 'b'];
> 0 in arr
true
> 1 in arr
false
> 6 in arr
false

刪除陣列元素

> var arr = ['1', '2', '3']
> delete arr[1];
> arr.length
3
> arr
['1', , '3']

// 利用 splice 切割陣列
> var arr = ['a', 'b', 'c', 'd'];
> arr.splice(1, 2)
['b', 'c']
> arr
['a', 'd']

Length 特性

length 是紀錄陣列最大的索引

> var arr = [];
> arr[0] = '1';
> arr[999] = '2';
> arr.length
1000

// 利用 length 增加陣列長度
> var arr2 = ['1', '2'];
> arr2.length = 3;
> arr2
['1', '2', ,]
> arr2.push('3');
> arr2.length
4
> arr2
['1', '2', , '3']

// 利用 length 減少陣列長度
> var arr3 = ['1', '2', '3'];
> arr3.length
3
> arr3.length = 2; // 長度超過 2 以上的元素都會被刪除
> arr3
['1', '2']

// 利用 length 清空陣列,他會刪除全部元素,所以比較慢
> var arr4 = ['1', '2', '3'];
> arr4.length
3
> arr4.length = 0;
> arr4
[]

清除陣列會建議使用 arr4 = [] 比較快


結語

今天稍微介紹了一下陣列的些許特性

明天也會接著繼續介紹陣列的

  • 空缺處
  • 稀疏陣列與密集陣列
  • foo, foo in, forEach
  • 排序、串接、切割、搜尋、迭代

上一篇
09. (番外篇) VS Code + ShareX 來撰寫 Markdown + image upload
下一篇
11. Speaking JavaScript - 基礎篇 (5)
系列文
半路出家的工程師重新認識 JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言