JavaScript中創建數組有兩種方式

（一）使用 Array 構造函數：

var arr1 = new Array(); //創建一個空數組 var arr2 = new Array(20); // 創建一個包含20項的數組 var arr3 = new Array(“lily”,“lucy”,“Tom”); // 創建一個包含3個字符串的數組

（二）var 創建數組

var arr4 = []; //創建一個空數組 var arr5 = [20]; // 創建一個包含1項的數組 var arr6 = [“lily”,“lucy”,“Tom”]; // 創建一個包含3個字符串的數組

一、JavaScript 常用數組方法

順序方法名功能返回值是否改變原數組版本

1	push()	(在結尾) 向數組添加一或多個元素	返回新數組長度	Y	ES5-
2	unshift()	(在開頭)向數組添加一或多個元素	返回新數組長度	Y	ES5-
3	pop()	刪除數組的最后一位	返回被刪除的數據	Y	ES5-
4	shift()	刪除首個數組元素，并把所有其他元素“移位”到更低的索引	返回被刪除的數據	Y	ES5-
5	remove()	反轉數組中的元素	返回反轉后數組	Y	ES5-
6	sort()	以字母順序（字符串Unicode碼點）對數組進行排序	返回新數組	Y	ES5-
7	splice()	在指定位置刪除指定個數元素再增加任意個數元素 （實現數組任意位置的增刪改)	返回刪除的數據	Y	ES5-
8	concat()	通過合并（連接）現有數組來創建一個新數組	通過合并（連接）現有數組來創建一個新數組	N	ES5-
9	join()	用特定的字符，將數組拼接形成字符串（默認""）	返回拼接后的新數組	N	ES5-
10	slipe()	裁切指定位置的數組	被裁切的元素形成新的數組	N	ES5-
11	toString()	將數組轉換為字符串	新數組	N	ES5-
12	valueOf()	查詢數組原始值	數組的原始值	N	ES5-
13	indexOf()	查詢某個元素在數組中第一次出現的位置	存在該元素，返回下邊，不存在，返回-1	N	ES5-
14	lastIdexOf()	方向查詢數組某個元素在數組中第一次出現的位置	存在該元素,返回下標,不存在 返回 -1	N	ES5-
15	forEach()	(迭代)遍歷數組，每次循環中執行傳入的回調函數	無（undefined）	N	ES5-
16	map()	(迭代)遍歷數組，每次循環時執行傳入的回調函數，根據回調函數的返回值，生成一個新的數組	有/自定義	N	ES5-
17	filter()	(迭代)遍歷數組，每次循環時執行傳入的回調函數，回調函數返回一個條件，把條件的元素篩選出來放到新的數組中	滿足條件的元素組成新的數組	N	ES5-
18	every()	(迭代) 判斷數組中所有的元素是否滿足某個條件	全都滿足返回true 只要有一個不滿足 返回false	N	ES5-
19	some()	(迭代) 判斷數組中是否存在,滿足某個條件的元素	只要有一個元素滿足條件就返回true,都不滿足返回false	N	ES5-
20	reduce()	(歸并)遍歷數組, 每次循環時執行傳入的回調函數,回調函數會返回一個值,將該值作為初始值prev,傳入到下一次函數中	最終操作的結果	N	ES5-
21	reduceRight()	(歸并)用法同reduce,只不過是從右向左	同reduce	N	ES5-
22	includes()	判斷一個數組是否包含一個指定的值.	是返回 true，否則false	N	ES6
23	Array.from()	接收偽數組,返回對應的真數組	對應的真數組	N	ES6
24	find()	遍歷數組,執行回調函數,回調函數執行一個條件,返回滿足條件的第一個元素,不存在返回undefined	滿足條件第一個元素/否則返回undefined	N	ES6
25	findIndex()	遍歷數組,執行回調函數,回調函數接受一個條件,返回滿足條件的第一個元素下標,不存在返回-1	滿足條件第一個元素下標,不存在=>-1	N	ES6
26	fill()	用給定值填充一個數組	新數組	N	ES6
27	flat()	用于將嵌套的數組“拉平”，變成一維的數組。	返回一個新數組	N	ES6
28	flatMap()	flat()和map()的組合版 , 先通過map()返回一個新數組,再將數組拉平( 只能拉平一次 )	返回新數組	N	ES6

二、 方法詳解

1、push()和pop()

