第二章 數組

幾乎所有的編程語言都原生支持數組類型，因為數組是最簡單的內存數據結構。JavaScript里也有數組類型，雖然它的第一個版本并沒有支持數組。本章將深入學習數組數據結構和它的能力。

為什么用數組

需求：保存所在城市每個月的平均溫度，可以這么實現

var averageTemp1 = 43.3; var averageTemp2 = 53.2; var averageTemp3 = 14.2; var averageTemp4 = 42.8; var averageTemp5 = 14.8; var averageTemp6 = 78.9;

只是保存前六個月就用了6個變量，顯然這種方式不適合保存這類需求。通過數組可以簡單地實現我們的需求。

var averageTemp = []; averageTemp[0] = 43.3; averageTemp[1] = 53.2; averageTemp[2] = 14.2; averageTemp[3] = 42.8; averageTemp[4] = 14.8; averageTemp[5] = 78.9;

創建和初始化數組

聲明、創建和初始化數組的方式很簡單

var temp = new Array(); // 使用 new 關鍵字，簡單聲明并初始化一個數組 var temp = new Array(8); // 還可以創建一個指定長度的數組 var temp = new Array(1,2,4,9); // 直接將數組元素作為參數傳遞給它的構造器

除了用 new創建數組，還可以通過中括號 []簡單創建數組。

var temp = [1,2,4,9];

訪問元素和迭代數組

通過在數組里指定特定位置的元素，可以獲取該值或者賦值。而要知道一個數組里所有的元素，可以通過循環遍歷數組。

