深入淺出 JavaScript 數組（建議收藏）

天來重學 JavaScript 中的數組，看看有哪些你不知道的細節！

一、數組基礎

1. 數組概述

數組是最常用的數據類型之一，ECMAScript數組跟其他語言的數組一樣，都是一組有序的數據，但跟其他語言不同的是，數組中每個槽位可以存儲任意類型的數據。除此之外，ECMAScript數組的長度也是動態的，會隨著數據的增刪而改變。

數組是被等分為許多小塊的連續內存段，每個小塊都和一個整數關聯，可以通過這個整數快速訪問對應的小塊。除此之外，數組擁有一個length屬性，該屬性表示的并不是數組元素的數量，而是指數組元素的最高序號加1。

let a=[1, 2, 3];
a.length===3

在ES6中，可以使用擴展運算符（...）來獲取數組元素：

let a=[1, 2, 3];
let b=[0, ...a, 4];

2. 數組創建

數組的創建方式有以下兩種。

（1）字面量

最常用的創建數組的方式就是數組字面量，數組元素的類型可以是任意的，如下：

let colors=["red", [1, 2, 3], true];

（2）構造函數

使用構造函數創建數組的形式如下：

let array=new Array();

如果已知數組元素數量，那么就可以給構造函數傳入一個數值，然后length屬性就會被自動創建并保存這個值，比如創建一個長度為10的數組：

let array=new Array();  // [undefined × 10]

這樣，就可以創建一個長度為10的數組，數組每個元素的值都是undefined。

還可以給Array構造函數傳入要保存的元素，比如：

let colors=new Array("red", "blue", "green");

這就出現問題了，當我們創建數組時，如果給數組傳入一個值，如果傳入的值是數字，那么就會創建一個長度為指定數字的數組；如果這個值是其他類型，就會創建一個質保函該特定制度額數組。這樣我們就無法直接創建一個只包含一個數字的數組了。

Array 構造函數根據參數長度的不同，有如下兩種不同的處理方式：

**new Array(arg1, arg2,…)**：參數長度為 0 或長度大于等于 2 時，傳入的參數將按照順序依次成為新數組的第 0 至第 N 項（參數長度為 0 時，返回空數組）；
**new Array(length)**：當 length 不是數值時，返回一個只包含 length 元素一項的數組；當 length 為數值時，length 最大不能超過 32 位無符號整型，即需要小于 2，否則將拋出 RangeError。

在使用Array構造函數時，也可以省略 new 操作符，結果是一樣的：

let array=Array();

（3）ES6 構造器

鑒于數組的常用性，ES6 專門擴展了數組構造器 Array ，新增了 2 個方法：Array.of和Array.from。Array.of 用得比較少，Array.from 具有很強的靈活性。

1）Array.of

Array.of 用于將參數依次轉化為數組項，然后返回這個新數組。它基本上與 Array 構造器功能一致，唯一的區別就在單個數字參數的處理上。

比如，在下面的代碼中，可以看到：當參數為2個時，返回的結果是一致的；當參數是一個時，Array.of 會把參數變成數組里的一項，而構造器則會生成長度和第一個參數相同的空數組：

Array.of(8.0); // [8]
Array(8.0); // [empty × 8]

Array.of(8.0, 5); // [8, 5]
Array(8.0, 5); // [8, 5]

Array.of('8'); // ["8"]
Array('8'); // ["8"]

2）Array.from

Array.from? 的設計初衷是快速基于其他對象創建新數組，準確來說就是從一個類似數組的可迭代對象中創建一個新的數組實例。其實，只要一個對象有迭代器，Array.from 就能把它變成一個數組（注意：該方法會返回一個的數組，不會改變原對象）。

從語法上看，Array.from 有 3 個參數：

類似數組的對象，必選；
加工函數，新生成的數組會經過該函數的加工再返回；
this 作用域，表示加工函數執行時 this 的值。

這三個參數里面第一個參數是必選的，后兩個參數都是可選的：

var obj={0: 'a', 1: 'b', 2:'c', length: 3};

Array.from(obj, function(value, index){
  console.log(value, index, this, arguments.length);
  return value.repeat(3);   //必須指定返回值，否則返回 undefined
}, obj);

結果如圖：

以上結果表明，通過 Array.from 這個方法可以自定義加工函數的處理方式，從而返回想要得到的值；如果不確定返回值，則會返回 undefined，最終生成的是一個包含若干個 undefined 元素的空數組。

實際上，如果這里不指定 this，加工函數就可以是一個箭頭函數。上述代碼可以簡寫為以下形式。

Array.from(obj, (value)=> value.repeat(3));
//  控制臺打印 (3) ["aaa", "bbb", "ccc"]

除了上述 obj 對象以外，擁有迭代器的對象還包括 String、Set、Map 等，Array.from 都可以進行處理：

