?數組方法

最近總結了一些數組的方法，希望能給大家?guī)硪恍椭?/p>

1.Array.isArray()方法用來判斷一個值是否為數組。它可以彌補typeof運算符的不足

var a = [1, 2, 3];

typeof a // "object"

Array.isArray(a) // true

2.valueOf()方法返回數組本身

var a = [1, 2, 3];

a.valueOf() // [1, 2, 3]

3.toString()?方法返回數組的字符串形式

var a = [1, 2, 3];

a.toString() // "1,2,3"

var a = [1, 2, 3, [4, 5, 6]];

a.toString() // "1,2,3,4,5,6"

4.push()?方法用于在數組的末端添加一個或多個元素，并返回添加新元素后的數組長度。注意，該方法會改變原數組。

var a = [];

a.push(1) // 1

a.push('a') // 2

a.push(true, {}) // 4

a // [1, 'a', true, {}]

5.pop()?方法用于刪除數組的最后一個元素，并返回該元素。注意，該方法會改變原數組。

var a = ['a', 'b', 'c'];

a.pop() // 'c'

a // ['a', 'b']

　　對空數組使用pop方法，不會報錯，而是返回undefined。

6.join()?方法以參數作為分隔符，將所有數組成員組成一個字符串返回。如果不提供參數，默認用逗號分隔。

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'

a.join(' | ') // "1 | 2 | 3 | 4"

a.join() // "1,2,3,4"

7.concat()方法用于多個數組的合并。它將新數組的成員，添加到原數組成員的后部，然后返回一個新數組，原數組不變。

[1, 2, 3].concat(4, 5, 6)

// [1, 2, 3, 4, 5, 6]

// 等同于

[1, 2, 3].concat(4, [5, 6])

[1, 2, 3].concat([4], [5, 6])

concat方法也可以用于將對象合并為數組。

[].concat({a: 1}, {b: 2})

// [{ a: 1 }, { b: 2 }]

[].concat({a: 1}, [2])

// [{a: 1}, 2]

[2].concat({a: 1})

// [2, {a: 1}]

8.shift()?方法用于刪除數組的第一個元素，并返回該元素。注意，該方法會改變原數組。

var a = ['a', 'b', 'c'];

a.shift() // 'a'

a // ['b', 'c']

9.unshift()方法用于在數組的第一個位置添加元素，并返回添加新元素后的數組長度。注意，該方法會改變原數組。

var arr = [ 'c', 'd' ];

arr.unshift('a', 'b') // 4

arr // [ 'a', 'b', 'c', 'd'

10.reverse()?方法用于顛倒數組中元素的順序，返回改變后的數組。注意，該方法將改變原數組。

var a = ['a', 'b', 'c'];

a.reverse() // ["c", "b", "a"]

a // ["c", "b", "a"]

11.slice()?方法用于提取原數組的一部分，返回一個新數組，原數組不變。

// 格式

arr.slice(start_index, upto_index);

// 用法

var a = ['a', 'b', 'c'];

a.slice(0) // ["a", "b", "c"]

a.slice(1) // ["b", "c"]

a.slice(1, 2) // ["b"]

a.slice(2, 6) // ["c"]

a.slice() // ["a", "b", "c"] 相當于復制數組

　　如果slice方法的參數是負數，則表示倒數計算的位置。

var a = ['a', 'b', 'c'];

a.slice(-2) // ["b", "c"]

a.slice(-2, -1) // ["b"]

　　如果參數值大于數組成員的個數，或者第二個參數小于第一個參數，則返回空數組。

var a = ['a', 'b', 'c'];

a.slice(4) // []

a.slice(2, 1) // []

12.splice()?方法用于刪除原數組的一部分成員，并可以在被刪除的位置添加入新的數組成員，返回值是被刪除的元素。注意，該方法會改變原數組。

　　splice的第一個參數是刪除的起始位置，第二個參數是被刪除的元素個數。如果后面還有更多的參數，則表示這些就是要被插入數組的新元素。

// 格式

arr.splice(index, count_to_remove, addElement1, addElement2, ...);

// 用法

var a = ['a', 'b', 'c', 'd', 'e', 'f'];

