【殷實基礎系列】請查收，全部的數組方法都在這裏了...

時間  2020-02-09
標籤 殷實基礎系列 查收 全部 數組 方法 都在 這裏 简体版
原文   原文鏈接

寫在前面

掌握數組方法是前端開發中必會的技能，熟練掌握數組方法會快速處理好數據、快速解決開發工做中遇到的問題。這篇文章將整理全部的數組方法。javascript

查看全部的數組方法以及分類

衆所周知，數組的方法都在本身的原型鏈上，因此可在瀏覽器中直接查看前端

  • Array.prototype方法
  • dir(Array)

接下來，咱們用一張思惟導圖輕鬆將全部的數組方法分類java

數組方法講解

下面的數組方法，是改變了原數組的方法（操做原數組後，原數組發生改變）web

splice

splice()方法經過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。算法

  • 參數數組

  • start：要修改的起始位置（從0開始）。(start > Array.length) => 從數組末尾開始添加元素，(start < 0) => 表示數組末尾開始的第幾位瀏覽器

  • deleteCount（可選）：要刪除的元素個數app

  • item一、item2….（可選）：要添加進數組的元素，從start位置開始，若是不指定，則方法只刪除元素函數

  • 返回值測試

返回全部被刪除的元素。

  • 示例
var arr = ['apple', 'banana', 'orange'];

// 1.刪除'banana'開始的全部元素
var brr = arr.splice(1);

console.log(arr, brr);  // ['apple']  ['banana', 'orange']

// 2.刪除'apple'以後的1個元素
var brr = arr.splice(1, 1);

console.log(arr, brr);  // ['apple', 'orange']  ['banana']

// 3.在'banana'元素後加'pear'
var brr = arr.splice(2, 0, 'pear');  // ['apple', 'banana', 'pear', orange']  []
複製代碼

sort

sort()方法用原地算法對數組的元素進行排序，並返回數組。默認排序順序是在將元素轉換爲字符串，而後比較它們的UTF-16代碼單元值序列時構建的。

  • 參數(可選)

  • function(a, b)：a => 第一個用於比較的元素，b => 第二個用於比較的元素

  • 返回值

排序以後的數組。

  • 示例
var arr = [1, 6, 8, 7, 99, 10, 77];

// 1.將數組arr排序(無參數狀況)
var brr = arr.sort();

console.log(arr, brr);   // [1, 10, 6, 7, 77, 8, 99] [1, 10, 6, 7, 77, 8, 99]

// 2.有參數狀況
var brr = arr.sort(function(a, b) {
    return a - b;
});

console.log(arr, brr);   // [1, 10, 6, 7, 77, 8, 99] [1, 6, 7, 8, 10, 77, 99]
複製代碼

pop

pop()方法從數組中刪除最後一個元素，並返回該元素的值。此方法更改數組的長度。

  • 返回值

從數組中刪除的元素(當數組爲空時返回undefined)。

  • 示例
// 1.數組不爲空
var arr = [1, 2, 3, 4, 5];

var brr = arr.pop();

console.log(arr, brr);   // [1, 2, 3, 4] [5]

// 2.數組爲空
var arr = [];

var brr = arr.pop();

console.log(arr, brr);   // [] undefined 
複製代碼

shift

shift()方法從數組中刪除第一個元素，並返回該元素的值。此方法更改數組的長度。

  • 返回值

從數組中刪除的元素(當數組爲空時返回undefined)。

  • 示例
// 1.數組不爲空
var arr = [1, 2, 3, 4, 5];

var brr = arr.shift();

console.log(arr, brr);   // [2, 3, 4, 5] [1]

// 2.數組爲空
var arr = [];

var brr = arr.pop();

console.log(arr, brr);   // [] undefined 
複製代碼

unshift

unshift()方法將一個或多個元素添加到數組的開頭，並返回該數組的新長度(該方法修改原有數組)。

  • 參數

item1, …, itemN：要添加的元素列表。

  • 返回值

返回數組的length屬性

  • 示例
var arr = [1, 2];

var brr = arr.unshift(3, 4, 5, 6);

