盘盘在项目中你常用的那些数组API

我们用同样的一个例子来实现reduce一样的功能

...

function getMap2 (key, arr) {const res = {}arr.forEach(v => {res[v[key]] = v;})return res;
}
getMap2('name', sourceArr)['Maic'] 
1
2
3
4
5

当然是可以的，条条大路通罗马,forEach貌似看起来比reduce写的那段代码阅读负担要小得多,但是同样的效果forEach执行效率也比reduce更高点

所以复杂的事情，尽量简单化，没有好坏高低之分，对于搬砖工来说，哪种熟悉就用哪个了。

push

这是一个比较常用的方法，也是向数组中添加数据

场景：假设现在有一个需求，如何将一个一维数组变成一个树结构，并且还要按照指定分类进行分组

原数据大概就是这样

var sourcesData = [{bookType: '文学类',type: 1,bookName: '基督山伯爵',id: 'x123'},{bookType: '财商类',type: 2,bookName: '穷爸爸与富爸爸',id: 'x45622'},{bookType: '经济学',type: 3,bookName: '货币战争',id: 'ssxdede'},{bookType: '文学类',type: 1,bookName: '百年孤独',id: '1234562sx'}
] 
1
2

后端给的数据是一维的，我们需要变成一个tree结构进行分类

const transformTree = (sourceArr, result) => {// 1、先根据type字段进行分组const typeData = [1, 2, 3].map(type => sourceArr.filter(v => v.type === type * 1))// 2、分别含有type字段进行分类后for (data of typeData) {data.forEach(item => {// 3、根据bookType进行归组，文件夹分类，同一文件夹的归到一类去 const target = result.find(v => v.label === item.bookType);if (target) {// 如果找到了就原数组数据添加到children里去target.children.push({label: item.bookName,...item})} else {result.push({label: item.bookType,children: [{...item,label: item.bookName}]})}})}return result
}
console.log('push:res', JSON.stringify(transformTree(sourcesData, []), null, 2)); 
1
2
3

打印的结果:

[{"label": "文学类","children": [{"bookType": "文学类","type": 1,"bookName": "基督山伯爵","id": "x123","label": "基督山伯爵"},{"label": "百年孤独","bookType": "文学类","type": 1,"bookName": "百年孤独","id": "1234562sx"}]},{"label": "财商类","children": [{"bookType": "财商类","type": 2,"bookName": "穷爸爸与富爸爸","id": "x45622","label": "穷爸爸与富爸爸"}]},{"label": "经济学","children": [{"bookType": "经济学","type": 3,"bookName": "货币战争","id": "ssxdede","label": "货币战争"}]}
] 
1
2

因此我们就将一个一围数组变成了一个tree结构

我们可以将上面一段forEach改成reduce，感受下理解的难度,最后的效果是一样，但是reduce对新手不太友好,这里就是为了使用而使用，好像没太必要

const transformTree2 = (sourceArr, result) => {// 1、先根据type字段进行分组const typeData = [1, 2, 3].map(type => sourceArr.filter(v => v.type === type * 1))// 2、分别含有type字段进行分类后for (data of typeData) {data.reduce((prev, cur) => {// 3、根据bookType进行归组，文件夹分类，同一文件夹的归到一类去const target = result.find(v => v.label === cur.bookType);if (target) {target.children.push({label: cur.bookName,...cur})} else {result.push({label: cur.bookType,children: [{...cur,label: cur.bookName}]})}}, sourceArr[0])}return result
}
console.log(transformTree2(sourcesData, [])) 
1
2
3

some

只要条件有一个满足就返回true,否则就返回false 场景: 我需要在原数组大于某个值，一旦满足，就返回true

const arraySome = (arr, num) => {return arr.some(v => v > num)
}
console.log('some:', arraySome([1, 2, 3], 2), arraySome([4, 5, 6], 7)) // true, false 
1
2
3

every

恰好与some相反，必须所有条件满足，才会返回true

场景: 在业务中你想一个原数据的每一项都满足一个指定条件，此时会返回true,否则就是false

const arrayEvery = (arr, num) => {return arr.every(v => v.includes(num))
}
console.log('every:', arrayEvery(['abc', 'cdabc', 'efg'], 'ab'), arrayEvery(['abc', 'cdabc', 'aefg'], 'a')) // false true 
1
2
3

at

比较罕见，与通过下标取值等价

const arrayAt = (arr = [], index) => {return arr.at(index)
} 
1
2

concat

在原有数组浅拷贝一份新的数据，然后在新数据添加对应的内容

