首页 > 其他分享 >[JS] 数组空位与遍历方法

[JS] 数组空位与遍历方法

时间:2024-09-02 20:48:54浏览次数:10  
标签:空位 遍历 JS 忽略 数组 entries 方法

当数组中存在空位时,遍历数组需要选择合适的方法,不同的方法可能返回不同的结果。

示例数组:

const arr = [1, 2, , 3, 4];

数组空位不会影响数组长度,arr的长度是 5。

for循环

最朴素的 for 循环会遍历到数组的每一位,对于空位,访问时返回 undefined。

for(let i=0; i<arr.length; i++){
  console.log(arr[i]);
}

输出

1        
2        
undefined
4        
5  

forEach方法

forEach 方法会跳过空位,所以这里只遍历到了4个数。

arr.forEach(el=>{
  console.log(el);
});

输出

1        
2        
4        
5

for in 方法

for-of 和普通的 for循环结果是一样的,这里看 for-in 的结果。

for-in 遍历数组对象的可枚举属性键,会跳过空位。

for(let key in arr){
  console.log(arr[key]);
}

输出

1
2
4
5

数组的entries方法

数组的 entries 方法返回一个包含数组中每个索引的键值对的迭代器对象。当遇到空位时,对应的值读取为 undefined。

for (let [key, value] of arr.entries()) {
  console.log([key, value]);
}

输出

[ 0, 1 ]
[ 1, 2 ]
[ 2, undefined ]
[ 3, 4 ]
[ 4, 5 ]

思考:什么时候会忽略空位?

根据上面4种简单的情形,可以看到 forEach方法和for-in 循环会跳过空位,而其它则不会。

事实上,除了 forEach 方法,传入一个回调函数遍历数组的方法都会忽略空位,包括但不限于:map, filter, reduce, find。

而 for-in 循环之所以会忽略空位,是因为空洞对应的索引没有被创建为可枚举属性,因此不会被 for-in 遍历到。

数组作为一种对象,key 是数字索引,value 是数组元素。

同理,如果使用 Object.keys()Object.values()Object.entries()遍历数组对象,会发现空洞都会被忽略。

image-20240902202934098

但是,数组原型上的.keys.values.entries方法,是为数组特殊设计的,用这些方法遍历数组,就不会跳过空位。

image-20240902203026790

for-of 循环遍历数组为什么不会跳过空位?for-of 一个数组对象,会调用它的 [Symbol.iterator] 方法返回一个迭代器。而 Array.prototype.valuesArray.prototype[Symbol.iterator]的默认实现,于是 for-of 和.values方法保持一致,都不会跳过空位。

对比总结

  • for:不忽略
  • for in忽略空位
  • for of:不忽略

这仨原理不一样,只是因为长得像所以放一起。

for in 忽略空位是和下面的对象方法一个道理。

for of 不忽略空位和下面数组的values等方法是一个道理。

  • 对象方法 Object.keys()Object.values()Object.entries()忽略空位
  • 数组方法:
    • forEachmapfiltereveryreduce等:忽略空位
    • keysvaluesentries:不忽略空位

标签:空位,遍历,JS,忽略,数组,entries,方法
From: https://www.cnblogs.com/feixianxing/p/18393497/javascript-array-empty-items-and-iterate-me

相关文章

  • JSP家庭垃圾分类管理系统21wg8(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容一、选题背景随着城市化进程的加快,生活垃圾产生量急剧增加,其中家庭垃圾占据重要比例。传统的垃圾处理方式已难以适应环保要求,垃圾分类成为解决垃圾......
  • 【网络安全】PostMessage:分析JS实现XSS
    未经许可,不得转载。目录前言示例正文前言PostMessage是一个用于在网页间安全地发送消息的浏览器API。它允许不同的窗口(例如,来自同一域名下的不同页面或者不同域名下的跨域页面)进行通信,而无需通过服务器。通常情况下,它用于实现跨文档消息传递(Cross-DocumentMessaging),这在一......
  • 25版王道数据结构课后习题详细分析 第六章 图 6.2图的遍历
    一、单项选择题————————————————————————————————————————解析:广度优先搜索以起始结点为中心,一层一层地向外层扩展遍历图的顶点,因此无法考虑到边权值,只适合求边权值相等的图的单源最短路径。广度优先搜索相当于树的层序遍历,选项Ⅲ......
  • 定制JSON序列化的利器示例
    金额序列化:importcom.fasterxml.jackson.annotation.JacksonAnnotationsInside;importcom.fasterxml.jackson.databind.annotation.JsonDeserialize;importcom.fasterxml.jackson.databind.annotation.JsonSerialize;importcom.rb.jrzl2.crm.infrastructure.constant.jso......
  • js面试题手写代码
    实现一个new操作符实现一个instacneof操作符 实现一个new操作符 functionmyNew(fn,...args){if(typeoffn!=='function){returnTypeError('fnmustbeafunction')}//letobj={}创建一个空对象//obj.__proto__=fn.prototype将......
  • threejs中OrbitControls的用法
    OrbitControls是Three.js库中一个非常流行的相机控制组件,它允许用户通过鼠标(或触控设备)来旋转、缩放和平移场景中的相机,从而从不同的角度和距离观察场景。下面是如何在Three.js中使用OrbitControls的方法:1.引入OrbitControls首先需要从Three.js的CDN或本地路径中引入O......
  • Java二叉树的遍历以及最大深度问题
    Java学习+面试指南:https://javaxiaobear.cn1、树的相关概念1、树的基本定义树是我们计算机中非常重要的一种数据结构,同时使用树这种数据结构,可以描述现实生活中的很多事物,例如家谱、单位的组织架构、等等。树是由n(n>=1)个有限结点组成一个具有层次关系的集合。把它叫做“树”是因为......
  • 线性表:顺序表的实现以及遍历扩容
    Java学习手册+面试指南:https://javaxiaobear.cn顺序表是在计算机内存中以数组的形式保存的线性表,线性表的顺序存储是指用一组地址连续的存储单元,依次存储线性表中的各个元素、使得线性表中再逻辑结构上响铃的数据元素存储在相邻的物理存储单元中,即通过数据元素物理存储的相邻关系来......
  • [vue] jszip html-docx-js file-saver 图片,纯文本 ,打包压缩,下载跨域问题
    npminstalljszipfile-saverimportJSZipfrom'jszip';importFileSaverfrom'file-saver';JSZip创建JSZip实例:constzip=newJSZip();创建文件:支持导出纯文本zip.file("hello.txt","HelloWorld\n");创建文件夹:zip.folder("file")......
  • JS 基础
    1.什么是JavaScriptJavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言1.1JavaScript特点:​向HTML页面中添加交互行为​脚本语言,语法和Java类似​解释性语言,边执行边解释1.2JavaScript组成:1.3JavaScript的基本结构:<scripttype="text/javascript"......