a.splice(4, 2) // ["e", "f"]

a // ["a", "b", "c", "d"]

var a = ['a', 'b', 'c', 'd', 'e', 'f'];

a.splice(-4, 2) // ["c", "d"]

　　上面代碼表示，從倒數第四個位置c開始刪除兩個成員。

　　如果只是單純地插入元素，splice方法的第二個參數可以設為0。

var a = [1, 1, 1];

a.splice(1, 0, 2) // []

a // [1, 2, 1, 1]

13.sort()?方法對數組成員進行排序，默認是按照字典順序排序。排序后，原數組將被改變。

[10111, 1101, 111].sort(function (a, b) {

? return a - b;

})// [111, 1101, 10111]

[

? { name: "張三", age: 30 },

? { name: "李四", age: 24 },

? { name: "王五", age: 28? }

].sort(function (o1, o2) {

? return o1.age - o2.age;

})

// [

//?? { name: "李四", age: 24 },

//?? { name: "王五", age: 28? },

//?? { name: "張三", age: 30 }

// ]

14.map()方法對數組的所有成員依次調用一個函數，根據函數結果返回一個新數組。map方法接受一個函數作為參數。該函數調用時，map方法會將其傳入三個參數，分別是當前成員、當前位置和數組本身。

var numbers = [1, 2, 3];

numbers.map(function (n) {

? return n + 1;

});

// [2, 3, 4]

numbers

// [1, 2, 3]

[1, 2, 3].map(function(elem, index, arr) {

? return elem * index;

});

// [0, 2, 6]

15.forEach()?方法與map方法很相似，也是遍歷數組的所有成員，執(zhí)行某種操作，但是forEach方法一般不返回值，只用來操作數據。如果需要有返回值，一般使用map方法。

　　forEach方法的參數與map方法一致，也是一個函數，數組的所有成員會依次執(zhí)行該函數。它接受三個參數，分別是當前位置的值、當前位置的編號和整個數組。

function log(element, index, array) {

? console.log('[' + index + '] = ' + element);

}

[2, 5, 9].forEach(log);

// [0] = 2

// [1] = 5

// [2] = 9

　　forEach方法也可以接受第二個參數，用來綁定回調函數的this關鍵字。

var obj = {

? name: '張三',

? times: [1, 2, 3],

? print: function () {

? ? this.times.forEach(function (n) {

? ? ? console.log(this.name);

? ? }, this);

? }

};

obj.print()

// 張三

// 張三

// 張三

　　注意，forEach方法無法中斷執(zhí)行，總是會將所有成員遍歷完。如果希望符合某種條件時，就中斷遍歷，要使用for循環(huán)。

var arr = [1, 2, 3];

for (var i = 0; i < arr.length; i++) {

? if (arr[i] === 2) break;

? console.log(arr[i]);

}

// 2

16.filter()?方法的參數是一個函數，所有數組成員依次執(zhí)行該函數，返回結果為true的成員組成一個新數組返回。該方法不會改變原數組。

[1, 2, 3, 4, 5].filter(function (elem) {

? return (elem > 3);

})

// [4, 5]

　　filter方法還可以接受第二個參數，指定測試函數所在的上下文對象（即this對象）。

var Obj = function () {

? this.MAX = 3;

};

var myFilter = function (item) {

? if (item > this.MAX) {

? ? return true;

? }

};

var arr = [2, 8, 3, 4, 1, 3, 2, 9];

arr.filter(myFilter, new Obj())

// [8, 4, 9]

17.some()，every()

　　這兩個方法類似“斷言”（assert），用來判斷數組成員是否符合某種條件。

　　它們接受一個函數作為參數，所有數組成員依次執(zhí)行該函數，返回一個布爾值。該函數接受三個參數，依次是當前位置的成員、當前位置的序號和整個數組。

　　some方法是只要有一個數組成員的返回值是true，則整個some方法的返回值就是true，否則false。

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

arr.some(function (elem, index, arr) {

? return elem >= 3;

});

// true

　　every方法則是所有數組成員的返回值都是true，才返回true，否則false。

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

arr.every(function (elem, index, arr) {

? return elem >= 3;

});

