首页 > 其他分享 >讨论一下你在项目中常用的那些数组API

讨论一下你在项目中常用的那些数组API

时间:2022-09-25 13:14:55浏览次数:86  
标签:返回 sourceArr arr name 复制 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  
 复制代码

总结

  • 利用 减少 如何建立数组与对象的映射关系,如何将一维数组构造成 结构体
  • 分析 减少 累积计算器 this API 的使用
  • 常用阵列法分析,及实际应用场景
  • 本文示例 代码示例

版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。

这篇文章的链接: https://homecpp.art/2725/10629/1124

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/39284/57542512

标签:返回,sourceArr,arr,name,复制,API,数组,讨论一下
From: https://www.cnblogs.com/amboke/p/16727678.html

相关文章

  • 学习记录10数组
    数组概述数组的定义数组是相同类型数据的有序集合数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成其中,每一个数据称作一个数组的元素,每个数组元素可......
  • 当API服务端options.Authority ="http://localhost:5001" 报错误
      //验证传入的令牌以确保它来自受信任的颁发者//验证令牌是否可以与此api一起使用(又名受众)//将身份验证服务添加到DI(依赖注入)并将身份验证中间件添加到管道bu......
  • 【code随笔】java int数组到set的转换
    很多高级用法,比如Stream,Compare都只针对包装类直接int[]到set只能使用赋值的方法int[]nums={0,0,1,1,1,2,2,3,3,4};Set<Integer>set=newHashSet<>();for(i......
  • WinForm Framework中用到的win32 API
    BeginPaintCreateWindowExWCopyImageCallWindowProcWDestroyWindowDrawTextWDispatchMessageADispatchMessageWEnumWindowsEnableWindowEndPaintFillRectFind......
  • 树状数组和线段树资料
    例题和代码模板:https://www.cnblogs.com/pavtlly/p/9979702.html看老师这个博客链接吧 https://zhuanlan.zhihu.com/p/106118909线段树资料 线段树进阶资料(有兴......
  • 力扣算法之数组中出现次数超过一半的数字
    数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字。你可以假设数组是非空的,并且给定的数组总是存在多数元素。示例:输入:[1,2,3,2,2,2,5,4,2]输......
  • winform程序如何调用webapi接口?附源码
    我们开发winform程序时,通常使用传统的三层结构,包括:数据层、业务层、页面层。Form页面调用时,直接new个Service类,实现业务需求。但这种模式有个弊端,就是业务逻辑全部放到了客......
  • 011——常用API(String , ArrayList)
    常用API(String,ArrayList)API(ApplicationProgrammingInterface,应用程序编程接口)Java写好的程序(功能),咱们可以直接调用。Oracle也为Java提供的这些功能代码......
  • 1640. 能否连接形成数组
    1640.能否连接形成数组给你一个整数数组arr,数组中的每个整数互不相同。另有一个由整数数组构成的数组pieces,其中的整数也互不相同。请你以任意顺序连接piec......
  • F-02 BAPI
    *-----------BAPI参数定义DATA:ls_documentheaderTYPEbapiache09,lt_accountglTYPESTANDARDTABLEOFbapiacgl09,"总账lt_acc......