js总结之数组

创建数组

使用[]或者Array()构造函数来创建数组

jsCopy
let arr1 = [1, 2, 3];
let arr2 = Array(4, 5, 6);

传统方法

jsCopy
const arr=[]

构造函数

jsCopy
const arr=Array(3)
[...Array(100).fill(0)]

类数组

类数组是指具有length属性和一组按照索引值存储数据的对象，但是它不具备数组的所有特性。在JavaScript中，有很多内置对象都可以被看作是类数组，例如DOM中的NodeList对象、函数中的arguments对象等。这些对象都具有类数组的特点，但是不能直接使用数组的方法进行操作。

类数组转化

jsCopy
Array.prototype.slice.call()
[...]
Array.apply(null, { length: 100 }).fill(0);
Array.from({length: 100}, _ => 0)
Array.from({length: 100}).map(()=> 0)

创建0-100的数组

jsCopy
传统方法 for 循环
Object.keys(Array.from({length: 100}));
[...new Array(100).keys()]
Array.from({length:100},(v,i) => i)
Array.from(new Array(100).keys())
[...Array(100).keys()]
[...Array.from({length:100}).keys()]

实现flat

1. 遍历
2. 判断是否数组

数组空位

存在空位的数组为稀疏数组，没有空位的为密数组

jsCopy
[,,,]//[empty × 3]
new Array(3)//[empty × 3]

es5数组的方法处理一般会跳过数组的空位

jsCopy
// forEach 忽略空位
[1, , 2].forEach(v => console.log(v)); // 1 2

// for in 忽略空位
for(let key in [1, , 2]){ console.log(key); } // 0 2

// filter 忽略空位
console.log([1, , 2].filter(v => true)); // [1, 2]

// every 忽略空位
console.log([1, , 1].every(v => v === 1)); // true

// some 忽略空位
console.log([1, , 1].some(v => v !== 1)); // false

// map 遍历时忽略空位 新数组保留空位
console.log([1, , 1].map(v => 11)); // (3) [11, empty, 11]

// join 将空位与undefined以及null视为空字符串
console.log([1, , 1, null, undefined].join("|")); // 1||1||

// toString 将空位与undefined以及null视为空字符串
console.log([1, , 1, null, undefined].toString()); // 1,,1,,`

es6数组的方法处理一般把空位转化为undefined

jsCopy
// Array.form 将空位转为undefined
console.log(Array.from([1, , 2])); // (3) [1, undefined, 2]

// ... 将空位转为undefined
console.log([...[1, , 2]]); // (3) [1, undefined, 2]

// copyWithin 将空位一并拷贝
console.log([1, , 2].copyWithin()); // (3) [1, empty, 2]

// for of 遍历空位并将值作为undefined
for(let key of [1, , 2]){ console.log(key); } // 1 undefined 2

// includes 将空位处理成undefined
console.log([, , ,].includes(undefined)); // true

// entries 将空位处理成undefined
console.log([...[1, , 2].entries()]); // [[0, 1], [1, undefined], [2, 2]]

// keys 会取出空位的索引
console.log([...[1, , 2].keys()]); // [0, 1, 2]

// values 将空位处理成undefined
console.log([...[1, , 2].values()]); // [1, undefined, 2]

// find 将空位处理成undefined
console.log([, , 1].find(v => true)); // undefined

// find 将空位处理成undefined
console.log([, , 1].findIndex(v => true)); // 0

基础数据类型的数组

jsCopy
const array = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
console.log([...new Set(array)])//[1]
console.log(Array.from(new Set(array)))//[1]

引用对象类型的数组

filter

循环遍历每个值，判断索引，当前索引和findIndex索引一致则不重复，不一致则重复

jsCopy
const arr = [{name: 'zxc'}, {name: 'zxc'}, {name: 'zxc'}, {name: 'zxc'}]
const b=arr.filter((item,idx)=>{
    return arr.findIndex(_=>_.name===item.name)===idx
})
console.log(b)//[{name: "zxc"}]

中间值hash，循环遍历，如果存在返回flase，不存在加入hash返回true

reduce

jsCopy
const arr = [{name: 'zxc'}, {name: 'zxc'}, {name: 'zxc'}, {name: 'zxc'}]
const a=arr.reduce((prev, curr) => {
    if (prev.some(_=>_.name===curr.name)) {
        return prev
    } else {
       return [...prev,curr]
    }
}, [])
console.log(a)//[{name: "zxc"}]

findIndex

javascriptCopy
const arr = [{name: 'zxc'}, {name: 'zx1c'}, {name: 'zxc'}, {name: 'zx1c'},]
const newArray = []
arr.forEach((item, idx) => {
    if (arr.findIndex(i => i.name === item.name) === idx) {
        newArray.push(item)
    }
})
console.log(newArray)

Map

javascriptCopy
const arr = [{name: 'zxc'}, {name: 'zx1c'}, {name: 'zxc'}, {name: 'zx1c'},];
const newArray = []
const set = new Set()
arr.forEach((item) => {
    if (!set.has(item.name)) {
        newArray.push(item)
        set.add(item.name)
    }
})
console.log(newArray)

参考文章