1. for循环数组

一般在用 for循环 遍历数组的时候会读取数组的 length 属性用于极限值的处理

1
2
3
4
const arr = [1,2,3,4,5]
for(let i = 0; i < arr.length; i++){
    console.log(arr[i])
}

但事实上，每次循环中，都会重新读取数组的 length 属性，在数据大且复杂的情况下，会有一些性能损耗的

可以采取以下的写法

1
2
3
for(let i = arr.length - 1; i >= 0; i--){
    console.log(arr[i])
}

或

1
2
3
4
const length = arr.length
for(let i = 0; i < length; i++){
    console.log(i)
}

2. 数组的map方法

原生数组提供了两种遍历的方法，分别是 forEach 和 map

其中 map 可以访问数组的每一项，并返回一个值来作为方法返回数组的这一项

1
2
3
4
5
// 例如
const users = [{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'}]
// 可以通过map快速得到所有用户的姓名
const names = users.map(user=>user.name) // ['张三','李四','王五']
// 这里采用了箭头函数的简写方式

在做曲线中一个比较常见的应用场景

给定一个数组，原数组作为图表的其中一条数据，另一条数据为数组的累加值

1
2
3
4
5
6
7
8
9
10
11
12
13
const arr = [1,2,3,4,5,6]
// 仍然采用的简写的方式
const totalNum = arr.map((v,i)=>arr.slice(0,i+1).reduce((a,b)=>a+b,0)) //[1, 3, 6, 10, 15, 21]

/*
const totalNum = arr.map((value,index)=>{
	// 访问起始项到当前项数据之和，且不影响原数组
	return arr.slice(0,i+1).reduce((a,b)=>{
		return a + b
	},0)
	// reduce第二个参数是当数组为空数组时，默认的累加数据为0
})
*/

3. 简易的数组去重

数组去重的方法有很多，一般场景都会有封装的方法，在编写一些简单逻辑的时候可以采用 ES6 的 Set 的结构实现去重

1
2
3
4
5
6
7
function noRepeat(arr){
    return Array.from(new Set(arr))
}
// 也可以使用拓展运算符，但这在typescript环境下是不合法的语法
function noRepeat(arr){
    
}