1. 程式人生 > 實用技巧 >陣列都有哪些方法

陣列都有哪些方法

forEach

forEach()會遍歷陣列, 迴圈體內沒有返回值,forEach()迴圈不會改變原來陣列的內容,forEach()有三個引數, 第一個引數是當前元素, 第二個引數是當前元素的索引, 第三個引數是當前元素所屬的陣列.

let array = [1, 2, 3, 4];
array.forEach((item, index, arr) => {
  console.log(item);
});

forEach()的用法大概就是這樣的, 不過不知道各位發沒發現一個問題,forEach()不能跳出迴圈, 我說的跳出迴圈是跳出整個迴圈而不是跳出當前的迴圈, 口說無憑, 直接上程式碼.

let array = [1, 2, 3, 4, 5];
array.forEach((item) => {
    if (item > 2) {
        return;
    }
    console.log(item);
});

各位, 上面的程式碼會輸出啥呢?
答案是: 1 2
這時候有人就會說了, 這不是跳出迴圈了嗎, 其實並不是, 它仍然把陣列挨個遍歷了一遍, 把輸出換個位置我們就會發現了.

let array = [1, 2, 3, 4, 5];
array.forEach((item) => {
    console.log(item);
    if (item > 2) {
        return;
    }
});

這回怎麼樣, 輸出了 1 2 3 4 5吧.
看過了上面兩段程式碼之後, 不難發現, 在forEach()迴圈體裡寫return, 只是能跳出當前迴圈去執行下一次迴圈,並不能跳出整個迴圈.
再說說什麼叫forEach()迴圈沒有返回值, 這個問題在看過接下來的map迴圈之後就會明白了.

map

map()的主要作用, 其實是建立一個新的陣列,map()的引數和forEach()是一樣的, 這裡就不在多說了, 直接上例子.

let array = [1, 2, 3, 4 ,5];
let temp = array.map((item, index, arr) => {
    return item + 1;
});
console.log(temp);
console.log(array);

猜猜輸出的temparr的值都是什麼
temp: [2, 3 ,4, 5, 6]
arr: [1, 2, 3, 4, 5]
各位, 到這裡應該明白map()forEach()有什麼區別了吧, 使用map()遍歷陣列, 可以返回一個新陣列, 並且不會改變原數組裡的內容.
當然了,map()也可以這麼用, 直接把數組裡的元素都轉成字串.

let temp = array.map(String);

filter

接下來再說說filter(),filter()引數和forEach()也是一樣的,filter()主要是過濾的, 用來過濾陣列中不滿足條件的元素, 把滿足條件的元素放到新的數組裡, 並且不會改變原陣列.
怎麼用呢, 直接上程式碼.

let array = [1, 2, 3, 4, 5];
let temp = array.filter((item, index, arr) => {
    return item > 3;    
});
console.log(temp);
console.log(array);

會輸出什麼呢,temp是4, 5,array沒有變化, 清晰明瞭吧, 是不是比用for迴圈硬寫方便多了.

every

every()我就不解釋入參了, 都一樣的, 主要說說every()的作用, 它會遍歷陣列, 在迴圈體內寫條件, 如果每一項都是true, 就會返回true, 只要有一個是false, 就會返回false, 下面看看例項程式碼.

let array = [1, 2, 3, 4, 5];
let bo = array.every((item, index, arr) => {
    return item > 2;
});
console.log(bo);

這個輸出不用我說了吧, 肯定是false啊, 不用再解釋了吧.

some

some()又是做什麼的吶, 同樣, 遍歷陣列的每一項, 然後根據迴圈體內的條件去判斷, 只要有一個是true, 就會停止迴圈.

let array = [1, 2, 3, 4, 5];
array.some((item, index, arr) => {
    console.log(item);
    return item > 3;
});

根據輸出的item, 我們可以知道一共迴圈了多少次.

reduce

reduce(), 官方說明: 接收一個函式作為累加器, 陣列中每個值(從左到右)開始縮減, 最終為一個值. 看完這句話, 心裡莫名的想說一句 臥槽, '這什麼玩意'. 其實說白了,reduce()接收的那個函式就是回撥函式, 回撥函式呼叫數組裡的每一個元素, 直到迴圈結束.
reduce()跟其他幾個方法不一樣, 它有4個引數, 按順序分別是 上一次的值, 當前的值, 當前值的索引, 陣列. 引數介紹完畢, 直接看例子.
假如, 有一個數組, 裡面的元素都是數字, 現在要計算數字的和, 正常情況就直接迴圈陣列, 然後弄箇中間變數挨個加了吧, 但是用了reduce()就省事兒多了

let array = [1, 2, 3, 4, 5];
let total = array.reduce((a, b) => {
    return a + b;
});
console.log(total);     // 15

查詢:

arr.indexOf('楊',2) 第二個引數表示從哪裡開始,返回下標,找不到返回-1

arr.lastIndexOf(‘楊’,2)第二個引數表上從哪裡開始返回下標找不到返回-1

追加:

arr.push()往後追加並返回新陣列長度

arr.unshift()往前追加並返回新陣列長度

刪除:

arr.shift()刪除第一個並返回刪除的那個值

arr.pop()刪除最後一個並返回刪除的值

排序:

arr.sort(function(a,b)){return a-b} 排序判斷長度

arr.reverse()陣列翻轉

轉字串:

arr.join(連線符)陣列轉字串預設以逗號連結

新增刪除替換:

arr.splice(從哪裡開始,刪除幾個,新增的東西)刪除時返回刪除的元素組成的新陣列

連線:

arr.concat(1,2,3)陣列連線返回新陣列

陣列擷取

arr.slice(1,2)返回截圖的陣列左包右不包

split(分割符)並轉成陣列

arguments的作用

是js中的一個內建物件,有長度有下標,接受所有引數有屬於偽類陣列