JavaScript基礎ES5/ES6經常使用數組方法彙總

 1、Array數組經常使用方法

一、棧方法（先進後出）

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]

---

 二、隊列方法（先進先出）

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]

---

三、操做方法

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] 

---

 四、排序方法

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]

---

 

五、拼接方法

join():  改變數組中拼接的符號，並轉化爲字符串（參數："拼接符號"）

　　　  返回：拼接而成的字符串，原數組不變

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

---

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

（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

---

 

七、轉換方法（Array、Boolean、Date、Number等對象通用方法）詳見區別：http://www.javashuo.com/article/p-fthvgxvs-cs.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 在後臺自動進行調用，而不是顯式地處於代碼中