Javascript - 陣列和陣列的方法

boxZhang發表於2019-02-17

JavaScript陣列

學習在於總結，自己總覺得書到用時方恨少。

陣列是javascript程式設計中的重中之重，歸納整理的這些陣列方法，也是希望自己能夠更全面一些的瞭解陣列知識點，某天忘記了，也可以再回頭看看，也希望能和大家一起分享，一起成長。

陣列的基本概念

什麼是陣列

陣列是一組資料結合而成的有序列表
陣列是一個物件，用於在單個變數中儲存多個值

陣列的特點

ECMAScript陣列的每一項都可以儲存任意型別的資料（比如：陣列的第一個位置來儲存字串，第二個位置來儲存數值，第三個位置儲存物件）
ECMAScript陣列的大小是可以動態調整的，例如：可以隨著資料的新增自動增長，來容納新增資料
ECMAScript陣列是一塊連續的記憶體空間，以下標來描述空間的位置

建立陣列的方式

Array建構函式的方式

var arr = new Array(); //建立一個空陣列 []
var arr = new Array(3); //建立一個length為3的陣列 [undefined, undefined, undefined]
var arr = new Array("red","yellow","green");	//建立陣列並賦值 ["red", "yellow", "green"]
複製程式碼

陣列字面量表示法

var arr = [];	//建立一個空陣列
var arr = ["red","yellow","green"];	//建立了一個包含3個字串的陣列
var arr = [1,2,];	//不要這樣，會建立一個包含2或3項的陣列，出現相容問題
var arr = [,,,];	//不要這樣，會建立一個包含3或4項的陣列，出現相容問題
複製程式碼

of方法（ES6方法）

var arr = Array.of(7);       // 建立陣列並賦值 [7] 
var arr = Array.of(1, 2, 3); // 建立陣列並賦值 [1, 2, 3]
複製程式碼

陣列的屬性（length、prototype、 constructor）

length

length設定或返回陣列中元素的數目。

length很有特點，它不是隻讀的，可以通過length這個屬性，從陣列的末尾移除項或向陣列中新增新項

var arr = ["red","yellow","green"];
arr.length = 2;	//把arr修改為length為2的陣列，即當length屬性被設定得比原來小時，則原先陣列中索引大於或等於length的元素的值全部被丟失。
console.log(arr[2]);	//undefined

var colors = ["black","white","blue"];
colors.length = 4;	// 如果將其length設定為大於陣列項數的值，則新增的每一項都會取undefined值，但實際陣列的狀態不會發生變化，仍舊是["black","white","blue"]
console.log(colors[3]);	//undefined
複製程式碼

prototype

prototype 屬性是 object 共有的。

一般用來給陣列例項新增屬性和方法。
constructor

表示建立物件的函式。返回對建立此物件的陣列函式的引用。

說明：constructor 屬性是所有具有 prototype 的物件的成員。constructor 屬性儲存了對構造特定物件例項的函式的引用。

陣列的檢測

instanceof
instanceof 用來檢測一個例項是否屬於某個類，彌補了typeof不能檢測具體屬於哪個物件的侷限性（也就是說如果一個例項是object型別的，typeof無法分清這個物件是屬於物件中的陣列還是物件中的正則，只能判斷該型別為是一個object）。

儘管不像 typeof 方法那樣靈活，但是在 typeof 方法返回 "object" 的情況下，instanceof 方法還是很有用的。

原理：只要在當前例項原型鏈上的物件，我們用其檢測出來的都是true

注意：但是在類的原型繼承中，我們最後檢測出來的結果未必正確
```
var num =10;
var arr = [1,2,3];
console.log(num instanceof Number);	//false  因為instanceof不能用於檢測和處理字面量方式建立出來的基本資料型別值
console.log(arr instanceof Object);	//true
console.log(arr instanceof Array);	//true
複製程式碼
```

constructor

constructor 建構函式是函式原型上的屬性，該屬性指向的是建構函式本身

作用和instsnceof非常相似，與instanceof不同的是，不僅可以處理引用資料型別，還可以處理原始資料型別。

var num = 10;
var arr = [1,2,3];
console.log(num.constructor == Number);	//true
console.log(arr.constructor == Object);	//false
console.log(arr.constructor == Array);	//true	由於constructor可以被重寫，所以不能確保一定是陣列

