细说JS数组遍历的一些细节及实现

目录
  • 1. 数组空位问题 ​
    • 1.1 空位判断 ​
    • 1.2 刚列举了数组的一些操作会对空位进行跳过,但其实,它们在处理上也还是存在一些差异的
  • 2. 是否修改原数组 ​
  • 3. 附一下数组遍历的几种方法 ​
    • 3.1 索引访问 ​
    • 3.2 for ... of ​
    • 3.3 forEach ​
    • 3.4 for ... in ​
    • 3.5 map、filter、reduce ​

1. 数组空位问题 ​

数组空位是什么,它是数组内某个元素没有任何值,这种现象称为空位现象,我们在使用Array()去构造一个数组时,如果只传入一个参数,数组里面的元素项就会出现空位现象,它其实是没有任何元素的,下面是几个会创建空位的典型例子:

let arr = Array(5) // <5 empty items>
let res = arr.map(e => e + 1) // <5 empty items>
let a = [,,]; // <2 empty items>

ES5 中的数组方法包括:map、filter、forEach、reduce,还有 for ... in 等语法,这些方法执行的时候遇到空位,会直接跳过。

// ES5 及以前,不会处理空位
const a = Array(5);
console.log(a) // [ <5 empty items> ]
console.log(a.map(_ => 1)) // 无效,[ <5 empty items> ]
// console.log(a.reduce((p, c)=> p+c)) // 报错
console.log(a.filter(x => true)) // []
a.forEach(e => {
  console.log(e);
}) // 无任何输出
console.log(a+'') // ,,,,
console.log(a.indexOf(undefined)) // -1
console.log(a.lastIndexOf(undefined)) // -1
for (let k in a) {
  console.log(k) // 无任何输出
}

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

[,'a','b',undefined,null].join("@") // '@a@b@@'
[,'a','b',undefined,null].toString() // ',a,b,,'

ES6,一些操作会将数组空位视为undefined来处理。比如下面的一些操作

console.log([...a]) // [ undefined x 5 ]
console.log(Array.from(a)) // [ undefined x 5 ]
console.log(a.includes(undefined)) // true
console.log(a.find(x => x === undefined)) // undefined
console.log(a.findIndex(x => x === undefined)) // 0
// for of 循环取值
for (let k of a) {
  console.log(k) // 输出5个undefined
}

1.1 空位判断 ​

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

let arr = Array(3) console.log(0 in arr) // false

如上述所示,使用in运算符,判断索引为0的位置是否为空位,遇到数组空位会返回false
这里需要注意的是所谓的空位是没有任何值的,undefined、null它们都不属于空位,下面来判断一下。

let arr = [undefined, null];
console.log(0 in arr) // true
console.log(1 in arr) // true

验证了undefined、null所在的位置它不是空位

1.2 刚列举了数组的一些操作会对空位进行跳过,但其实,它们在处理上也还是存在一些差异的

比如:forEach、filter、some与every等在遇到空位时,会直接跳过它,不会保留它的值, 而map则会保留空位
我们来看下例子:

[,1,2].forEach((x,i) => { console.log(i); }) // 这里只会输出1 2
[,1,2].filter((x,i) => { return x > 0; }) // 这里也只会输出[1, 2]
[,1,2].map((x) => { return x > 0; }) // 这里会输出[空, true, true],它保留了空位

其余的可以自行测试看看结果

2. 是否修改原数组 ​

请看以下代码,遍历过程中,试图修改遍历的每一项。

const arr = [1, 2, 3]
let res = arr.filter(item => {
  item++
  return item >= 3
})
console.log(arr) // [ 1, 2, 3 ]
console.log(res) // [ 2, 3 ]

filter 里的 item 自增了,所以最后有两项符合过滤规则,但是原数组并没有变。这说明这里的 item 只是原数组项的一个值拷贝,数组遍历是按值传递的。
再看一段代码,这次我们遍历引用数据类型的数组。

const brr = [
  {count: 1},
  {count: 1},
  {count: 1}
]
const res2 = brr.map(item => {
  item.count++
  return item.count
})
console.log(brr) // [ { count: 2 }, { count: 2 }, { count: 2 } ]
console.log(res2) // [ 2, 2, 2 ]

这里的修改改变了原数组,那之前说的按值传递有问题?其实还没问题的,数组函数方法说到底也是一个函数,JS 的函数总是按值传递的:

基本数据类型(包含变量、函数参数等)存储在栈(stack)中,传递参数会复制一份值
引用数据类型的引用(指针)存储在栈中,指向的值存储在堆(heap)中,传递参数会复制一份对象的引用地址,复制的引用地址和原引用地址指向堆中同一个对象(因此修改参数,也修改了原对象)

3. 附一下数组遍历的几种方法 ​

3.1 索引访问 ​

const arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

3.2 for ... of ​

const arr = [1, 2, 3]
for (let e of arr) {
  console.log(e)
}

3.3 forEach ​

注意:return 和 break 无法中断遍历。

  • return 可以跳过本次遍历,但剩余元素仍然会继续遍历下去。
  • break 只能中断 for 和 while 循环,forEach 函数中使用会报错
const arr = [1, 2, 3]
arr.forEach((e, i, a) => {
console.log(e)
})

3.4 for ... in ​

`for ... in` 是用来遍历对象(plain object)的,也可以用来遍历数组,但不建议。

const arr = [1, 2, 3]
for (let i in arr) {
  console.log(arr[i])
}

3.5 map、filter、reduce ​

这三类都是为了对数组进行一个操作,然后得到目标结果的数组方法,从功能和语义上来讲,和 forEach 有区别的,不建议混用,尤其是 map 和 forEach。但是也能对数组进行遍历,详细可参考MDN。