console.log(arr, brr);  // [3, 4, 5, 6, 1, 2] 6
複製代碼

reverse

reverse()方法將數組中元素的位置顛倒，並返回該數組。

  • 返回值

顛倒後的數組。

  • 示例
var arr = [1, 2, 3, 4];
var brr = arr.reverse();

console.log(arr, brr);   // [4, 3, 2, 1] [4, 3, 2, 1]
複製代碼

copyWithin

copyWithin()方法淺複製數組的一部分到同一數組中的另外一個位置，並返回它，不會改變原數組的長度。

  • 參數

  • target：複製元素到此位置。target < 0 => 從數組末尾開始計算，target > Array.length => 不發生拷貝操做。

  • start(可選)：開始複製元素的起始位置。start < 0 => 從數組末尾開始計算。若是沒有此參數，方法從0開始複製。

  • end(可選)：開始複製元素的結束位置，可是不包括end這個元素。end < 0 => 從數組末尾計算。若是沒有此參數，方法複製元素至數組結尾。

  • 返回值

返回複製以後的數組。

  • 示例
var arr = [1, 2, 3, 4, 5, 6];

// 1.target參數爲正數
var brr = arr.copyWithin(1);

console.log(arr, brr);  // [1, 1, 2, 3, 4, 5] [1, 1, 2, 3, 4, 5]

// 2.target參數爲負數
var brr = arr.copyWithin(-1);

console.log(arr, brr);  // [1, 2, 3, 4, 5, 1] [1, 2, 3, 4, 5, 1]

// 3.start參數爲正數
var brr = arr.copyWithin(1, 2);

console.log(arr, brr);  // [1, 3, 4, 5, 6, 6] [1, 3, 4, 5, 6, 6]

// 4.start參數爲負數
var brr = arr.copyWithin(1, -2);

console.log(arr, brr);  // [1, 5, 6, 4, 5, 6] [1, 5, 6, 4, 5, 6]

// 5.end參數爲正數
var brr = arr.copyWithin(1, 2, 3);

console.log(arr, brr);  // [1, 3, 3, 4, 5, 6] [1, 3, 3, 4, 5, 6]

// 6.end參數爲負數
var brr = arr.copyWithin(1, 2, -2);

console.log(arr, brr);  // [1, 3, 4, 4, 5, 6] [1, 3, 4, 4, 5, 6]
複製代碼

fill

fill()方法用一個固定值填充一個數組中從起始索引到終止索引內的所有元素。不包括終止索引。

  • 參數

  • value：用於填充數組元素的值。

  • start(可選)：起始索引，默認值爲0。

  • end(可選)：終止索引，默認值爲數組長度，不包括end索引

  • 返回值

填充後的數組

  • 示例
var arr = [1, 2, 3, 4, 5];

// 1.只有value參數
var brr = arr.fill(6);

console.log(arr, brr); // [6, 6, 6, 6, 6] [6, 6, 6, 6, 6]

// 2.start和end參數
var brr = arr.fill(6, 1, 3);

console.log(arr, brr); // [1, 6, 6, 4, 5] [1, 6, 6, 4, 5]
複製代碼

下面的數組方法，是不改變原數組的方法（操做原數組後，原數組不發生變化）

slice

slice()方法返回一個新的數組對象，這一對象是一個由 begin 和 end 決定的原數組的淺拷貝（包括 begin，不包括end）。原始數組不會被改變。

  • 參數

  • begin(可選)：提取數組元素的開始索引值，默認值爲0。

  • end(可選)：提取數組元素的結束索引值，如沒有此參數，會提取到數組結尾（不包括end）。

  • 返回值

返回提取後的數組

  • 示例
var arr = [1, 2, 3, 4];

// 1.無end
var brr = arr.slice(1);

console.log(arr, brr);    // [1, 2, 3, 4]  [2, 3, 4]

// 2.有end
var brr = arr.slice(1, 3);

console.log(arr, brr);    // [1, 2, 3, 4]  [2, 3]
複製代碼

join

join()方法將一個數組（或一個類數組對象）的全部元素鏈接成一個字符串並返回這個字符串。若是數組只有一個項目，那麼將返回該項目而不使用分隔符。

  • 參數

  • separator(可選)：分割的字符

  • 返回值