// String
Array.from('abc');                             // ["a", "b", "c"]
// Set
Array.from(new Set(['abc', 'def']));           // ["abc", "def"]
// Map
Array.from(new Map([[1, 'ab'], [2, 'de']]));   // [[1, 'ab'], [2, 'de']]

3. 數組空位

當我們使用數組字面量初始化數組時，可以使用一串逗號來創建空位，ECMAScript會將逗號之間相應索引位置的值當成空位，ES6 重新定義了該如何處理這些空位。

我們可以這樣來創建一個空位數組：

let array=[,,,,,];
console.log(array.length);
console.log(array)

運行結果如下:

ES6新增的方法和迭代器與早期版本中存在的方法的行為不同，ES6新增方法普遍將這些空位當成存在的元素，只不過值為undefined，使用字面量形式創建如下數組：

let array=[1,,,5];
for(let i of array){
  console.log(i===undefined)
}
// 輸出結果：false true true false

使用ES6的Array.form創建數組：

let array=Array.from([1,,,5]);
for(let i of array){
  console.log(i===undefined)
}
// 輸出結果：false true true false

而ES6之前的方法則會忽略這個空位：

let array=[1,,,5];
console.log(array.map(()=> 10))

// 輸出結果：[10, undefined, undefined, 10]

由于不同方法對空位數組的處理方式不同，因此盡量避免使用空位數組。

4. 數組索引

在數組中，我們可以通過使用數組的索引來獲取數組的值：

let colors=new Array("red", "blue", "green");  
console.log(array[1])  // blue

如果指定的索引值小于數組的元素數，就會返回存儲在相應位置的元素，也可以通過這種方式來設置一個數組元素的值。如果設置的索引值大于數組的長度，那么就會將數組長度擴充至該索引值加一。

數組長度length的獨特之處在于，他不是只讀的。通過length屬性，可以在數組末尾增加刪除元素：

let colors=new Array("red", "blue", "green");  
colors.length=2
console.log(colors[2])  // undefined

colors.length=4
console.log(colors[3])  // undefined

數組長度始終比數組最后一個值得索引大1，這是因為索引值都是從0開始的。

5. 數組判斷

一個很經典的ECMASript問題就是如何判斷一個對象是不是數組，下面來看常用的數據類型檢測的方法。

在 ES6 之前，至少有如下 5 種方式去判斷一個對象是否為數組。

通過Object.prototype.toString.call() 做判斷：

Object.prototype.toString.call(obj).slice(8,-1)==='Array';

通過constructor做判斷：

obj.constructor===Array;

通過instanceof做判斷：

obj instanceof Array

通過Array.prototype.isPrototypeOf做判斷：

Array.prototype.isPrototypeOf(obj)

通過基于getPrototypeOf做判斷：

Object.getPrototypeOf(obj)===Array.prototype;

如果obj是一個數組，那么上面這 5 個判斷全部為 true，推薦通過 Object.prototype.toString 去判斷一個值的類型。

ES6 新增了 Array.isArray 方法，可以直接判斷數據類型是否為數組：

Array.isArrray(obj);

如果 isArray 不存在，那么 Array.isArray 的 polyfill 通常可以這樣寫：

if (!Array.isArray){
  Array.isArray=function(arg){
    return Object.prototype.toString.call(arg)==='[object Array]';
  };
}

數字就像是一個森林，里面有很多函“樹”，有些方法純凈如水，并不會改變原數組，有些則會改變原數組。

改變原數組的方法：fill()、pop()、push()、shift()、splice()、unshift()、reverse()、sort()；
不改變原數組的方法：concat()、every()、filter()、find()、findIndex()、forEach()、indexOf()、join()、lastIndexOf()、map()、reduce()、reduceRight()、slice()、some。

二、數組方法

1. 復制和填充方法

ES提供了兩個方法：批量復制方法copeWithin()，以及填充數組方法fill()。這兩個方法的簽名類似，都需要指定已有數組實例上的一個范圍，包含開始索引，不包含結束索引。下面就分別來看一下這兩個方法。

（1）fill()

使用fill()方法可以向一個已有數組中插入全部或部分相同的值，開始索引用于指定開始填充的位置，它是可選的。如果不提供結束索引，則一直填充到數組末尾。如果是負值，則將從負值加上數組的長度而得到的值開始。該方法的語法如下：

array.fill(value, start, end)

其參數如下：

value：必需。填充的值；
start：可選。開始填充位置；
end：可選。停止填充位置 (默認為array.length)。

使用示例如下：

const arr=[0, 0, 0, 0, 0];

// 用5填充整個數組
arr.fill(5);
console.log(arr); // [5, 5, 5, 5, 5]
arr.fill(0);      // 重置

// 用5填充索引大于等于3的元素
arr.fill(5, 3);
console.log(arr); // [0, 0, 0, 5, 5]
arr.fill(0);      // 重置