到此这篇关于细说JS数组遍历的一些细节及实现的文章就介绍到这了,更多相关JS数组遍历内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript 数组遍历的五种方法

    在使用 JavaScript 编写代码过程中,可以使用多个方法对数组进行遍历:包括 for循环.forEach循环.map 循环.forIn循环和forOf循环等方法. 一.for 循环:基础.简单 这是最基础和常用的遍历数组的方法:各种开发语言一般都支持这种方法. let arr = ['a','b','c','d','e']; for (let i = 0, len = arr.length; i < len; i++) { console.log(i); // 0 1 2 3 4 cons

  • JavaScript遍历数组的三种方法map、forEach与filter实例详解

    本文实例讲述了JavaScript遍历数组的三种方法map.forEach与filter.分享给大家供大家参考,具体如下: 前言 近一段时间,因为项目原因,会经常在前端对数组进行遍历.处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象,并且其中还存在一些坑.前端时间在ediary中总结了js原生自带的常用的对数组遍历处理的方法,分别为:map.forEach.filter,在讲解知识点的同时,会类比相识的函数进行对比,这样会有助于思考方法的利与弊. 一.Js自带的map()

  • JS中数组实现代码(倒序遍历数组,数组连接字符串)

    Js中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性. 具体代码如下所示: // =================== 求最大值===================================== <script> var arr = [10,35,765,21345,678,89]; var max = arr [0]; for (var i=0;i< arr.length;i++) { if (max<arr[i]){ max = arr [i]; } }

  • JS中循环遍历数组的四种方式总结

    本文比较并总结遍历数组的四种方式: for 循环: for (let index=0; index < someArray.length; index++) { const elem = someArray[index]; // ··· } for-in 循环: for (const key in someArray) { console.log(key); } 数组方法 .forEach(): someArray.forEach((elem, index) => { console.log(

  • javaScript遍历对象和数组的方法总结

    在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用! javaScript遍历对象总结 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性). var obj = {'0':'a','1':'b','2':'c'}; Object.keys(obj).forEach(function(key){ console.log(key,obj[key]);

  • js/jquery遍历对象和数组的方法分析【forEach,map与each方法】

    本文实例讲述了js/jquery遍历对象和数组的方法.分享给大家供大家参考,具体如下: JS forEach方法 arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,index当前项的索引,array原始数组: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是可以自己通过数组的索引来修改原来的数组: va

  • JavaScript遍历查找数组中最大值与最小值的方法示例

    本文实例讲述了JavaScript遍历查找数组中最大值与最小值的方法.分享给大家供大家参考,具体如下: <script language="javascript"> // 查找数组中最小值 function mathMin(arrs){ var min = arrs[0]; for(var i = 1, ilen = arrs.length; i < ilen; i+=1) { if(arrs[i] < min) { min = arrs[i]; } } ret

  • JS数组遍历中for,for in,for of,map,forEach各自的使用方法与优缺点

    JS数组遍历普通函数 优点:支持流程控制(break.continue.return) for const arr = ["A", "B", "C"] for(let i = 0; i<arr.length; i++){ console.log(arr[i]) } 优点:能够对索引精确控制缺点:语法较为繁琐 for in const arr = ["A","B","C"] arr[

  • JS常用的几种数组遍历方式以及性能分析对比实例详解

    本文实例讲述了JS常用的几种数组遍历方式以及性能分析对比.分享给大家供大家参考,具体如下: 前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,fo

  • js常见遍历操作小结

    本文实例讲述了js常见遍历操作.分享给大家供大家参考,具体如下: for循环 var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } for in var arr = new Array("first", "second"

  • js简单遍历获取对象中的属性值的方法示例

    本文实例讲述了js简单遍历获取对象中的属性值的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • JS数组的遍历方式for循环与for...in

    JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } 输出的结果:fitst,second,third 第一种:用for...in 这种遍历的方式,例如: var arr = new Array(&

  • JS简单循环遍历json数组的方法

    本文实例讲述了JS简单循环遍历json数组的方法.分享给大家供大家参考,具体如下: 例如数据库里面的json字符串是这样的 var str = '[{"name":"宗2瓜","num":"1","price":"122"},{"name":"宗呱呱","num":"1","price":

  • 深入浅析JS的数组遍历方法(推荐)

    用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; _.each(arr, function(el) { console.log(el); }); 上面的代码会依次输出1, 2, 3, 4, 5,是不是很有意思,遍历一个数组连for循环都不用自己写了._.each()方法遍历数组非常好用,但是它的内部实现一点都不难.下面就一起来看看到底是如何实现_

  • JS实现遍历不规则多维数组的方法

    本文实例讲述了JS实现遍历不规则多维数组的方法.分享给大家供大家参考,具体如下: 直接进入正文: 我们有时候处理数据,可能会遇到一些不规则(无法预料的数据结构),那么拿到这种数据我们如何进行遍历操作呢?举个例子: var data= { a: { one: 1, two: 2, three: {four:'2',five:'4'} }, b: { six: 4, seven: 5, eight: 6 }, c: { nine: 7, ten: 8} } 比如上边的数据(实际情况是这个数据会有各种

  • JS数组及对象遍历方法代码汇总

    文中的范例基于以下数组和对象. var arrTmp = ["value1","value2","value3"]; var objTmp = { aa:"value1", bb:"value2", cc:function(){ console.log("value3") } } 一.JS原生方法 1. javascript遍历的常用的遍历方法是for循环和for-in,ES5的时候加上

随机推荐