數組元素鏈接的字符串，若是數組爲空，則返回空字符串

  • 示例
var arr = [1, 2, 3, 4];

var brr = arr.join('+');

console.log(arr, brr);   // [1, 2, 3, 4] "1+2+3+4"
複製代碼

toLocalString

toLocaleString()方法返回這個數字在特定語言環境下的表示字符串。

  • 參數

  • locales(可選)：縮寫語言代碼（BCP 47 language tag，例如: cmn-Hans-CN）的字符串或者這些字符串組成的數組。

  • options：包含一些屬性的類。

  • 返回值

返回一個字符串。

  • 示例
var num = 9800000;

console.log(num.toLocaleString());     // 9,800,000
複製代碼

toString

toString()返回一個字符串，表示指定的數組及其元素。

  • 示例
var arr = [1, 2, 4, 4, 5, 'a', 'b'];

var brr = arr.toString();

console.log(arr, brr);     // [1, 2, 4, 4, 5, "a", "b"] "1,2,4,4,5,a,b"
複製代碼

concat

concat()用於合併兩個或多個數組。

  • 參數

  • arrayN：須要拼接的數組列表

  • 返回值

返回拼接好的數組

  • 示例
var arr = [1, 2];

var brr = arr.concat([3, 4]);

var crr = arr.concat([7, 8], [5, 6]);

console.log(arr, brr, crr);   // [1, 2]  [1, 2, 3, 4]  [1, 2, 7, 8, 5, 6]
複製代碼

indexOf

indexOf()返回在數組中能夠找到一個給定元素的第一個索引，若是不存在，則返回-1。

  • 參數

  • item：要查找的元素

  • index(可選)：開始查找的位置。index > Array.length => 不在數組中查找，返回-1。index < 0 => 從數組末端開始查找

  • 返回值

第一個被找到的元素的索引，沒有找到返回-1

  • 示例
var arr = [1, 2, 3, 4, 5];

// 1.沒有index參數
var brr = arr.indexOf(1);
var crr = arr.indexOf(0);

console.log(arr, brr);        // [1, 2, 3, 4, 5] 0 -1

// 2.有index參數
var brr = arr.indexOf(1, 1);
var crr = arr.indexOf(2, 1);

console.log(arr, brr, crr);   // [1, 2, 3, 4, 5] -1 1
複製代碼

lastIndexOf

lastIndexOf()方法返回指定元素在數組中的最後一個的索引，若是不存在則返回 -1。從數組的後面向前查找。

  • 參數

  • item：要查找的元素

  • index(可選)：開始查找的位置（逆向查找）。index > Array.length => 整個數組都會被查找，返回-1。index < 0 => 從數組末端開始查找 index < 0 && |index| > Array.length，返回-1

  • 返回值

第一個被找到的元素的索引，沒有找到返回-1

  • 示例
var arr = [1, 2, 4, 5, 2, 5];

// 1.只查找元素
var brr = arr.lastIndexOf(2);
var crr = arr.lastIndexOf(6);

console.log(arr, brr, crr);         // [1, 2, 4, 5, 2, 5] 4 -1

// 2.根據索引查找
var brr = arr.lastIndexOf(2, 2);
var crr = arr.lastIndexOf(4, -2);   // [1, 2, 4, 5, 2, 5] 1 2
複製代碼

isArray

判斷傳遞的值是不是Array類型

  • 參數

  • value：傳遞的值。

  • 返回值

返回Boolean值：是Array，返回true，不然false。

  • 示例
console.log(Array.isArray('124'));                            // false
console.log(Array.isArray(567));                              // false
console.log(Array.isArray([1, 2, 4, 5]));                     // true
console.log(Array.isArray({name: '小紅'}));                   // false
console.log(Array.isArray(function(){console.log(123)}));     // false
複製代碼

from

Array.from()從一個相似數組或可迭代對象建立一個新的，淺拷貝的數組實例。

  • 參數

  • arrayLike：想要轉換成數組的僞數組對象或可迭代對象。

  • mapFn(可選)：回調函數，若是傳參，則執行。

  • thisArg(可選)：執行回調函數mapFn時this對象。

  • 返回值

