JS中不可忽视的数组空位问题

简介: 数组空位是什么,它是数组内某个元素没有值,这种现象称为空位现象,之前我们使用Array()去构造一个数组时,如果只传入一个参数,就会出现空位现象

数组空位问题

数组空位是什么,它是数组内某个元素没有值,这种现象称为空位现象,之前我们使用Array()去构造一个数组时,如果只传入一个参数,就会出现空位现象

let arr = Array(3)
console.log(arr) // [ , , ,]
复制代码

针对数组空位问题,我将从判断空位跳过空位两个角度来给读者诠释数组空位

判断空位

我们可以使用in运算符来判断数组某个位置是否存在空位

let arr = Array(3)
console.log(0 in arr) // false
复制代码

如上所示,使用in运算符,如上,判断索引为0的位置是否为空位,遇到数组空位会返回false

但是需要注意的是所谓的空位是没有任何值的,所以undefined不是空位,下面来判断一下。

let arr = [undefined]
console.log(0 in arr) // true
复制代码

验证了undefined所在的位置也不是空位

跳过空位问题

数组的一些方法会跳过数组的空位抛弃这个值,也有的方法会跳过空位保留这个值,还有的方法是将空位视为undefined视为空字符串,我们下面来看看这三种情况对应的一些方法

跳过空位不保留值

跳过空位不保留值的方法有:forEach()filter()every()some(),分别举例来看看跳过不保留的效果

forEach

[ , 1 , 2].forEach((x,i) => {
    console.log(i)
}) // 1 2
复制代码

filter

[ , 1 , 2].filter((x,i) => {
    return x > 0
}) //  [1, 2]
复制代码

someevery我不再举例介绍,其都会跳过空位并且不保留值,下面我们来看看跳过空位保留值的几种方法

跳过空位保留值

跳过空位保留值的方法有:map

[ , 1 , 2].map((x) => {
    return x > 0
}) // [空, true, true]
复制代码

遍历过后仍然保留空值

视为undefined即空字符串

ES5中将空位视为undefined的有:join()toString()

[,'a','b',undefined,null].join("@") // '@a@b@@'
复制代码

解释一下打印的结果:为什么是'@a@b@@',因为join()是通过参数拼接数组内元素形成字符串的方法,而join()是会将空位视为undefined,而undefinednull会被视为空字符串,所以其拼接的形式就为:''+'@'+'a'+'@'+'b'+'@'+''+'@'+''得到'@a@b@@'

再拿toString()举例

[,'a','b',undefined,null].toString() // ',a,b,,'
复制代码

同理toString()将空位视为undefined,而undefinednull会被视为空字符串结果得到',a,b,,'

而在ES6中规定就比较明确了,统一将新增的方法对空位处理为undefined,比如;Array.from()for ofcopyWithin,扩展运算符等等,下面我以Array.form()与扩展运算符举例

Array.from(['a',,'c']) // ['a', undefined, 'c']
[...['a',,'c']] // ['a', undefined, 'c']
复制代码

很明确地看到两种方法将空位被处理成了undefined

\


相关文章
|
26天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
17 2
|
29天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
20 3
|
1月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
34 4
|
29天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
29 1
|
1月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
23 5
|
1月前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
17 3
|
1月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
31 1
|
1月前
|
JavaScript 前端开发
如何在JS中声明一个数组
如何在JS中声明一个数组
18 0
|
1月前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
25 3
|
29天前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
13 0