常用的Array方法(持續更新)
阿新 • • 發佈：2020-12-15
技術標籤：jsjavascript
在js中陣列的方法有很多，作為一個新手自己整理了我們常用到的一些方法
陣列去重
Array.from(new Set(arr))
轉化字串
var a = [1,2,3,4] console.log(a.join()); // "1,2,3,4" console.log(a.join(""); // "1234" console.log(a.join(" ")); // "1 2 3 4" console.log(a.join("-")); // "1-2-3-4"
陣列求和
- 方法一
function sum(arr) {
var s = 0;
arr.forEach(function(val, idx, arr) {s += val;}, 0);
return s;
};
- 方法二
利用數字專字串，和eval（執行程式碼）實現陣列求和
function sum(arr) {
return eval(arr.join("+"));
};
陣列排序
按照字母排序
var a = ['aa', 'dd', 'bb', 'cc'] console.log(a.sort()); // ["aa", "bb", "cc", "dd"]
給數字排序要用到回撥函式
var a = [20,10,5,2,3,4]
console.log(a.sort()); // [10,2,20,3,4,5] ???? 沒有進行排序？？？
a.sort((a,b)=>{
return a-b
}) // [2,3,4,5,10,20]
高階一點的 按照數組裡面對象的屬性對陣列排序
let arr = [ { "Name": "高處作業", "Num": 47 }, { "Name": "文明施工", "Num": 68 }, { "Name": "扣件式鋼管腳手架", "Num": 38 }, { "Name": "施工用電", "Num": 64 }, { "Name": "安全管理", "Num": 29 } ] function fn(key){ return function(value1,value2){ return value1[key]-value2[key] } } let arr1 = arr.sort(fn("Num")) console.log(arr1);
陣列亂序
function shuffle(items) {
return [...items].sort((a, b) => Math.random() > 0.5 ? -1 : 1);
}
console.log(shuffle([1,2,3,4,5,6]));
function shuffle(items) {
items = [...items];
const ret = [];
while (items.length) {
const idx = Math.floor(Math.random() * items.length);
const item = items.splice(idx, 1)[0];
ret.push(item);
}
return ret;
}
合併陣列
普通合併
var a = ['a','b']
console.log(a.concat([3,4,5])) // ["a", "b", 3, 4, 5]
console.log(a) // ['a','b']
es6數組合並
var a = ["a","b"];
var b = ["c","d"];
var c = [...a,...b]
console.log(c)
陣列新增元素
陣列前面新增元素
var a = ['a','b']
console.log(a.unshift("c")) // 3 返回新增元素後陣列長度
console.log(a) // ['c','a','b']
陣列後面新增元素
var a = ['a','b']
console.log(a.push('c')) // 3 返回陣列長度
console.log(a) // ['a','b','c']
陣列刪除元素
刪除陣列前面元素
var a = ['a','b','c']
console.log(a.shift()) // 'a' 返回刪除第一項元素
console.log(a) // ['b','c']
刪除陣列後面元素
var a = ['a','b','c']
console.log(a.pop()) // 'c' 返回末尾刪除的元素
console.log(a) // ['a','b']
陣列擷取
**
1個引數表示的時陣列的當前位置開始一直到陣列末尾的所有項
**
**
2個引數則表示從起始位置至結束位置之間的所有項，但不包含結束位置項
**
var a = [1,3,5,7,9]
console.log(a.slice(2)) // [5,7,9] 從下標2開始一直擷取到最後
console.log(a) // [1,3,5,7,9]
console.log(a.slice(2,4)) [5,7] // 從下標2開始擷取到下標4的元素，不包含下標為4的值
console.log(a.slice()) // [1,3,5,7,9]
console.log(a.slice(1,-2)) // [3,5] 終止下標為負數，出現負數時，將負數加上陣列長度的值來替換該位置的數（1，3）
console.log(a.slice(-4,-1)) // [3,5,7] 兩個值都為負數時，都加上陣列長度值（1，4）
萬能的新增刪除
2個引數時，可以作刪除操作，分別表示要刪除陣列第一個元素的位置和項數
3個引數，可以作替換操作，分別表示起始位置、刪除的項數、插入的項
var a = [1,3,5,7,9]
console.log(a.splice(1,3)) // [3,5,7]
console.log(a) // [1,9]
var a = [1,3,5,7,9]
console.log(a.splice(1,0,2,3)) // [1,2,3,3,5,7,9]
var a = [1,3,5,7,9]
console.log(a.splice(1,2,2,3) // [1,2,3,7,9]
陣列反轉
將陣列中的元素倒敘排序，返回逆序的資料
var a = ['a','b','c','d']
console.log(a.reverse()); // ["d", "c", "b", "a"]
在陣列中查詢元素
indexOf(): 從陣列的首位向後找，返回元素下標
lastIndexOf(): 從陣列末尾向前找，返回元素下標
var a = [1,3,5,7,9]
console.log(a.indexOf(9)) // 4
console.log(a.lastIndexOf(9)) // 4
var a = [1,3,3,5,7,7,9]
console.log(a.indexOf(3)) // 1 預設從前向後找
console.log(a.lastIndexOf(3)) // 2 預設從後向前找
陣列迴圈遍歷
var arr = [1,3,5,7,9];
arr.forEach(function(item, index, arr){
console.log(item + '-' + index + '-' + (arr === arr));
});
陣列對映
var arr = [1,3,5,7,9];
var arr2 = arr.map(function(item){
return item*2
});
console.log(arr2) // [2,6,10,14,18]
查詢滿條件的值
對陣列中的每一項執行給定函式，返回滿足條件的元素組成的陣列
var arr = [1,3,5,7,9];
var arr2 = arr.filter(function(item,index){
return item > 3
});
console.log(arr2) // [5,7,9]
填充陣列
Array(20).fill(item)
// 20代表陣列中元素的個數，item代表每個陣列的值
深拷貝
let obj = {
id:1,
info:{
name:"hello",
age:24
}
}
let obj2 = JSON.parse(JSON.stringify(obj))
obj2.id = 3;
obj2.info.name = "劉亦菲";
console.log(obj.id); // 1
console.log(obj.info.name); // hello
優逸客 孔令華