// 侷限性：我們可以把類的原型進行重寫，在重寫的過程中很可能把之前constructor給覆蓋了，這樣檢測出來的結果就是不準確的。例如：
function Fn() {};
var f = Fn;
console.log(f.constructor);  //ƒ Fn() {}
console.log(f.constructor == Function);  //true
Fn.prototype = new Array;
var f = new Fn;
//f是一個函式，按道理說他的建構函式應該是Function，但是修改其原型鏈後，它的constructor變成了Array.
console.log(f.constructor);  //ƒ Array() { [native code] }
console.log(f.constructor == Array);  //true
複製程式碼

Array.isArray(obj)

isArray() 方法用於判斷一個物件是否為陣列。效率較高。
var arr = [1,2,3];
var isArr = Array.isArray(arr);	
console.log(isArr);	//true
複製程式碼

Object.prototype.toString.call()

原型鏈上的Object物件的toString方法

Object.prototype.toString的作用是返回當前方法的執行主體（方法中的this）所屬類的詳細資訊，是最全面也是最常用的檢測資料型別的方式。

var arr = [34,65,1];
Object.prototype.toString.call(arr) === '[object Array]' //return true
複製程式碼

// Object.prototype.toString.call() 用法
console.log(Object.prototype.toString.call(1));          	//[object Number]
console.log(Object.prototype.toString.call(/^sf/));        	//[object RegExp]
console.log(Object.prototype.toString.call("hello"));      	//[object String]
console.log(Object.prototype.toString.call(true));        	//[object Boolean]
console.log(Object.prototype.toString.call(null));        	//[object Null]
console.log(Object.prototype.toString.call(undefined));      //[object Undefined]
console.log(Object.prototype.toString.call(function() {}));	//[object Function]
console.log(typeof(Object.prototype.toString.call(function() {})));	//string
複製程式碼

陣列方法

轉換方法（ join）

arr.join(separator)

把陣列構構造成字串，它先把陣列中的每個元素轉換成字串，然後再用 separator 分隔符把它們連結在一起，separator 分隔符預設是逗號 “,”，要想做到無間隔連結，可以使用空字串作為 separator：
```
var arr = [1,2,3,4,5]
arr.join('|');	//"1|2|3|4|5"
arr.join("");	//12345
 
//另所有物件有具有的 toLocaleString、toString、valueOf，可以看作是join的特殊用法，不常用
複製程式碼
```

棧方法（push、pop）

arr.push(item…)

將一個或多個新元素新增到陣列結尾，並返回陣列新長度。

var arr=[1,2,3,4,5];
arr.push(6);	// 往陣列arr中推入另外一項 6
console.log(arr);	// [1, 2, 3, 4, 5, 6]

複製程式碼

arr.pop()

移除最後一個元素並返回該元素值。

var arr=[1,2,3,4,5];
var arrItem = arr.pop();	// 移除最後一個元素，並返回該元素的值
console.log(arrItem);	//5
console.log(arr);	//[1,2,3,4]

複製程式碼

佇列方法（unshift、shift）

arr.unshift(item)

在陣列的前端新增任意個項，並返回新的陣列的長度。

var arr=[1,2,3,4,5];
arr.unshift(0);	// 往陣列arr中推入另外一項 0
console.log(arr);	// [0，1, 2, 3, 4, 5]
複製程式碼

arr.shift()

從陣列中獲得第一項，並返回該元素值。

var arr=[1,2,3,4,5];
var arrItem = arr.shift();	// 移除第一一個元素，並返回該元素的值
console.log(arrItem);	//1
console.log(arr);	//[2,3,4，5]
複製程式碼

重排序方法（reverse、sort）

arr.reverse()

反轉陣列順序。

var arr = [2,3,1,5,4];
arr.reverse();
console.log(arr);	// [4, 5, 1, 3, 2]
複製程式碼

arr.sort()

重新排列陣列順序，預設升序。

//
var arr = [20,3,12,1,5,4];
arr.sort(Fn);
console.log(arr);	// [1, 12, 20, 3, 4, 5]，可見單純的使用sort並沒有達到理想的升序結果

var arr = [20,3,12,1,5,4];
arr.sort((a, b) => (a - b)); 	// (6) [1, 3, 4, 5, 12, 20]
 
複製程式碼

操作方法（concat、slice、splice、 copyWithin、 fill）

arr.concat(item) 不影響原始陣列