// false

　　注意，對于空數組，some方法返回false，every方法返回true，回調函數都不會執(zhí)行。

　　some和every方法還可以接受第二個參數，用來綁定函數中的this關鍵字。

18.reduce()，reduceRight()reduce方法和reduceRight方法依次處理數組的每個成員，最終累計為一個值。

　　reduce：是從左到右處理（從第一個成員到最后一個成員）

　　reduceRight：則是從右到左（從最后一個成員到第一個成員），其他完全一樣。

　　這兩個方法的第一個參數都是一個函數。該函數接受以下四個參數：

累積變量，默認為數組的第一個成員

當前變量，默認為數組的第二個成員

當前位置（從0開始）

原數組

　　這四個參數之中，只有前兩個是必須的，后兩個則是可選的。

　　下面的例子求數組成員之和。

[1, 2, 3, 4, 5].reduce(function(x, y){

? console.log(x, y)

? return x + y;

});

// 1 2

// 3 3

// 6 4

// 10 5

//最后結果：15

利用reduce方法，可以寫一個數組求和的sum方法。

let arr = [234,234,34,34,12]

Array.prototype.sum = function () {

? ? return this.reduce(function (partial, value) {

? ? ? ? return partial + value

? ? })

}

console.log(arr.sum())? //584

　　如果要對累積變量指定初值，可以把它放在reduce方法和reduceRight方法的第二個參數。

[1, 2, 3, 4, 5].reduce(function(x, y){

? return x + y;

}, 10);

// 25

19.indexOf()，lastIndexOf()?

　　indexOf 方法返回給定元素在數組中第一次出現的位置，如果沒有出現則返回-1。

　　lastIndexOf?方法返回給定元素在數組中最后一次出現的位置，如果沒有出現則返回-1。

var a = ['a', 'b', 'c'];

a.indexOf('b') // 1

a.indexOf('y') // -1

　　indexOf方法還可以接受第二個參數，表示搜索的開始位置。

['a', 'b', 'c'].indexOf('a', 1) // -1

ES6 數組方法

1.擴展運算符，該運算符主要用于函數調用。

function push(array, ...items) {

? array.push(...items);

}

function add(x, y) {

? return x + y;

}

const numbers = [4, 38];

add(...numbers) // 42

　　由于擴展運算符可以展開數組，所以不再需要apply方法，將數組轉為函數的參數了。

// ES5 的寫法

function f(x, y, z) {

? // ...

}

var args = [0, 1, 2];

f.apply(null, args);

// ES6的寫法

function f(x, y, z) {

? // ...

}

let args = [0, 1, 2];

f(...args);

　　下面是擴展運算符取代apply方法的一個實際的例子，應用Math.max方法，簡化求出一個數組最大元素的寫法。

// ES5 的寫法

Math.max.apply(null, [14, 3, 77])

// ES6 的寫法

Math.max(...[14, 3, 77])

// 等同于

Math.max(14, 3, 77);

　　另一個例子是通過push函數，將一個數組添加到另一個數組的尾部。

// ES5的 寫法

var arr1 = [0, 1, 2];

var arr2 = [3, 4, 5];

Array.prototype.push.apply(arr1, arr2);

// ES6 的寫法

let arr1 = [0, 1, 2];

let arr2 = [3, 4, 5];

arr1.push(...arr2);

擴展應用符的應用

　　a). 復制數組（克隆數組，修改a2，a1不會改變）

const a1 = [1, 2];

// 寫法一

const a2 = [...a1];

// 寫法二

const [...a2] = a1;

　　b). 合并數組

// ES5

[1, 2].concat(more)

// ES6

[1, 2, ...more]

var arr1 = ['a', 'b'];

var arr2 = ['c'];

var arr3 = ['d', 'e'];

// ES5的合并數組

arr1.concat(arr2, arr3);

// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并數組

[...arr1, ...arr2, ...arr3]

// [ 'a', 'b', 'c', 'd', 'e' ]

　　c).?與解構賦值結合

const [first, ...rest] = [1, 2, 3, 4, 5];

first // 1

rest? // [2, 3, 4, 5]

