前言
前段时间去面试,上来就给我搞了几个算法题,虽然不是很难,但是在当时的环境下并没有做出来,有的就算有思路,也是模模糊糊的,经不起推敲。最近开始在刷算法题,发现自己基础不扎实,有些概念知道,但是用起来就有点模棱两可,所以先从数组开始再温习一下知识点,加深一下印象,继续刷题!
我们从几方面对这些方法进行了解学习,如果用法差不多的,放一块对比学习
1 基本用法
2 对源数组的影响
3 日常应用
按照字母顺序从A开始
1 at
如果不是这次打印数组去看原型方法,还注意不到 at 的存在。属于 es13
的新增
基本用法:
用来获取数组上某个位置的元素。开始下标从 0
开始,最后一个用倒叙可以使用 -1
取值,查找到则返回该元素,查不到则返回 undefined
影响:
对原数组无影响!
应用:
我们平常获取某个位置的元素会使用 index
,获取最后一个元素时使用 length-1
,我们来看下 at 的实现
let arr=[1,2,3,4,5]
//使用index
arr[0] //第一个
arr[arr.lenght-1] //倒数第一
arr[arr.lenght-2] //倒数第二
//使用at
arr.at(0) //第一个
arr.at(-1) //倒数第一
arr.at(-2) //倒数第二
arr.at(-2222) //undefined
2 concat
基本用法:
数组拼接,参数可以是一个或者多个数组,返回组成的数组
影响:
对源数据浅拷贝。不太了解赋值,浅拷贝,深拷贝的小伙伴可以看我之前的文章 juejin.cn/post/721216…
应用:
const arr1: any = [1, 2, 3]
// const arr2: any = arr1.concat([4, 5, 6])
// arr2[0] = 11
// console.log(arr1)
// console.log(arr2) // 这样看下来似乎是对源数据无影响,我们继续测试
// const arr3: any = [{ id: 1 }, { id: 2 }, { id: 3 }]
// const arr4: any = arr3.concat([{ id: 4 }])
// arr4[0].id = 11
// console.log(arr3)
// console.log(arr4) // 我们看到数组三被修改了,所以concat 也仅仅是一层浅拷贝而已
3 copyWithin fill
copyWhihin
基本用法:
从名字中就可以知道大概意思,在数组中某个地方进行拷贝
copyWithin 接收三个参数 Array.prototype.copyWithin(target, start=0, end = this.length)
target:
从该位置开始替换数据
start:
(可选):从该位置开始读取数据,默认为 0 。如果为负值,表示倒数
end:
(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数
fill
基本用法:
数组填充,和 copyWhihin 用法基本相同,不过第一个参数是要填充的数据,后两个参数用法一样
影响:
copyWithin 和 fill 都会改变源数组,不过 copyWithin 不同的是copy超出后会把数组进行截取,保持原来数组的长度
应用:
我们来简单看下使用
const arr = [1, 2, 3, 4, 5]
const arr2 = arr.copyWithin(1, 0) //[1, 1, 2, 3, 4]
//从1号下标2开始进行填充,填充数据 0 号下标开始到4号下标结束,超出了长度,所以会进行截取
const arr3 = arr.copyWithin(0, -3, -4) // [1, 2, 3, 4, 5]
const arr4 = arr.copyWithin(0, -4, -3) // [2, 2, 3, 4, 5]
//虽然可以为负数,但是不能从右侧往左侧进行拷贝,否则不生效,
const arr5 = arr.fill(22, 2, 3) // [1, 2, 22, 4, 5]
4 keys() values() entries()
基本用法:
遍历数组。分别是遍历key
,value
,和 key 以及 value
影响:
因为是直接进行源数据遍历,修改 value 会直接对数据产生影响
应用:
const arr = [1, 2, 3, 4, 5]
for (const index of arr.keys()) {
console.log(`index==${index}`)
}
for (const value of arr.values()) {
console.log(`value=${value}`)
}
for (const [index, value] of arr.entries()) {
console.log(`index==${index},value=${value}`)
}
5 filter
基本用法:
遍历数组,过滤出返回值为true 的数据,返回一个新数组。接收一个函数为参数,该函数有三个参数,value, index ,源数组
影响:
对源数据无影响
应用:
获取符合条件的数据,比如过滤 id >= 2 的数据,删除 id ===1
const list = [
{ id: 1, name: '111' },
{ id: 2, name: '222' }
]
const arr2 = list.filter((item, index, arr) => {
console.log(item)
console.log(index)
console.log(arr)
return item.id >= 2
})
console.log(arr2)
arr2.push({ id: 3, name: '333' })
const arr4=arr2.filter(item=>item.id!==1)
console.log(list)
find, findIndex, findLast, findLastIndex
基本用法:
find
查询符合条件的第一条数据(正序查询),有则返回该数据,无则返回 undefined
。
findIndex
查询符合条件的第一条数据(正序查询)的下标,有则返回该数据的下标,无则返回 -1
。 findLast
, findLastIndex
对应 find
与 findIndex
倒序查询 不过这个两个属于 ES14 的提案
参数:
和 filter 参数一样
影响:
对源数据无影响
应用:
const arr = [1, 2, 3, 4, 5]
const vlaue = arr.find((item) => item > 3)
const vlaue2 = arr.findLast((item) => item > 3)
const index = arr.findIndex((item) => item > 3)
const index2 = arr.findLastIndex((item) => item > 3)
flat
基本用法:
对数组进行展开。arr.flat(depth) depth 默认等于1
es10 新增
影响:
返回新数组,对源数组无影响
应用:
根据条件拉平数组
const arr = [1, 2, 3, 4, , 5, [33, 55, [66, 77, [88, 99]]]]
const arr2 = arr.flat() / 不传递参数的时候默认为一层,当数组里面有空项的时候,会过滤掉空值
const arr2 = arr.flat(Infinity) //传入 Infinity 进行N维数组展开
flatMap
基本用法:
flatMap是数组的一个新方法,它会遍历原数组的每一个元素, 并且会为每个元素都执行一次传入的回调函数,最终把所有元素执行回调函数返回的结果压缩成一个新数组,与 filter 参数相同
影响:
flatMap 会返回一个新的数组,不会改变原数组
应用:
使用 filter 与 map 才可以完成的功能,flatMap 可以直接实现
const arr = [
{
id: 1,
name: '测试1'
},
{
id: 2,
name: '测试2'
},
{
id: 3,
name: '测试2'
}
]
// 删除数据
const arr2 = arr.flatMap((item) => (item.id >= 2 ? [item] : [])) 类似于filter操作
//修改数据
const arr3=arr.flatMap(item=>{item.id*=2;return [item]}) 类似于map操作
//过滤同时修改数据
const arr4 = arr.flatMap((item) => (item.id >= 2 ? [{uuid:item.id*item.id,message:item.name}] : []))
//使用filter 和 map
const arr5 = arr.filter((item) => item.id >= 2).map((item) => ({
uuid: item.id * item.id,
message: item.name
}))
forEach
基本用法
:数组遍历,参数同 filter 无法提前结束循环
影响:
无返回值,对源数组无影响
应用:
数组遍历
const arr = [1, 2, 3, 4, 5]
arr.forEach((element) => {
if (element === 2) {
element = 22
}
if (element >= 3) {
return false
}
})
includes , indexOf, lastIndexOf
基本用法
:查询某个元素是否存在 两个参数 arr.includes(searchElement,fromIndex?)
searchElement
查找的值,fromIndex
从某个位置开始查找 includes
返回值为布尔 剩余两个查到返回下标,查询不到返回-1
影响:
对源数组无影响
应用:
数组某个值查询
const arr:any = [1, 2, 3, 4, 5, 2]
arr.includes('2')
arr.indexOf(2)
arr.lastIndexOf(2)
join
基本用法
:arr.join()
将数组拼接成字符串
影响:
对源数组无影响
应用:
const arr = [11, 22, 33]
const str = arr.join('') //112233
map
基本用法
:map()方法按照原始数组元素顺序依次处理元素,返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值。参数同 filter
影响:
不会对空数组进行检测,不会改变原始数组
应用:
如对返回的数据自定义处理
const arr = [
{
id: 1,
name: '测试1'
},
{
id: 2,
name: '测试2'
},
{
id: 3,
name: '测试3'
}
]
const ids = arr.map((item) => item.id)
const newArr = arr.map((item) => ({
key: item.id,
value: item.name
}))
pop push shift unshift
基本用法
:
push:
该方法是向数组末尾添加一个或者多个元素,并返回新的长度。 unshift
数组开头添加元素。
pop:
pop()
方法刚好和push()
方法相反。pop()
方法删除数组的最后一个元素,把数组的长度减1
,返回它被删除元素的值,如果数组变为空,则该方法不改变数组,返回undefine
值 shift 数组开头删除元素
影响:
改变原始数组
应用:
const arr = [
{
id: 1,
name: '测试1'
},
]
arr.pop()
arr.push(
{
id: 2,
name: '测试2'
},
{
id: 3,
name: '测试3'
}
) //参数可以为多个对象
arr.shift()
arr.unshift({
id: 33,
name: '测试33'
})
reduce reduceRight
基本用法
:
reduce:
reduce() 方法对数组中的每个元素进行遍历,返回值作为下一次循环的初始值,最终返回处理的结果。arr.reduce((pre, current, index, arr) => {}, init)
prev:
必需。累计器累计回调的返回值; 表示上一次调用回调时的返回值,或者初始值 init
cur:
必需。当前正在处理的数组元素;
index:
可选。当前正在处理的数组元素的索引,若提供 init 值,则起始索引为 0,否则起始索引为 1
arr:
可选。表示原数组;
init:
可选。表示初始值。
影响:
返回 pre 值 如果对修改 current arr会改变源数组
应用:
比如数组求和、数组中元素出现的次数、数组去重
const arr = [1, 2, 3]
// 数组求和
const total = arr.reduce((pre, current) => pre + current, 0)
//数组中元素出现的次数
const arrCount = arr.reduce((pre, current) => {
const index = pre.findIndex((item) => item.value === current)
if (index === -1) {
pre.push({
count: 1,
value: current
})
} else {
pre[index].count += 1
}
return pre
}, [])
//数组去重
const arrFilter = arr.reduce((pre, current) => {
if (!pre.includes(current)) {
pre.push(current)
}
return pre
}, [])
reverse
基本用法
:数组翻转 如[1, 2, 3, 4] 转换为[4, 3, 2, 1]
影响:
返回翻转后的数组,改变源数组
应用:
比如在算法中判断一个字符串是否为回文数(正写倒写都一样)
const reverseStr = (str) => {
let str2 = [...str]
str2 = str2.reverse()
str2 = str2.join('')
return str === str2
}
console.log(reverseStr('abcdcba'))
console.log(reverseStr('abcdcacacba'))
slice
基本用法
:数组切片 arr.slice(start,end) start 为开始下标 (包括) end 为结束下标(不包括) 返回被切片的数组,如果下标为负数,则倒叙。无论正序还是倒序只能从左到右,否则返回空数组
影响:
浅拷贝数组
应用:
const arr = [
{ id: 1, name: '测试1' },
{ id: 2, name: '测试2' }
]
const arr2 = arr.slice(-1, -2) // []
const arr3 = arr.slice(0, 1) // [{ id: 1, name: '测试1' }]
arr3[0].id = 333 //arr 数据也被改变
sort
基本用法
:数组切片 arr.slice(start,end) start 为开始下标 (包括) end 为结束下标(不包括) 返回被切片的数组,如果下标为负数,则倒叙。无论正序还是倒序只能从左到右,否则返回空数组
影响:
返回排序后的数组,改变源数组
应用:
数组排序
const arr = [1, 3, 11, 33, 22, 88]
arr.sort() // [1, 11, 22, 3, 33, 88] 如果省略,则元素按升序、ASCII字符顺序排序。
arr.sort((a, b) => a - b) // [1, 3, 11, 22, 33, 88]
const arr2 = [ { name: '李白', price: 18888 }, { name: '妲己', price: 5888 }, { name: '甄姬', price: 3888 }, { name: '马可波罗', price: 18888 }]
arr2.sort((a, b) => a.price - b.price)
splice
基本用法
:对数组进行操作,包括删除,添加,替换等。arr.splice(start, deleteCount,items) 第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)
影响:
返回处理后的数组,改变源数组
应用:
数组排序
const arr = [
{
name: '李白',
price: 18888
},
{
name: '妲己',
price: 5888
},
{
name: '甄姬',
price: 3888
},
{
name: '马可波罗',
price: 18888
}
]
// const arr2 = arr.splice(1, 1) // 在下标为1位置开始删除,删除一个
// const arr3 = arr.splice(1, 0, {
// name: '王昭君',
// price: 5888
// }) // 在下标为1位置开始,不删除,直接添加
const arr4 = arr.splice(
1,
1,
{
name: '王昭君',
price: 5888
},
{
name: '张飞',
price: 888
}
) //在下标为1位置开始先删除,然后在该位置添加
toLocalString toString
基本用法
:toLocaleString()
返回对象的字符串表示,该字符串与执行环境的地区对应;toString()
返回对象的字符串表示
影响:
不改变源数组
应用:
const a = 6666
console.log(a.toLocaleString()) // "6,666"
console.log(a.toString()) // "6666"
当数字是三位以上时,会每三位出现一个分隔号;
var c = [1,2,3];
console.log(c.toLocaleString());
//1,2,3
console.log(c.toString());
//1,2,3
数组无区别
var dt = new Date();
console.log(dt.toLocaleString());
// 2023/4/9 17:25:11
console.log(dt.toString());
//Sun Apr 09 2023 17:25:11 GMT+0800
总结
LocaleString()
会根据你机器的本地环境来返回字符串,它和toString()
返回的值在不同的本地环境下使用的符号可能变化- 使用
toString()
是保险的方法,它不会因为本地环境(例如国家)改变而改变 - 为了返回时间类型的值的话,使用
toLocaleString()
最后
差不多已经过完了数组中的常用方法,后面会整理一些常用的数组数据处理以及简单的算法等。