concat()方法會基於當前陣列中的所有項建立一個新陣列，也就是concat()方法會先建立當前陣列一個副本，然後將接收到的引數新增到這個副本的末尾，最後返回新構建的陣列。
```
var colors = ["red","green","blue"];
var colors2 = colors.concat("yellow",["black","brown"]);
console.log(colors);	//["red", "green", "blue"]
console.log(colors2);	//["red", "green", "blue", "yellow", "black", "brown"]
複製程式碼
```

arr.slice(start, end) 不影響原始陣列

slice()方法基於當前陣列中的一個或多個項建立一個新陣列。

slice()方法可以接受一個或兩個引數，即要返回項的起始（包括起始位置項）和結束位置（不包括結束位置項）。

字串也有個同名方法 string.slice。

var colors = ["red", "green", "blue", "yellow", "black", "brown"];
var colors1 = colors.slice(1);		//擷取從colors[1]到最後一項的，返回新陣列
var colors2 = colors.slice(1,4);	//擷取從colors[1]到colors[3]，返回新陣列
var colors3 = colors.slice(-5,-2);	// 此種情況，如果結束位置小於起始位置，則返回空陣列
console.log(colors);	// ["red", "green", "blue", "yellow", "black", "brown"]
console.log(colors1);	// ["green", "blue", "yellow", "black", "brown"]
console.log(colors2);	// ["green", "blue", "yellow"]
console.log(colors3);	// ["green", "blue", "yellow"]  
複製程式碼

arr.splice(start, deleteCount, item…) 影響原始陣列

splice()方法從 arr 中移除一個或多個元素，並將新的 item 插入至移除元素的開始位置，引數 start 是移除元素的開始位置，deleteCount 是要移除的元素的個數，item 是要被插入的元素。它返回一個包含被移除元素的陣列。

// 刪除
var colors1 = ["red", "green", "blue", "yellow", "black", "brown"];
var removed = colors1.splice(0,1);	//從第0個開始，移除1項，並返回移除的內容
console.log(colors1);	//(5) ["green", "blue", "yellow", "black", "brown"]
console.log(removed);	//["red"]

// 插入
var colors2 = ["red", "green", "blue", "yellow", "black", "brown"];
var removed = colors2.splice(1,0,"orange","purple");	//從第1項開始，移除0項，插入"orange","purple"，並返回移除的內容
console.log(colors2);	//(8) ["red", "orange", "purple", "green", "blue", "yellow", "black", "brown"]
console.log(removed);	//[]

// 替換
var colors3 = ["red", "green", "blue", "yellow", "black", "brown"];
var removed = colors3.splice(1,1,"orange","purple");	//從第1項開始，移除1項，插入"orange","purple"，並返回移除的內容
console.log(colors3);	//(7) ["red", "orange", "purple", "blue", "yellow", "black", "brown"]
console.log(removed);	//["green"]
複製程式碼

arr.copyWithin(target, start, end) 影響原始陣列

arr.copyWithin()該方法複製陣列的一部分到同一陣列中的另一個位置（會覆蓋原成員），並返回修改後的陣列。使用這個方法，會修改當前陣列。

引數 target 為開始替換資料的位置，若 target 大於等於 arr.length，將會不發生拷貝。

start 是可選引數，為開始讀取資料的位置，預設為0。

end 是可選引數，為停止讀取資料的位置，預設為 arr.length。
```
var arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3);	// 將從3號位直到陣列結束的成員（4和5），複製到從0號位開始的位置，結果覆蓋了原來的1和2。
console.log(arr);	// [4, 5, 3, 4, 5]
複製程式碼
```
arr.fill(value,start,end) 影響原始陣列

該方法使用給定值填充一個陣列，引數 value 是用來填充陣列的值。start 是可選引數，為填充開始位置，預設為 0。end 是可選引數，為填充的結束位置，預設為 arr.length。
```
[1, 2, 3].fill(4)            // [4, 4, 4]
[1, 2, 3].fill(4, 1 , 2)            // [1, 4, 3]
複製程式碼
```

位置方法（indexOf、 lastIndexOf、includes）

arr.indexOf(searchElement, start)

該方法返回要查詢的項在陣列中的位置，如果沒找到返回 -1。

接受兩個引數，searchElement 是要查詢的項，start 是查詢起始位置的索引，預設是0。

