陣列的基本API
1. 連線:arr.join("連線符")
用連線符把數組裡面的元素連線成字串。
arr.join("")能無縫連線。
2. 拼接:arr.concat("a","b",arr1)
強調:(1)不會修改原陣列,返回新陣列。
(2)如果傳給 concat() 的某個引數本身是一個數組,則會將該陣列的元素銜接到 arr 中,而不是陣列本身。
3. 擷取:arr.slice(start[,end])
強調:(1)不會修改原陣列,返回新的子陣列。
(2)含頭不含尾。
(3)省略第二個引數表示從start位置開始一直擷取到末尾。
(4)支援負數,表示倒數第幾個。
4. 刪除、插入、替換:arr.splice(start, deleteCount [,value1,value2...])
強調:(1)直接修改原陣列。
(2)返回所有被刪除元素組成的子陣列。
(3)如果 deleteCount 是 0,表示插入元素,插入的元素會排在 start 處元素之前。
(4) 如果是刪除,從 start 開始,幷包含 start 處的元素。
5. 翻轉陣列:arr.reverse()
強調:(1)直接修改原陣列。
6. 陣列排序:arr.sort()
強調:(1)直接修改原陣列。
(2)預設按照陣列元素第一位的ASCII碼從小到大排列。
(3)可以設定下列的比較器函式來控制升序,降序或者打亂。
(4)arr.sort(function(a,b){return a-b;}); 升序(只限陣列中是數字或者數字字串)。
(5)arr.sort(function(a,b){return b-a;}); 降序(只限陣列中是數字或者數字字串)。
(6)arr.sort(function(){undefined
return Math.random()>.5 ? 1 : -1;
});隨機打亂陣列(陣列中可以是任何資料型別)
7. 查詢:arr.indexOf(value[,from])或arr.lastIndexOf(value[,from])
強調:(1)返回value在陣列中的索引,沒有找到返回-1。
(2) indexOf 可以匹配指向同一個地址的物件
8. 迴圈陣列,無返回值:arr.forEach(function(value,index,arr){})
9. 迴圈陣列,有返回值:arr.map(function(value,index,arr){})
10. 陣列轉字串:String(arr)或arr.toString()
將陣列中的元素用逗號連線成字串,類似於arr.join(",")。
11. 開頭入棧:arr.unshift(value1, value2......)
在陣列的最開頭插入元素。
強調:(1)修改原陣列。
(2)返回新陣列的length。
12. 開頭出棧:arr.shift()
彈出陣列最開頭的元素。
強調:(1)修改原陣列。
(2)返回被彈出的元素。
13. 結尾入棧:arr.push(value1[,value2,arr1])
在陣列末尾追加元素。
強調:(1)修改原陣列。
(2)返回新陣列的length。
(3)追加進去的陣列不會被打散。
14. 結尾出棧:arr.pop()
彈出陣列最末尾的元素。
強調:(1)修改原陣列。
(2)返回被彈出的元素。
Array 的 every()、filter()、forEach()、map()、some() 這些方法的第二個引數,用於將第一個引數的函式體內的 this 指向第二個引數。如果沒有指定第二個引數,this 值在非嚴格模式下是全域性物件,在嚴格模式下則為 null。
1. Array.every 全部滿足條件。// 是否全部大於0
let a = [1,2,3,4].every(item => { return item > 0; }); console.log(a); // true
2. Array.some
部分滿足條件。
判斷陣列中有沒有符合條件的元素,只要遇到符合條件的就退出迴圈。
// 是否有部分大於3 let a = [1,2,3,4].some(item => { return item > 3; }); console.log(a); // true
3. Array.filter
按條件過濾。
注意:過濾結果是一個數組。
const persons = [ {name: 'Jim', age: 22}, {name: 'Alen', age: 17}, {name: 'Lily', age: 20} ] let a = persons.filter(person => { return person.age > 20; }); console.log(a) // [{name: 'Jim', age: 22}]
4. Array.reduce 彙總。
reduce的第2個引數是可選的,也就是初始值是可選的。當不指定初始值時,它將使用陣列的第一個元素作為初始值。
函式裡面的 index 是當前 value 在陣列中的索引。當不傳入初始值的時候,index 是從 1 開始的,總的迴圈次數比陣列長度少1。
當傳入初始值的時候,index 是從 0 也就是第一個元素開始,陣列有多長就會遍歷幾次。
適用場景1:累加
let a = [1,2,3,4].reduce((total, value, index, arr) => { return total + value; }, 0); console.log(a) // 10 也有喜歡這麼寫的: // 其實這裡的 x 就是上面的 total,只是引數名字換了一下 let a = [1,2,3,4].reduce(function(x, y) { return x + y; });
適用場景2:陣列處理
// 如:獲取年齡大於18歲人的名字 const persons = [ {name: 'Jim', age: 22}, {name: 'Alen', age: 17}, {name: 'Lily', age: 20} ] let names = persons.reduce((names, person) => { if (person.age > 18) { names.push(person.name) } return names; }, []); console.log(names) // ['Jim', 'Lily']
適用場景3:將陣列轉化為物件
const arr = [ {id: '1', name: 'Jim'}, {id: '2', name: 'Lily'}, {id: '3', name: 'Allen'} ] let obj = arr.reduce((acc, current) => { return {...acc, [current.id]: current}; }, {}) console.log(obj) // { // 1: {id: '1', name: 'Jim'}, // 2: {id: '2', name: 'Lily'}, // 3: {id: '3', name: 'Allen'} // }
適用場景4:將二維陣列扁平化為一維陣列
const arrLevel2 = [ ['大', '家', '好'], ['我', '是', '渣', '渣', '輝'] ]; let arrLevel1 = arrLevel2.reduce((acc, current) => { return acc.concat(current); }, []) console.log('arrLevel1', arrLevel1) // -> ["大", "家", "好", "我", "是", "渣", "渣", "輝"]
適用場景5:在一次遍歷中進行多次計算
有時我們需要對陣列進行多次計算。例如,我們想要計算數字列表的最大值和最小值,我們可以這樣寫:
const readings = [0.3, 1.2, 3.4, 0.2, 3.2, 5.5, 0.4]; const initMinMax = { minReading: Number.MAX_VALUE, maxReading: Number.MIN_VALUE, }; const minMax = readings.reduce((acc, current) => { return { minReading: Math.min(acc.minReading, current), maxReading: Math.max(acc.maxReading, current) } }, initMinMax); console.log(minMax); // -> {minReading: 0.2, maxReading: 5.5}
適用場景6:獲取陣列中的最大值
let arr = [22, 19, 50, 7, 15]; let max = arr.reduce(function(x, y) { return x > y ? x : y; }); // 50
5. Array.reduceRight
reduceRight() 的工作原理和 reduce() 一樣,不同的是它按照陣列索引從高到低(從右到左)處理陣列。
[2, 10, 60].reduceRight(function (x, y) { return x/y; }); // => 3: (60/10)/2
6. Array.find
找出第一個符合條件的陣列成員,沒找到返回 undefined。
const persons = [ {id: 1, name: 'Jim', age: 22}, {id: 2, name: 'Alen', age: 17}, {id: 3, name: 'Lily', age: 20} ] let a = persons.find(person => { return person.id === 2; }); console.log(a) // {id: 2, name: 'Alen', age: 17}
7. Array.findIndex
找出第一個符合條件的陣列成員的位置,沒找到返回 -1。
const persons = [ {id: 1, name: 'Jim', age: 22}, {id: 2, name: 'Alen', age: 17}, {id: 3, name: 'Lily', age: 20} ] let a = persons.findIndex(person => { return person.id === 2; }); console.log(a) // 1
8. Array.includes
表示某個值是否在數組裡,includes() 不接受函式引數。
let a = [1,2,3].includes(3); console.log(a) // true
9. Array.toLocaleString()
將陣列轉換為本地化字串。它首先呼叫所有陣列元素的 toLocaleString() 方法,然後使用地區特定的分隔字元將結果字串連線起來。