《JavaScript Api》系列之數組方法操做集合(reduce、排序、交集、差集)

前言

數組是 JavaScript 最多見的一種數據結構，本文整理了幾乎全部與 Array 操做相關的 Api , 很基礎也很重要，但願本文對你有所幫助。

Array 的原型方法

添加元素

push

將一個或者多個元素添加至數組末尾處，並返回數組長度。

let arr = [1,2,3,4]
let length = arr.push(5,6) console.log(length,arr) // => 6 [1,2,3,4,5,6] 複製代碼

unshift

將一個或多個元素添加到數組到開頭，並返回數組長度。

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

刪除元素

pop

從數組中刪除最後一個元素，若對空數組調用 pop 則返回 undefined ，會更改源數組。

let arr = [1, 2, 3, 4];
let delValue = arr.pop(); console.log(delValue, arr); //=> 4 [ 1, 2, 3 ] 複製代碼

shift

刪除數組中第一個元素，若空數組返回 undefined ，會更改源數組。

let arr = [1, 2, 3, 4];
let delValue = arr.shift(); console.log(delValue, arr); //=> 1 [ 2, 3, 4 ] 複製代碼

delete

刪除數組元素，會讓數組中出現 undefined , 不多使用。

let temp = [123, 456, 789];
delete temp[1]; console.log(temp.length, temp[1]); // 3, undefined 複製代碼

替換、刪除、指定位置添加

splice

一個功能強大的函數，它能夠經過刪除/替換/添加，的方式修改數組，並返回修改的內容（以數組的格式）

//替換
let temp = [123, 456, 789]; temp.splice(1,1,'th') // [456] console.log(temp) //[123,'th',789]  //刪除 let temp = [123, 456, 789]; temp.splice(0,1) //[123] console.log(temp) //[456,789]  //添加 let temp = [123, 456, 789]; temp.splice(2,0,'tj') console.log(temp) //[123,456,'tj',789] 複製代碼

拷貝數組

slice

淺拷貝了願數組，返回一個新的數組對象。

//元素是基本類型數據 const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // ["camel", "duck"] console.log(animals.slice()); // ['ant', 'bison', 'camel', 'duck', 'elephant']  //元素是引用類型數據 let arr = [{a: 1}, {a: 2}]; let newArr = arr.slice(0, 1); console.log(arr, newArr); //=> [ { a: 1 }, { a: 2 } ] [ { a: 1 } ]  newArr[0].a = 20; console.log(arr, newArr); //=> [ { a: 20 }, { a: 2 } ] [ { a: 20 } ]  複製代碼

數組合並

concat

用於合併兩個或多個數組，不會更改現有數組，會返回一個新的數組。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f']; const array3 = array1.concat(array2);  console.log(array3);// ["a", "b", "c", "d", "e", "f"] 複製代碼

拓展運算符

不會更改源數組，拓展運算符也能夠把 Set 轉爲數組。

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

flat

多維數組合並，返回一個新的數組。

// 合併一維數組
let ary = [1,2,[3,4],5] let newAry = ary.flat() console.log(newAry) //=> [1,2,3,4,5]  //合併多維數組 [1,2,[3,[4,[5,6]]]].flat('Infinity'); //=> [1,2,3,4,5,6]  //移除數組空項 let arr = [1, 2, , 5]; let newArr = arr.flat(); console.log(arr, newArr); //=> [1, 2,, 5] [1, 2, 5]  複製代碼

數組迭代（循環）

forEach

遍歷數組，對每一個元素執行一次函數，不會更改源數組，也不會建立新數組。

let temp = [1,3,5];
temp.forEach(function(value, index, array){  console.log(value, index, array); }); /**** 1 0 [1,3,5] 3 1 [1,3,5] 5 2 [1,3,5] ***/ 複製代碼

map

遍歷數組，對每一個元素執行一次函數，不會更改源數組，會建立一個新數組。

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2); console.log(map1); //=> [2, 8, 18, 32] 複製代碼

filter

遍歷數組，對每一個元素執行一次函數，返回知足規則的元素。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6); console.log(result); //=> ["exuberant", "destruction", "present"] 複製代碼

every

遍歷數組，對每一個元素執行一次函數，用於測試組內元素，是否所有知足指定規則。

const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every(isBelowThreshold)); //=> true 複製代碼

some

遍歷數組，對每一個元素執行一次函數，用於判斷組內元素至少有一個元素經過了指定規則。

const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0; console.log(array.some(even)); //=> true 複製代碼

reduce

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 複製代碼

for...in

