JS处理数组的妙招

前言：面对业务开发的时候，经常需要对数组进行数据处理，下面就是处理数组元素常用的方法。

数组置空

正常人数组置空，这不是很简单么

//数组置空
let arr = ['1', '2', '3']
arr = []

其实，这样只是将arr数据引用到空数组[]中，其他引用arr数据的变量不会收到影响，那就是arr数组先前的内容仍保存在内存中,因为数组的是个对象，对象是保存在堆内存中，当数据量较大的时候，可能会造成内存泄露。

//数组置空
let arr = ['1', '2', '3']
let bArr = arr
arr = []
console.log(arr)//[]
console.log(bArr)//[ '1', '2', '3' ]

正确的数组变为空，这样就可以彻底清空arr的内容了，引用arr数据的内容也一起清空了。

//数组置空
let arr = ['1', '2', '3']
let bArr = arr
arr.length = 0
console.log(arr)//[]
console.log(bArr)//[]

数组头部插入数据

正常人使用JS提供的unshift()方法，这个方法是在原数组上改动，不创建新的数组。

let arr = [1, 2, 3]
arr.unshift('头头头')
console.log(arr) // => ['头头头', 1, 2, 3]

也可以使用concat()方法，连接两个数组，并创建新的数组，该方法不会改变现有的数组。

let arr = [1, 2, 3]
let newArr = ['头头头'].concat(arr)
console.log(newArr)// => ['头头头', 1, 2, 3]

测试一下性能

let arr = []
console.time('开始测试 10000次 数据操作时 concat 的性能')
for (let i = 0; i < 10000; i++) {
  arr.concat(['concat在测试'])
}
console.timeEnd('开始测试 10000次 数据操作时 concat 的性能')

console.time('开始测试 10000次 数据操作时 unshift 的性能')
for (let i = 0; i < 10000; i++) {
  arr.unshift(['unshift在测试'])
}
console.timeEnd('开始测试 10000次 数据操作时 unshift 的性能')

可以看出插入大量数据时concat方法性能比较好，比较快

数组尾部插入数据

方法一

let arr=[1,2,3]
arr.push(4)
console.log(arr)//[1,2,3,4]

方法二

let arr=[1,2,3]
arr[arr.length]=4
console.log(arr)//[1,2,3,4]

测试性能

let arr = []
console.time('开始测试 10000次 数据操作时 push 的性能')
for (let i = 0; i < 10000; i++) {
    arr.push('push在测试')
}
console.timeEnd('开始测试 10000次 数据操作时 push 的性能')

console.time('开始测试 10000次 数据操作时 length 的性能')
for (let i = 0; i < 10000; i++) {
    arr[arr.length] = 'length在测试'
}
console.timeEnd('开始测试 10000次 数据操作时 length 的性能')

可以看出插入大量数据时arr[arr.length]性能比较好，比较快。

数组去重

let arr = ['9', '1', '2', '3', '4', '5', '1', '3', '2', '6', '2']
console.log(Arry.from(new Set(arr))) // =>['9', '1', '2', '3', '4', '5', '6']//变成数组
console.log(new Set(arr)) // => {'9', '1', '2', '3', '4','5','6'}//变成对象

复制数组

利用 扩展运算法 实现数组的复制。值得注意的是，扩展运算符 的使用是深拷贝还是浅拷贝得看数据源的数据类型。如果只是一层数组或是对象，其元素只是简单类型的元素，那么属于深拷贝。

let arr = ['张三', '李四', '王五', '曾六', '张三']
let test = [...arr] // => 深拷贝
console.log(test) // => ['张三', '李四', '王五', '曾六', '张三']

合并数据

可以使用concat，和es6的拓展运算符

let arr2 = [1, 2, 3, 4, 5]
let arr3 = [4, 5, 6, 7]
console.log([...arr2, ...arr3]) // => [1, 2, 3, 4, 5, 4, 5, 6, 7]
//很明显这样的合并不是我们想要的效果，我们需要对数组去重
console.log(Array.from(new Set([...arr2, ...arr3])))
// => [1, 2, 3, 4,5, 6, 7]

数组交集

利用 filter 跟ES7的 includes 方法来完成

let arr2 = [1, 2, 3, 4, 5, 6]
let arr3 = [4, 5, 6, 7, 8]
let jiaoji = [...new Set(arr2)].filter(item => arr3.includes(item))
console.log(jiaoji) // => [ 4, 5, 6 ]

获取数组的随机值

使用Math.floor()和Math.random()方法获得一个随机值

Math.floor():返回小于或等于一个给定数字的最大整数。

Math.random():返回介于 0（包含） ~ 1（不包含） 之间的一个随机数：

let arr2 = [1, 2, 3, 4, 5]
console.log(arr2[Math.floor(Math.random() * (arr2.length))])//=>4

数组倒序

利用reverse()方法用于颠倒数组中元素的顺序。

let arr2 = [1, 2, 3, 4]
console.log(arr2.reverse()) // => [ 4, 3, 2, 1 ]

遍历数组

遍历数组可以使用for循环，或者使用.map，是返回新数组，还有Array.from()方法，直接改变原数组

let list = [
  { name: '小明', age: 11 },
  { name: '小红', age: 13 },
  { name: '校长', age: 15 }
]
Array.from(list, (item) => item.str = `名字：${item.name}，年龄：${item.age}`)
console.log(list)
/*[
    { name: '小明', age: 11, str: '名字：小明，年龄：11' },
    { name: '小红', age: 13, str: '名字：小红，年龄：13' },
    { name: '校长', age: 15, str: '名字：校长，年龄：15' }
  ]*/

数组求和

可以遍历数组实现，也可以使用reduce()方法

let arr2 = ['张三', '李四', '王五', '找六', '张三']
console.log(arr2.reduce((a, b) => a + b)) // => 张三李四王五找六张三
let arr5 = [1, 2, 3, 4]
console.log(arr5.reduce((a, b) => a + b)) // => 10

填充数组

fill(item, start, end) 用指定元素填充数组

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

匹配数组元素的下标

使用findIndex()返回数组中符合当前搜索规则的第一个元素，返回它的下标

const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0