var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(2));	//1	查詢2，從第0項開始，往後找
console.log(numbers.indexOf(2,3));	//7	查詢2，從第3項開始，包括第三項，往後找
console.log(numbers.indexOf(8,3));	//-1	查詢8，從第3項開始
複製程式碼

arr.lastIndexOf(searchElement, start)

從 start 位置開始向前查詢，start 預設值為 arr.length – 1。

注意該方法在比較查詢項與陣列中每一項時，會使用全等操作符，也就是要求查詢的項必須嚴格相等。
```
var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.lastIndexOf(2));	//7	查詢2，從最後一項開始，往前找
console.log(numbers.lastIndexOf(2,3));	//1	查詢2，從第3項開始，包括第三項，往前找
複製程式碼
```

arr.includes(searchElement, fromIndex)

var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.includes(2));	//true	查詢2，從第0項開始，如果有，則返回true，否則返回false
console.log(numbers.includes(4,6));	//false	查詢4，從第76項開始，如果有，則返回true，否則返回false
複製程式碼

迭代方法（every、 some、 filter、 forEach、 map、 find、 findIndex、entries、keys、values）

每個迭代方法都接收兩個引數：1、要在每一項上執行的函式（ callback）；2、執行該函式的作用域物件（thisArg）——影響this值。

傳入這些方法中的函式會接收三個引數：1、陣列項的值；2、該項在陣列中的位置；3、陣列物件本身

arr.every(callback，thisArg)

對陣列中的每一項執行給定函式，如果該函式對每一項都返回true，則返回true。

var numbers = [1,2,3,4,5,4,3,2,1];
var everyItem = numbers.every((item,index,array) => (item>2));
console.log(everyItem);	//false
複製程式碼

arr.some(callback, thisArg)

some()和every()很像，some()對陣列中的每一項執行給定函式，如果該函式對某一項返回 true，則返回 true。
```
var numbers = [1,2,3,4,5,4,3,2,1];
var everyItem = numbers.some((item,index,array) => (item>2));
console.log(everyItem);	//true
複製程式碼
```

arr.filter(callback, thisArg)

對陣列中的每一項執行給定函式，返回該函式會返回 true 的項組成的陣列。

var numbers = [1,2,3,4,5,4,3,2,1];
var everyItem = numbers.filter((item,index,array) => (item>2));
console.log(numbers);	//(9) [1, 2, 3, 4, 5, 4, 3, 2, 1]
console.log(everyItem);	//(5) [3, 4, 5, 4, 3]
複製程式碼

arr.forEach(callback)

對陣列中的每一項執行給定函式，這個方法沒有返回值。本質上與使用 for 迴圈迭代陣列一樣。

var numbers = [1,2,3,4,5,4,3,2,1];
var everyItem = numbers.forEach((item,index,array) => {   
    // 執行某些操作
});
複製程式碼

arr.map(callback)

對陣列中的每一項執行給定函式，返回每次函式呼叫組成的陣列。

var numbers = [1,2,3,4,5,4,3,2,1];
var everyItem = numbers.map((item,index,array) => item*2);
console.log(numbers);	//(9) [1, 2, 3, 4, 5, 4, 3, 2, 1]
console.log(everyItem);	//(9) [2, 4, 6, 8, 10, 8, 6, 4, 2]
複製程式碼

arr.find(callback, thisArg)

該方法對陣列所有成員依次執行 callback 函式，直到找出第一個返回值為 true 的成員，然後返回該成員。如果沒有符合條件的成員，則返回 undefined。
```
[1, 4, -5, 10].find((v, i, arr) => v < 0);	// -5
複製程式碼
```
arr.findIndex(callback, thisArg)

該方法與 arr.find() 類似，對陣列中的成員依次執行 callback 函式，直至找到第一個返回值為 true 的成員，然後返回該成員的索引。如果沒有符合條件的成員，則返回 -1。
```
[1, 5, 10, 15].findIndex((v, i , arr)=>{
    return v > 9
})	//2
複製程式碼
```

arr.entries()、 arr.keys()、 arr.values()

這三個方法都返回一個新的Array Iterator物件，可以用for...of迴圈進行遍歷，區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) { console.log(index); }
// 0
// 1
 
for (let elem of ['a', 'b'].values()) { console.log(elem) ;}
// 'a'
// 'b'
 
for (let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem);}
// 0 "a"
// 1 "b"
 