/**
 * arr: [1,2,3]
 * concat: 在原数组基础上浅拷贝一份新的数据，然后在新数据上追加对应的内容
 * 示例：ret = arr.concat(4) ----- ret: [1,2,3,4]
 *ret = arr.concat('a', {a:'Maic'}, ['abc',{a: 'Tom'}])ret: [1,2,3,'a',{a:'Maic'},'abc', {a: 'Tom'}]
 *ret = arr.concat(1).concat(2) [1,2,3,1,2]
 * 场景：不太想影响原数据，又想在原数据上添加数据时，但是注意这个方法是一个浅拷贝，如果数组中是引用数据类型，修改新值会影响原有的值
 * */
const arrayConcat = () => {const arr = [1, 2, 3, { name: 'Maic' }]const newArr = arr.concat('abc')newArr[3].name = 'Tom'const arr2 = arr.concat('a', { a: 'Maic' }, ['abc', { a: 'Tom' }])const arr3 = arr.concat([1, 2, 3])const arr4 = [1, 2, 3].concat(4).concat(5)return {newArr,arr,arr2,arr3,arr4}
}
console.log('concat:', arrayConcat()) 
1
2
3
4
5
6
7
8
9
10
11

fill

填充一份相同的数据

场景： 你想mock一份测试数据

const arrayFill = (num, val) => {return Array(num).fill(val)
}
console.log('fill:', arrayFill(3, 'Maic'))
/*
 [ 'Maic', 'Maic', 'Maic' ]
*/ 
1
2
3
4
5
6

find

/**
 * find: 寻找数组的item,并返回其寻找到的结果, 如果没有找到就返回undefined
 * 场景：需要根据某个条件值找到数据中的当前item数据时
 */
const arrayFind = (sourceData, key, target) => {return sourceData.find(v => v[key] === target)
}
console.log('find:', arrayFind([{ name: 'Maic', age: 18 }, { name: 'Tom', age: 25 }], 'name', 'Maic')) // {name: 'Maic', age: 18} 
1
2
3
4
5
6
7

findIndex

寻找原数据匹配的目标值下标

/**
 * findIndex: 寻找目标值的当前索引,如果没找到就返回-1
 * 场景：在你根据某个条件想获取当前条件的索引值，比如进行删除，或者插入，替换等操作
 */

const arrayFindIndex = (sourceData, key, target) => {return sourceData.findIndex(v => v[key] === target)
}
console.log('findIndex', arrayFindIndex([{ name: 'Maic', age: 18 }, { name: 'Tom', age: 25 }], 'name', 'Jack')) 
1
2
3
4
5
6
7
8

lastIndexOf

找到目标元素的当前索引

/**
 * lastIndexOf: 找到元素的当前下标索引
 * 场景：功能与findIndex类似，根据其值寻找目标值的当前下标索引
 */
const arrayLastIndexOf = (sourceData, val) => {return sourceData.lastIndexOf(val)
}
console.log('lastIndexOf', arrayLastIndexOf(['a', 'b', 'c', 'd'], 'b')) // 1 
1
2
3
4
5
6
7

pop

获取数组元素的最后一只元素的值，会改变原数组的长度，每一次pop操作将会把数组的最后一只值弹出去，原数组长度会减一

const arrayPop = function (sourceData) {return sourceData.pop()
}
console.log('pop:', arrayPop(['a', 'b', 'c'])) // c 
1
2
3

reverse

将原数据进行倒叙排列

const arrayReverse = (sourceData) => {return sourceData.reverse()
}
console.log('reverse', arrayReverse([1, 2, 3, 4])) // [4,3,2,1] 
1
2
3

shift

获取数组的第一个元素，会改变原数组的长度，会改变原数组 场景：模拟队列

const arrayShift = (sourceData) => {return {data: sourceData.shift(),sourceData}
}
console.log('shift', arrayShift([1, 2, 3, 4])) // {data:1, sourceData: [2,3,4]} 
1
2
3

unshift

向原数据添加数据，每次操作都会往数组的首位添加，会改变原数组的长度，返回值是当前数组的长度

const arrayUnshift = (sourceData, val) => {return {result: sourceData.unshift(val),sourceData}
}
console.log('unshift:', arrayUnshift([1, 2, 3], 'a')) 
1
2
3

slice

获取原数据指定索引范围的值，不会影响原有值