const array1 = ['a', 'b', 'c'];
for(const element in array1){  console.log(element) //0,1,2 } 複製代碼

for...of

const array1 = ['a', 'b', 'c'];
for (const element of array1) {  console.log(element); //a,b,c } 複製代碼

跳出迭代彙總

查找定位

indexOf

獲取數組元素的索引。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('duck')) // 3 console.log(beasts.indexOf('gogo')) // -1 複製代碼

lastIndexOf

獲取數組元素最後一個索引。

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo')) // 3 複製代碼

findIndex

循環數組，返回第一個知足條件的索引。

const array1 = [5, 12, 8, 130, 44];
const where = (value) => value > 13; console.log(array1.findIndex(where)) // 3 複製代碼

find

循環數組，返回第一個知足條件的元素值。

const array1 = [5, 12, 8, 130, 44];
const where = (value) => value > 13; console.log(array1.find(where)) // 130  複製代碼

數組排序

sort

數組排序，直接修改原數組，若是不帶參數，默認按照數組元素的字母排序，若是是數字則按照大小順序排列。

let array1 = ['bi','ci','di','ai'] console.log(array1.sort()) // ai bi ci di   let array2 = [1,2,3,4] array2.sort((a,b)=>{  //retrun a - b // 生序  return b - a // 降序 }) console.log(array2) // [4,3,2,1] 複製代碼

reverse

數組倒序，不更改源數組，返回一個新的數組。

const array1 = ['one', 'two', 'three'];
const array2 = array1.reverse() console.log(array2) // ["three", "two", "one"] 複製代碼

數組轉換

toString

將數組元素轉爲字符串，並以逗號分割，不更改源數組。

const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString()) // "1,2,a,1a" 複製代碼

join

將數組全部元素鏈接成一個字符串返回，能夠指定鏈接符。

const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join()) // Fire,Air,Water console.log(elements.join('-')) // Fire-Air-Water  複製代碼

填充/包含

fill

用一個固定的值，替換掉數組中指定起始位置到結束位置的所有元素。

const array1 = [1, 2, 3, 4];
console.log(array1.fill(0,2,4)) //  console.log(array1.fill(5, 1)) // [1, 5, 5, 5] console.log(array1.fill(6)); // [6, 6, 6, 6] 複製代碼

includes

判斷數組中是否包含一個指定的值。

const array1 = [1, 2, 3];
console.log(array1.includes(2)) //true 複製代碼

Array 的類方法

isArray

類型判斷

console.log(Array.isArray([1,2,3])) // true 
console.log(Array.isArray({num:123})) // false 複製代碼

from

字符串轉數組

Array.from('foo')  // ['f','o','o']
複製代碼

set轉數組

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set); // [ "foo", "bar", "baz" ] 複製代碼

map轉數組

const map = new Map([['name','666'],['name','pp']])
Array.from(map) // ['name','pp'] 複製代碼

循環數組

Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
複製代碼

類數組轉換爲數組

function f() {
 return Array.from(arguments); } f(1, 2, 3); 複製代碼

of

數值轉換數組

Array.of(1,2,3) // [1,2,3]
複製代碼

其餘經常使用操做

如下問題，但願你們能夠藉助上面的知識獨立編寫。

洗牌算法

將一個數組打亂，返回一個打亂的數組。

let array = [1,2,3,4,5,6,7]
array.sort(()=>{  return Math.random() - 0.5 }) 複製代碼

數組去重

const arr = [1,2,2,4,6,7,8,6];
let arr2 = [];  //set 方式實現 const set = new Set(arr); Array.from(set) //[1, 2, 4, 6, 7, 8]  arr.forEach(value=>{  arr2.includes(value) ? false : arr2.push(value) });  arr.forEach(value => {  arr2.indexOf(value) === -1 ? arr2.push(value) : false }) 複製代碼

數組交集

const array1 = [1,2,3,4,5]
const array2 = [2,5,1,6,9]  //filter + includes array1.filter( value => array2.includes(value))  //filter + set  let set2 = new Set(array2) array1.filter(value => set2.has(value))  //還有能夠採用 filter + indexOf 的方式實現 - -. 複製代碼

數組差集

const array1 = [1,2,3,4,5]
const array2 = [2,5,1,6,9]  //filter + includes const fil1 = array1.filter( value => !array2.includes(value)) const fil2 = array2.filter( value => !array1.includes(value)) fil1.concat(fil2)  //filter + indexOf && lastIndexOf const array3 = array1.concat(array2) array3.filter(value => array3.indexOf(value) === array3.lastIndexOf(value)) 複製代碼

結尾

我一直認爲模仿和借鑑是學習一個新東西最高效的方法，做爲一名開發者，你須要時刻保持警戒，有危機意識，有持續學習的能力。

若是這篇文章幫助到了你，歡迎點贊和關注，搜索《海洋裏的魔鬼魚》加入咱們的技術羣一塊兒學習討論，共同探索前端的邊界。