面试专题一:js的数组

前言

想做最全的js数组方法总结。涵盖面试及日常使用。

这里写目录标题

如何判断数组

不可以用typeOf方法。该方法只能用来检验最基本的数据类型,(null、Object、Array打印出来的都是Object);

可以用instanceof:(原理是判断原型链的构造函数)

javascript 复制代码
var arr = [1, 2, 3, 5, 6]
console.log(arr instanceof Array) // true

用原型,一个数组对象,它的constructor应当指向它的构造函数:(异曲同工)

javascript 复制代码
var arr = [1, 2, 3, 5, 6]
console.log(arr.constructor === Array) // true

用Array的方法:

javascript 复制代码
var arr = [1, 2, 3, 5, 6]
console.log(Array.isArray(arr)) // true

修改数组元素的方法

1.最基本的四个:

javascript 复制代码
push() // 在数组尾新增元素
pop() // 删除数组最后一个元素
shift() // 在数组头部新增一个元素
unshift() // 在数组头部删除一个元素

上述四个,都是在原数组上更改。

2.重头戏:数组的增删改------splice()

这个函数内部最少传一个参数,最多传三个参数。且这个函数是在原数组上更改的。

传一个参数:设这个参数为n,则最后的结果为,保留前n个数据。

javascript 复制代码
var arr = [1, 2, 3, 5, 6]
arr.splice(2)
console.log(arr) // [1, 2]

传两个参数:从第一个参数的索引位置开始,截取n个,n为第二个参数。如下面,从索引为2的地方开始,截取一个。

javascript 复制代码
var arr = [1, 2, 3, 5, 6]
var n = arr.splice(2, 1)
console.log(arr) // [1, 2, 5, 6]

传三个参数:用于新增。前两个参数意义不变,第三个参数是在当前处理完之后的地方新增一个数。如下面,在索引为2的位置截取一个字符串后在此位置新增一个4。

javascript 复制代码
var arr = [1, 2, 3, 5, 6]
var n = arr.splice(2, 1, 4)
console.log(arr) // [1, 2, 4, 5, 6]

检测数组元素的相关方法

1.indexOf()

这个方法用来判断该数组是否存在某一个值,如果不存在,则返回-1,如果存在,则返回第一次出现的索引;

2.lastIndexOf

这个方法用来判断该数组是否存在某一个值,如果不存在,则返回-1,如果存在,则返回最后一次出现的索引;

3.includes

判断数组中是否存在...,返回值是布尔值,存在为true,不存在为false;

一些跟数组相关且传参为回调函数的方法

1.forEach((a, b, c) => {})

a:当前遍历的数组元素;

b:参数对应的数组索引;

c:数组本身;

如果要改动某一个值,可以通过forEach:

javascript 复制代码
arr.forEach((x, i, array) => {
    array[0] = 999
    console.log(array)
})

但不能直接在第一个参数上作更改。

2.map((a, b, c) => {})

参数和forEach中的一样。但是map经常和forEach放在一起比较。

先说说map吧,map内部一定要带一个return,return才可以操作每一个元素;并且map并不改变原数组,需要找一个新的数组去接收。

javascript 复制代码
var arr1 = [1, 2, 3]
var arr1 = arr.map((current, index, array) => {
    return current = 6
})
console.log(arr1) // [6, 6, 6]

而forEach就不需要了。forEach在用的时候,只能通过数组名[索引值]来对其进行操作,不需要return,并且是在原数组的基础上进行改变的。

3.every((x) => {})和some((x) => {})

回调就一个参数。参数是当前遍历的数组元素。这两个都用于判断数组是否符合条件,返回布尔值。

javascript 复制代码
var arr = [1, 2, 3, 5, 6, 6]
var result = arr.every((x) => {
    return x == 5
})
console.log(result) // false
javascript 复制代码
var arr = [1, 2, 3, 5, 6, 6]
var result = arr.some((x) => {
    return x == 5
})
console.log(result) // true

every:全部都满足返回true;some:有一个满足则为true。

其他方法

1.join()

这个方法可以把数组中的元素转化为字符串。不改变原数组。

javascript 复制代码
var arr = [1, 5, 6]
console.log(arr.join(',') // 1,5,6
console.log(arr) // [1, 5, 6]

2.reverse()
这个方法是改变原数组的

javascript 复制代码
var arr = [1, 5, 6]
console.log(arr.reverse()) // [6, 5, 1]
console.log(arr) // [1, 5, 6]

3.sort()
这个方法是改变原数组的,sort默认从小到大进行排序。

怎样才可以从大到小排序?

javascript 复制代码
arr.sort(() => {
    return -1
})

按照这样固定的写法即可。

4.for in 与 for of

for in 中,定义的变量是索引,arr[i]是数组的每一项

javascript 复制代码
let arr = [1, 4, 3, 8, 6]
for(let i in arr) {
	console.log(i) // 0, 1, 2, 3, 4, 5
	console.log(arr[i]) // 1, 4, 3, 8, 6
}

for of中

javascript 复制代码
for(let i of arr) {
	console.log(i) // 1, 4, 3, 8, 6
}

一般用for in遍历对象,用for of遍历数组,后面有机会会单出一篇这两个的对比。

总结

判断是否是数组的方法:

复制代码
不可用typeOf
可以用instanceOf、constructor、isArray

修改数组的方法

复制代码
改变原数组:push、pop、shift、unshift、splice、reverse、sort
不改变原数组:join

查找数组元素

复制代码
indexOf、lastIndexOf、includes

遍历数组的方法

复制代码
forEach(不带return,不能直接修改元素)
map、every、some(都带return,map用来遍历,直接修改i;every,some用来判断)
for in(遍历对象,不建议遍历数组)、for of(遍历数组,不建议遍历对象)

后面还会出更多专题,欢迎关注~

相关推荐
恋猫de小郭42 分钟前
Flutter Zero 是什么?它的出现有什么意义?为什么你需要了解下?
android·前端·flutter
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了8 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅8 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅9 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端