面试专题一: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(遍历数组,不建议遍历对象)

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

相关推荐
是大林的林吖2 分钟前
解决 elementui el-cascader组件懒加载时存在选中状态丢失的问题?
前端·javascript·elementui
鹏仔工作室2 分钟前
elemetui中el-date-picker限制开始结束日期只能选择当月
前端·vue.js·elementui
一 乐4 分钟前
个人博客|博客app|基于Springboot+微信小程序的个人博客app系统设计与实现(源码+数据库+文档)
java·前端·数据库·spring boot·后端·小程序·论文
默 语6 分钟前
Electron 应用中的系统检测方案对比与鸿蒙适配实践
javascript·electron·harmonyos·gwo
sTone8737513 分钟前
Android Room部件协同使用
android·前端
Zyx200714 分钟前
JavaScript 异步编程深度解析(上):单线程、事件循环与异步的本质
javascript
晴殇i18 分钟前
前端代码规范体系建设与团队落地实践
前端·javascript·面试
用户740546399430919 分钟前
Vite 库模式输出 ESM 格式时的依赖处理方案
前端·vite
开发者小天26 分钟前
React中使用useParams
前端·javascript·react.js
lichong95134 分钟前
Android studio release 包打包配置 build.gradle
android·前端·ide·flutter·android studio·大前端·大前端++