讨论一下你在项目中常用的那些数组API
我报名了Goldstone Project Phase 1 Challenge——瓜分100,000奖池，这是我的第3篇文章， 点击查看活动详情
大批 它是业务中非常高频的 API。它基本上在商业中很有用。这是必不可少的。本文是一组常用的 API。 API 概括。
正文开始……
正面
首先我们看一下数组本身的方法
安慰。 log(JSON.stringify(Reflect.ownKeys(Array.prototype), null, 2))
复制代码
结果：
[
“长度”，
“构造函数”，
“在”，
“连接”，
"copyWithin",
“充满”，
“寻找”，
“查找索引”，
"lastIndexOf",
“流行音乐”，
“推”，
“撤销”，
“转移”，
“不移位”，
“片”，
“种类”，
“拼接”，
“包括”，
“指数”，
“加入”，
“钥匙”，
“条目”，
“价值观”，
"forEach",
“筛选”，
“平坦的”，
"平面地图",
“地图”，
“每一个”，
“一些”，
“减少”，
“减少权利”，
"toLocaleString",
"toString",
“找到最后一个”，
"findLastIndex",
]
复制代码
减少
这是一个在项目中非常有用的API，但是代码看起来不是很简单
-
场景我需要根据数组中的一个值来创建对象和原始数组之间的映射关系var sourceArr = [
{
名称：'麦克'，
年龄：18，
arr：['a'，'b']
},
{
名称：“汤姆”，
年龄：20，
arr：['a'，'b'，'c']
},
{
名称：“杰克”，
年龄：15，
arr：['e'，'d'，'f']
}
]
复制代码
我想通过数组访问数组的某个部分 姓名 或者 价值 当前原始数据可查 物品 ，前提 姓名 和 价值 不会一样
函数getMap（键，arr）{
返回 arr。减少（（上一个，当前）=> {
如果（键）{
上一页[cur[key]] = cur;
返回上一页
}
}，{}）
}
/* getMap('name', sourceArr) { Jack: {name: 'Jack', age: 15, arr: Array(3)} Maic: {name: 'Maic', age: 18, arr: Array(2) } Tom: {name: 'Tom', age: 20, arr: Array(3)} } */
安慰。日志（getMap（'名称'，sourceArr）['Maic']）
/* { name: 'Maic', 年龄: 18, arr: ['a', 'b'] }, */
安慰。日志（getMap（'年龄'，sourceArr）[15]）
/* { name: 'Jack', 年龄: 15, arr: ['e', 'd', 'f'] } */
安慰。日志（getMap（'arr'，sourceArr）['a，b']）
/* { name: 'Maic', 年龄: 18, arr: ['a', 'b'] }, */
复制代码
我们可以做这个方法 获取地图 变得更通用，只需要挂载原型
...
大批。原型。 $getMap = 函数（键）{
退回这个。减少（（上一个，当前）=> {
如果（键）{
上一页[cur[key]] = cur;
返回上一页
}
}，{}）
}
sourceArr.$getMap('name')
/* { Jack: {name: 'Jack', age: 15, arr: Array(3)} Maic: {name: 'Maic', age: 18, arr: Array(2)} Tom: {name: 'Tom ', 年龄: 20, arr: Array(3)} } */
复制代码
通过上面的例子，我们来分析一下 减少 这在数组中调用 累计计算 ，我们用最简单的方式深刻理解 减少 这边走
常量源Arr = [
{
名称：'麦克'，
年龄：18，
arr：['a'，'b']
},
{
名称：“汤姆”，
年龄：20，
arr：['a'，'b'，'c']
},
{
名称：“杰克”，
年龄：15，
arr：['e'，'d'，'f']
}
]
常量 res = sourceArr。减少（（上一个，当前）=> {
上一个[当前。名称] = cur;
返回上一页
}，{}）
复制代码
arr.reduce（回调，初始化） 第一个参数是回调函数，第二个参数prev 在里面 的价值 ， 打回来 的 上一页 那是 {} , 电流 是当前数组 物品
第一次积累的结果 上一页 值为：
{
'儿子'： {
名称：'麦克'，
年龄：18，
arr：['a'，'b']
}
}
复制代码
此结果将被视为第二次累积 上一页 值，记住 电流 是当前原始元素的累积计数 物品 ，例如从下标0开始累加，则 电流 是数组的第一个 物品
第二个累积结果是
{
'儿子'： {
名称：'麦克'，
年龄：18，
arr：['a'，'b']
},
“汤姆”：{
名称：“汤姆”，
年龄：20，
arr：['a'，'b'，'c']
}
}
复制代码
等等…
所以我传对象，数组的值是最多的对象 钥匙 ，通过建立对象和原始数据之间的关系，使用 减少 这种方法可以快速实现这样的需求效果，关于数组 减少 以后我会单独写一篇文章，总结一些对实际业务的思考。也可以参考官方文档 MDN 解释[ 减少](https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FArray%2FReduce) 这篇好文章
有人说 减少 实现这个功能有点秀。 为了 循环不是更好理解吗？
为每个
为每个 它也是一种循环数组的方法。我们知道循环方法在 js 中间 对于..的 , 对于（让我=0；我 或者 尽管 条件，这些可以有条件地中断，但是 为每个 不能中断【除了非常规操作，比如抛出异常，是可以中断的 为每个 的】
我们用同样的例子来实现 减少 相同的功能
...
函数getMap2（键，arr）{
常量 res = {}
arr。 forEach(v => {
资源[v[键]] = v;
})
返回资源；
}
getMap2('name', sourceArr)['Mac']
复制代码
当然可以，条条大路通罗马， 为每个 好像 减少 写出来的代码读起来不那么繁琐，但是效果一样 为每个 执行效率也是 减少 更高
所以，复杂的事情要尽量简化，没有好坏之分。对于搬砖工来说，熟悉的都可以。
推
这是一种比较常用的方法，也是向数组中添加数据
场景 ：假设现在有个需求，如何把一维数组变成树形结构，并按照指定的分类进行分组
原始数据大概是这样的
var 来源数据 = [
{
bookType: '文学',
类型：1，
书名：《基督山伯爵》，
编号：'x123'
},
{
bookType: '金融商务舱',
类型：2，
书名：《穷爸爸和富爸爸》，
编号：'x45622'
},
{
bookType: '经济学',
类型：3，
bookName: '货币战争',
id: 'ssxdede'
},
{
bookType: '文学',
类型：1，
书名：《百年孤独》，
编号：'1234562sx'
}
]
复制代码
后端给的数据是一维的，我们需要把它变成一个 树 分类结构
const transformTree = (sourceArr, 结果) => {
// 1、根据类型字段第一组
常量类型数据 = [ 1, 2, 3]。地图（类型=> sourceArr。过滤器（v => v。类型===类型* 1））
// 2.分别用type字段分类后
for (data of typeData) {
数据。 forEach（项目 => {
// 3.根据bookType、文件夹分类进行分组，同一个文件夹归为一类
常量目标 = 结果。 find(v => v.label === item.bookType);
如果（目标）{
// 如果找到，将原始数组数据添加到 children
目标。孩子们。推（{
标签：项目。书名，
...物品
})
} 别的 {
结果。推（{
标签：项目。书籍类型，
孩子们： [
{
...物品，
标签：项目。书名
}
]
})
}
})
}
返回结果
}
安慰。日志（'push：res'，JSON.stringify（transformTree（sourcesData，[]），null，2））；
复制代码
打印结果：
[
{
“标签”：“文学”，
“孩子们”： [
{
"bookType": "文学",
“类型”：1，
"bookName": "基督山伯爵",
“id”：“x123”，
“标签”：“基督山伯爵”
},
{
"label": "一百年的孤独",
"bookType": "文学",
“类型”：1，
"bookName": "一百年的孤独",
“id”：“1234562sx”
}
]
},
{
“标签”：“金融业务”，
“孩子们”： [
{
"bookType": "金融业务",
“类型”：2，
"bookName": "穷爸爸和富爸爸",
“id”：“x45622”，
“标签”：“穷爸爸和富爸爸”
}
]
},
{
“标签”：“经济学”，
“孩子们”： [
{
"bookType": "经济学",
“类型”：3，
"bookName": "货币战争",
“id”：“ssxdede”，
"label": "货币战争"
}
]
}
]
复制代码
所以我们把一个周围的数组变成一个 树 结构体
我们可以把上面这段 为每个 改成 减少 ，感觉理解的难度，最后的效果是一样的，但是 减少 对新手不太友好，这里是用的，好像没必要
const transformTree2 = (sourceArr, 结果) => {
// 1、根据类型字段第一组
常量类型数据 = [ 1, 2, 3]。地图（类型=> sourceArr。过滤器（v => v。类型===类型* 1））
// 2.分别用type字段分类后
for (data of typeData) {
数据。减少（（上一个，当前）=> {
// 3.根据bookType、文件夹分类进行分组，同一个文件夹归为一类
常量目标 = 结果。查找（v => v.label === cur.bookType）；
如果（目标）{
目标。孩子们。推（{
标签：当前。书名，
...当前
})
} 别的 {
结果。推（{
标签：当前。书籍类型，
孩子们： [
{
......cur，
标签：当前。书名
}
]
})
}
}, 来源Arr[0])
}
返回结果
}
安慰。日志（transformTree2（sourcesData，[]））
复制代码
一些
只要满足其中一个条件就返回真，否则返回假
场景 ：当原始数组大于某个值时，我需要返回true，一旦满足
const arraySome = ( arr, num) => {
返回 arr。一些（v => v > num）
}
安慰。 log( 'some:', arraySome([ 1, 2, 3], 2), arraySome([ 4, 5, 6], 7)) // true, false
复制代码
每一个
正好与 一些 相反，必须满足所有条件才能返回 true
场景 ：在业务中，如果希望原始数据的每一项都满足指定条件，则返回true，否则返回false
const arrayEvery = ( arr, num) => {
返回 arr。每（v => v.包括（num））
}
安慰。日志（'每个：'，arrayEvery（['abc'，'cdabc'，'efg']，'ab'），arrayEvery（['abc'，'cdabc'，'aefg']，'a'））/ /假真
复制代码
在
比较少见，相当于下标取值
const arrayAt = ( arr = [], index) => {
返回 arr。在（索引）
}
复制代码
连接
浅拷贝原数组中的一个新数据，然后在新数据中添加对应的内容
/** * 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] * 场景：当你不想影响原始数据，又想在原始数据中添加数据，但是注意这个方法是浅拷贝。如果数组是引用数据类型，修改新值会影响原值。 * */
常量数组Concat = () => {
const arr = [ 1, 2, 3, { name: 'Mac' }]
常量 newArr = arr。连接（'abc'）
新的 [3]。名称 = '汤姆'
常量 arr2 = arr。连接（'a'，{a：'Maic'}，['abc'，{a：'Tom'}]）
常量 arr3 = arr。连接（[ 1, 2, 3]）
常量 arr4 = [ 1, 2, 3]。连接（4）。连接（5）
返回 {
新的，
啊，
arr2,
arr3,
arr4
}
}
安慰。日志（'concat：'，arrayConcat（））
复制代码
充满
填写相同的数据
场景 : 你想模拟一个测试数据
const arrayFill = ( num, val) => {
返回数组（数字）。填充（val）
}
安慰。日志（'填充：'，arrayFill（3，'Mac'））
/* ['Mac', 'Mac', 'Mac' ] */
复制代码
寻找
/** * find：在数组中查找item，并返回找到的结果，如果没有找到，返回undefined * 场景：当需要根据某个条件值在data中查找当前item数据时 */
const arrayFind = ( sourceData, key, target) => {
返回源数据。查找（v => v[key] === 目标）
}
安慰。 log( 'find:', arrayFind([{ name: 'Maic', age: 18 }, { name: 'Tom', age: 25 }], 'name', 'Maic')) // {name: '迈克，年龄：18}
复制代码
查找索引
找到与原始数据匹配的目标值的下标
/** * findIndex：查找目标值的当前索引，如果没有找到，返回-1 * 场景：当你想根据某个条件获取当前条件的索引值时，比如删除，或者插入，替换等 */
const arrayFindIndex = (sourceData, key, target) => {
返回源数据。 findIndex( v => v[key] === 目标)
}
安慰。 log('findIndex', arrayFindIndex([{ name: 'Maic', age: 18 }, { name: 'Tom', age: 25 }], 'name', 'Jack'))
复制代码
最后一个索引
查找目标元素的当前索引
/** * lastIndexOf：查找元素的当前下标索引* 场景：功能类似于findIndex，根据其值查找目标值的当前下标索引*/
const arrayLastIndexOf = (sourceData, val) => {
返回源数据。 lastIndexOf(val)
}
安慰。 log( 'lastIndexOf', arrayLastIndexOf([ 'a', 'b', 'c', 'd'], 'b')) // 1
复制代码
流行音乐
获取数组元素的最后一个元素的值会改变原始数组的长度。每次弹出操作都会弹出数组的最后一个值，原始数组的长度会减一。
常量 arrayPop = 函数（源数据）{
返回源数据。流行音乐（）
}
安慰。 log('pop:', arrayPop(['a', 'b', 'c'])) // c
复制代码
撤销
对原始数据进行倒序排序
const arrayReverse = (sourceData) => {
返回源数据。撤销（）
}
安慰。 log('reverse', arrayReverse([ 1, 2, 3, 4])) // [4,3,2,1]
复制代码
转移
获取数组的第一个元素会改变原数组的长度，从而改变原数组
场景 : 模拟队列
const arrayShift = (sourceData) => {
返回 {
数据：源数据。转移（），
源数据
}
}
安慰。 log('shift', arrayShift([ 1, 2, 3, 4])) // {data:1, sourceData: [2,3,4]}
复制代码
不移位
将数据添加到原始数据中，每次操作都会添加到数组的第一个，这会改变原始数组的长度，返回值是当前数组的长度
const arrayUnshift = (sourceData, val) => {
返回 {
结果：源数据。取消移位（val），
源数据
}
}
安慰。日志('unshift:', arrayUnshift([ 1, 2, 3], 'a'))
复制代码
片
在不影响原始值的情况下获取原始数据的指定索引范围的值
/** * 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] * */
常量 arraySlice = ( sourceArr = []) => {
常量 arr1 = sourceArr。切片（0）；
常量 arr2 = sourceArr。切片（1）；
常量 arr3 = sourceArr。切片（1、3）；
常量 arr4 = sourceArr。切片（- 1）；
常量 arr5 = sourceArr。切片（- 2）；
返回 {
arr1,
arr2,
arr3,
arr4,
arr5
}
}
安慰。 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 ] } * /
复制代码
种类
对数组进行排序
/** * sort: sort* arr.sort((a, b) => a - b) // 升序* arr.sort((a,b) => ba) // 降序* 对字段排序 */
常量数组排序 = ( sourceArr = []) => {
常量 upSort = sourceArr。排序( ( a, b ) => a - b)
const downSort = sourceArr。排序（（a，b）=> b-a）
返回 {
升序，
向下排序
}
}
复制代码
拼接
做原始数组 删除 , 代替 , 截距 操作，会影响原数组的值
常量数组拼接 = () => {
常量 arr1 = [ 1, 2, 3, 4]。拼接（1）； // [2,3,4]
常量 arr2 = [ 1, 2, 3, 4]。拼接（0, 2）； // [1,2]
常量 arr3 = [ 1, 2, 3, 4]。拼接（2、1）； // [1,2,4] 移除索引为 2 的元素，返回剩余元素
常量 arr4 = [ 1, 2, 3, 4]。拼接（- 1）； //[4]
返回 {
arr1,
arr2,
arr3,
arr4
}
}
安慰。日志（'拼接：'，arraySplice（））
复制代码
筛选
过滤数组操作，根据一定条件，返回过滤结果数组
/** * filter：根据条件过滤，返回过滤后的结果* 场景：当需要对原始数据中的一些值进行过滤时*/
const arrayFilter = ( sourceData, val) => {
返回源数据。过滤器（v => v === val）
}
安慰。日志（'过滤器：'，arrayFilter（[ 1, 2, 3, 4], 4））
复制代码
地图
根据原数组返回一个新数组
/* * map: 根据原数组返回一个新数组 */
常量数组映射 = (sourceArr) => {
返回源Arr。地图（v => v + 1）
}
安慰。日志（'地图：'，arrayMap（[1,2,3]））
// [2,3,4]
复制代码
平面图
场景 ：可以将原始数组组合成你想要的数据结构
例如，原始数据有不需要的字段
常量 arrayFlatMap = ( sourceArr, arr) => {
返回 {
来源：sourceArr。 flatMap( v => typeof v === 'number' ? [v] : []),
纳尔：arr。 flatMap( v => [{ name: v. name, value: v. value }])
}
}
安慰。 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 } ] } */
复制代码
到字符串
将数组转换为字符串
/** * toString: 转换数组* 场景：你想把数组转换成字符串*/
const arrayTostring = (sourceArr) => {
返回源Arr。 toString()
}
安慰。 log('toString:', arrayTostring([ 1, 2, 3, 4]))
/* 1,2,3,4 */
复制代码
包括
检查数组是否包含元素
/** * 包括：包含* 场景：数组中是否存在元素 */
const arrayIncludes = (arr, val) => {
返回 arr。包括（验证）
}
安慰。 log('arrayIncludes:', arrayIncludes([ 1, 2, 3], 1))
复制代码
指数
获取元素的下标，没有则返回 -1
const arrayIndexOf = (arr, val) => {
返回 arr。指数（val）
}
安慰。 log(arrayIndexOf([1,2,3],1));
复制代码
加入
将带有特殊字符的数组连接成字符串
const arrayJoin = (arr, split) => {
返回 arr。加入（拆分）
}
安慰。日志（arrayJoin（[1,2,3]，'-'））
// 加入：1-2-3
复制代码
总结
- 利用
减少如何建立数组与对象的映射关系，如何将一维数组构造成树结构体 - 分析
减少累积计算器 thisAPI的使用 - 常用阵列法分析，及实际应用场景
- 本文示例 代码示例
版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。
这篇文章的链接： https://homecpp.art/2725/10629/1124
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
