JavaScript基礎ES5/ES6常用陣列方法匯總

 一、Array陣列常用方法

1、堆疊方法（先進后出）

push()：在陣列的最后一項后追加值（引數：可以為多個值或陣列）

　　　　回傳：陣列的長度，改變了原陣列

var a=[1,2,3]
a.push(9);  //回傳陣列的長度 4，改變了原陣列
console.log(a) //[1,2,3,9]

pop()： 洗掉陣列的最后一項（無引數）

　　　   回傳：被洗掉的值，改變了原陣列

var a=[1,2,3,4];
a.pop()   // 回傳洗掉值 4，改變了原陣列
console.log(a)  // [1,2,3]

 2、佇列方法（先進先出）

unshift()：在陣列最前一項插入值（引數：可以為多個值或陣列）

　　　　   回傳：陣列的長度，插入的值為陣列，變為子陣列，改變了原陣列

var a=[1,2,3];　　　　　　　　　　　
a.unshift(4);  //回傳陣列的長度 4，改變了原陣列　　　　
console.log(a);  //[4,1,2,3]　　

shift()：洗掉陣列的最前一項（無引數）

　　　   回傳：洗掉的值，改變了原陣列

var a=[1,2,3,4];
a.shift()  //回傳被洗掉的值 1，改變了原陣列
console.log(a)  //[2,3,4]

3、操作方法

slice(start,end)：回傳從原陣列中start下標到end下標之間的項組成的新陣列 （引數：[start必選end可選)，只有一個引數時默認下標end為最后一項）

　　　　　　　　回傳：包含從下標 start（包括該元素） 到 下標end （不包括該元素）的一個新陣列，原陣列不變（類似復制）

var a=[1,2,3,4,5];
a.slice(2,4) //回傳[3,4]，原陣列不變
a.slice(0) //回傳[1,2,3,4,5]，原陣列不變
a.slice(3) //回傳[4,5] ，原陣列不變
console.log(a)  // [1,2,3,4,5]

splice(start,num,ele1,ele2...) 很強大的一個方法，start指 從下標start洗掉（包括start對應的元素），必選 ；num指 洗掉的個數，必選；ele1,ele2...代表插入的值，可選

　　　　　　　　　　　　　　回傳：洗掉的值，改變了原陣列（類似剪切）

var a=[1,2,3,4,5];
a.splice(1,2,"我是","插入的值")   //回傳洗掉的值 2,3，改變了原陣列
console.log(a)  //  [1,"我是"，"插入的值",4,5]

concat()：陣列和陣列的粘結成新的陣列（引數：可以為多個值或陣列）

　　　　　回傳：新的陣列，原陣列不變

var a=[1,2,3,4];
var b=[5,6,7,8];
var c=a.concat(b); //回傳[1,2,3,4,5,6,7,8]，原陣列不變
console.log(c); // [1,2,3,4,5,6,7,8] 

 4、排序方法

reverse()：將陣列反序 

  　　　　   回傳：新的反序陣列，也改變了原陣列

var a = [1,2,3,4,5]; 
var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1] ，改變了原陣列

sort()：按指定的引數對陣列進行排序（引數：可選，函式）默認按照 ASCII表排序 ，如果想按照其他標準進行排序，就需要提供比較函式，該函式要比較兩個值，然后回傳一個用于說明這兩個值的相對順序的數字，比較函式應該具有兩個引數 a 和 b，其回傳值如下：

• 若 a 小于 b，在排序后的陣列中 a 應該出現在 b 之前，則回傳一個小于 0 的值，
• 若 a 等于 b，則回傳 0，
• 若 a 大于 b，則回傳一個大于 0 的值，

　　　回傳：排序后的陣列 ，改變了原陣列

var a=[1,2,3,12,13];
a.sort()  //回傳 [1,12,13,2,3]
//如果按照正常邏輯排序 ：
a.sort(function(a,b){
   return a-b;
})    //[1,2,3,12,13]

5、拼接方法

join():  改變陣列中拼接的符號，并轉化為字串（引數："拼接符號"）

　　　  回傳：拼接而成的字串，原陣列不變

var a=[1,2,"字串",false,undefined,null];
b=a.join("++");  // 回傳 1++2++字串++false++++ ;原陣列不變
console.log(b);   //undefined null 自動過濾掉了

6、迭代（查找、遍歷）方法

（1）查找方法：

indexOf(item,start)：該方法搜索指定元素值位置，并回傳下標，

　　　　　　引數：item是要查找的值，start是指你要從哪里開始找（該引數可選），ps:start是可以取負值的，舉個栗子indexOf(x,-5)表示從倒數第6個開始（因為倒數第一個是0嘛），一直找到正序的第0個，

                      回傳：如果多次出現，則回傳第一次出現的下標（其實找到了就不會接著往后找了）；如果沒出現，回傳 -1，

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple"); //回傳 0，原陣列不變
console.log(a); //0