/**
 * slice: 获取原数据指定索引范围的值，不会影响原有值
 * 场景：应用很多
 * arr: [1,2,3,4]
 * 
 * arr.slice(0) --- [1,2,3,4] 浅拷贝
 * arr.slice(1) ---[2,3,4]
 * 
 * arr.slice(1,3) --- [2,3]
 * 
 * arr.slice(-1) ---[4]
 * arr.slice(-2)----[3,4]
 * 
 */
const arraySlice = (sourceArr = []) => {const arr1 = sourceArr.slice(0);const arr2 = sourceArr.slice(1);const arr3 = sourceArr.slice(1, 3);const arr4 = sourceArr.slice(-1);const arr5 = sourceArr.slice(-2);return {arr1,arr2,arr3,arr4,arr5}
}
console.log('slice:', arraySlice([1, 2, 3, 4]));
/*
slice: {arr1: [ 1, 2, 3, 4 ],arr2: [ 2, 3, 4 ],arr3: [ 2, 3 ],arr4: [ 4 ],arr5: [ 3, 4 ]
}
*/ 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

sort

对数组进行排序

/**
 * sort: 排序
 * arr.sort((a, b) => a - b) // 升序
 * arr.sort((a,b) => b-a) // 降序
 * 场景：对数据的某个字段进行排序
 */

const arraySort = (sourceArr = []) => {const upSort = sourceArr.sort((a, b) => a - b)const downSort = sourceArr.sort((a, b) => b - a)return {upSort,downSort}
} 
1
2
3
4
5
6
7
8
9

splice

对原数组进行删除、替换、截取操作，会影响原数组的值

const arraySplice = () => {const arr1 = [1, 2, 3, 4].splice(1); // [2,3,4]const arr2 = [1, 2, 3, 4].splice(0, 2); // [1,2]const arr3 = [1, 2, 3, 4].splice(2, 1); // [1,2,4] 删除了索引为2的元素，返回剩下的元素const arr4 = [1, 2, 3, 4].splice(-1); // [4]return {arr1,arr2,arr3,arr4}
}
console.log('splice:', arraySplice()) 
1
2
3

filter

过滤数组操作，根据某个条件，返回一个过滤结果的数组

/**
 * filter: 根据条件进行过滤，返回过滤后的结果
 * 场景： 需要过滤原数据中某些值时
 */
const arrayFilter = (sourceData, val) => {return sourceData.filter(v => v === val)
}
console.log('filter:', arrayFilter([1, 2, 3, 4], 4)) 
1
2
3
4
5
6
7

map

根据原数组重新返回一个新的数组

/*
 * map: 在原有基础上重新返回一个新数组
 */
const arrayMap = (sourceArr) => {return sourceArr.map(v => v + 1)
}
console.log('map:', arrayMap([1, 2, 3]))
// [2,3,4] 
1
2
3
4
5
6
7

flatMap

场景：可以根据原数组组合成一个你想要的数据结构

比如原数据有不想要的字段

const arrayFlatMap = (sourceArr, arr) => {return {source: sourceArr.flatMap(v => typeof v === 'number' ? [v] : []),narr: arr.flatMap(v => [{ name: v.name, value: v.value }])}
}
console.log('flatMap:', arrayFlatMap([1, 2, [3, 4]], [{ id: 1, name: 'Maic', value: 0 }, { id: 2, name: 'Tom', value: 1 }]))

/**
 * flatMap: {source: [ 1, 2 ],narr: [ { name: 'Maic', value: 0 }, { name: 'Tom', value: 1 } ]}
 */ 
1
2
3
4
5
6
7

toString

将数组转换成字符串

/**
 * toString: 将数组进行转换
 * 场景：想将一个数组变成字符串
 */
const arrayTostring = (sourceArr) => {return sourceArr.toString()
}
console.log('toString:', arrayTostring([1, 2, 3, 4]))
/*
1,2,3,4
*/ 
1
2
3
4
5
6
7
8
9
10

includes

判断一个数组是否包含某个元素

/**
 * includes: 包含
 * 场景：一个元素是否在数组中存在
 */
const arrayIncludes = (arr, val) => {return arr.includes(val)
}
console.log('arrayIncludes:', arrayIncludes([1, 2, 3], 1)) 
1
2
3
4
5
6
7

indexOf

获取一个元素的下标，如果没有就返回-1

const arrayIndexOf = (arr, val) => {return arr.indexOf(val)
}
console.log(arrayIndexOf([1, 2, 3], 1)); 
1
2
3

join

将一个数组以特殊字符进行拼接，变成一个字符串

const arrayJoin = (arr, split) => {return arr.join(split)
}
console.log(arrayJoin([1,2,3], '-'))
// join: 1-2-3 
1
2
3
4

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享