// 用5填充索引大于等于1且小于等于3的元素
arr.fill(5, 3);
console.log(arr); // [0, 5, 5, 0, 0]
arr.fill(0);      // 重置

// 用5填充索引大于等于-1的元素
arr.fill(5, -1);
console.log(arr); // [0, 0, 0, 0, 5]
arr.fill(0);      // 重置

（2）copyWithin()

copyWithin()方法會按照指定范圍來淺復制數組中的部分內容，然后將它插入到指定索引開始的位置，開始與結束索引的計算方法和fill方法一樣。該方法的語法如下：

array.copyWithin(target, start, end)

其參數如下：

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

使用示例如下：

const array=[1,2,3,4,5]; 
console.log(array.copyWithin(0,3));

2. 轉化方法

數組的轉化方法主要有四個：toLocaleString()、toString()、valueOf()、join()。下面就分別來看一下這4個方法。

（1）toString()

toString()方法返回的是由數組中每個值的等效字符串拼接而成的一個逗號分隔的字符串，也就是說，對數組的每個值都會調用toString()方法，以得到最終的字符串：

let colors=["red", "blue", "green"];  
console.log(colors.toString())  // red,blue,green

（2）valueOf()

valueOf()方法返回的是數組本身，如下面代碼：

let colors=["red", "blue", "green"];  
console.log(colors.valueOf())  // ["red", "blue", "green"]

（3）toLocaleString()

toLocaleString()方法可能會返回和toString()方法相同的結果，但也不一定。在調用toLocaleString()方法時會得到一個逗號分隔的數組值的字符串，它與toString()方法的區別是，為了得到最終的字符串，會調用每個值的toLocaleString()方法，而不是toString()方法，看下面的例子：

let array=[{name:'zz'}, 123, "abc", new Date()];
let str=array.toLocaleString();
console.log(str); // [object Object],123,abc,2016/1/5 下午1:06:23

需要注意，如果數組中的某一項是null或者undefined，則在調用上述三個方法后，返回的結果中會以空字符串來表示。

（4）join()

join() 方法用于把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。其使用語法如下：

arrayObject.join(separator)

其中參數separator是可選的，用來指定要使用的分隔符。如果省略該參數，則使用逗號作為分隔符。

該方法返回一個字符串。該字符串是通過把 arrayObject 的每個元素轉換為字符串，然后把這些字符串連接起來，在兩個元素之間插入 separator 字符串而生成的。

使用示例如下：

let array=["one", "two", "three","four", "five"];
console.log(array.join());      // one,two,three,four,five
console.log(array.join("-"));   // one-two-three-four-five

3. 棧方法

ECMAScript給數組添加了幾個方法來使它像棧一樣。眾所周知，棧是一種后進先出的結構，也就是最近添加的項先被刪除。數據項的插入（稱為推入，push），和刪除（稱為彈出，pop）只在棧頂發生。數組提高了push()和pop()來實現類似棧的行為。下面就分別來看看這兩個方法。

（1）push()

push()方法可以接收任意數量的參數，并將它們添加了數組末尾，并返回數組新的長度。該方法會改變原數組。其語法形式如下：

arrayObject.push(newelement1,newelement2,....,newelementX)

使用示例如下：

let array=["football", "basketball",  "badminton"];
let i=array.push("golfball");
console.log(array); // ["football", "basketball", "badminton", "golfball"]
console.log(i);     // 4

（2）pop()

pop() 方法用于刪除并返回數組的最后一個元素。它沒有參數。該方法會改變原數組。其語法形式如下：

arrayObject.pop()

使用示例如下：

let array=["cat", "dog", "cow", "chicken", "mouse"];
let item=array.pop();
console.log(array); // ["cat", "dog", "cow", "chicken"]
console.log(item);  // mouse

4. 隊列方法

隊列是一種先進先出的數據結構，隊列在隊尾添加元素，在對頭刪除元素。上面我們已經說了在結果添加數據的方法push()，下面就再來看看從數組開頭刪除和添加元素的方法：shift()和unshift()。實際上unshift()并不屬于操作隊列的方法，不過這里也一起說了。

（1）shift()

shift()方法會刪除數組的第一項，并返回它，然后數組長度減一，該方法會改變原數組。語法形式如下：

arrayObject.shift()

使用示例如下：

let array=[1,2,3,4,5];
let item=array.shift();
console.log(array); // [2,3,4,5]
console.log(item);  // 1

注意：如果數組是空的，那么 shift() 方法將不進行任何操作，返回 undefined 值。

（2）unshift()

unshift()方法可向數組的開頭添加一個或更多元素，并返回新的長度。該方法會改變原數組。其語法形式如下：

arrayObject.unshift(newelement1,newelement2,....,newelementX)

使用示例如下：

