JS陣列方法總結

申浩發表於2019-03-03
JS陣列

1.棧方法：push()和pop()

push()可以接受任意數量的引數，把它們新增到陣列末尾，並返回陣列的length值。
複製程式碼
const numbers = [1,2,3,4];
const pushResult = numbers.push(5);
alert(pushResult); //5
複製程式碼
pop()方法從陣列末尾移除最後一項，減少陣列的length值，並返回被刪除的項。
複製程式碼
const popResult = numbers.pop();
alert(popResult) //5
複製程式碼
這兩個方法可以使陣列表現得像棧（後進先出LIFO）一樣，最後被新增的項，最先被移除。
複製程式碼

2.佇列方法：shift()和unshift()

shift()方法與push()相反，它接受任意數量的引數，把它們新增到資料開頭部分，並返回陣列的length值。
複製程式碼
const numbers = [1,2,3,4];
const shiftResult = numbers.shift(-1,0);
alert(shiftResult); //6
複製程式碼
unshift()方法移除陣列的第一項，返回被刪除的項。
複製程式碼
const unshiftResult = numbers.unshift();
alert(unshiftResult); //-1
複製程式碼
使用shift()與push()方法，可以全JS中的資料表現的像佇列（先進先出FIFO）一樣，在陣列末尾新增項，在陣列形頭移除項。
複製程式碼

3.重排序方法：reverse()和sort()

reverse()方法會反轉陣列項的順序，但是不夠靈活，所以有了下面的方法。
sort()方法按升序排列陣列項，sort()方法會對陣列中的第一項呼叫toString()方法，然後對陣列項進行排序，所以會出現下面的情況：
複製程式碼
var values = [0,1,3,12,15];
values.sort()
alert(values) //0,1,12,15,3
複製程式碼

可以看到並不是我們想要的結果，因為它是按照字串來比較的，並不是數字，所以在很多情況下，這並不是最佳的方案，因此sort()可以接受一個比較函式來做為引數。

function compare(value1,value2) {
    if (value1 < value2) {
        reuturn 1
    } else if (value1 > value2) {
        return -1
    } else {
        return 0
    }
}
var values = [0,1,3,12,15];
values.sort(compare)
alert(values) // 0,1,3,12,15
複製程式碼

數值保持了正確的升序，當然也通過改變compare函式裡的返回值來產生降序的結果。

4.操作方法：concat()、slice()、splice()

concat()方法基於當前陣列項，建立一個新的陣列，在沒有給concat()傳參的情況下，複製當前的陣列並返回當前陣列的副本。如果給concat()傳一個或者多個陣列，則會將這些陣列中的每一項都新增到結果陣列中，如果入參不是陣列，也會被新增到結果陣列裡。
複製程式碼
const colors = ['red', 'blue', 'green'];
const conlors2 = colors.concat();
const conlors3 = colors.concat('yellow', ['black', 'brown'], {a:1})
alert(conlors2) //red,blue,green
console.log(colors3) //["red", "blue", "green", "yellow", "black", "brown", {…}]
複製程式碼

concat()方法不會改變原陣列。 slice()方法可以基於當前陣列中一項或者多項建立一個新的陣列。它可以接受一個或者兩個引數，當傳一個引數的時候，slice()方法返回從該引數開始到陣列末尾的所有項，如果傳入兩個引數，則返回從第一個引數開始，到第二個引數結尾的陣列，但是不包括結束位置的項。

const colors = ['red', 'green', 'blue', 'yellow'];
const colors2 = colors.slice(1);
const colors3 = colors.slice(1,3);

alert(colors2); //green
alert(colors3); //green,blue 
複製程式碼

如果傳入引數為負數，則用該陣列的長度加上該引數來確定相應的位置。

const colors4 = colors.slice(-1);
const colors5 = colors.slice(-3,-1)
alert(colors4) // yellow
alert(colors5) // green,blue
複製程式碼

如果結束位置小於起始位置，則返回空陣列

spice()方法，它有很多種用法，主要用途是在陣列的中部插入、刪除、替換項，使用方式有以下3種： (1) 刪除：可以刪除任意數量的項，需傳入兩個引數，第一個引數為要刪除的第一項的位置，及要刪除的數量，並返回被刪除的項。

