提高代码效率的JS数组方法（持续更新中~）

扩展运算符

es6之扩展运算符 三个点（…）

对象的扩展运算符：

对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

上述方法实际上等价于:

let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。

同样，如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉，扩展运算符也可以覆盖属性，常用于数组合并去重。

扩展运算符对对象实例的拷贝属于一种浅拷贝。肯定有人要问什么是浅拷贝？我们知道javascript中有两种数据类型，分别是基础数据类型和引用数据类型。基础数据类型是按值访问的，常见的基础数据类型有Number、String、Boolean、Null、Undefined，这类变量的拷贝的时候会完整的复制一份；引用数据类型比如Array，在拷贝的时候拷贝的是对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化。

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

扩展运算符还可以将字符串转为真正的数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

————————————————
原文链接：https://blog.csdn.net/astonishqft/article/details/82899965

数组置空 — length=0

let arr = [1,2,3]
arr = []

其实啊arr=[]是将arr数据引用到空数组[]中，其他引用arr数据的变量是不受影响的。这就意味着，数组先前的内容依旧保存在内存中，当数据量比较大时，可以会造成内存泄漏！

let arr = [1,2,3]
arr.length = 0

这样就可以彻底清空arr数据的内容，先前引用arr数据的内容也会一并消失。

数组头部插入数据—arr1.concat(arr2)合并数组

数据头部插入数据，你是否还在用JS提供的**unshift()**方法。

let arr = [1,2,3]
arr.unshift('我是头部插入的数据')
console.log(arr) // => ['我是头部插入的数据', 1, 2, 3]

现在21世纪了，得用新的思路去解决问题，考虑到性能的问题，现在我们可以采用以下的办法实现数组插入数据。

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

数组去重—new Set(arr)

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']
//倘若不用Arry.from()呢？
console.log(new Set(arr)) // => {'9', '1', '2', '3', '4','5','6'}

复制数组

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

let arr = ['张三', '李四', '王五', '找六', '张三']
let test = [...arr] // => 深拷贝
console.log(test) // => ['张三', '李四', '王五', '找六', '张三']
let obj = {
age: 18,
name: '小明',
address: {
city: '东莞'
}
}
let newObj = {...obj}
console.log(newObj.address.city) // => 东莞

由上可见，扩展运算符 还可以将数组转为对象

let arr = ['张三', '李四', '王五', '找六', '张三']
let obj = { ...arr }
console.log(obj)
// => {0: '张三', 1: '李四', 2: '王五', 3: '找六', 4: '张三'}

合并数据—new Set([…arr2, …arr3])

扩展运算符

let arr2 = ['张三', '李四', '王五', '找六', '张三']
let arr3 = ['小明', '小红', '王五', '张三']
console.log([...arr2, ...arr3])
// => ['张三', '李四', '王五', '找六', '张三', '小明', '小红', '王五', '张三']
//很明显这样的合并不是我们想要的效果，我们需要对数组去重
console.log(Array.from(new Set([...arr2, ...arr3])))
// => ['张三', '李四', '王五', '找六', '小明', '小红']

数组交集

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

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测；filter() 不会改变原始数组。

let arr2 = ['张三', '李四', '王五', '找六', '张三']
let arr3 = ['小明', '小红', '王五', '张三']
let jiaoji = [...new Set(arr2)].filter(item => arr3.includes(item)) // => ['张三', '王五']

获取数组随机数

使用数组长度来确定范围,使用Math.floor()和Math.random()方法获得一个随机值

let arr2 = ['张三', '李四', '王五', '找六', '张三']
console.log(arr2[Math.floor(Math.random() * (arr2.length))]) // => 张三

获取最后出现的下标—lastIndexOf

lastIndexOf 可以帮助我们获取数组最后出现字符的下标

let arr2 = ['张三', '李四', '王五', '找六', '张三']
console.log(arr2.lastIndexOf('张三'))
// => 4

数组倒序和字符串倒序—reverse

let arr2 = ['张三', '李四', '王五', '找六']
console.log(arr2.reverse()) // => ['找六', '王五', '李四', '张三']

说到 reverse 这里插一句，实现字符串倒叙可以怎么完成？我们还是利用数组的 reverse 方法。首先将字符串切割split为数组，然后反转数组，最后拼接数组join为字符串

let str = 'abcdef'
console.log(atr.split('').reverse().join('')) // => fedcba

替换任意位置的值

splice() 方法从数组中添加/删除项目，然后返回被删除的数据。该方法会改变原始数组。注意插入值的位置！

let arr2 = ['张三', '李四', '王五', '找六', '张三']
arr2.splice(1, 3, '替换值1', '替换值2', '替换值3')
console.log(arr2) //从1位开始替换接下来的三个
// => ['张三', '替换值1', '替换值2', '替换值3', '张三']
arr2.splice(0, 1)
// => 不传入值的时候代表删除数据
console.log(arr2)
// => ['张三', '替换值1', '替换值2', '替换值3', '张三'] // => ['李四', '王五', '找六', '张三']

遍历数组

平时我们使用最多的就是数组的 .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)

map()方法

用于遍历的同时使用函数操作每个元素

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

语法

array.map(function(currentValue,index,arr), thisValue)

参数说明

去掉数据中的虚假值

JS中虚假值有：false、0、’’、null、NaN、undefined、-0

let arr4 = ['小明', '小蓝', '', false, ' ', undefined, null, 0, NaN, true]
console.log(arr4.filter(Boolean)) // => ['小明', '小蓝', ' ', true]

值得注意的是' ' 并不是虚假值

数组求和

通常想到的就是直接遍历数组，然后累加，其实 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

当数组中纯数字类型的话得到的值是数字，简单类型的字符串的话是字符串

reduce()

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

注意: reduce() 对于空数组是不会执行回调函数的。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数

最后

以上就是有魅力棒球为你收集整理的提高代码效率的JS数组方法（持续更新中~）的全部内容，希望文章能够帮你解决提高代码效率的JS数组方法（持续更新中~）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。