let array=["red", "green", "blue"];
let length=array.unshift("yellow");
console.log(array);  // ["yellow", "red", "green", "blue"]
console.log(length); // 4

5. 排序方法

數組有兩個方法可以對數組進行重新排序：sort()和reverse()。下面就分別來看看這兩個方法。

（1）sort()

sort()方法是我們常用給的數組排序方法，該方法會在原數組上進行排序，會改變原數組，其使用語法如下：

arrayObject.sort(sortby)

其中參數sortby是可選參數，用來規定排序順序，它是一個比較函數，用來判斷哪個值應該排在前面。默認情況下，sort()方法會按照升序重新排列數組元素。為此，sort()方法會在每一個元素上調用String轉型函數，然后比較字符串來決定順序，即使數組的元素都是數值，也會將數組元素先轉化為字符串在進行比較、排序。這就造成了排序不準確的情況，如下代碼：

let array=[5, 4, 3, 2, 1];
let array2=array.sort();
console.log(array2)  // [1, 2, 3, 4, 5]

let array=[0, 1, 5, 10, 15];
let array2=array.sort();
console.log(array2)  //  [0, 1, 10, 15, 5]

可以看到，上面第二段代碼就出現了問題，雖然5是小于10的，但是字符串10在5的前面，所以10還是會排在5前面，因此可知，在很多情況下，不添加參數是不行的。

對于sort()方法的參數，它是一個比較函數，它接收兩個參數，如果第一個參數應該排在第二個參數前面，就返回-1；如果兩個參數相等，就返回0；如果第一個參數應該排在第二個參數后面，就返回1。一個比較函數的形式可以如下：

function compare(value1, value2) {
 if(value1 < value2){
   return -1
  } else if(value1 > value2){
   return 1
  } else{
   return 0
  }
}

let array=[0, 1, 5, 10, 15];
let array2=array.sort(compare);
console.log(array2)  // [0, 1, 5, 10, 15]

使用箭頭函數來定義：

let array=[0, 1, 5, 10, 15];

let array2=array.sort((a, b)=> a - b);  // 正序排序
console.log(array2)  // [0, 1, 5, 10, 15]

let array3=array.sort((a, b)=> b - a);  // 倒序排序
console.log(array3)  // [15, 10, 5, 1, 0]

（2）reverse()

reverse() 方法用于顛倒數組中元素的順序。該方法會改變原來的數組，而不會創建新的數組。其使用語法如下：

arrayObject.reverse()

使用示例如下：

let array=[1,2,3,4,5];
let array2=array.reverse();
console.log(array);   // [5,4,3,2,1]
console.log(array2===array);   // true

6. 操作方法

對于數組，還有很多操作方法，下面我們就來看看常用的concat()、slice()、splice()方法。

（1）concat()

concat() 方法用于連接兩個或多個數組。該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。其適用語法如下：

arrayObject.concat(arrayX,arrayX,......,arrayX)

其中參數arrayX是必需的。該參數可以是具體的值，也可以是數組對象。可以是任意多個。

使用示例如下：

let array=[1, 2, 3];
let array2=array.concat(4, [5, 6], [7, 8, 9]);
console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array);  // [1, 2, 3], 可見原數組并未被修改

該方法還可以用于數組扁平化，后面會介紹。

（2）slice()

slice() 方法可從已有的數組中返回選定的元素。返回一個新的數組，包含從 start 到 end （不包括該元素）的數組元素。方法并不會修改數組，而是返回一個子數組。其使用語法如下：

arrayObject.slice(start,end)

其參數如下：

start：必需。規定從何處開始選取。如果是負數，那么它規定從數組尾部開始算起的位置。也就是說，-1 指最后一個元素，-2 指倒數第二個元素，以此類推；
end：可選。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數，那么切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數，那么它規定的是從數組尾部開始算起的元素。

使用示例如下：

let array=["one", "two", "three", "four", "five"];
console.log(array.slice(0));    // ["one", "two", "three","four", "five"]
console.log(array.slice(2,3)); // ["three"]

（3）splice()

splice()方法可能是數組中的最強大的方法之一了，使用它的形式有很多種，它會向/從數組中添加/刪除項目，然后返回被刪除的項目。該方法會改變原始數組。其使用語法如下：

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

其參數如下：

index：必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
howmany：必需。要刪除的項目數量。如果設置為 0，則不會刪除項目。
item1, ..., itemX：可選。向數組添加的新項目。

從上面參數可知，splice主要有三種使用形式：

刪除：需要給splice()傳遞兩個參數，即要刪除的第一個元素的位置和要刪除的元素的數量；
插入：需要給splice()傳遞至少三個參數，即開始位置、0（要刪除的元素數量）、要插入的元素。
替換： splice()方法可以在刪除元素的同事在指定位置插入新的元素。同樣需要傳入至少三個參數，即開始位置、要刪除的元素數量、要插入的元素。要插入的元素數量是任意的，不一定和刪除的元素數量相等。

