javascript
JS----JavaScript数组方法及总结
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); // 13、reverse()
reverse():反轉數組項的順序。
var arr = [13, 24, 51, 3]; console.log(arr.reverse()); //[3, 51, 24, 13] console.log(arr); //3, 51, 24, 134、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 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)); // HiHiHiHiHi8、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: 數組中元素的和
打印結果:
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'); // false19、Array.from()
功能: 將一個類數組對象或者可遍歷對象轉換成一個真正的數組
注意: 將一個類數組對象轉換為一個真正的數組,必須具備以下條件:
代碼演示:
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数组方法及总结的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JS----深拷贝和浅拷贝
- 下一篇: iOS 13.4 测试版描述文件升级方法