返回一個新的數組實例。

  • 示例
// 1.傳入String
var str = 'china';

var arr = Array.from(str);

console.log(str, arr);    // "china" [ 'c', 'h', 'i', 'n', 'a' ]

// 2.new Set
var arr = Array.from(new Set([1, 2, 4, 5, 4, 2]));

console.log(arr);         // [ 1, 2, 4, 5 ]

// 3.使用mapFn參數
var arr = [1, 2, 4, 5];

var brr = Array.from(arr, item => item * 2);

console.log(arr, brr);   // [ 1, 2, 4, 5 ] [ 2, 4, 8, 10 ]

// 4.設置length
var arr = Array.from({length: 6}, (item, index) => index);

console.log(arr);        // [ 0, 1, 2, 3, 4, 5 ]
複製代碼

of

Array.of()方法建立一個具備可變數量參數的新數組實例，而不考慮參數的數量或類型。

  • 參數

  • elementN：N個參數，將按順序成爲返回數組中的元素。

  • 返回值

返回一個新的數組實例。

  • 示例
// 1.
var arr = [1, 2, 4];

var brr = Array.of(arr);

console.log(arr, brr);     // [ 1, 2, 4 ] [ [ 1, 2, 4 ] ]

// 2.
var arr = Array.of(1);

var brr = Array.of(1, 2, 4);

console.log(arr, brr);    // [1] [ 1, 2, 4 ]
複製代碼

includes

includes()用來判斷一個數組是否包含一個指定的值。

  • 參數

  • value：要查找的元素。

  • fromIndex(可選)：要開始查找的索引位置。fromIndex > Array.length => 從數組末端開始查找。默認值爲0。

  • 返回值

如找到，返回true；如沒找到，返回false。

  • 示例
var arr = [1, 2, 3, 4];

// 1.無索引
var bool = arr.includes(1);

var bool1 = arr.includes(5);

console.log(bool, bool1);        // true false

// 2.有索引
var bool = arr.includes(1, 1);

var bool1 = arr.includes(2, 1);

console.log(bool, bool1);        // false true 
複製代碼

下面的數組方法，是遍歷數組的一些方法

forEach

forEach()方法用於遍歷一個數組。

  • 參數

  • callback

    • value：數組中每一項的值

    • index(可選)：數組中每一項的索引

    • array(可選)：數組自己

  • thisArg(可選)：當執行回調函數 callback 時，用做 this 的值。

  • 返回值

undefined

  • 示例
var arr = [1, 2, 3, 4];

// 1.證實無返回值
var brr = arr.forEach(function(item, index, value) {
    return {item, index, value}
})

console.log(brr);      // undefined

// 2.輸出每一項
arr.forEach(function(item, index, value) {
    console.log(item, index, value);
})
/* 結果
1 0 [ 1, 2, 3, 4 ]
2 1 [ 1, 2, 3, 4 ]
3 2 [ 1, 2, 3, 4 ]
4 3 [ 1, 2, 3, 4 ] */
複製代碼

map

map()方法用於遍歷數組。

  • 參數

  • callback

    • value：數組中每一項的值

    • index(可選)：數組中每一項的索引

    • array(可選)：數組自己

  • thisArg(可選)：當執行回調函數 callback 時，用做 this 的值。

  • 返回值

返回新數組中的每個元素

  • 示例
var arr = [1, 2, 3, 4];

var brr = arr.map(function(item, index, arr) {
    return item * 2;
});

console.log(arr, brr);  // [1, 2, 3, 4] [2, 4, 6, 8]
複製代碼

every

every() 方法測試一個數組內的全部元素是否都能經過某個指定函數的測試。

  • 參數

  • callback

    • value：數組中每一項的值

    • index(可選)：數組中每一項的索引

    • array(可選)：數組自己

  • thisArg(可選)：當執行回調函數 callback 時，用做 this 的值。

  • 返回值

每一次調用都經過測試，則返回true，反之false。

  • 示例
var arr = [1, 2, 3, 4];