使用示例如下：

let array=["one", "two", "three","four", "five"];
console.log(array.splice(1, 2));           // 刪除：["two", "three"]

let array=["one", "two", "three","four", "five"];
console.log(array.splice(2, 0, 996));      // 插入：[]

let array=["one", "two", "three","four", "five"];
console.log(array.splice(2, 1, 996));      // 替換：["three"]

7. 歸并方法

ECMAScript為數組提供了兩個歸并方法：reduce()和reduceRight()。下面就分別來看看這兩個方法。

（1）reduce()

reduce() 方法對數組中的每個元素執行一個reducer函數(升序執行)，將其結果匯總為單個返回值。其使用語法如下：

arr.reduce(callback,[initialValue])

reduce 為數組中的每一個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元素，接受四個參數：初始值（或者上一次回調函數的返回值），當前元素值，當前索引，調用 reduce 的數組。(1) callback （執行數組中每個值的函數，包含四個參數）

previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
currentValue （數組中當前被處理的元素）
index （當前元素在數組中的索引）
array （調用 reduce 的數組）

(2) initialValue （作為第一次調用 callback 的第一個參數。）

let arr=[1, 2, 3, 4]
let sum=arr.reduce((prev, cur, index, arr)=> {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

輸出結果如下：

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

再來加一個初始值看看：

let arr=[1, 2, 3, 4]
let sum=arr.reduce((prev, cur, index, arr)=> {
    console.log(prev, cur, index);
    return prev + cur;
}, 5)
console.log(arr, sum);

輸出結果如下：

5 1 0
6 2 1
8 3 2
11 4 3
[1, 2, 3, 4] 15

通過上面例子，可以得出結論：如果沒有提供initialValue，reduce 會從索引1的地方開始執行 callback 方法，跳過第一個索引。如果提供initialValue，從索引0開始。

注意，該方法如果添加初始值，就會改變原數組，將這個初始值放在數組的最后一位。

（2）reduceRight()

該方法和的上面的reduce()?用法幾乎一致，只是該方法是對數組進行倒序查找的。而reduce()方法是正序執行的。

let arr=[1, 2, 3, 4]
let sum=arr.reduceRight((prev, cur, index, arr)=> {
    console.log(prev, cur, index);
    return prev + cur;
}, 5)
console.log(arr, sum);

輸出結果如下：

5 4 3
9 3 2
12 2 1
14 1 0
[1, 2, 3, 4] 15

8. 搜索和位置方法

ECMAScript提供了兩類搜索數組的方法：按照嚴格相等搜索和按照斷言函數搜索。

（1）嚴格相等

ECMAScript通過了3個嚴格相等的搜索方法：indexOf()、lastIndexOf()、includes()。這些方法都接收兩個參數：要查找的元素和可選的其實搜索位置。lastIndexOf()方法會從數組結尾元素開始向前搜索，其他兩個方法則會從數組開始元素向后進行搜索。indexOf()和lastIndexOf()返回的是查找元素在數組中的索引值，如果沒有找到，則返回-1。includes()方法會返回布爾值，表示是否找到至少一個與指定元素匹配的項。在比較第一個參數和數組的每一項時，會使用全等（===）比較，也就是說兩項必須嚴格相等。

使用示例如下：

let arr=[1, 2, 3, 4, 5];
console.log(arr.indexOf(2))      // 1
console.log(arr.lastIndexOf(3))  // 2
console.log(arr.includes(4))     // true

（2）斷言函數

ECMAScript也允許按照定義的斷言函數搜索數組，每個索引都會調用這個函數，斷言函數的返回值決定了相應索引的元素是否被認為匹配。使用斷言函數的方法有兩個，分別是find()和findIndex()方法。這兩個方法對于空數組，函數是不會執行的。并且沒有改變數組的原始值。他們的都有三個參數：元素、索引、元素所屬的數組對象，其中元素是數組中當前搜索的元素，索引是當前元素的索引，而數組是當前正在搜索的數組。

這兩個方法都從數組的開始進行搜索，find()返回的是第一個匹配的元素，如果沒有符合條件的元素返回 undefined；findIndex()返回的是第一個匹配的元素的索引，如果沒有符合條件的元素返回 -1。

使用示例如下：

let arr=[1, 2, 3, 4, 5]
arr.find(item=> item > 2)      // 結果：3
arr.findIndex(item=> item > 2) // 結果：2

9. 迭代器方法

在ES6中，Array的原型上暴露了3個用于檢索數組內容的方法：keys()、values()、entries()。keys()方法返回數組索引的迭代器，values()方法返回數組元素的迭代器，entries()方法返回索引值對的迭代器。

使用示例如下（因為這些方法返回的都是迭代器，所以可以將他們的內容通過Array.from直接轉化為數組實例）：

let array=["one", "two", "three", "four", "five"];
console.log(Array.from(array.keys()))     // [0, 1, 2, 3, 4]
console.log(Array.from(array.values()))   // ["one", "two", "three", "four", "five"]
console.log(Array.from(array.entries()))  // [[0, "one"], [1, "two"], [2, "three"], [3, "four"], [4, "five"]]

10. 迭代方法

ECMAScript為數組定義了5個迭代方法，分別是every()、filter()、forEach()、map()、some()。這些方法都不會改變原數組。這五個方法都接收兩個參數：以每一項為參數運行的函數和可選的作為函數運行上下文的作用域對象（影響函數中的this值）。傳給每個方法的函數接收三個參數，分別是當前元素、當前元素的索引值、當前元素所屬的數對象。

（1）forEach()

forEach 方法用于調用數組的每個元素，并將元素傳遞給回調函數。該方法沒有返回值，使用示例如下：

let arr=[1,2,3,4,5]
arr.forEach((item, index, arr)=> {
  console.log(index+":"+item)
})

該方法還可以有第二個參數，用來綁定回調函數內部this變量（回調函數不能是箭頭函數，因為箭頭函數沒有this）：

let arr=[1,2,3,4,5]
let arr1=[9,8,7,6,5]
arr.forEach(function(item, index, arr){
  console.log(this[index])  //  9 8 7 6 5
}, arr1)

（2）map()

map() 方法會返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。該方法按照原始數組元素順序依次處理元素。該方法不會對空數組進行檢測，它會返回一個新數組，不會改變原始數組。使用示例如下：

let arr=[1, 2, 3];
 
arr.map(item=> {
    return item+1;
})
// 結果： [2, 3, 4]

第二個參數用來綁定參數函數內部的this變量：

var arr=['a', 'b', 'c'];
 
[1, 2].map(function (e) {
    return this[e];
}, arr)
 // 結果： ['b', 'c']

該方法可以進行鏈式調用：

let arr=[1, 2, 3];
 
arr.map(item=> item+1).map(item=> item+1)
 // 結果： [3, 4, 5]

forEach和map區別如下：

forEach()方法：會針對每一個元素執行提供的函數，對數據的操作會改變原數組，該方法沒有返回值；
map()方法：不會改變原數組的值，返回一個新數組，新數組中的值為原數組調用函數處理之后的值；

（3）filter()

filter()方法用于過濾數組，滿足條件的元素會被返回。它的參數是一個回調函數，所有數組元素依次執行該函數，返回結果為true的元素會被返回。該方法會返回一個新的數組，不會改變原數組。

let arr=[1, 2, 3, 4, 5]
arr.filter(item=> item > 2) 
// 結果：[3, 4, 5]

可以使用filter()方法來移除數組中的undefined、null、NAN等值

let arr=[1, undefined, 2, null, 3, false, '', 4, 0]
arr.filter(Boolean)
// 結果：[1, 2, 3, 4]

（4）every()

該方法會對數組中的每一項進行遍歷，只有所有元素都符合條件時，才返回true，否則就返回false。

let arr=[1, 2, 3, 4, 5]
arr.every(item=> item > 0) 
// 結果：true

（5）some()

該方法會對數組中的每一項進行遍歷，只要有一個元素符合條件，就返回true，否則就返回false。

、定義數組添加元素

在JavaScript中，定義數組并添加內容非常簡單。以下是一個基本的示例：

// 定義一個空數組  
var myArray=[];  
  
// 添加內容到數組  
myArray.push('第一項');  
myArray.push('第二項');  
myArray.push('第三項');  
  
// 輸出數組內容  
console.log(myArray); 
// 輸出: [ '第一項', '第二項', '第三項' ]

在這個例子中，我們首先定義了一個名為myArray的空數組。然后，我們使用push方法將三個字符串元素添加到數組中。最后，我們使用console.log來輸出數組的內容。

另外，你還可以在定義數組的同時初始化其內容，如下：

// 定義并初始化數組  
var myArray=['第一項', '第二項', '第三項'];  
  
// 輸出數組內容  
console.log(myArray); 
// 輸出: [ '第一項', '第二項', '第三項' ]

在這個例子中，我們直接在定義數組的同時初始化了它的內容。這種方式在你知道數組初始內容的情況下非常有用。

二、讀取數組長度

在上面數組的基礎上，我們來讀取數組的長度。以下是一個基本的示例：

// 讀取數組長度  
var arrayLength=myArray.length;  
console.log('數組長度:', arrayLength); 
// 輸出: 數組長度: 3

在這個例子中，我們使用myArray.length來獲取數組的長度。

三、判斷是否為空

在上面數組的基礎上，我們來判斷數組是否為空。以下是一個基本的示例：

// 判斷數組是否為空  
var isEmpty=myArray.length===0;  
console.log('數組是否為空:', isEmpty); 
// 輸出: 數組是否為空: false

在這個例子中，我們通過比較數組長度是否為0來判斷數組是否為空。

四、迭代輸出數組中的每一個元素

在上面數組的基礎上，我們來使用forEach迭代輸出數組中的每一個元素。以下是一個基本的示例：

// 迭代輸出數組中的每一個元素  
myArray.forEach(function(item, index) {  
    console.log('元素:', item, '索引:', index);  
});  
// 輸出:  
// 元素: 第一項 索引: 0  
// 元素: 第二項 索引: 1  
// 元素: 第三項 索引: 2

在這個例子中，我們使用forEach方法來迭代數組，并輸出每個元素及其索引。

另外，我們還可以使用for循環迭代輸出數組中的每一個元素，以下是一個基本的示例：

for (var i=0; i < myArray.length; i++) {  
    console.log('元素:', myArray[i], '索引:', i);  
}
// 輸出:  
// 元素: 第一項 索引: 0  
// 元素: 第二項 索引: 1  
// 元素: 第三項 索引: 2

和for Each迭代結果是一樣的。但是也有區別，具體請“使用break退出循環”章節。

五、輸出第一個元素

在上面數組的基礎上，我們來輸出數組中的第一個元素，如下：

// 獲取并輸出數組的第一個元素  
var firstElement=myArray[0];  
console.log('第一個元素:', firstElement); 
// 輸出: 第一個元素: 第一項

在這個例子中，我們通過索引0獲取數組的第一個元素。

六、輸出最后一個元素

在上面數組的基礎上，我們來輸出數組中的最后一個元素，如下：

// 獲取并輸出數組的最后一個元素  
var lastElement=myArray[myArray.length - 1];  
console.log('最后一個元素:', lastElement); 
// 輸出: 最后一個元素: 第三項

在這個例子中，我們通過索引myArray.length - 1獲取數組的最后一個元素。

七、使用break退出循環

在JavaScript中，forEach循環不能使用break語句來提前退出循環。forEach是數組的一個方法，它專門為迭代數組的每個元素而設計，但不提供像傳統for循環那樣的退出機制。

如果你需要在迭代過程中提前退出，你可以考慮使用其他循環結構，如for循環、while循環或do...while循環，或者使用數組方法如find、findIndex、some、every等，這些方法會在滿足某個條件時停止執行回調函數。

例如，使用for循環和break：

for (var i=0; i < myArray.length; i++) {  
    if (/* 某個條件 */) {  
        break; // 退出循環  
    }  
    console.log('元素:', myArray[i], '索引:', i);  
}

八、元素查找

如果你只是想找到滿足某個條件的第一個元素，可以使用find方法：

var foundItem=myArray.find(function(item, index) {  
    if (/* 某個條件 */) {  
        return true; // 找到后，find方法會立即停止執行并返回該元素  
    }  
    return false;  
});  
  
if (foundItem) {  
    console.log('找到的元素:', foundItem);  
} else {  
    console.log('未找到滿足條件的元素');  
}

在這個find方法的示例中，一旦回調函數返回true，find方法就會停止執行，并返回當前元素。如果沒有元素使回調函數返回true，則find方法返回undefined。

如果你想要獲取滿足條件的元素的索引，可以使用findIndex方法，它的工作方式與find類似，但返回的是元素的索引而不是元素本身。

下面的示例著重來介紹查找元素索引。

九、索引查找

在JavaScript中，如果你想要返回數組中指定元素的索引，你可以使用數組的indexOf方法或者findIndex方法。這兩個方法有不同的用途：

indexOf 方法返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。
findIndex 方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。

下面是使用這兩個方法返回指定元素索引的示例：

使用 indexOf 方法：

var myArray=['第一項', '第二項', '第三項'];  
var targetElement='第二項';  
var index=myArray.indexOf(targetElement);  
  
if (index !==-1) {  
    console.log('元素的索引是:', index); // 輸出: 元素的索引是: 1  
} else {  
    console.log('元素不在數組中');  
}

使用 findIndex 方法（適用于更復雜的條件或當元素不是原始類型時）：

var myArray=[{ name: '第一項' }, { name: '第二項' }, { name: '第三項' }];  
var targetElementName='第二項';  
var index=myArray.findIndex(function(item) {  
    return item.name===targetElementName;  
});  
  
if (index !==-1) {  
    console.log('元素的索引是:', index); // 輸出: 元素的索引是: 1  
} else {  
    console.log('元素不在數組中');  
}

在findIndex的示例中，我們有一個包含對象的數組，我們想要找到name屬性為第二項的對象的索引。我們通過提供一個回調函數來實現這一點，該函數檢查每個對象的name屬性是否匹配目標值。

注意，如果數組中有多個相同的元素，indexOf和findIndex都只會返回第一個匹配元素的索引。如果你需要找到所有匹配元素的索引，你需要自己實現一個循環來遍歷數組并收集索引。

組是Javascript中一種非常重要的數據結構！
它使用單獨的變量名來存儲一系列的值，代表現實世界中一個集體或者組的概念。

譬如定義一個水果的數組：

var fruits=new Array( "apple", "orange", "mango" );

或者直接這樣：

var fruits=[ "apple", "orange", "mango" ];

然后，我就可以訪問數組元素了，像這樣：

console.log(fruits[0]) //得到“apple"
console.log(fruits[1]) //得到"orange"。

想得到數字里面元素的個數，可以使用數組的length屬性：

fruits.length

怎么樣來理解數組呢？我們可以理解為一個隊列（類似于我們日常的排隊），我找了一個圖，大概像這樣：

數組就看作這樣一個隊列，根據它的索引（0、1、2、3等等）來訪問數組具體位置上面的值，訪問length就可以得到隊列中的人數。
數組提供了很多已有的函數讓你調用，跟實際的隊列也非常的類似。下面的內容，你可以跟著在腦子里面想象一個隊列！
譬如我想插入一個元素到隊首（插隊這個不提倡啊），可以用unshift函數：

fruits.unshift("banana")

這樣fruits就變成了：

banana,apple,orange,mango

如果想刪除第一個元素（把banana吃掉），就使用shift（插隊的GD）：

fruits.shift()

fruits重新變回了：

apple,orange,mango

隊尾操作也是類似的，他使用的函數是

fruits.push("purple");//隊尾添加，來晚了，但我排隊了
fruits.pop(); //隊尾刪除，不排了走了，等不起

下面是我們的一段代碼，請大家實驗一下（代碼1）：

//定義一個函數，打印數組里面的值
function PrintArray(arr1){
console.log("數組現在的值----------");
for(var i=0;i<arr1.length;i++) {
console.log(arr1[i]);
}
}

var fruits=[ "apple", "orange", "mango" ];

PrintArray(fruits);
fruits.unshift("banana");
console.log("數組隊首增加了banana----------");
PrintArray(fruits);

fruits.shift("banana");
console.log("數組隊首刪除了banana----------");
PrintArray(fruits);

fruits.push("purple");
console.log("數組隊尾增加了purple----------");
PrintArray(fruits);

fruits.pop();
console.log("數組隊尾刪除了purple----------");
PrintArray(fruits);

另外，數組還提供針對每一個元素的具體操作方法（用for循環訪問也可以），這些方法都非常方便，都是通過js的匿名函數（就是一個沒有名字的函數）來實現的。

舉幾個方法的例子，方法的說明如下：

forEach
每一個都調用
map
每一個都調用，并返回一個新數組
filter
每一個都調用，返回符合條件的值到一個新數組

下面是一段實例代碼（代碼2）：

//定義一個函數，打印數組里面的值
function PrintArray(arr1){
console.log("數組現在的值----------");
for(var i=0;i<arr1.length;i++) {
console.log(arr1[i]);
}
}
var arr2=[50,4,39,9]

console.log("數組forEach----------");
arr2.forEach(function(i){
console.log(i); //打印每一個值
})

console.log("數組map----------");
var arr3=arr2.map(function(i){
return i*i*i; //數的立方
}
)
PrintArray(arr3); //打印新的立方數組

console.log("數組filter----------");
var arr4=arr2.filter(function(i){
return i>35; //只保留35以上的中年人
}
)
PrintArray(arr4); //打印新數組

好了，今天數組的內容就到這里！

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

深入淺出 JavaScript 數組（建議收藏）

一、數組基礎

1. 數組概述

2. 數組創建

（1）字面量

（2）構造函數

（3）ES6 構造器

1）Array.of

2）Array.from

3. 數組空位

4. 數組索引

5. 數組判斷

二、數組方法

1. 復制和填充方法

（1）fill()

（2）copyWithin()

2. 轉化方法

（1）toString()

（2）valueOf()

（3）toLocaleString()

（4）join()

3. 棧方法

（1）push()

（2）pop()

4. 隊列方法

（1）shift()

（2）unshift()

5. 排序方法

（1）sort()

（2）reverse()

6. 操作方法

（1）concat()

（2）slice()

（3）splice()

7. 歸并方法

（1）reduce()

（2）reduceRight()

8. 搜索和位置方法

（1）嚴格相等

（2）斷言函數

9. 迭代器方法

10. 迭代方法

（1）forEach()

（2）map()

（3）filter()

（4）every()

（5）some()

、定義數組添加元素

二、讀取數組長度

三、判斷是否為空

四、迭代輸出數組中的每一個元素

五、輸出第一個元素

六、輸出最后一個元素

七、使用break退出循環

八、元素查找

九、索引查找

您的項目需求