1. 程式人生 > 實用技巧 >Array陣列ES5/ES6常用方法

Array陣列ES5/ES6常用方法

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];

ar 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在後臺自動進行呼叫,而不是顯式地處於程式碼中