var bool = arr.every(function(item, index, arr) {
    return item % 2 === 0;
})

var bool1 = arr.every(function(item, index, arr) {
    return typeof item === 'number'
})

console.log(bool, bool1);      // false true
複製代碼

some

some()方法測試一個數組內的全部元素是否至少有一個能經過某個指定函數的測試。

  • 參數

  • callback

    • value：數組中每一項的值

    • index(可選)：數組中每一項的索引

    • array(可選)：數組自己

  • thisArg(可選)：當執行回調函數 callback 時，用做 this 的值。

  • 返回值

每一次調用至少有一個能經過測試，則返回true，反之false。

  • 示例
var arr = [1, 2, 3, 4];

var bool = arr.some(function(item, index, arr) {
    return item % 2 === 0;
})

var bool1 = arr.every(function(item, index, arr) {
    return typeof item === 'string'
})

console.log(bool, bool1);      // true false
複製代碼

filter

filter()方法過濾出經過所提供函數的全部元素，以建立一個新數組返回。

  • 參數

  • callback

    • value：數組中每一項的值

    • index(可選)：數組中每一項的索引

    • array(可選)：數組自己

  • thisArg(可選)：當執行回調函數 callback 時，用做 this 的值。

  • 返回值

返回篩選後的元素組成的新數組，若是沒有，返回空數組。

  • 示例
var arr = [1, 2, 4, 5, 6];

var brr = arr.filter(function(item, index, arr) {
    return item > 1;
})

var crr = arr.filter(function(item, index, arr) {
    return item < 1;
})

console.log(arr, brr, crr);   // [ 1, 2, 4, 5, 6 ] [ 2, 4, 5, 6 ] []
複製代碼

reduce

reduce() 方法對數組中的每一個元素執行一個由您提供的reducer函數(從左到右)，將其結果彙總爲單個返回值。

  • 參數

  • callback

    • acc：累計器。

    • current：當前值。

    • current index(可選)：當前索引。

    • array(可選)：當前數組。

  • initialValue：第一次調用callback函數時第一個參數的值。沒有初始值，會使用數組的第一個元素。若是是空數組，會報錯。

  • 返回值

函數累計結果

  • 示例
var arr = [1, 2, 4, 5, 6];

// 1.無初始值
var value = arr.reduce(function(sum, current) {
    return sum += current;
})

console.log(value);   // 18

// 2.有初始值
var value = arr.reduce(function(sum, current) {
    return sum += current;
}, 8)

console.log(value);   // 26

// 3.空數組
var arr = [];

var value = arr.reduce(function(sum, current) {
    return sum += current;
})

console.log(value);   // TypeError: Reduce of empty array with no initial value
複製代碼

reduceRight

reduceRight()方法對數組中的每一個元素執行一個由您提供的reducer函數(從右到左)，將其結果彙總爲單個返回值。

  • 參數

  • callback

    • acc：累計器。

    • current：當前值。

    • current index(可選)：當前索引。

    • array(可選)：當前數組。

  • initialValue：第一次調用callback函數時第一個參數的值。沒有初始值，會使用數組的第一個元素。若是是空數組，會報錯。

  • 返回值

函數累計結果

  • 示例
var arr = [1, 2, 4, 5, 6];

// 1.無初始值
var value = arr.reduceRight(function(sum, current) {
    return sum += current;
})

console.log(value);   // 18

// 2.有初始值
var value = arr.reduceRight(function(sum, current) {
    return sum += current;
}, 8)

console.log(value);   // 26

// 3.空數組
var arr = [];

var value = arr.reduceRight(function(sum, current) {
    return sum += current;
})

console.log(value);   // TypeError: Reduce of empty array with no initial value
複製代碼

find

find()方法用於查找數組中知足提供的測試函數的第一個元素的值。

  • 參數

  • callback

    • value：數組中每一項的值

    • index(可選)：數組中每一項的索引

    • array(可選)：數組自己

  • thisArg(可選)：當執行回調函數 callback 時，用做 this 的值。

  • 返回值

返回數組中第一個知足所提供測試函數的元素的值，不然返回undefined。

  • 示例
