1 概述

1.1 前言

JavaScript數(shù)組方法速查手冊極簡版中共收了32個數(shù)組的常用方法和屬性蕉堰，并根據(jù)方法的用途進行重新排序和分類病线，在文中簡要的介紹了方法作用和用例說明沃缘。收藏備用吧名惩！

文中介紹的過于簡單，想更更多理解相關(guān)內(nèi)容還是要多多動手實踐怒炸！

2 數(shù)組屬性

2.1 length-長度屬性

每個數(shù)組都有一個length屬性宦搬。針對稠密數(shù)組牙瓢，length屬性值代表數(shù)組中元素的個數(shù)。當數(shù)組是稀疏數(shù)組時间校，length屬性值大于元素的個數(shù)矾克。

var array1 = [ 'a', 'b', 'c' ];  
console.log(array1.length);  // 輸出 3
array1.length = 2;
console.log(array1);  // 輸出 [ "a", "b" ]

查看示例程序

3 數(shù)組方法

3.1 Array.isArray-類型判定

Array.isArray() 數(shù)組類型判定。

console.log(Array.isArray([1, 2, 3]));   // 輸出 true
console.log(Array.isArray({num: 123}));   //輸出 false

查看示例程序

3.2 Array.of-創(chuàng)建數(shù)組

Array.of() 從可變數(shù)量的參數(shù)創(chuàng)建數(shù)組憔足，不管參數(shù)的數(shù)量或類型如何胁附。

console.log(Array.of(3));    // 輸出 [3]
console.log(Array.of(1,2,3));   // 輸出 [1,2,3]

查看示例程序

3.3 Array.from-創(chuàng)建數(shù)組

Array.from() 用類數(shù)組或可迭代對象創(chuàng)建新數(shù)組。

console.log(Array.from('abcd'));  // 輸出 [ "a", "b", "c", "d" ]
console.log(Array.from([1, 2, 3], x => x + 1));  // 輸出 [ 2, 3, 4 ]

查看示例程序

4 數(shù)組原型方法

4.1 查找元素

4.1.1 find-按函數(shù)查找

Array.prototype.find() 找到第一個滿足檢測函數(shù)條件的元素滓彰，并返回該元素控妻，沒找到則返回 undefined。

var array1 = [1, 2, 3, 4, 5];
console.log(array1.find(x => x > 3));    // 輸出  4

查看示例程序

4.1.2 findIndex-按函數(shù)查找

Array.prototype.findIndex() 找到第一個滿足檢測函數(shù)條件的元素揭绑，并返回該元素索引弓候。找不到返回-1。

var array1 = [6, 7, 8, 9, 10];
console.log(array1.findIndex(x => x > 8));    // 輸出  3

查看示例程序

4.1.3 indexOf-按元素值查找

Array.prototype.indexOf() 查找元素并返回元素索引值他匪，找不到返回-1菇存。

var arr= [1, 2, 3, 4];
console.log(arr.indexOf(3));    // 輸出 2
console.log(arr.indexOf(6));    // 輸出 -1
console.log(arr.indexOf(2, 2));    // 輸出 -1

第二個參數(shù)表示查找的起始位置。

查看示例程序

4.1.4 lastIndexOf-按元素值查找

Array.prototype.lastIndexOf() 從后向前查找元素并返回元素索引值邦蜜，找不到返回 -1依鸥。

var arr = ['a', 'b', 'c', 'd'];
console.log(arr.lastIndexOf('b'));    // 輸出 1
console.log(arr.lastIndexOf('e'));    // 輸出 -1

查看示例程序

4.2 添加元素

4.2.1 push-尾部添加

Array.prototype.push() 在尾部添加一個或多個元素，返回數(shù)組的新長度悼沈。

var array1= ['a', 'b', 'c'];
console.log(array1.push('d'));   // 輸出 4
console.log(array1);   // 輸出 [ "a", "b", "c", "d" ]

查看示例程序

4.2.2 unshift-頭部添加

Array.prototype.unshift() 在頭部添加一個或多個元素贱迟，并返回數(shù)組的新長度姐扮。

var array1 = [ 4, 5, 6 ];
console.log(array1.unshift(3));    // 輸出 4
console.log(array1);    // 輸出 [ 3, 4, 5, 6 ]
console.log(array1.unshift(1, 2));    // 輸出 6
console.log(array1);    // 輸出 [ 1, 2, 3, 4, 5, 6 ]

查看示例程序

4.3 刪除元素

4.3.1 pop-尾部刪除

Array.prototype.pop() 從尾部刪除一個元素，并返回該元素关筒。

var array1= ['a', 'b', 'c', 'd'];
console.log(array1.pop());    // 輸出 d
console.log(array1);    // 輸出 [ "a", "b", "c" ]

查看示例程序

