凹逗工程師

成為一個更好的人

0%

『 資料結構 』陣列 Array By JavaScript

發表於 更新於

前言

這週與前端小夥伴們發起了 JavaScript 資料結構 (data structure) 讀書會，二話不說用微薄的薪資擠出了些孔方兄購入兩本工具書規劃一下學習計畫，這週從最基礎的陣列 (Array) 走起！
是哪兩本書我會放在最後給大家參考，也希望有想學習這方面的小夥伴每週跟著我的腳步一起成長八 ❤️

陣列 Array

在眾多的語言中，陣列是大家原生都有支援的類型，是最常見的負責存放一系列相同類別資料的方法。
但在 JS 裡是可以在裡頭儲存不同類型的值。這部分我們就不探討了。

為什麼要用陣列

假設有一個需求，記錄下這星期每一天吃的熱量總數：

1
2
3
4
5
6
7
var calorieMon = 3500;
var calorieTue = 5000;
var calorieWed = 2700;
var calorieThu = 3200;
var calorieFri = 2200;
var calorieSat = 3000;
var calorieSun = 4800;

方法沒有不行但肯定不是最佳。以這種方式，如果只有一週自然只有 7 個變數，那要記錄半年呢？
這個時候就要慶幸有陣列來幫助我們更有效率解決：

1
2
3
4
5
6
7
8
9
var calorieArr[0] = 3500;
var calorieArr[1] = 5000;
var calorieArr[2] = 2700;
var calorieArr[3] = 3200;
var calorieArr[4] = 2200;
var calorieArr[5] = 3000;
var calorieArr[6] = 4800;

calorieArr = [3500, 5000, 2700, 3200, 2200, 3000, 4800];

宣告和初始化

宣告的方式有幾種：

1
2
3
4
5
6
var arr = new Array();
var arr = new Array(7); // 指定長度
var arr = new Array('John', 'Jack', 'Leo');

var arr = []; // 最常使用的宣告方式
var arr = ['John', 'Jack', 'Leo'];

基本屬性

1
2
3
4
5
6
7
8
9
10
// 陣列元素的數量
arr.length

// 存取指定位置的元素可以使用中括號傳遞索引值    p.s.索引是從 0 開始
arr[index]

// 藉由迴圈遍歷陣列，輸出全部元素
for (let i=0; i<arr.length; i++){
  console.log(arr[i])
}

元素的添加和刪除

以下我們就使用這個範例來做一些教學八

1
var arr = [0,1,2,3,4,5];

添加元素：

1
2
3
4
5
6
7
8
9
10
11
12
var arr = [0,1,2,3,4,5];
// 先來個陽春直覺版
arr[arr.length] = 6;
console.log(arr); // arr = [0, 1, 2, 3, 4, 5, 6];

// push 屬性(加入元素位於“尾端”)
arr.push(7);
console.log(arr); // arr = [0, 1, 2, 3, 4, 5, 6, 7];

// unshift 屬性(加入元素位於“首端”)
arr.unshift(-1);
console.log(arr); // arr = [-1, 0, 1, 2, 3, 4, 5, 6, 7];

刪除元素：

1
2
3
4
5
6
7
8
var arr = [0,1,2,3,4,5];
// pop 屬性(刪除元素位於“尾端”)
arr.pop();
console.log(arr); // arr = [0, 1, 2, 3, 4];

// shift 屬性(刪除元素位於“首端”)
arr.shift();
console.log(arr); // arr = [1, 2, 3, 4];

在後面的章節裡，會藉由 push, pop 方法，模擬堆疊資料結構；而 shift 和 unshift 則模擬佇列資料結構。

到這邊為止，介紹了從頭尾去新增及刪除元素，那我們要怎麼從中間去操作呢？
讓我們接下去看到 splice 屬性，這也是我覺得很便利的方法！

1
2
3
4
5
6
7
8
var arr = [0,1,2,3,4,5];
// splice 屬性
// splice(要操作的索引值, 刪除的個數, 增加的元素(選填，可多個))
arr.splice(3, 2);
console.log(arr); // arr = [0, 1, 2, 5]

arr.splice(1, 0, 8, 8); // 在第三索引的地方插入兩個元素 8, 8，因為沒有要刪除所以個數寫上 0
console.log(arr); // arr = [0, 8, 8, 1, 2, 5]

二維及多維陣列

二維用表格來解釋會相當容易理解，下方是一個 3x3 的表格也代表著一種二維陣列

A1 A2 A3
A4 A5 A6
A7 A8 A9

A1的索引值：arr[0][0]
A2: arr[0][1]
A3: arr[0][2]…依此類推

幾維陣列的遍歷就要用幾層迴圈作。

陣列方法

方法 描述
concat 連接多個陣列，return 結果
every 對陣列每一個元素運行函數，每一個元素都是 true，才會 return true
filter 對陣列每一個元素運行函數，集合 true 的元素 return 陣列
forEach 對陣列每一個元素運行函數
join 將所有元素串成一個字串
indexOf return 第一個相等參數的索引值，無符合 return -1
lastIndexOf return 最後一個相等參數的索引值，無符合 return -1
map 對陣列每一個元素運行函數，return 每次函數所呼叫的結果所組成之陣列
reverse 反轉陣列裡的元素
slice 傳入索引值，return 索引範圍內的元素新陣列
some 對陣列每一個元素運行函數，有任意 true ，return true
sort 按照 ASCII 值做排序，支援傳入指定排序函數做參數
toString return 將陣列轉字串
valueOf 和 toString 相似，return 將陣列轉字串

工具書

  • JavaScript 資料結構及演算法實作 - Loiane Groner
  • 演算法圖鑑 - 石田保輝、宮崎修一

歡迎關注我的其它發布渠道