const colors = ['red', 'green', 'yellow', 'blue'];
colors.splice(0,2);
alert(colors) //yellow,blue
複製程式碼
(2)插入：可以在陣列中插入任意數量的項，需傳入三個引數，第一個引數是要插入項的起始位置，當只是插入資料時，第二個引數應為0，第三個引數甚至更多的引數是要向陣列中插入的資料。
複製程式碼
colors.splice(1,0,'red')
alert(colors) //yellow,red,blue
複製程式碼
(3)替換：可以將已有的項替換，第一個引數為起始位置，第二個引數是要刪除的項數，第三或者以後的引數為替換以後的資料
複製程式碼
colors.splice(0,2,'black','green','brown')
alert(colors) //black,green,brown,blue
複製程式碼

5.位置方法：indexOf()、lastIndexOf()

indexOf()和lastIndexOf()方法都接收兩個引數，第一個引數為要在陣列中查詢的項，和要陣列中查詢時起始位置的索引（可選），返回值為要查詢的值在陣列中的索引位置，如果不存在返回-1，不同的是indexOf()預設是從索引位置為0的地方開始查詢 ，而lastIndexOf()與前者正好相反。

const colors = ['red','blue','green','yellow'];
alert(colors.indexOf('green')) //2
alert(colors.lastIndexOf('green')) //1
複製程式碼

如果查詢到第一個符合條件的值時，就會停止查詢，所以可以設定第二個引數，來規定從哪個索引開始查詢

6.迭代方法：every()、filter()、forEach()、map()、some()

ES5中定義了5個迭代方法，它們都接受兩個引數，第一個引數是要在每一項上執行的函式，第二個引數（可選）是執行該函式的作用域物件——影響this的值。傳入這些方法的函式可以接受3個引數：陣列項的值、該項在陣列中的索引值、陣列物件本身。 every():該方法對陣列中的每一項執行給定的函式，如果每一項都返回true,則返回true.

const numbers = [1,2,3,4,5,6,7];
const everyResult = numbers.every(function(value, index, array){
    return (value > 2);
});
alert(everyResult); //false
複製程式碼

some():該方法與every()非常相似，some()方法只要對傳入的函式對陣列中的某一項返回true，則該方法返回true。

const someResult = numbers.some(function(value, index, array){
    return (value > 2);
})
alert(someResult); //true
複製程式碼

filter()：對陣列中的每一項執行給定的函式，返回該函式會返回true的項所組成的陣列。

const filterResult = numbers.filter(function(value, index, array){
    return (value > 2);
});
alert(filterResult); //3,4,5,6,7
複製程式碼

map():該方法會返回一個新的陣列，陣列中的每一項都是在原陣列中對應項上執行傳入函式的結果。

const mapResult = numbers.map(function(value, index, array){
    return (value + 1);
})
alert(mapResult); //2,3,4,5,6,7,8
複製程式碼

forEach():該方法沒有返回值，會改變原陣列的值，它是對陣列中的每一項執行傳入 的函式。

nubers.forEach(function(value, index, array){
    return (value * 2);
})
alert(numbers); //4,6,8,10,12,14,16
複製程式碼

7.縮小方法:reduce()、reduceRight()

這兩個陣列都會迭代陣列中的每一項，然後返回一個最終的值，不同的是reduce()方法從第一項開始遍歷，而reduceRight()與前者正好相反。這兩個方法都接收兩個引數，一個是在每一項上呼叫的函式，第二個引數是作為縮小基礎的初始值，而在每一項上呼叫的函式可以接受4個引數：前一個值、當前值、項的索引、陣列物件。函式的返回值會作為第一個引數傳給下一項。 第一次迭代發生在陣列的第二項上，而第一個引數就是陣列的第一項。

const reduceResult = numbers.reduce(function(prev, value, index, array){
    return prev + value;    
});
const reduceRightResult = numbers.reduce(function(prev, value, index, array){
    return prev + value;    
});
alert(reduceResult); //28
alert(reduceRightResult); //28
複製程式碼

8.總結

不會影響原陣列的方法： concat()、every()、some()、filter()、indexOf()、map()、slice() 會影響原陣列的方法： pop()push()、shift()、unshift()、reverse()、sort()、splice()

寫這些主要是自己對知識的一個梳理，因為總是對這些東西迷迷糊糊的，如果對讀者有幫忙，那真的很榮幸。因為我的知識有限，所以總結的也不太好，望見諒。

相關文章