for(var i = 0; i < temp.length; i++){console.log(temp[i]); // 1,2,4,9 }

案例：斐波那契數列

已知斐波那契數列中的第一個數字是1，第二個數字是2，從第三項開始，每一項都等于前兩項之和。求斐波那契數列的前20個數

var fibonacci = []; fibonacci[1] = 1; fibonacci[2] = 2;for(var i =3; i < 20; i++){fibonacci[i] = fibonacci[i-1] + fibonacci[i-2]; } console.log(fibonacci); // [ 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765]

添加元素

var number = [1,2,3]; number[number.length] = 4; number // 1,2,3,4

上述代碼可以在數組的最后一位添加元素，但其實還有更加簡便的方法：

push

push 能添加任意個元素在數組的末尾

number.push(5); // 5 number.push(6,7); //7 number // [1,2,3,4,5,6,7]

數組使用 push 會返回數組的長度

插入元素到數組首位

首先我們要騰出數組的第一個元素的位置，把所有的元素向右移動一位。我們可以循環數組中的元素，從最后一位+1（長度）開始，將其對應的前一個元素的值賦給它，依次處理，最后把我們想要的值賦給第一個位置（-1）上。

for(var i = number.length; i>=0; i--){number[i] = number[i-1]; } number[0] = -0;

unshift

或者直接 使用 unshift 方法，可以將數值插入數組的首位：

var number = [1,2,3,4]; number.unshift(-2); // 5 number.unshift(-4,-3); // 7 number // [-4, -3, -2, 1, 2, 3, 4]

數組使用 unshift 會返回數組的長度

刪除元素

從數組尾部刪除元素

pop

要刪除最靠后的元素可以使用 pop 方法，會刪除并返回數組的最后一個元素。如果數組已經為空，則 pop() 不改變數組，并返回 undefined 值。

var number = [1,2,3,4]; number.pop(); //4 number // [1,2,3] number.pop() // 3 number // [1]

從數組首部刪除元素

如果要移除數組里的第一個元素，可以使用下面的代碼

var number = [1,2,3,4]; for(var i = 0;i < number.length; i++){number[i] = number[i+1]; } number // [2, 3, 4, undefined]

可以看出，我們將數組左移了一位，但數組的長度仍然沒有變化，這意味著數組中有一個額外的元素，因為沒有定義，所以是 undefined

shift

shift() 方法用于把數組的第一個元素從其中刪除，并返回第一個元素的值。 數組的長度也會發生變化。如果數組是空的，那么 shift() 方法將不進行任何操作，返回 undefined 值。

小結

修改數組的方法描述

push	push() 方法可向數組的末尾添加一個或多個元素，并返回新的長度。
unshift	unshift() 方法可向數組的開頭添加一個或更多元素，并返回新的長度。
pop	pop() 方法用于刪除并返回數組的最后一個元素。 如果數組已經為空，則 pop() 不改變數組，并返回 undefined 值。
shift	shift() 方法用于把數組的第一個元素從其中刪除，并返回第一個元素的值。 如果數組是空的，那么 shift() 方法將不進行任何操作，返回 undefined 值

push() 方法和 pop() 方法，能用數組模擬基本的棧的數據結構（先進后出）。

shift()方法和unshift()方法，能用數組模擬基本的隊列的數據結構（先進先出 ）。

在任意位置添加或者刪除元素

已經知道如何刪除數組開頭和結尾的元素，那么該怎么在數組中的任意位置刪除或者添加元素？

splice

splice() 方法向/從數組中添加/刪除項目，然后返回被刪除的項目。 splice() 方法可刪除從 index 處開始的零個或多個元素，并且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。

語法

arrayObject.splice(index,howmany,item1,.....,itemX)

例子

var number = [1,2,3,4]; number.splice(2,0,4,4,5); // [] number //[1, 2, 4, 4, 5, 3, 4] number.splice(2,5,7); // [4, 4, 5, 3, 4] number //[1, 2, 7]

二維或者多維數組

我們知道如果要記錄數天內每個小時的氣溫，可以使用數組來保存這些數據。那么要保存兩天每小時氣溫的數據的時候可以這樣。

var averageTemp1 = [32,53,45,23,46,53]; var averageTemp2 = [98,32,74,34,63,73];

然而這不是最好的方法。可以使用矩陣（二維數組）來存儲這些信息。矩陣的行保存每天的數據，列對應小時級別的數據。

var averageTemp = []; averageTemp[0] = [32,53,45,23,46,53]; averageTemp[1] = [98,32,74,34,63,73];

JavaScript只支持一維數組，并不支持矩陣。但是，可以用數組套數組來模擬矩陣或者任一多維數組。

迭代二維數組的元素

如果想看到這矩陣的輸出，可以創建一個通用函數，專門輸出其中的值：

function printMatrix(x){for(var i = 0; i < x.length; i++){for(var j = 0; j< x[i].length; j++){console.log(x[i][j]);}} } printMatrix(averageTemp);

多維數組

我們也可以用這種方式來處理多維數組。假如我們要創建一個3x3x3的矩陣，每一個格子里包含矩陣的i（行）、j（列）、z（深度）之和：

var matrix3x3x3 = [];for(var i = 0; i < 3; i++){matrix3x3x3[i] = [];for(var j = 0; j < 3; j++){matrix3x3x3[i][j] = [];for(var z = 0; z < 3; z++){matrix3x3x3[i][j][z] = i+j+z;}} }

數據結構中有幾個維度都沒有關系，都可以用循環遍歷每個維度來訪問所有格子

for(var i = 0; i < matrix3x3x3.length; i++){for(var j = 0; j< matrix3x3x3[i].length; j++){for(var z = 0; z < matrix3x3x3[i][j].length; z++){console.log(matrix3x3x3[i][j][z]);}}}

如果是一個3x3x3x3的矩陣，代碼中就會用四層嵌套的 for 語句，以此類推。

JavaScript 的數組方法參考

在JavaScript里，數組是可以修改的對象。這意味著創建的每一個數組都有一些可用的方法。

下面表格是數組的一些核心方法。

方法名描述

concat	連接2個或者更多數組，并返回結果
every	對數組中的每一項運行給定函數，如果該函數對每一項都但返回true,則返回true
filter	對數組中度過每一項運行給定函數，返回該函數會返回true的項組成分數組
forEach	對數組中更多每一項運行給定函數，這個方法沒有返回值
join	將所有的數組元素連接成一個字符串
indexOf	返回第一個與給定參數相等的數組元素的索引，沒有找到則返回-1
lastIndexOf	返回在數組中搜索到的與給定參數相等的元素的索引里最大的值
map	對數組中的每一項運行給定函數，返回每次函數調用結果組成的數組
reverse	顛倒數組中的元素的順序，原先第一個元素現在變成了最后一個，同樣原先的最后一個元素變成了現在的第一個
slice	傳入索引值，將數組里對應索引范圍內的元素作為新數組返回
some	對數組中每一項運行給定函數，如果任一項返回true,則返回true
sort	按照字母的順序對數組排序，支持傳入指定排序方法的函數作為參數
toString	將數組作為字符串返回
valueOf	和 toString 相似，將數組作為字符串返回

數組合并

有多個數組，需要合并起來成為一個數組。我們可以迭代各個數組，然后把每個元素加入最終的數組。

JavaScript也有提供相對應的方法 concat()

var a = 0; var b = [1,2,3]; var c = [-3,-2,-1]; var s = c.concat(a,b); s // [-3, -2, -1, 0, 1, 2, 3]

迭代器函數

有時候，我們需要迭代數組中的元素。可以使用循環語句（前面提到的for語句等）。而其實 JavaScript 內置了許多數組可以使用的迭代方法。

對于本節的例子，我們需要函數和數組。假如有一個數組，值是從1到15，如果數組里面的元素可以被2整除（偶數），函數就要返回true,否則就返回false:

var isEven = function(x){// 如果是 2的倍數，就返回 truereturn (x % 2 == 0); } var number = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

every

every 會迭代數組中的每個元素，直到返回 false。

number.every(isEven)

在這個例子中，數組number第一個元素是1，不是2的倍數，因此 isEven 函數返回false,然后 every 執行結束。

some

some 方法和 every 相似，不過some方法會迭代數組中的每個元素，直到函數返回true

number.some(isEven)

這個例子中，數組的第二個參數是2，為2的倍數，因此返回true，迭代結束

forEach

如果要迭代整個數組可以用 forEach 方法，和使用 for 循環相同：

number.forEach(function(x){console.log((x % 2 == 0)); });

map & filter

JavaScript還有兩個會返回新數組的遍歷方法。第一個是 map：

var myMap = number.map(isEven); myMap // [false, true, false, true, false, true, false, true, false, true, false, true, false, true, false]

從上面代碼可以看出，myMap保存了傳入 map 方法的 isEven函數運行的結果。這樣就可以很容易知道一個元素是否偶數。

還有一個filter方法，它返回的新數組由使函數返回 true 的元素組成：

var evenNumbers = number.filter(isEven); evenNumbers // [2, 4, 6, 8, 10, 12, 14]

reduce

reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。

語法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue) 參數描述

total	必需。初始值, 或者計算結束后的返回值。
currentValue	必需。當前元素
currentIndex	可選。當前元素的索引
arr	可選。當前元素所屬的數組對象。

如果要對一個數組中所有元素進行求和，這就很有用

number.reduce(function(total,currentValue,index){return total + currentValue; }); // 120

ES6 和數組的新功能

下表是ES6/7新增的數組方法

方法描述

@@iterator	返回一個包含數組鍵值對的迭代器對象，可以通過同步調用得到數組元素的鍵值對
copyWithin	復制數組中一系列元素到同一數組指定的起始位置
entries	返回包含數組所有鍵值對的@@iterator
includes	如果數組中存在某個元素則返回 true,否則返回false,ES7新增
find	根據回調函數給定的條件從數組中查找元素，如果找到就返回該元素
findIndex	根據回調函數給定的條件從數組中尋找元素，如果找到就返回該元素在數組中的索引
fill	用靜態值填充數組
from	根據已有數組創建一個新數組
keys	返回包含數組所有索引的@@iterator
of	根據傳入的參數創建一個新數組
values	返回包含數組中所有值的@@iterator

除了這些新的方法，還有一種用 for... of循環來迭代數組的新做法，以及可以從數組實例得到的迭代器對象。

使用 forEach 和箭頭函數

箭頭函數可以簡化使用 forEach迭代數組元素的做法

number.forEach(function(x){console.log (x % 2 == 0); }) // 等于 number.forEach(x => {console.log(x % 2 == 0); });

使用 for...of 循環迭代

for(let n of number){console.log(n % 2 == 0); }

使用ES6新的迭代器（@@iterator）

ES6還為 Array 類增加了一個 @@iterator 屬性，需要通過 Symbol.iterator來訪問。

let iterator = number[Symbol.iterator](); console.log(iterator.next().value); // 1 console.log(iterator.next().value); // 2 console.log(iterator.next().value); // 3 console.log(iterator.next().value); // 4 console.log(iterator.next().value); // 5 console.log(iterator.next().value); // 6

因為number數組中有15個值，所以需要調用15次 iterator.next().value ，數組中所有值都迭代完之后，就會返回 undefined。

• 數組的 entries、keys 和 values 方法

  ES6還增加了三種從數組中得到迭代器的方法。

  entries 方法返回包含鍵值對的 @@iterator

  let aEntries = number.entries(); // 得到鍵值對的迭代器 console.log(aEntries.next().value); // [0,1] -- 位置0的值為1 console.log(aEntries.next().value); // [1,2] -- 位置1的值為2 console.log(aEntries.next().value); // [2,3] -- 位置2的值為3

  number 數組中都是數字，key是數組中的位置，value是保存在數組中索引的值

  使用集合、字段、散列表等數據結構時，能夠取出鍵值對是很有用的。后面會詳細講解。

  key 方法返回包含數組索引的 @@iterator

  let aKeys = number.entries(); // 得到數組索引的迭代器 console.log(aKeys.next()); // { value： 0， done: false} console.log(aKeys.next()); // { value： 1， done: false} console.log(aKeys.next()); // { value： 2， done: false}

  keys方法會返回number數組的索引。一旦沒有可以迭代的值，aKeys.next() 就會返回一個value屬性為undefined，done屬性為 true的對象。如果 done屬性為false，就意味著還有可以迭代的值。

使用from方法

Array.from方法根據已有的數組創建一個新數。比如復制number數組：

let number2 = Array.from(number); number2 // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

使用Array.of

Array根據傳入的參數創建一個新數組、

let number3 = Array.of(1); let number4 = Array.of(1,2,3,4,5,6); number3 // [1] number4 // [1,2,3,4,5,6] // 復制已有的數組 let numberCopy = Array.of(...number4); numberCopy // [1,2,3,4,5,6]

使用fill方法

fill方法用靜態值充填數組。

let numberCopy = Array.of(1,2,3,4,5,6); numberCopy.fill(0); // [0, 0, 0, 0, 0, 0] // 指定開始充填的索引 numberCopy.fill(2,1); // [0, 2, 2, 2, 2, 2] // 指定結束的索引(結束的索引不包括本身) numberCopy.fill(1,3,5); // [0, 2, 2, 1, 1, 2]

創建數組并初始化的時候，fill 方法就非常好用。

let ones = Array(6).fill(1); // 創建了一個長度為6，所有值都是1的數組

使用copyWithin方法

copyWithin方法復制數組中的一系列元素到同一個數組指定的起始位置。

語法：

array.copyWithin(target, start, end) 參數描述

target	必需。復制到指定目標索引位置。
start	可選。元素復制的起始位置。
end	可選。停止復制的索引位置 (默認為?array.length)。如果為負值，表示倒數。

let copyArray = [1,2,3,4,5,6]; copyArray.copyWithin(0,3); // [4, 5, 6, 4, 5, 6]let copyArray1 = [1,2,3,4,5,6]; copyArray1.copyWithin(1,3,5); // [1, 4, 5, 4, 5, 6]

排序元素

反序輸出最開始的長度為15的number數組。

number.reverse(); // [15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]

嘗試使用JavaScript自帶的排序函數 sort();

number.sort(); //[1, 10, 11, 12, 13, 14, 15, 2, 3, 4, 5, 6, 7, 8, 9]

跟我們預期的有些不一樣，這是因為 sort 方法在對數組進行排序 的時候，把元素默認成字符串進行相互比較。所以我們要自己定義一個比較函數。

number.sort((a,b) =>{return a -b; }) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

上述代碼，如果 b 大于 a，會返回負數，反之就是正數。如果相等的話，就會返回0。下面的寫法會清晰一點

function compare(a, b){if(a < b){return -1;}if(a > b){return 1;}return 0; } number.sort(compare);

sort 方法接受 compareFunction作為參數來比較元素。然后sort 會用它來排序數組

自定義排序

我們可以對任何對象類型的數組排序，也可以創建 compareFuntion 來比較元素。例如對象 Person 有名字和屬性，我們希望根據年齡排序。

var friends = [{name: 'John', age: 30},{name: 'Ana', age: 20},{name: 'Chris', age: 25} ];friends.sort((a, b) =>{return a.age - b.age; }) // {name: "Ana", age: 20}{name: "Chris", age: 25}{name: "John", age: 30}

字符串排序

var names = ['Ana', 'ana', 'John', 'john']; names.sort(); // ["Ana", "John", "ana", "john"]

字符串的比較是根據對應的 ASCⅡ值來比較的。例如 A、J、a、j對應分別是65、74、97、106。

雖然字母表的 a 是排靠前的，但是由于 ASCⅡ值 比較大，所以沒有排在首位。如果忽略大小寫呢？會是怎么樣

names.sort((a, b) =>{if(a.toLowerCase() < b.toLowerCase()){return -1;}if(a.toLowerCase() > b.toLowerCase()){return 1;}return 0; }) // ["Ana", "ana", "John", "john"]

搜索

搜索有兩個方法：indexOf方法返回與參數匹配的第一個元素的索引，lastIndexOf返回與參數匹配的最后一個元素的索引。

number.indexOf(10); // 9 number.indexOf(100); // -1 （因為100不存在數組里面）number.puhs(10); number.lastIndexOf(10); // 15 number.lastIndexOf(100) // -1

ES6 find 和 findIndex方法

let number = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; const multipleof13 = (element, index, array) => {return (element % 13 == 0); } number.find(multipleof13); //13 number.findIndex(multipleof13); // 12

find 和 findIndex方法接受一個回調函數，搜索一個滿足回調函數條件的值。上面的例子中，我們要從數組里找有個13的倍數。

ES7 使用includes方法

如果數組存在某個元素，includes 方法就會返回 true,否則就返回 false。

number.includes(15) // true number.includes(20) // falsenumber.includes(4,4) // false 第二個參數為開始搜索的索引

輸出字符串

toString 和 jion 方法

如果想把數組里所有元素輸出位一個字符串，可以使用 toString 方法

number.toString(); // "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15"

還可以用不同的分隔符將元素隔開

number.join('-'); // "1-2-3-4-5-6-7-8-9-10-11-12-13-14-15"

類型數組

JavaScript由于不是強類型的，因此可以存儲任意類型的數據，而類型數組則用于存儲單一的數據。

語法：

let myArray = new TypedArray(length); 類型數組數據類型

Int8Array	8位二進制補碼整數
Unit8Array	8位無符號整數
Unit8ClampedArray	8位無符號整數
Int16Array	16位二進制補碼整數
Unit16Array	16位無符號整數
Int32Array	32位二進制補碼整數
Unit32Array	32位無符號整數
Float32Array	32位IEEE浮點數
Float64Array	64位IEEE浮點數

let length = 5; let int16 = new Int16Array(length);let array16 = []; array16.length = length;for(let i = 0;i < length; i++){int16[i] = i + 1; } console.log(int16); // [1, 2, 3, 4, 5]

使用 webGl API、進行位操作、處理文件和圖像時候，類型數組都可以大展拳腳。它用起來和普通數組也毫無二致，本節所學的數組方法和功能都可以用于類型數組。

小結

學習了常見的數據結構：數組。學習了怎么聲明和初始化數組，給數組賦值后，以及添加和移除數組元素，學了多維數組和數組的一些操作方法。

下一章，學習棧，一種具有特殊行為的數組。

書籍鏈接： 學習JavaScript數據結構與算法

總結

以上是生活随笔為你收集整理的为什么我要放弃javaScript数据结构与算法（第二章）—— 数组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。