4.3.2 shift-頭部刪除

Array.prototype.shift() 從頭部刪除一個元素溶握，并返回該元素。

var array1 = [1, 2, 3];
console.log(array1.shift());    // 輸出 1
console.log(array1);    // 輸出 [ 2, 3 ]

查看示例程序

4.4 替換元素

4.4.1 splice-添加替換刪除

Array.prototype.splice() 添加蒸播、替換、刪除元素萍肆。會改變原數(shù)組袍榆。

var array1 = [ 'a', 'c', 'd' ];
array1.splice( 1, 0, 'b');
console.log(array1);    // 輸出 [ "a", "b", "c", "d" ]
array1.splice(1,1);
console.log(array1);    // 輸出 [ "a", "c", "d" ]
array1.splice(1,1,'bb','cc');
console.log(array1);    // 輸出 [ "a", "bb", "cc", "d" ]

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• 參數(shù) start：表示替換的位置
• 參數(shù) deleteCount ：表示刪除元素的數(shù)量
• 參數(shù) item1... ： 表示添加的元素

查看示例程序

4.5 順序相關(guān)

4.5.1 sort-排序

Array.prototype.sort() 數(shù)組排序，改變原數(shù)組塘揣。

var array1 = [ 4, 3, 10, 2 ];
console.log(array1.sort());    // 輸出 [ 10, 2, 3, 4 ]
console.log(array1.sort((x1, x2) => x1 > x2));    // 輸出 [ 2, 3, 4, 10 ]

查看示例程序

4.5.2 reverse-反序

Array.prototype.reverse() 倒置數(shù)組包雀，并返回新數(shù)組。會改變原數(shù)組亲铡。

var sourceArray= [ 'a', 'b', 'c' ];
var reverseArray = sourceArray.reverse();
console.log(reverseArray);    // 輸出 [ "c", "b", "a" ]
console.log(sourceArray == reverseArray);    // 輸出 true

查看示例程序

4.6 遍歷迭代

4.6.1 keys-鍵迭代器

Array.prototype.keys() 數(shù)組的鍵迭代器才写。

var array1 = ['a', 'b', 'c'];
for (let key of array1.keys()) {
  console.log(key);     // 輸出 0, 1, 2
}

查看示例程序

4.6.2 values-值迭代器

Array.prototype.values() 數(shù)組的值迭代器。

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
  console.log(value);     // 輸出 a b c
}

查看示例程序

4.6.3 entries-鍵/值對迭代器

Array.prototype.entries() 數(shù)組的鍵/值對迭代器奖蔓。

var array1 = ['a', 'b', 'c'];
var iterator1 = array1.entries();
console.log(iterator1.next().value);    // 輸出 Array [0, "a"]
console.log(iterator1.next().value);    // 輸出 Array [ 1, "b" ] 

查看示例程序

4.6.4 forEach-遍歷

Array.prototype.forEach() 遍歷數(shù)組中的元素赞草，并執(zhí)行回調(diào)函數(shù)。

var arr = [1, 2, 3, 4];
arr.forEach(function (x) {
    console.log(x + 1);    // 輸出 2  3  4  5
});    

查看示例程序

4.7 檢測

4.7.1 includes-值包含檢測

Array.prototype.includes() 值包含檢測吆鹤，如包含返回 true厨疙，不包含返回false。

var array1 = [1, 2, 3];
console.log(array1.includes(2));    // 輸出 true
console.log(array1.includes(4));    // 輸出 false

查看示例程序

4.7.2 some-函數(shù)包含檢測

Array.prototype.some() 檢測數(shù)組中是否有元素可以通過檢測函數(shù)驗證疑务。

var array1 = [ 1, 2, 3, 4 ];
console.log(array1.some(x => x >3));    // 輸出  true
console.log(array1.some(x => x > 5));    // 輸出  false

查看示例程序

4.7.3 every-函數(shù)完全檢測

Array.prototype.every() 檢測數(shù)組中是否所有元素都可以通過檢測函數(shù)驗證沾凄。

var array1 = [ 1, 2, 3, 4, 5 ];
console.log(array1.every(x => x < 8));    //輸出 true
console.log(array1.every(x => x < 4));    //輸出 false

查看示例程序

4.8 合并

4.8.1 join-合并成字符串

Array.prototype.join() 合并數(shù)組中所有元素成為字符串并返回。

var array1= [ 'a', 'b', 'c' ];
console.log(array1.join());    // 輸出 a,b,c
console.log(array1.join("-"));   // 輸出 a-b-c

查看示例程序

4.8.2 concat-合并成數(shù)組

Array.prototype.concat() 合并兩個或多個數(shù)組知允，返回一個全新數(shù)組撒蟀，原數(shù)組不變。