var arr = [1, 2, 4, 5, 6, 10];

// 1.能夠找到
var val = arr.find(function(item, index, arr) {
    return item > 5;
});

console.log(val);   // 6

// 2.不能找到
var val = arr.find(function(item, index, arr) {
    return item > 10;
});

console.log(val);   // undefined
複製代碼

findIndex

find()方法用於查找數組中知足提供的測試函數的第一個元素的索引。

  • 參數

  • callback

    • value：數組中每一項的值

    • index(可選)：數組中每一項的索引

    • array(可選)：數組自己

  • thisArg(可選)：當執行回調函數 callback 時，用做 this 的值。

  • 返回值

返回數組中第一個知足所提供測試函數的元素的索引，不然返回-1。

  • 示例
var arr = [1, 2, 4, 5, 6, 10];

// 1.能夠找到
var val = arr.findIndex(function(item, index, arr) {
    return item > 5;
});

console.log(val);   // 4

// 2.不能找到
var val = arr.findIndex(function(item, index, arr) {
    return item > 10;
});

console.log(val);   // -1
複製代碼

keys

keys()方法返回一個包含數組中每一個索引鍵的Array Iterator對象。

  • 返回值

返回一個新的 Array 迭代器對象。

  • 示例
// 1.
var arr = [1, 2, 4];

console.log([...arr.keys()]);    // [ 0, 1, 2 ]

// 2.
var arr = ["a", , "c"];
console.log([...arr.keys()]);    // [ 0, 1, 2 ]
複製代碼

values

values()方法返回一個新的Array Iterator對象，該對象包含數組每一個索引的值。

  • 返回值

返回一個新的 Array 迭代器對象。

  • 示例
// 1.
var arr = [1, 2, 4];

var values = arr.values();

for(let i of values) {
    console.log(i);     // 1 2 4
}
複製代碼

entries

entries()方法返回一個新的Array Iterator對象，該對象包含數組中每一個索引的鍵值對。

  • 返回值

一個新的Array迭代器對象。Array Iterator是對象，它的原型（__proto__:Array Iterator）上有一個next方法，可用用於遍歷迭代器取得原數組的[key,value]。

  • 示例
var arr = [1, 2, 4, 5, 6];

var brr = arr.entries();

console.log(brr.next()); 
複製代碼
var arr = [1, 2, 4, 5, 6];

var brr = arr.entries();   

var newArr = [];

for(var i = 0; i < arr.length + 1; i++){    
    var item = brr.next();             
    if(item.done !== true){          
        newArr[i] = item.value;
    }
}

console.log(newArr);
複製代碼

flat

flat()方法會按照一個可指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素合併爲一個新數組。

  • 參數

  • depth：提取嵌套數組的結構深度，默認值爲1。

  • 返回值

返回全部元素與遍歷到的子數組中的元素合併爲一個新數組。

  • 示例
var arr = [1, 2, 4, [5, 6]];
var brr = [1, [2, 4, [5, 6]]];

console.log(arr.flat());    // [1, 2, 4, 5, 6] 
console.log(brr.flat());    // [1, 2, 4, [5, 6]]
console.log(brr.flat(2));   // [1, 2, 4, 5, 6]
複製代碼

flatMap

flatMap()方法使用callback函數遍歷每個元素，將結果壓縮爲新數組。faltMap()方法效率更高一些。

  • 參數

  • callback

    • value：當前正在處理的值。

    • index(可選)：當前正在處理元素的索引。

    • array(可選)：被調用的map數組。

  • thisArg(可選)：當執行回調函數 callback 時，用做 this 的值。

  • 返回值

返回新的數組。depth深度爲1。

  • 示例
var arr = [1, 2, 4, 5];

var brr = arr.flatMap(item => {
    return item * 2;
})

console.log(brr);   // [2, 4, 8, 10]
複製代碼

寫在最後

到這裏，數組方法已經整理完畢，但願這些對你們能有所幫助~有哪裏寫錯的地方，也請你們指點出來，咱們共同進步~

最後，分享一下個人公衆號「web前端日記」，小夥伴們能夠關注一波~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程