我报名了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 版权协议,转载请附上原文出处链接和本声明
本文链接:https://www.qanswer.top/39284/57542512
标签:返回,sourceArr,arr,name,复制,API,数组,讨论一下 From: https://www.cnblogs.com/amboke/p/16727678.html