javascript常用陣列API

阿新 • • 發佈：2021-10-24

陣列 API

1 . 插入 / 刪除

arr.push(value1,[value2,value3]);  // 在陣列末尾追加元素 (1)修改原陣列 (2)返回新陣列的length (3)追加進去的陣列不會被打散
arr.pop(); // 刪除陣列末尾元素   (1)修改原陣列 (2)返回被刪除的元素

arr.unshift(value1, value2......); // 在陣列開頭插入元素 (1)修改原陣列 (2)返回新陣列的length
arr.shift(); // 在陣列開頭刪除元素 (1)修改原陣列  (2)返回被刪除的元素

2 . 轉字串 ( 4 )

String(arr);  
arr.toString();  // 將陣列中的元素用逗號連線成字串

arr.join("連線符");  // 用連線符把數組裡面的元素連線成字串  (1)arr.join("")能無縫連線

arr.toLocaleString();  // 將陣列轉換為本地化字串。它首先呼叫所有陣列元素的 toLocaleString() 方法，然後使用地區特定的分隔字元將結果字串連線起來。

3. 拼接

// (1)不會修改原陣列，返回新陣列;  (2)如果傳給 concat() 的某個引數本身是一個數組，則會將該陣列的元素銜接到 arr 中，而不是陣列本身
arr.concat("a","b",arr1);  

var arr = [1,2,3];
arr.concat([4,5]); // [1,2,3,4,5]
arr.concat(4, [5, [6, 7]); // [1,2,3,4,5,[6,7]];

4. slice / splice

arr.slice(begin,end]); // 擷取陣列  (1)不會修改原陣列 (2)返回新的子陣列包含begin索引，不包括end索引元素
					 // (3)省略第二個引數表示從begin位置開始一直擷取到末尾 (4)索引可以取負，對應加上陣列長度的元素

arr.splice();   // 刪除、插入、替換  (1)會影響原陣列
arr.splice(開始刪除的索引，刪除的個數);  				  // 刪除  (2)返回被刪除項組成的新陣列
arr.splice(插入項在新陣列中的索引，0，一個或多個插入項);     // 插入  (2)返回空陣列
arr.splice(開始刪除的索引，刪除的個數，一個或多個插入項);	   // 替換  (2)返回被刪除項組成的新陣列，插入項會接在被刪除項位置

5. 翻轉 / 排序

arr.reverse();  // 翻轉陣列  (1)直接修改原陣列

arr.sort();  // 陣列排序  (1)直接修改原陣列   (2)預設按照陣列元素第一位的ASCII碼從小到大排列
// 升序(只限陣列中是數字或者數字字串)
arr.sort(function(a,b){
    // 返回值大於0，ab進行交換；<=0，保持位置不變
	return a-b;  // b-a 降序
});
// 隨機打亂陣列(陣列中可以是任何資料型別)
arr.sort(function(){
    return Math.random()>.5 ? 1 : -1; 
});

6. 查詢

arr.indexOf(value); // 查詢給定元素在陣列中的第一個索引，沒有則返回-1
arr.lastIndexOf(value); // 查詢給定元素在陣列中的最後一個索引，沒有則返回-1
arr.includes(value);  // 表示某個值是否在數組裡，不接受函式引數, 返回true或false


arr.find(fn()); // 找出第一個符合條件的陣列成員，沒找到返回 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}


arr.findIndex(fn()); // 找出第一個符合條件的陣列成員的位置，沒找到返回 -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

7. 遍歷

// (item 每一個子項，index 索引，arr 原陣列) 修不修改原陣列取決於匿名函式中對原陣列處理與否
// 以下API的匿名函式中thsi指向window，當然我們可以使用箭頭函式進行修改

// 純遍歷
arr.forEach(function(item,index,arr){}); // forEach 匿名函式中的return 用於中止單次迴圈，整體並沒有返回值(undefined)
arr.map(function(item,index,arr){}); // map 會建立一個新的陣列，陣列取自匿名函式中return的每一項


// 可中斷遍歷
arr.some(function(item,index,arr){});  // 只要return true 就退出迴圈 (判斷是否存在元素符合條件)
arr.every(function(item,index,arr){});  // 只要return false 就退出迴圈 (判斷是存在否不符合條件元素)


// 過濾
arr.filter(function(item,index,arr){});  // 按條件過濾，返回過濾後的陣列

8. 歸併

// 歸併: 當前項的值作為引數給下一項使用
// (preValue:上一次呼叫返回的值/初始值，curValue:被處理的當前項，index:當前項的索引，array:原陣列)
// initValue 初始值，當不指定初始值時，它將使用陣列的第一個元素作為初始值。
// 因此，當不選定初始值時，index從1開始；傳入初始值 index 才會從0開始
reduce(function(preValue,curValue,index,array){},initValue);
reduceRight(function(preValue,curValue,index,array){},initValue); // 陣列從右向左開始歸併，用法同理