数组提升效率的几种操作

最新推荐文章于 2022-08-31 09:13:19 发布

qwe_177

最新推荐文章于 2022-08-31 09:13:19 发布

阅读量332

点赞数

分类专栏： # JavaScript 文章标签： javascript es6 前端

原文链接：https://www.jianshu.com/p/2972c53a3ee8

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中数组的各种操作，包括清空数组、头部插入、尾部插入、去重、深拷贝、交集计算、随机取值、查找最后一个索引、字符串倒序、替换元素、遍历以及过滤虚假值的方法。这些技巧在日常开发中非常实用。

摘要由CSDN通过智能技术生成

let arr = [2, 4, 6, 8, 6, 2]

1.数组置空
如果使用arr = [ ] :之前数组的内容依旧保存在内存中，数据较大时，会导致内存泄漏

 arr.length = 0
 console.log(arr) //[]

2.头部插入数据
concat:合并数组，不会更改现有数组，而是返回一个新数组。

let newArr = [9].concat(arr)
console.log(newArr)    //[9, 2, 4, 6, 8, 6, 2]

3.在尾部插入数据

arr[arr.length] = 4
console.log(arr)  //[2, 4, 6, 8, 6, 2, 4]

4.数组去重

console.log(new Set(arr));     //{ 2, 4, 6, 8 }
//对象转数组
console.log(Array.from(new Set(arr)));  //[ 2, 4, 6, 8 ]

5.复制数组简单类型：深拷贝

obj = {
	age: 18,
	name: '小米',
	address: {
	 city: '广东'
	}
}
let test = [...arr]
console.log(test);
let nweObj = { ...obj }
console.log(nweObj);
//将数组转换成对象
let obj = { ...arr }
console.log(obj);  //{0: 2, 1: 4, 2: 6, 3: 8, 4: 6, 5: 2}

6.数组交集

let arr2 = ['张三', '李四', '王五', '赵六', '张三', '李四']
let arr3 = ['小米', '小明', '小红', '小绿', '张三', '李四']
jiao = [...new Set(arr2)].filter(item => arr3.includes(item))  
console.log(jiao);  //[ '张三', '李四' ]

7.获取数组的随机值

console.log(arr[Math.floor(Math.random() * arr.length)]);

8.获取最后出现的下标

console.log(arr.lastIndexOf(6));  //4

9.实现字符串倒序

let str = 'abcdefg'
console.log(str.split('').reverse().join(''));

10.替换任意的位置 splice会改变原始数组

let arr2 = ['张三', '李四', '王五', '赵六', '张三', '李四']
arr2.splice(1, 3, '替换值1', '替换值2', '替换值3',)
console.log(arr2);     //[ '张三', '替换值1', '替换值2', '替换值3', '张三', '李四' ]
arr2.splice(0, 1)   //不传入第三位及以后的值时代表删除数据
console.log(arr2);

11.遍历数组

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

12.去掉数据中的虚假值 ’ '不是虚假值

let arr4 = ['小米', '', false, ' ', undefined, 0, NaN, true]
console.log(arr4.filter(Boolean));  //[ '小米', ' ', true ]

13.数组求和

let arr2 = ['张三', '李四', '王五', '赵六', '张三', '李四']
console.log(arr2.reduce((a, b) => a + b));  //'张三李四王五赵六张三李四'
console.log(arr.reduce((a, b) => a + b));   //28