push(): 可以接收任意數量的參數，把它們逐個添加到數組末尾，并返回修改后數組的長度。

pop()：數組末尾移除最后一項，減少數組的 length 值，然后返回移除的項。

var arr = [“Lily”,“lucy”,“Tom”]; var count = arr.push(“Jack”,“Sean”); console.log(count); // 5 console.log(arr); // [“Lily”, “lucy”, “Tom”, “Jack”, “Sean”]var item = arr.pop(); console.log(item); // Sean console.log(arr); // [“Lily”, “lucy”, “Tom”, “Jack”]

2、shift() 和 unshift()

shift()：刪除原數組第一項，并返回刪除元素的值；如果數組為空則返回undefined 。

unshift：將參數添加到原數組開頭，并返回數組的長度 。

這組方法和上面的push()和pop()方法正好對應，一個是操作數組的開頭，一個是操作數組的結尾。

var arr = [1, 2, "c"];var rel = arr.unshift("A", "B");console.log(arr); // [ "A", "B",1, 2, "c"]console.log(rel); // 5 (數組長度)var rel = arr.shift();console.log(arr); // [2, "c"]console.log(rel); // 1

3、reverse()

reverse()：反轉數組項的順序。

var arr = [13, 24, 51, 3]; console.log(arr.reverse()); //[3, 51, 24, 13] console.log(arr); //3, 51, 24, 13

4、sort()

sort() 方法是最強大的數組方法之一。
sort(); 方法用于對數組的元素進行排序,并返回數組。默認排序順序是根據字符串Unicode碼點。

例1：

var arr1 = [10, 1, 5, 2, 3];arr1.sort();console.log(arr1);

打印結果：

結果并不是我們想要的排序結果，因為它是根據unicode編碼來排序的,這也顯示了其不穩定性。

語法： arr.sort(function(a,b))

參數： function可選。用來指定按某種順序進行排列的函數。如果省略，元素按照轉換為的字符串的諸個字符的Unicode位點進行排序。

具體用法：

• 如果 function(a, b) {return: a - b;} ，=> a - b > 0 那么 a 會被排列到 b 之前;
  (從小到大排序)
• 如果 function(a, b) {return: b - a;} ，=> b - a > 0 那么b會被排列到 a 之前；
  (從大到小排序)

那么我們就可以運用以上所說的function(a,b)去完成對數字的排序:

var arr = [10, 1, 5, 2, 3];arr.sort(function (a, b) {return a - b;});console.log(arr);

打印結果：

元素為對象時（可按其中某個屬性來排序）：

var arr1 = [{ name: "張三", age: "38" },{ name: "李四", age: "28" },{ name: "王五", age: "48" },];arr1.sort(function (a, b) {console.log(a, b);return b.age - a.age;});console.log(arr1);

打印結果：（按 age 排序（大到小））

5、splice()

功能：向數組中添加，或從數組刪除，或替換數組中的元素，然后返回被刪除/替換的元素。可以實現數組的增刪改；

語法： arrayObject.splice(index,howmany,item1,…,itemX)

參數：

參數描述

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

例，刪除arr()中第三個元素并添加 "add1", "add2"元素

var arr = ["a", "b", "c", 2, 3, 6]; var rel = arr.splice(2, 1, "add1", "add2"); console.log(arr); //原數組 console.log(rel); //新數組

打印結果：

6、concat()

concat() ：將參數添加到原數組中。這個方法會先創建當前數組一個副本，然后將接收到的參數添加到這個副本的末尾，最后返回新構建的數組。在沒有給 concat()方法傳遞參數的情況下，它只是復制當前數組并返回副本。

功能： 數組的拼接(將多個數組或元素拼接形成一個新的數組),不改變原數組
如果拼接的是數組 則將數組展開,之后將數組中的每一個元素放到新數組中.
如果是其他類型, 直接放到新數組中
另外，如果不給該方法任何參數，將返回一個和原數組一樣的數組（復制數組）

var arr = [1,3,5,7]; var arrCopy = arr.concat(9,[11,13]); console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13] console.log(arr); // 1, 3, 5, 7

從上面測試結果可以發現：傳入的不是數組，則直接把參數添加到數組后面，如果傳入的是數組，則將數組中的各個項添加到數組中。但是如果傳入的是一個二維數組呢？

var arrCopy2 = arr.concat([9,[11,13]]); console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]] console.log(arrCopy2[5]); //[11, 13]