const [first, ...rest] = [];

first // undefined

rest? // []

const [first, ...rest] = ["foo"];

first? // "foo"

rest?? // []

// 如果將擴展運算符用于數組賦值，只能放在參數的最后一位，否則會報錯。

const [...butLast, last] = [1, 2, 3, 4, 5];

// 報錯

const [first, ...middle, last] = [1, 2, 3, 4, 5];

// 報錯

　　d).?字符串,擴展運算符還可以將字符串轉為真正的數組。

　　e).實現了 Iterator 接口的對象任何 Iterator 接口的對象（參閱 Iterator 一章），都可以用擴展運算符轉為真正的數組。

let nodeList = document.querySelectorAll('div');

let array = [...nodeList];

　　對于那些沒有部署 Iterator 接口的類似數組的對象，擴展運算符就無法將其轉為真正的數組。

let arrayLike = {

? '0': 'a',

? '1': 'b',

? '2': 'c',

? length: 3

};

// TypeError: Cannot spread non-iterable object.

let arr = [...arrayLike];

　　上面代碼中，arrayLike是一個類似數組的對象，但是沒有部署 Iterator 接口，擴展運算符就會報錯。這時，可以改為使用Array.from方法將arrayLike轉為真正的數組。

?　　f).?Map 和 Set 結構，Generator 函數

　　　　擴展運算符內部調用的是數據結構的 Iterator 接口，因此只要具有 Iterator 接口的對象，都可以使用擴展運算符，比如 Map 結構。

let map = new Map([

? [1, 'one'],

? [2, 'two'],

? [3, 'three'],

]);

let arr = [...map.keys()]; // [1, 2, 3]

　　Generator 函數運行后，返回一個遍歷器對象，因此也可以使用擴展運算符。

const go = function*(){

? yield 1;

? yield 2;

? yield 3;

};

[...go()] // [1, 2, 3]

　　上面代碼中，變量go是一個 Generator 函數，執(zhí)行后返回的是一個遍歷器對象，對這個遍歷器對象執(zhí)行擴展運算符，就會將內部遍歷得到的值，轉為一個數組。

　　如果對沒有 Iterator 接口的對象，使用擴展運算符，將會報錯。

const obj = {a: 1, b: 2};

let arr = [...obj]; // TypeError: Cannot spread non-iterable object

2.Array.from()類數組轉換成數組

3.Array.of()?方法用于將一組值，轉換為數組。這個方法的主要目的，是彌補數組構造函數Array()的不足。因為參數個數的不同，會導致Array()的行為有差異。

Array.of(3, 11, 8) // [3,11,8]

Array.of(3) // [3]

Array.of(3).length // 1

Array() // []

Array(3) // [, , ,]

Array(3, 11, 8) // [3, 11, 8]

　　Array.of基本上可以用來替代Array()或new Array()，并且不存在由于參數不同而導致的重載。它的行為非常統一。

Array.of() // []

Array.of(undefined) // [undefined]

Array.of(1) // [1]

Array.of(1, 2) // [1, 2]

4.copyWithin()?數組實例的?在當前數組內部，將指定位置的成員復制到其他位置（會覆蓋原有成員），然后返回當前數組。也就是說，使用這個方法，會修改當前數組。

　　它接受三個參數。

　　　　a).?target（必需）：從該位置開始替換數據。

　　　　b).?start（可選）：從該位置開始讀取數據，默認為 0。如果為負值，表示倒數。

　　　　c).?end（可選）：到該位置前停止讀取數據，默認等于數組長度。如果為負值，表示倒數。

// 將3號位復制到0號位

[1, 2, 3, 4, 5].copyWithin(0, 3, 4)

// [4, 2, 3, 4, 5]

// -2相當于3號位，-1相當于4號位

[1, 2, 3, 4, 5].copyWithin(0, -2, -1)

// [4, 2, 3, 4, 5]

// 將3號位復制到0號位

[].copyWithin.call({length: 5, 3: 1}, 0, 3)

// {0: 1, 3: 1, length: 5}?? 此處有疑惑

// 將2號位到數組結束，復制到0號位

let i32a = new Int32Array([1, 2, 3, 4, 5]);

