本文主要來講數組API的一些操作,如簡單實作扁平化n維數組、數組去重、求數組最大值、數組求和、排序、對象和數組的轉化等。
一、 扁平化嵌套數組/展平和陣列孔——flat()
- 實作效果
var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(2); // [1, 2, 3, 4, 5, 6]
//flat方法删除數組中的空槽:
var arr3 = [1, 2, , 4, 5];
arr3.flat(); // [1, 2, 4, 5]
該flat([depth])方法建立一個新數組,所有子數組元素以遞歸方式連接配接到指定的深度。depth深度級别指定嵌套數組結構應該展平的深度。預設為1。
2.方法解讀:
該方法的實質是利用遞歸和數組合并方法 concat實作扁平。可以使用
Array.reduce()/Array.some()/Array.concat()
- 利用Array.reduce()和Array.concat()實作
const flat1 = function (arr) {
return arr = arr.reduce((pre, cur) => Array.isArray(cur) ? pre.concat(flat1(cur)) : pre.concat(cur),
[])
}
var arr3 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];
flat1(arr3); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
- 利用Array.some()和Array.concat()實作
const flat2 = function(arr){
while(arr.some(item=>Array.isArray(item))){
arr=[].concat(...arr);
}
return arr;
}
var arr3 = [1, 2, 3, [1, 2, 3, 4, [2, 3, 4]]];
flat2(arr3); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
二、數組去重——set()
1.實作效果
Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4]
[...new Set([1,2,3,3,4,4,5,6])] //[1,2,3,4,5]
set是ES6新出來的一種一種定義不重複數組的資料類型。
Array.from是将類數組轉化為數組。
...是擴充運算符,将set裡面的值轉化為字元串。
2.方法解讀
function unique(arr) {
var result =[];
for (var i = 0; i < arr.length; i++) {
for (var j = i+1; j < arr.length; j++) {
if (arr[i] === arr[j]) {
j=++i;
}
}
result.push(arr[i]);
}
return result;
}
var arr3 = [1, 2, 3, 3, 4, 5, 4];
unique(arr3);//(5) [1, 2, 3, 5, 4]
三、數組排序——sort()
1.實作效果
[1,3,2,5,4].sort();
[1,3,2,5,4].sort((a,b)=>b-a);
2.方法解讀
冒泡排序
Array.prototype.bulesort = function () {
let arr = this,
len = arr.length;
for (let outer = len; outer >= 2; outer--) {
for (let inner = 0; inner <= outer - 1; inner++) {
if (arr[inner] > arr[inner + 1]) {
[arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]];
}
}
}
return arr;
}
[3, 4, 2,1].bulesort()//[1,2,3,4]
四、最大值
1.實作效果
Math.max(...[1,2,3,4]); //4
Math.max.apply(this, [1, 2, 3, 4]); //4
[1, 2,3, 4].reduce((prev,cur)=>{
return Math.max(prev, cur);
},0);//4
2.方法解讀
先排序,再取值。
五、求和
1.實作效果
[1, 2, 3, 4].reduce((prev,cur)=>{
return prev+cur;
},0); //10
2.方法解讀
function sum(arr){
if (arr.length==0){
return 0;
} else if (arr.length == 1){
return arr[0];
}else{
return arr[0]+sum(arr.slice(1));
}
}
sum([1, 2, 3, 4]);//10
六、合并
[1,2,3].concat([5,6]);
[...[1,2,4],...[2,3,5,7]]
七、判斷是否有值
[2, 3, 5].indexOf(3);//1
[2,3,5].includes(4)//false
[2, 3, 5].find((item) => { item === 3})//1
[2, 3, 5].findIndex((item) => item === 3)//1
[2, 3, 5].some(item=>{return item===3 })//true
八、類數組轉化
Array.prototype.slice.call(arguments);
Array.prototype.slice.apply(arguments);
Array.from(arguments);
[...arguments]
九、每一項設定值
//array.fill(value, start, end)
[2, 3, 5].fill(true,false,true);//(3)
[false, false, false] [2, 3, 5].map(() => 0)//(3) [0, 0, 0]
十、每一項是否滿足/某一項是否滿足
[2, 3, 5].every(item=>{return item>2}) //false
[2, 3, 5].some(item =>{ return item > 2 })//true
十一、過濾數組
[2, 3, 5].filter(item => { return item > 2 })//(2) [3, 5]
十二、對象和數組轉化
Object.keys({ name: '張三', age: 14 })//["name", "age"]
Object.values({name: '張三', age: 14 })// ["張三", 14]
Object.entries({ name: '張三', age:14 }) // (2) [Array(2), Array(2)]0: (2)["name", "張三"]1: (2)["age", 14]
本文完~