lastIndexOf(item,start)：與上面方法用法一樣，不同的地方是，他是逆行，是從結尾開始找的，start也能指定負值，如果start取-5，則表明從下標為5的地方開始，一直往前找，

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");//回傳2，原陣列不變
console.log(a);//2

find()：ES6新增，查找通過測驗（自定義函式內判斷，通常配合ES6箭頭函式）的陣列的第一個元素的值，引數：（自定義函式：函式的引數：（專案值^（必選），專案索引，陣列本身））

　　　  回傳：查找到的第一個值，，原陣列不變

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction); //回傳 25，原陣列不變
function myFunction(value, index, array) {
  return value > 18;
}

findIndex()：與上面方法用法一樣，不同的地方是查找的是第一個下標

　　　　　　回傳：查找到的第一個值的下標，查找不到則回傳-1，原陣列不變

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);//回傳3，原陣列不變
function myFunction(value, index, array) {
  return value > 18;
}

（2）遍歷方法：

　　以下五種方法都接收兩個引數：要在每一項上運行的函式和（可選的）運行該函式的作用域物件——影響this的值

　　傳入這些方法中的函式會接收三個引數：陣列項的值、該項在陣列中的下標和陣列物件本身， 根據使用的方法不同，這個函式執行后的回傳值可能會也可能不會影響方法的回傳值， 以下是這五個迭代方法的作用，

every(function(item,index,array){})：對陣列中的每一項運行給定函式，如果該函式對每一項都回傳 true，則回傳 true，原陣列不變

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyResult = numbers.every(function(item, index, array){
return (item > 3);
})
console.log(everyResult); //false

some(function(item,index,array){})：對陣列的每一項運行給定函式，如果該函式對任一項回傳 true，則回傳 true，原陣列不變

var someResult = numbers.some(function(item, index, array) {
return (item > 3);
})
console.log(someResult); //true

filter(function(item,index,array){})：對陣列中的每一項運行給定函式，回傳該函式呼叫結果值為true的項組成新的陣列，原陣列不變

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var filterResult = numbers.filter(function(item, index, array) {
return (item > 3);
})
console.log(filterResult); //[4, 5, 4]，原陣列不變

map(function(item,index,array){})：對陣列中的每一項運行給定函式，回傳每次該函式呼叫的結果組成的陣列，原陣列不變

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var mapResult = numbers.map(function(item, index, array) {
return item * 2;
})
console.log(mapResult); //[2, 4, 6, 8, 10, 8, 6, 4, 2]

forEach(function(item,index,array){})：對陣列中的每一項運行給定的函式，該方法沒有回傳值，本質上與使用for回圈迭代陣列一樣，原陣列不變

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var copy = [];
var Result = numbers.forEach(function(item, index, array) {
  copy.push(item - 1) //執行某些操作
})
console.log(numbers); //[1, 2, 3, 4, 5, 4, 3, 2, 1] 原陣列不變
console.log(copy); //[0, 1, 2, 3, 4, 3, 2, 1, 0] 
console.log(Result); //undefined 無回傳值

reduce(function(prev,item,index,array){},init)：對陣列中的每一項運行給定函式，回傳每次該函式呼叫的結果組成的陣列，原陣列不變

　　　　　　　　　　　　　　　　　　　　　　prev：必需，初始值, 或者計算結束后的回傳值；init：可選，傳遞給函式的初始值，需要事先賦值

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var init=10;
var Result = numbers.reduce(function(prev, item, index, array) {
  return prev + item
},init)
console.log(numbers); //[1, 2, 3, 4, 5, 4, 3, 2, 1] 原陣列不變
console.log(Result); //回傳 35

7、轉換方法（Array、Boolean、Date、Number等物件通用方法）詳見區別：https://www.cnblogs.com/niulina/p/5699031.html

toString()：改變陣列中拼接的符號，并轉化為字串（引數："拼接符號"）

　　　  　　回傳：拼接而成的字串，原陣列不變

var a = [1, 2, 3, 4, 5];
    var b = a.toString();//回傳 1,2,3,4,5 ;原陣列不變
    console.log(a); //[1,2,3,4,5]
    console.log(b); //1,2,3,4,5

toLocaleString()：改變陣列中拼接的符號，并轉化為字串（引數："拼接符號"）

　　　  　　　　    回傳：拼接而成的字串，原陣列不變

var a = [1, 2, 3, 4, 5];
    var b = a.toLocaleString();//回傳 1,2,3,4,5 ;原陣列不變
    console.log(a); //[1,2,3,4,5]
    console.log(b); //1,2,3,4,5

valueOf()：通常由 JavaScript 在后臺自動進行呼叫，而不是顯式地處于代碼中

標籤：其他

上一篇：一勞永逸，解決基于 keep-alive 的后臺多級路由快取問題

下一篇：js檔案替換