i32a.copyWithin(0, 2);

// Int32Array [3, 4, 5, 4, 5]

// 對于沒有部署 TypedArray 的 copyWithin 方法的平臺

// 需要采用下面的寫法

[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);

// Int32Array [4, 2, 3, 4, 5]

[].copyWithin.call({length: 5, 3: 1}, 0, 3)? // {0: 1, 3: 1, length: 5}?? 此處有疑惑

5.?find()?數組實例的?用于找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執(zhí)行該回調函數，直到找出第一個返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。

let arr = [1, 4, -5, 10]

console.log(arr.find((n) => n < 0)) // -5

[1, 5, 10, 15].find(function(value, index, arr) {

? return value > 9;

}) // 10

上面代碼中，find方法的回調函數可以接受三個參數，依次為當前的值、當前的位置和原數組。

6.findIndex()數組實例的findIndex方法的用法與find方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {

? return value > 9;

}) // 2

這兩個方法都可以接受第二個參數，用來綁定回調函數的this對象。

另外，這兩個方法都可以發(fā)現NaN，彌補了數組的indexOf方法的不足。

[NaN].indexOf(NaN)

// -1

[NaN].findIndex(y => Object.is(NaN, y))

// 0

7.fill()數組實例的方法使用給定值，填充一個數組。

['a', 'b', 'c'].fill(7)

// [7, 7, 7]

new Array(3).fill(7)

// [7, 7, 7]

上面代碼表明，fill方法用于空數組的初始化非常方便。數組中已有的元素，會被全部抹去。

fill方法還可以接受第二個和第三個參數，用于指定填充的起始位置和結束位置。

['a', 'b', 'c'].fill(7, 1, 2)

// ['a', 7, 'c']

8.entries()，keys() 和 values()?數組實例的

　　ES6 提供三個新的方法——entries()，keys()和values()——用于遍歷數組。它們都返回一個遍歷器對象（詳見《Iterator》一章），可以用for...of循環(huán)進行遍歷，唯一的區(qū)別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

let arr = ['a', 'b']

for (let index of arr.keys()) {

? ? console.log(index);

}

// 0

// 1

for (let elem of arr.values()) {

? ? console.log(elem);

}

// 'a'

// 'b'

for (let [index, elem] of arr.entries()) {

? ? console.log(index, elem);

}

// 0 "a"

// 1 "b"

如果不使用for...of循環(huán)，可以手動調用遍歷器對象的next方法，進行遍歷。

let letter = ['a', 'b', 'c'];

let entries = letter.entries();

console.log(entries.next().value); // [0, 'a']

console.log(entries.next().value); // [1, 'b']

console.log(entries.next().value); // [2, 'c']

9.includes()?數組實例的?方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes方法類似。ES2016 引入了該方法。

[1, 2, 3].includes(2)? ?? // true

[1, 2, 3].includes(4)? ?? // false

[1, 2, NaN].includes(NaN) // true

該方法的第二個參數表示搜索的起始位置，默認為0。如果第二個參數為負數，則表示倒數的位置，如果這時它大于數組長度（比如第二個參數為-4，但數組長度為3），則會重置為從0開始。

[1, 2, 3].includes(3, 3);? // false

[1, 2, 3].includes(3, -1); // true

沒有該方法之前，我們通常使用數組的indexOf方法，檢查是否包含某個值。

if (arr.indexOf(el) !== -1) {

? // ...

}

indexOf方法有兩個缺點，一是不夠語義化，它的含義是找到參數值的第一個出現位置，所以要去比較是否不等于-1，表達起來不夠直觀。二是，它內部使用嚴格相等運算符（===）進行判斷，這會導致對NaN的誤判。

[NaN].indexOf(NaN)

// -1

[NaN].includes(NaN)

// true

另外，Map 和 Set 數據結構有一個has方法，需要注意與includes區(qū)分。

Map 結構的has方法，是用來查找鍵名的，比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。

Set 結構的has方法，是用來查找值的，比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

作者：帥哥哥_1752

鏈接：http://m.itdecent.cn/p/85422a08fdb7

來源：簡書

簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權并注明出處。