var arr = ["a", "b";
var iterator = arr.entries(); // undefined
 
console.log(iterator); // Array Iterator {}
console.log(iterator.next().value);  // [0, "a"]
console.log(iterator.next().value);  // [1, "b"]
複製程式碼

歸併方法（reduce、 reduceRight）

陣列的reduce()和reduceRight()這兩個方法都會迭代陣列的所有項，然後構建一個最終返回的值。

他們都接收4個引數：1、前一個值；2、當前值；3、項的索引；4、陣列物件

arr.reduce(callback, intialValue)

reduce()方法從陣列的第一項開始，逐個遍歷到最後。

var values = [1,2,3,4,5];
var sum = values.reduce((prev,cur,index,array) => {
    console.log(prev,cur)
        // 1 2
	// 3 3
	// 6 4
	// 10 5
    return prev + cur
})
console.log(sum);	//15
複製程式碼

arr.reduceRight(callback,intiaValue)

reduceRight()方法從陣列的最後一項開始，逐個遍歷到第一項。

var values = [1,2,3,4,5];
var sum = values.reduceRight((prev,cur,index,array) => {
    console.log(prev,cur);	
        //5 4
	// 9 3
	// 12 2
	// 14 1
    return prev + cur
})
console.log(sum);	//15
複製程式碼

參考文章

如若發現文中紕漏請留言，歡迎大家糾錯，我們一起成長。

JavaScript陣列方法
2018-03-16
JavaScript陣列
JavaScript陣列小方法
2019-02-27
JavaScript陣列
javascript陣列常用方法
2018-05-22
JavaScript陣列
JavaScript陣列方法（splice）
2018-07-07
JavaScript陣列
JavaScript中對陣列和陣列API的認識
2018-05-11
JavaScript陣列API
JavaScript陣列去重方法
2022-05-09
JavaScript陣列
JavaScript陣列方法大全
2021-09-09
JavaScript陣列
javascript陣列方法總結
2018-08-22
JavaScript陣列
JavaScript 陣列常用方法(二)
2021-10-20
JavaScript陣列
JavaScript 陣列方法對比
2017-02-15
JavaScript陣列
JavaScript 陣列方法：綜合指南
2024-09-20
JavaScript陣列
JavaScript陣列常用方法解析和深層次js陣列扁平化
2022-05-18
JavaScript陣列JS
JavaScript 陣列
2019-04-09
JavaScript陣列
javascript中陣列的22種方法
2016-07-19
JavaScript陣列
JavaScript 的新陣列分組方法
2024-02-22
JavaScript陣列
全面介紹JavaScript陣列方法
2020-01-15
JavaScript陣列
JavaScript陣列方法總結（中）
2021-09-09
JavaScript陣列
JavaScript 陣列方法集合及示例！
2018-12-14
JavaScript陣列
JavaScript陣列幾個常用方法
2021-10-13
JavaScript陣列
javascript 偽陣列實現方法
2015-07-19
JavaScript陣列
Javascript陣列排序sort方法和自定義排序方法
2018-05-26
JavaScript陣列排序
陣列的方法
2020-12-09
陣列
js陣列和字串的方法
2017-12-12
JS陣列字串
陣列方法
2019-02-14
陣列
陣列--移除陣列中指定的元素，不改變原陣列和改變原陣列
2018-06-10
陣列
JavaScript陣列裡的slice和splice
2018-09-18
JavaScript陣列
javascript陣列和物件的區別
2017-04-10
JavaScript陣列物件
JavaScript 陣列slice()
2018-08-29
JavaScript陣列
JavaScript 陣列indexOf()
2018-08-28
JavaScript陣列Index
JavaScript 陣列values()
2018-08-30
JavaScript陣列
JavaScript 陣列fill()
2018-08-29
JavaScript陣列
JavaScript 陣列 slice()
2018-08-29
JavaScript陣列
JavaScript 陣列 fill()
2018-08-29
JavaScript陣列
JavaScript 陣列 lastIndexOf()
2018-08-30
JavaScript陣列ASTIndex
JavaScript 陣列 indexOf()
2018-08-28
JavaScript陣列Index
javascript陣列操作
2018-08-25
JavaScript陣列
JavaScript陣列（二）
2018-08-27
JavaScript陣列
Javascript 08 陣列
2018-09-03
JavaScript陣列