1. 程式人生 > 其它 >陣列的基本API

陣列的基本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() 方法,然後使用地區特定的分隔字元將結果字串連線起來。