前言
咱们在日常开发中,与接口打交道最多了,前端通过拜访后端接口,而后将接口数据二次解决渲染到页面当中。
二次解决的过程是 考验 Coder
对 Array
是否纯熟 以及 在 何种 场景下应用哪种办法解决最优。
小编,在最近开发中就遇到了 Array
问题,在解决简单的业务需要时,没想到Array
有相似的办法,而后将办法 组合起来解决当下问题。
文章用下班时间肝了一周才写完,看完点赞、转发 是对我最大的反对。
遍历数组办法
不会扭转原数组的遍历办法
forEach()
forEach()
办法依照升序为数组中每一项执行一次给定的函数。
语法
arr.forEach(callback(currentValue , index , array),thisArg)
currentValue
: 数组以后项值index
: 数组以后项索引arr
: 数组对象自身thisArg
: 可选参数。当执行回调函数callback
时,用作this
的值。
留神
- 如果应用 箭头函数表达式 来传入函数参数,
thisArg
参数会被疏忽,因为箭头函数在词法上绑定了this
值。 forEach
不会间接扭转调用它的对象,然而那个对象可能会被callback
函数扭转。every
不会扭转原数组。
// 防盗贴:微信公众号: 前端自学社区
const arr = [2,3,4,1,44]
arr.forEach(val =>{console.log(` 值为 ${val*2}`)
})
console.log(` 原数组为 ${arr}`);
// 值为 4
// 值为 6
// 值为 8
// 值为 2
// 值为 88
// 原数组为 2,3,4,1,44
reduce()
reduce()
数组元素累计器,返回一个合并的后果值。
语法
arr.reduce(callback(accumulator, currentValue, index, array), initialValue)
accumulator
: 累计器,默认为数组元素第一个值currentValue
: 以后值index
: 以后元素索引 <font style=”color:red”> 可选 </font>array
: 数组 <font style=”color:red”> 可选 </font>initialValue
: 初始值 <font style=”color:red”> 可选 </font>
reduce
有两个参数,一个是回调函数,一个是初始值。
它有两种取值状况:
-
- 当提供了
initialValue
初始值时,那么accumulator
的值为initialValue
,currentValue
的值为数组第一个值
- 当提供了
-
- 当没有提供
initialValue
初始值时,那么accumulator
的值 为 数组第一个值,currentValue
为第二个值。
- 当没有提供
留神
- 如果数组为空,且没有提供
initialValue
初始值时,会抛出TypeError
. - 如果数组有一个元素,且没有提供
initialValue
或者 提供了initialValue
,数组为空,那么惟一值被返回不会执行callback
回调函数。
求和
// 防盗贴:微信公众号: 前端自学社区 /
const arr = [1, 2, 3, 4]
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 10)
console.log(sum) //20
// accumulator 累计器
// currentValue 以后值
// initialValue 累计 初始值 为 10
//10 + 1 + 2 + 3 + 4
## 留神
// 回调函数第一次执行时,accumulator 和 currentValue 的取值有两种状况:// 如果调用 reduce()时提供了 initialValue,accumulator 取值为 initialValue,currentValue 取数组中的第一个值;// 如果没有提供 initialValue,那么 accumulator 取数组中的第一个值,currentValue 取数组中的第二个值。
计算对象中的值
要累加对象数组中蕴含的值,必须提供初始值,以便各个 item 正确通过你的函数。
/*
* @Description:
* @Author: 微信公众号: 前端自学社区
* @Date: 2021-08-07 00:53:51
* @LastEditTime: 2021-08-07 00:53:51
* @LastEditors: Do not edit
*/
const data = [
{
date: '2021-8-1',
income: 200
},
{
date: '2021-8-2',
income: 400
},
{
date: '2021-8-3',
income: 300
},
]
console.log(` 总收入:${data.reduce( (pre,currentValue) => pre + currentValue.income,0)}`);
// 总收入:900
二维数组转一位数组
const array = [[1,2],[3,4]]
console.log(array.reduce((a,b) => a.concat(b)));
//[1, 2, 3, 4]
find()
find()
返回满足特定条件的元素对象或者元素值,不满足返回 undefined
语法
arr.find((element,index,array), thisArg)
element
:以后元素index
: 以后元素索引 <font style=”color:red”> 可选 </font>array
: 数组自身 <font style=”color:red”> 可选 </font>thisArg
: 执行回调时用作this
的对象。<font style=”color:red”> 可选 </font>
// 从数据中找出第一个满足特定条件的对象
const data = [
{
name:'张三',
article: 3
},
{
name:'老王',
article: 9
},
{
name:'老李',
article: 10
}
]
console.log(data.find(item => item.article > 9));
// {name: '老李', article: 10}
findIndex()
findIndex()
返回数组中符合条件的第一个元素的索引,没有,则返回 -1
。
语法
arr.findIndex((element,index,array), thisArg)
element
:以后元素index
: 以后元素索引 <font style=”color:red”> 可选 </font>array
: 数组自身 <font style=”color:red”> 可选 </font>thisArg
: 执行回调时用作this
的对象。<font style=”color:red”> 可选 </font>
const arr = [22,33,44,55]
console.log(arr.findIndex(val => val > 33)); //2
console.log(arr.findIndex(val => val > 99)); //-1
key()
key()
返回一个新的 Array Iterator 对象,该对象蕴含数组中每个索引的键。
语法
keys()
留神
- 如果数组中有空原元素,在获取 key 时,也会退出遍历的队列中。
const inputModal = [
{name:''},
{age:''},
{hobby:''}
]
for(const key of inputModal.keys()){console.log(key)
}
// 0
// 1
// 2
const arr = [1,2,,3]
for(const key of arr.keys()){console.log(key);
}
// 0
// 1
// 2
// 3
//Object.keys() 办法会返回一个由一个给定对象的本身可枚举属性组成的数组
// 所以 Object.keys(arr) = ['0', '1', '3']
for(const key of Object.keys(arr)){console.log(key);
}
// 0
// 1
// 3
values()
values()
办法返回一个新的 Array Iterator 对象,该对象蕴含数组每个索引的值。
语法
arr.values()
const Color = ['red','yelloe','orange']
for(val of Color.values()){console.log(val);
}
// red
// yelloe
// orange
<hr/>
返回 布尔值
every()
every
用来判断数组内所有元素是否合乎某个条件,返回 布尔值
语法
arr.every(callback(currentValue , index , array),thisArg)
currentValue
: 数组以后项值 <font style=”color:red”> 必须 </font>index
: 数组以后项索引 <font style=”color:red”> 可选 </font>arr
: 数组对象自身 <font style=”color:red”> 可选 </font>thisArg
: 可选参数。当执行回调函数callback
时,用作this
的值。<font style=”color:red”> 可选 </font>
留神
- 当所有的元素都符合条件才会返回
true
every
不会扭转原数组。- 若传入一个空数组,无论如何都会返回
true
。
// 防盗贴:微信公众号: 前端自学社区
const arr = [2,3,4,1,44]
console.log(arr.every(val => val > 0)); //true
console.log(arr.every(val => { val > 2})) //false
some()
some()
用来判断数组元素是否合乎某个条件,只有有一个元素合乎,那么返回 true
.
语法
arr.some(callback(currentValue , index , array),thisArg)
currentValue
: 数组以后项值 <font style=”color:red”> 必须 </font>index
: 数组以后项索引 <font style=”color:red”> 可选 </font>arr
: 数组对象自身 <font style=”color:red”> 可选 </font>thisArg
: 可选参数。当执行回调函数callback
时,用作this
的值。<font style=”color:red”> 可选 </font>
留神
some()
被调用时不会扭转数组。- 如果用一个空数组进行测试,在任何状况下它返回的都是
false
。 some()
在遍历时,元素范畴曾经确定,在遍历过程中增加的元素,不会退出到遍历的序列中。
const arr = [2,3,4,1,44]
console.log(arr.some(val => val > 2)) //true
console.log([].some(val => val > 2)); //false
const newList = [11,22,33,44]
console.log(newList.some(val => {newList.push(55)
newList.push(66)
val > 55
})); //false
不扭转原有数组,造成新的数组
filter()
filter()
用来遍历原数组,过滤拿到符合条件的数组元素,造成新的数组元素。
语法
arr.some(callback(currentValue , index , array),thisArg)
currentValue
: 数组以后项值 <font style=”color:red”> 必须 </font>index
: 数组以后项索引 <font style=”color:red”> 可选 </font>arr
: 数组对象自身 <font style=”color:red”> 可选 </font>thisArg
: 可选参数。当执行回调函数callback
时,用作this
的值。<font style=”color:red”> 可选 </font>
留神
filter
不会扭转原数组,它返回过滤后的新数组。filter()
在遍历时,元素范畴曾经确定,在遍历过程中增加的元素,不会退出到遍历的序列中。
const arr = [11,22,33,44,55,66]
console.log(arr.filter(val => val > 44))
console.log(` 原数组为 ${arr}`);
// [55, 66]
// 原数组为 11,22,33,44,55,66
map()
map()
创立一个新的数组,其后果是该数组中的每个元素都调用一个提供的函数后返回的后果。
语法
arr.map(callback(currentValue , index , array),thisArg)
currentValue
: 数组以后项值 <font style=”color:red”> 必须 </font>index
: 数组以后项索引 <font style=”color:red”> 可选 </font>arr
: 数组对象自身 <font style=”color:red”> 可选 </font>thisArg
: 可选参数。当执行回调函数callback
时,用作this
的值。<font style=”color:red”> 可选 </font>
留神
map
不批改调用它的原数组自身map()
在遍历时,元素范畴曾经确定,在遍历过程中增加的元素,不会退出到遍历的序列中。
const arr = [1,2,3,4]
console.log(arr.map(val => val*3)) // [3, 6, 9, 12]
console.log(arr) // [1, 2, 3, 4]
<hr/>
数组 CRUD
扭转原数组办法
reverse()
reverse()
办法将数组中元素的地位颠倒,并返回该数组。数组的第一个元素会变成最初一个,数组的最初一个元素变成第一个。该办法会扭转原数组。
const arr = [1,2,3]
console.log(arr.reverse(11,22,33)) //[3, 2, 1]
sort()
sort()
办法采纳 原地算法 进行排序并返回数组。默认排序程序是在 将元素转换为字符串 ,而后 比拟它们的 UTF-16
代码单元值序列
原地算法 是一个应用辅助的数据结构对输出进行转换的算法。然而,它容许有大量额定的存储空间来贮存辅助变量。当算法运行时,输出通常会被输入笼罩。原地算法仅通过替换或替换元素来更新输出序列。
const arr = [23,11,33,44,1]
console.log(arr.sort()) //[1, 11, 23, 33, 44]
const arr = [23,11,33,44,1000000000]
console.log(arr.sort())
// [1000000000, 11, 23, 33, 44]
删除元素
shift()
shift()
办法从数组中删除 第一个 元素,并返回该元素的值。此办法更改数组的长度。
语法
arr.shift()
留神
- 从数组中删除的元素; 如果数组为空则返回
undefined
const data = [
{
id:1,
name:'前端'
},
{
id:2,
name:'后端'
},
{
id:3,
name:'挪动端'
},
{
id:4,
name:'嵌入式开发'
},
]
const deleObj = data.shift()
console.log('============== 删除后的元素 ======================');
console.log(data);
console.log('================= 删除后的元素 ===================');
console.log('=============== 被删除的元素 =====================');
console.log(deleObj);
console.log('================ 被删除的元素 ====================');
// ============== 删除后的元素 ======================
// [// { id: 2, name: '后端'},
// {id: 3, name: '挪动端'},
// {id: 4, name: '嵌入式开发'}
// ]
// ================= 删除后的元素 ===================
// =============== 被删除的元素 =====================
// {id: 1, name: '前端'}
// ================ 被删除的元素 ====================
pop()
pop()
办法从数组中删除最初一个元素,并返回该元素的值。此办法更改数组的长度。
用法和 shift
相似。
语法
arr.pop()
留神
- 从数组中删除的元素; 如果数组为空则返回
undefined
const data = [
{
id:1,
name:'前端'
},
{
id:2,
name:'后端'
},
{
id:3,
name:'挪动端'
},
{
id:4,
name:'嵌入式开发'
},
]
const deleObj = data.pop()
console.log(data);
// [// { id: 1, name: '前端'},
// {id: 2, name: '后端'},
// {id: 3, name: '挪动端'}
// ]
console.log(deleObj);
// {id: 4, name: '嵌入式开发'}
splice()
splice()
办法通过 删除 或替换 现有元素或者原地增加新的元素来批改数组, 并以数组模式返回被批改的内容。此办法会扭转原数组。
语法
array.splice(start,deleteCount, [item1,item2....])
start
: 开始的索引deleteCount
: 删除的个数 <font style=”color:red”> 可选 </font>[item1,item2 .....]
;从开始的索引进行 增加的减少和替换的元素,<font style=”color:red”> 可选 </font>
留神
- 由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只蕴含一个元素的数组。如果没有删除元素,则返回空数组。
-
如果只传递了开始的索引地位,则会删除索引后的所有元素对象
const data = [ { id:1, name:'前端' }, { id:2, name:'后端' }, { id:3, name:'挪动端' }, { id:4, name:'嵌入式开发' }, ] data.splice(1) console.log(data) // [{ id: 1, name: '前端'} ]
从索引为 2 开始,删除 1 个数组元素对象,增加两个数组元素对象
const data = [
{
id:1,
name:'前端'
},
{
id:2,
name:'后端'
},
{
id:3,
name:'挪动端'
},
{
id:4,
name:'嵌入式开发'
},
]
data.splice(2,1,...[{id:5,name:'人工智能'},{id:6,name:'大数据开发'}])
console.log(data);
// [// { id: 1, name: '前端'},
// {id: 2, name: '后端'},
// {id: 5, name: '人工智能'},
// {id: 6, name: '大数据开发'},
// {id: 4, name: '嵌入式开发'}
// ]
减少元素
splice()
下面曾经有介绍
push()
push()
办法将一个或多个元素增加到数组的 开端,并返回该数组的新长度。
语法
arr.push(element1, ..., elementN)
const data = [
{
id:1,
name:'前端'
},
{
id:2,
name:'后端'
},
]
console.log(data.push({id:3,name:'挪动端'})) //3
合并数组
const data = [
{
id:1,
name:'前端'
},
{
id:2,
name:'后端'
},
]
var obj = [
{
id:4,
name:'嵌入式开发'
},
]
// 相当于 data.push({id:4,name:'嵌入式开发'});
Array.prototype.push.apply(data, obj);
console.log(data);
[{ id: 1, name: '前端'},
{id: 2, name: '后端'},
{id: 4, name: '嵌入式开发'}
]
unshift()
unshift()
办法将一个或多个元素增加到数组的 结尾 ,并返回该数组的 新长度。
const arr = [1,2,3]
console.log(arr.unshift(11,22,33)) //6
console.log(arr) //[11, 22, 33, 1, 2, 3]
不扭转原数组元素办法
indexOf()
indexOf()
办法返回能够在数组中找到给定元素的第一个索引,如果不存在,则返回 -1。
语法
indexOf(searchElement)
indexOf(searchElement, fromIndex)
searchElement
: 要查找的元素-
fromIndex
:按指定的索引进行查找呈现的指定元素的第一个索引。<font style=”color:red”> 可选 </font>- 如果索引大于或等于数组的长度,则返回 -1
- 如果提供的索引值为正数,则将其视为距数组开端的偏移量
- 如果提供的索引为正数,依然从前到后搜寻数组
- 如果提供的索引为 0,则将搜寻整个数组。
- 默认值:0(搜寻整个数组)。
const arr = [1,1,2,3,4,5,4,4,6]
console.log(arr.indexOf(3)); //3
console.log(arr.indexOf(9)); //-1
console.log(arr.indexOf(3,4)); //-1
// 从索引为 4 的元素进行查找 3, 显然前面没有 3,返回 -1
数组去重
创立一个新的空数组,通过indexOf
来判断空数组是否第一次存在某个元素,
- 不存在则返回 [< 0],
push
到空数组中.
const newArr = []
arr.forEach(val => {if(newArr.indexOf(val) < 0){newArr.push(val)
}
})
console.log(newArr);
// [1, 2, 3, 4, 5, 6]
lastIndexOf()
lastIndexOf()
查找数组中元素最初一次呈现的索引,如未找到返回 -1。
如果不存在则返回 -1。从数组的前面向前查找,从 fromIndex
处开始。
语法
arr.lastIndexOf(searchElement, fromIndex)
searchElement
: 要查找的元素-
fromIndex
:按指定的索引进行查找呈现的指定元素的第一个索引。<font style=”color:red”> 可选 </font>- 从指定的索引地位 逆向 查找
- 默认为数组的长度减 1(
arr.length - 1
),即整个数组都被查找。 - 如果该值大于或等于数组的长度,则整个数组会被查找。
- 如果为负值,数组依然会被从后向前查找。
- 如果该值为负时,其绝对值大于数组长度,则办法返回 -1,即数组不会被查找。
留神
lastIndexOf
应用的是 严格相等 === 比拟searchElement
和数组中的元素。
const arr = [1,1,2,3,4,5,4,4,6]
console.log(arr.lastIndexOf(4)); //7
console.log(arr.lastIndexOf(4,11));
//7 指定的查找的索引 大于 数组的长度,会进行整个数组查找
console.log(arr.lastIndexOf(4,-33));
// -1 指定的索引为正数,且绝对值大于数组长度,则返回 -1
console.log(arr.lastIndexOf(4,-5));
//4 指定的索引为正数,且绝对值小于数组长度,则会 从向前进行查找
inCludes()
includes()
办法用来判断一个数组是否蕴含一个指定的值,依据状况,如果蕴含则返回 true,否则返回 false。
语法
arr.includes(searchElement, fromIndex)
-
searchElement
: 要查找的元素查找时,辨别大小写
-
fromIndex
:按指定的索引进行查找呈现的指定元素的第一个索引。<font style=”color:red”> 可选 </font>- 从指定的索引进行查找
- 如果为负值,则按升序从
array.length + fromIndex
的索引开始搜 - 如果
fromIndex
大于等于数组的长度,则会返回false
,且该数组不会被搜寻。 - 默认为 0
const arr = [1,1,2,3,4,5,4,4,6]
console.log(arr.includes(4)); //true
console.log(arr.includes(4,66)); //false
console.log(arr.includes(1,-1)); //false
concat()
concat()
办法用于合并两个或多个数组。
语法
var new_array = old_array.concat([arr1][arr2])
留神
-
concat
办法不会扭转this
或任何作为参数提供的数组,而是返回一个 浅拷贝,它蕴含与原始数组相结合的雷同元素的正本- 对象援用(而不是理论对象):
concat
将对象援用复制到新数组中。原始数组和新数组都援用雷同的对象。也就是说,如果援用的对象被批改,则更改对于新数组和原始数组都是可见的。这包含也是数组的数组参数的元素。 - 数据类型如字符串,数字和布尔(不是
String
,Number
和Boolean
) 对象):concat
将字符串和数字的值复制到新数组中。
- 对象援用(而不是理论对象):
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [[1,2],[3,4]]
console.log(arr1.concat(arr2));
//[1, 2, 3, 4, 5, 6]
// 嵌套合并
console.log(arr1.concat(arr2).concat(arr3));
// [1, 2, 3, 4, 5, 6, [ 1, 2], [3, 4] ]
let obj1 = [{a:1},{b:2}]
let obj2 = [{c:3},{d:4}]
let obj3 = obj1.concat(obj2)
console.log(obj3);
//[{ a: 1}, {b: 2}, {c: 3}, {d: 4} ]
obj1[0].a = 4 // 扭转 obj[0]对象值,会间接影响合并后的数组,因为是浅拷贝
console.log(obj3);
//[{ a: 4}, {b: 2}, {c: 3}, {d: 4} ]
toString()
toString()
返回一个字符串,示意指定的数组及其元素。
当一个数组被作为文本值或者进行字符串连贯操作时,将会主动调用其 toString
办法。
对于数组对象,toString
办法连贯数组并返回一个字符串,其中蕴含用逗号分隔的每个数组元素。
语法
arr.toString()
const arr = [1,2,3]
console.log(arr.toString()); //1,2,3
join()
join()
办法通过连贯数组元素用逗号或指定的分隔符字符串分隔,返回一个字符串。
如果数组只有一项,则将在不应用分隔符的状况下返回该项。
语法
join()
join(separator)
separator
: 指定的宰割的 字符 <font style=”color:red”> 可选 </font>
const arr = ['2021','08','08']
console.log(arr.join()); //2021,08,08
console.log(arr.join('-')); //2021-08-08
console.log(arr.join('/')); //2021/08/08
slice()
slice()
办法返回一个新的数组对象,这一对象是一个由 begin
和 end
决定的原数组的 浅拷贝(包含 begin
,不包含end
)。原始数组不会被扭转。
语法
arr.slice(begin, end)
-
begin
: 指定截取的 开始 索引 <font style=”color:red”> 可选 </font>- 默认从 0 开始
- 如果
begin
为正数,则以数组开端开始 的 绝对值开始截取slice(-2)
开端第 2 个元素 - 如果
begin
超出原数组的索引范畴,则会返回空数组。
-
end
: 指定截取的 完结 索引 <font style=”color:red”> 可选 </font>- 如果
end
被省略,则slice
会始终提取到原数组开端。 - 如果
end
大于数组的长度,slice
也会始终提取到原数组开端。 - 如果
end
为正数,则它示意在原数组中的倒数第几个元素完结抽取。
- 如果
const arr = [11,22,33,44,55,66,77,88]
console.log(arr.slice(1,4));
// 应该返回 索引 1 - 3 的数组元素
// [22, 33, 44]
console.log(arr.slice(-4,2)) //[]
console.log(arr.slice(-4)); //[55, 66, 77, 88]
console.log(arr.slice(0,-1));
// [
// 11, 22, 33, 44,
// 55, 66, 77
// ]
参考文献
Array – JavaScript | MDN
往期精彩文章
- Vue 组件通信的 8 种形式
- Vue3 + TypeScript 开发实际总结
- Vue 权限路由 + 数据权限 最佳实际
最初
文章用下班时间肝了一周,写作不易,文中的内容都是 参考 MDN 文档。
如果喜爱的话能够点赞👍👍👍关注,反对一下,心愿大家能够看完本文有所播种!