上述代碼中，arrCopy2數組的第五項是一個包含兩項的數組，也就是說concat方法只能將傳入數組中的每一項添加到數組中，如果傳入數組中有些項是數組，那么也會把這一數組項當作一項添加到arrCopy2中。

7、join()

通過join()方法可以實現重復字符串，只需傳入字符串以及重復的次數，就能返回重復后的字符串

函數如下：

function repeatString(str, n) { return new Array(n + 1).join(str); } console.log(repeatString(“abc”, 3)); // abcabcabc console.log(repeatString(“Hi”, 5)); // HiHiHiHiHi

8、slice()

slice()：返回從原數組中指定開始下標到結束下標之間的項組成的新數組。

slice()：方法可以接受一或兩個參數，即要返回項的起始和結束位置。在只有一個參數的情況下，

slice()：方法返回從該參數指定位置開始到當前數組末尾的所有項。

如果有兩個參數，該方法返回起始和結束位置之間的項——但不包括結束位置的項。

語法： arr[].slice(startIndex,endIndex)

參數

參數描述

startIndex	起始下標 默認值 0
endIndex	終止下標 默認值 length,可以接收負數,(倒著數)

注意！起始下標和終止下標的區間是 左閉右開 [ a ，b) 能取到起始，取不到終止

var arr = [1,3,5,7,9,11]; var arrCopy = arr.slice(1); var arrCopy2 = arr.slice(1,4); var arrCopy3 = arr.slice(1,-2); var arrCopy4 = arr.slice(-4,-1); console.log(arr); //1, 3, 5, 7, 9, 11 console.log(arrCopy); //[3, 5, 7, 9, 11] console.log(arrCopy2); //[3, 5, 7] console.log(arrCopy3); //[3, 5, 7] console.log(arrCopy4); //[5, 7, 9]

arrCopy：只設置了一個參數，也就是起始下標為1，所以返回的數組為下標1（包括下標1）開始到數組最后。

arrCopy2：設置了兩個參數，返回起始下標（包括1）開始到終止下標（不包括4）的子數組。

arrCopy3：設置了兩個參數，終止下標為負數，當出現負數時，將負數加上數組長度的值（6）來替換該位置的數，因此就是從1開始到4（不包括）的子數組。

arrCopy4：中兩個參數都是負數，所以都加上數組長度6轉換成正數，因此相當于slice(2,5)。

9、toString()

功能： 直接將數組轉換為字符串,并且返回轉換后的新數組,不改變原數組,與join();方法不添加任何參數 相同.

var list = ["a", "b", "c", "d"];var rel = list.toString();console.log(rel); // a,b,c,d (字符串類型)

10、valueOf()

功能： 返回數組的原始值（一般情況下其實就是數組自身）

var list = [1, 2, 3, 4];var rel = list.valueOf();console.log(list); // [1, 2, 3, 4]console.log(rel); // [1, 2, 3, 4]

11、indexOf()和 lastIndexOf()

indexOf()：接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。其中， 從數組的開頭（位置 0）開始向后查找。

功能: 查詢某個元素在數組中第一次出現的位置 存在該元素,返回下標,不存在 返回 -1 (可以通過返回值 變相的判斷是否存在該元素)

var list = [1, 2, 3, 4];var index = list.indexOf(4); //3var index = list.indexOf("4"); //-1console.log(index);

lastIndexOf：接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。其中， 從數組的末尾開始向前查找。

功能: 查詢某個元素在數組中最后一次出現的位置 (或者理解為反向查詢第一次出現的位置) 存在該元素,返回下標,不存在 返回 -1 (可以通過返回值 變相的判斷是否存在該元素)

var list = [1, 2, 3, 4];var index = list.lastIndexOf(4); //3var index = list.lastIndexOf("4"); //-1console.log(index);

12、forEach()

forEach()：對數組進行遍歷循環，對數組中的每一項運行給定函數。這個方法沒有返回值。參數都是function類型，默認有傳參，參數分別為：遍歷的數組內容；第對應的數組索引，數組本身。

語法:

arr[].forEach(function(value,index,array){//do something })

參數:

參數描述

item	每次循環的當前元素
index	當前項的索引
array	原始數組

數組中有幾項，那么傳遞進去的匿名回調函數就需要執行幾次；

實例1.

var list = [32, 93, 77, 53, 38, 87];var res = list.forEach(function (item, index, array) {console.log(item, index, array);});console.log(res);

打印結果：

實例2: 數組中元素的和

var list = [32, 93, 77, 53, 38, 87];var sum = 0;list.forEach(function (item) {console.log(item);sum += item;});console.log(sum);

打印結果：

13、map();

map()：指“映射”，對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組
。
功能: 遍歷數組, 每次循環時執行傳入的回調函數,根據回調函數的返回值,生成一個新的數組 ,
同forEach() 方法,但是map()方法有返回值,可以return出來;

語法:

arr[].map(function(item,index,array){//do somethingreturn XXX })

參數：

參數描述

item	每次循環的當前元素
index	當前項的索引
array	原始數組

示例：

下面代碼利用map方法實現數組中每個數求平方。

var arr = [1, 2, 3, 4, 5]; var arr2 = arr.map(function(item){ return item*item; }); console.log(arr2); //[1, 4, 9, 16, 25] var list = [32, 93, 77, 53, 38, 87]; var res = list.map(function (item, index, array) {return item + 5 * 2; }); console.log("原數組", list); console.log("新數組", res);

打印結果：

14、filter()

filter()：“過濾”功能，數組中的每一項運行給定函數，返回滿足過濾條件組成的數組。

功能： 遍歷數組, 每次循環時執行傳入的回調函數,回調函數返回一個條件,把滿足條件的元素篩選出來放到新數組中.

語法:

arr[].filter(function(item,index,array){//do somethingreturn XXX //條件 })

參數：

參數描述

item	每次循環的當前元素
index	當前項的索引
array	原始數組

示例：

var list = [32, 93, 77, 53, 38, 87];var resList = list.filter(function (item, index, array) {return item >= 60; // true || false});console.log(resList);

打印結果：

15、every()

every()：判斷數組中每一項都是否滿足條件，只有所有項都滿足條件，才會返回true。

功能：遍歷數組, 每次循環時執行傳入的回調函數,回調函數返回一個條件,全都滿足返回true 只要有一個不滿足 返回false => 判斷數組中所有的元素是否滿足某個條件

示例：

var list = [32, 93, 77, 53, 38, 87];var result = list.every(function (item, index, array) {console.log(item, index, array);return item >= 50;});console.log(result);

打印結果：false

16、some()

some()：判斷數組中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。

功能： 遍歷數組, 每次循環時執行傳入的回調函數,回調函數返回一個條件,只要有一個元素滿足條件就返回true,都不滿足返回false => 判斷數組中是否存在,滿足某個條件的元素

示例：

var list = [32, 93, 77, 53, 38, 87];var result = list.some(function (item, index, array) {return item >= 50;});console.log(result);

打印結果：true

17、reduce()和 reduceRight()

這兩個方法都會實現迭代數組的所有項，然后構建一個最終返回的值。reduce()方法從數組的第一項開始，逐個遍歷到最后。而 reduceRight()則從數組的最后一項開始，向前遍歷到第一項。

這兩個方法都接收兩個參數：一個在每一項上調用的函數和（可選的）作為歸并基礎的初始值。

傳給 reduce()和 reduceRight()的函數接收 4 個參數：前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會作為第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數就是數組的第二項。

reduce()

功能:：遍歷數組, 每次循環時執行傳入的回調函數,回調函數會返回一個值,將該值作為初始值prev,傳入到下一次函數中, 返回最終操作的結果;

語法： arr.reduce(function(prev,item,index,array){})

參數:

參數描述

prev	初始值 (類似求和是 sum=0) 可以設置初始值( 參數),如果不設置初始值默認是數組中的第一個元素,遍歷時從第二個元素開始遍歷
item	每次循環的當前元素
index	每次循環的當前下標
array	原數組

實例1: 不設置初始值的累加

var arr = [2, 3, 4, 5];var sum = arr.reduce(function (prev, item, index, array) {console.log(prev, item, index, array);return prev + item;});console.log(arr, sum);

打印結果：

解析:

第一次循環:

prev = 2 ; item(當前循環元素) = 3 ; index(當前循環元素下標) = 1;原數組 =array;

因為沒有給prev設置初始值,所以prev 的值為數組中第一個元素,遍歷從第二個元素開始

第二次循環:

prev = 5; item(當前循環元素) = 4 ; index(當前循環元素下標) = 2;原數組 =array; prev = 2+3(上次循環的元素) = 5 ;

最終prev = 14 ; arr中有四個元素 共循環三次;(因為沒設置初始值跳過第一次循環prev默認等于第一個值)

實例2 設置初始值的累加

var arr = [2, 3, 4, 5]; var sum = arr.reduce(function (prev, item, index, array) {console.log(prev, item, index, array);return prev + item; }, 0); console.log(arr, sum);

打印結果：

解析:

可以看到與上一次設置初始值相比,最終的結果相同,但是多循環的一次,因為設置了prev的初始值為0,所以循環遍歷從第一個元素開始,而不設置初始值,循環從第一個元素開始.

reduceRight();

功能: 用法同reduce,只不過是從右向左

18、includes()

功能: 用來判斷一個數組是否包含一個指定的值，如果是返回 true，否則false。

實例

let site = ['runoob', 'google', 'taobao'];site.includes('runoob'); // true site.includes('baidu'); // false

19、Array.from()

功能: 將一個類數組對象或者可遍歷對象轉換成一個真正的數組

注意： 將一個類數組對象轉換為一個真正的數組，必須具備以下條件：

該 偽數組 / 類數組 對象必須具有length屬性，用于指定數組的長度。如果沒有length屬性，那么轉換后的數組是一個空數組。

該 偽數組 / 類數組 對象的屬性名必須為數值型或字符串型的數字

代碼演示：

var all = {0: "張飛",1: "28",2: "男",3: ["率土", "鴻圖", "三戰"],length: 4,};var list = Array.from(all);console.log(all);console.log(list, Array.isArray(list));

打印結果：

20、find()

功能: 遍歷數組 每次循環 執行回調函數,回調函數接受一個條件 返回滿足條件的第一個元素,不存在則返回undefined

參數

參數選項描述

item	必選	循環當前元素
index	可選	循環當前下標
array	可選	當前元素所屬的數組對象

實例:

var list = [55, 66, 77, 88, 99, 100];var index = list.find(function (item, index, array) {console.log(item, index, array);return item > 60;});console.log(index); //66

打印結果：
為66,每次循環判斷當前元素是否滿足條件,如果滿足直接跳出循環,返回第一個滿足條件的元素

21、findIndex()

功能 ：遍歷數組,執行回調函數,回調函數接受一個條件,返回滿足條件的第一個元素下標,不存在則返回-1

參數：

參數選項描述

item	必選	循環當前元素
index	可選	循環當前下標
array	可選	當前元素所屬的數組對象

注意：
findIndex();和indexOf();不同 (剛接觸時乍一看和indexOf()怎么一模一樣,仔細看了下才發現大有不同)

indexOf是傳入一個值.找到了也是返回索引,沒有找到也是返回-1 ,屬于ES5

findIndex是傳入一個測試條件,也就是函數,找到了返回當前項索引,沒有找到返回-1. 屬于ES6

實例：

var list = [55, 66, 77, 88, 99, 100];var index = list.findIndex(function (item, index, array) {console.log(item, index, array);return item > 60;});console.log(index); // 1

打印結果：

為1, 循環步驟和find()方法一樣,但是它返回的是下標,find()返回的是滿足條件的元素

22、fill()

功能： 用給定值填充一個數組

參數：

參數選項描述

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

實例：

var result = ["a", "b", "c"].fill("填充", 1, 2);

打印結果：

23、flat()

功能： 用于將嵌套的數組"拉平",變成一維的數組。該方法返回一個新數組，對原數據沒有影響。

注意： 默認拉平一次 如果想自定義拉平此處 需要手動傳參 ,如果想全都拉平 傳 Infinity

var list = [1, 2, [3, 4, [5]]];var arr = list.flat(); // 默認拉平一次console.log("拉平一次", arr);var arr = list.flat(2); // 拉平2次console.log("拉平兩次", arr);

打印結果：

24、flatMap()

功能 ：flat()和map()的組合版 , 先通過map()返回一個新數組,再將數組拉平( 只能拉平一次 )

var list = [55, 66, 77, 88, 99, 100];var newArr = list.map(function (item, index) {return [item, index];});console.log("Map方法:", newArr);var newArr = list.flatMap(function (item, index) {return [item, index];});console.log("flatMap方法:", newArr);

打印結果：

總結

以上是生活随笔為你收集整理的JS----JavaScript数组方法及总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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