var array1 = [ 'a', 'b' ];
var array2 = [ 'c', 'd' ];
console.log(array1.concat(array2));    // 輸出 [ "a", "b", "c", "d" ]

該方法可以有多個參數(shù)温鸽。

查看示例程序

4.9 累計

4.9.1 reduce-左側(cè)累計

Array.prototype.reduce() 從左至右按 reducer 函數(shù)組合元素值保屯，并返回累計器終值。

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));    // 輸出 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));    // 輸出 15嗤朴，其中5是累計器初始值配椭。

查看示例程序

4.9.2 reduceRight-右側(cè)累計

Array.prototype.reduceRight() 從右至左按 reducer 函數(shù)組合元素值，并返回累計器終值雹姊。

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator.concat(currentValue);
console.log(array1.reduceRight(reducer));    // 輸出 [ 4, 3, 2, 1 ]
console.log(array1.reduceRight(reducer, 5));    // 輸出 [ 5, 4, 3, 2, 1 ]

查看示例程序

4.10 copyWithin-內(nèi)部復制

Array.prototype.copyWithin() 數(shù)組內(nèi)部復制股缸，不改變原數(shù)組長度。

var array1 = ['a', 'b', 'c', 'd', 'e','f'];
console.log(array1.copyWithin(0, 3, 5));    // 輸出 [ "d", "e", "c", "d", "e", "f" ]
console.log(array1.copyWithin(1, 3));    // 輸出 [ "d", "d", "e", "f", "e", "f" ]

arr.copyWithin(target[, start[, end]])

• 參數(shù)target : 表示要復制到的索引位置吱雏，如為負值則從后向前計數(shù)敦姻。
• 參數(shù)start : 表示要復制序列的起始索引位置瘾境，如為負值則從后向前計數(shù)。如省略該值镰惦，則從索引0開始迷守。
• 參數(shù)end : 表示要復制序列的結(jié)束位置，如為負值則從后向前計數(shù)旺入。如省略該值兑凿，則復制到結(jié)尾位置。

查看示例程序

4.11 fill-填充函數(shù)

Array.prototype.fill() 用固定值填充起始索引到終止索引區(qū)間內(nèi)的全部元素值茵瘾，不包括終止索引礼华。

var array1 = [1, 2, 3, 4];
console.log(array1.fill(9, 2, 4));    // 輸出 [ 1, 2, 9, 9 ]
console.log(array1.fill(8, 1));      // 輸出 [ 1, 8, 8, 8 ]
console.log(array1.fill(7));          // 輸出 [ 7, 7, 7, 7 ]

查看示例程序

4.12 filter-過濾函數(shù)

Array.prototype.filter() 生成由通過檢測函數(shù)驗證元素組成的新數(shù)組并返回。

var arr = [ 9 , 8 , 7 , 6];
console.log(arr.filter(x => x >7));    //輸出 [ 9, 8 ]

查看示例程序

4.13 flat-數(shù)組扁平化

Array.prototype.flat() 按指定深度遞歸遍歷數(shù)組拗秘，并返回包含所有遍歷到的元素組成的新數(shù)組圣絮。不改變原數(shù)組。

var arr1 = [ 1, 2, [ 3, 4 ] ];
console.log(arr1.flat());     // 輸出 [ 1, 2, 3, 4 ]
var arr2 = [ 1, 2, [3, 4, [ 5, 6 ] ] ];
console.log(arr2.flat());    // 輸出 [ 1, 2, 3, 4,  [ 5, 6 ] ]
var arr3 = [1, 2, [ 3, 4, [ 5, 6 ] ] ];
console.log(arr3.flat(2));    // 輸出 [ 1, 2, 3, 4, 5, 6 ]

查看示例程序

4.14 map-映射

Array.prototype.map() 創(chuàng)建一個新數(shù)組雕旨，該數(shù)組中的元素由原數(shù)組元素調(diào)用map函數(shù)產(chǎn)生扮匠。

var array1 = [1, 2, 3, 4];
console.log(array1.map(x => x * 2));    // 輸出 [ 2, 4, 6, 8 ]

查看示例程序

4.15 slice-截取數(shù)組

Array.prototype.slice() 按參數(shù)begin 和 end 截取數(shù)組，不改變原數(shù)組凡涩。

var array1 = [ 1, 2, 3, 4, 5];
console.log(array1.slice( 2, 4 ));    //輸出 [ 3, 4 ]
console.log(array1);    //輸出 [ 1, 2, 3, 4, 5 ]

查看示例程序

5 結(jié)尾

5.1 結(jié)語

文中介紹的過于簡單棒搜，想更多理解相關(guān)內(nèi)容還是要多多動手實踐！

因時間不足突照，能力有限等原因帮非，存在文字闡述不準及代碼測試不足等諸多問題。如發(fā)現(xiàn)錯誤請不吝指正讹蘑！謝謝末盔。