javascript数组遍历for与for in区别详解

js中遍历数组的有两种方式

代码如下:

var array=['a']
//标准的for循环
for(var i=1;i<array.length;i++){
    alert(array[i])
}
//foreach循环
for(var i in array){
    alert(array[i])
}

正常情况下上面两种遍历数组的方式结果一样。首先说两者的第一个区别

标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为对象。自己试试 alert(typeof i);这个区别是小问题。现在我加上如下代码，上面的执行结果就不一样了。

代码如下:

//扩展了js原生的Array
Array.prototype.test=function()
 
}

试试看上面的代码执行什么。我们发现标准的for循环任然真正的对数组循环, 但是此时foreach循环对我刚才写的test方法写打印出来了。这就是for与foreach遍历数组的最大区别，如果我们在项目采用的是用foreach遍历数组，假设有一天谁不小心自己为了扩展js原生的Array类，或者引入一个外部的js框架也扩展了原生Array。那问题就来了。

再此建议两点

1.不要用for in遍历数组，全部统一采用标准的for循环变量数组(我们无法保证我们引入的js是否会采用prototype扩展原生的Array)
2.如果要对js的原生类扩展的时候，不要采用prototype了

赞 (0)

相关推荐

  • 全面解析JavaScript里的循环方法之forEach，for-in，for-of

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) { console.log(m

  • 详谈js中标准for循环与foreach(for in)的区别

    js中遍历数组的有两种方式 var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){ alert(array[i]) } //foreach循环 for(var i in array){ alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为

  • 浅谈javascript中for in 和 for each in的区别

    区别一: for in是javascript 1.0 中发布的.         for each in是作为E4X标准的一部分在javascript 1.6中发布的,而它不是ECMAScript标准的一部分.         这将意味着存在各种浏览器的兼容性问题.for each in,对很多浏览器都不支持的.例如是不支持IE6,IE7,IE8等浏览器的. 区别二: 例:  var 长方形= {  高:"15",  宽:"25"  }; for (var i in

  • 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的for in循环和java里foreach循环的区别分析

    本文实例分析了js的for in循环和java里foreach循环的区别.分享给大家供大家参考.具体分析如下: js里的for in循环定义如下: 复制代码 代码如下: for(var variable in obj) { ... } obj可以是一个普通的js对象或者一个数组.如果obj是js对象,那么variable在遍历中得到的是对象的属性的名字,而不是属性对应的值.如果obj是数组,那么variable在遍历中得到的是数组的下标. 遍历对象实验: 复制代码 代码如下: var v = {

  • javascript数组遍历for与for in区别详解

    js中遍历数组的有两种方式 复制代码 代码如下: var array=['a'] //标准的for循环 for(var i=1;i<array.length;i++){     alert(array[i]) } //foreach循环 for(var i in array){     alert(array[i]) } 正常情况下上面两种遍历数组的方式结果一样.首先说两者的第一个区别 标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key

  • Javascript(es2016) import和require用法和区别详解

    本文介绍了Javascript(es2016) import和require用法和区别详解,分享给大家,具体如下: 写个简单js文件,假设名字为:lib.js . 假设内容如下: export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } 这样就可以在其他地方对lib中定义的

  • JavaScript展开运算符和剩余运算符的区别详解

    目录 什么是剩余运算符? 剩余运算符在JavaScript函数中是如何工作的? 注意!不能在包含剩余参数的函数体中使用"use strict" 剩余运算符在参数解构中是如何工作的? JavaScript arguments和剩余参数之间有哪些区别? 什么是展开运算符以及它在JavaScript中是如何工作的? 有关展开运算符我们需要知道的 1. 展开运算符不能展开对象字面量的值 2. 展开运算符不克隆相同的属性 3. 注意展开运算符在包含非原语的对象中是何如工作的 如果myName数组

  • JavaScript setTimeout和setInterval的用法与区别详解

    JavaScript setTimeout和setInterval的用法与区别详解

    目录 I. 总述 II. setTimeout()函数 III. setInterval()函数 IV. 新年倒计时案例 总结 I. 总述 首先,setTimeout()和setInterval()函数是JavaScript中两个很重要的关于"时间的函数",因此,我们在学习JavaScript的过程中,一定要对这两个函数有一个深入的学习,它们两个函数也是经常被使用! 其中,如果分别用一句话来概括这两个函数,那么应该是这样的: setTimeout(): 该函数能够按照设定的时间值延迟执

  • JavaScript数组的栈方法与队列方法详解

    JavaScript数组的栈方法与队列方法详解

    数组(Array)和对象(Object)应该是JavaScript中使用最多也是最频繁的两种类型了,Array提供了很多常用的方法:栈方法.队列方法.重排序方法.操作方法.位置方法.迭代方法等等. 1.Array的栈方法 栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构,也就是最新添加的项最早被移除.栈中项的插入(push)和移除,只发生在一个位置--栈的顶部.ECMAScript为数组提供了push()和pop()方法,可以实现类似栈的行为.下面两图分别演示了入栈与出

  • Javascript的promise,async和await的区别详解

    终于把promise, async, await的区别和联系弄清楚了,看下面代码 写法1,2是promise的写法 写法6是async和await的写法 主要看第2种写法和第6中写法即可, 第2种写法是promise的典型写法,第6中写法是async, await的典型写法 // 以下三个请求依次执行 req1 = () => { return fetch("http://example.com/api/v1/get")} req2 = () => { return fet

  • javascript数组遍历的方法实例分析

    javascript数组遍历的方法实例分析

    本文实例讲述了javascript数组遍历的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var a = [1,2,3,4,5,6]; var b = a.

  • 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中数组去重常用的五种方法详解

    目录 1.对象属性(indexof) 2.new Set(数组) 3.new Map() 4.filter() + indexof 5.reduce() + includes 补充 原数组 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1.对象属性(indexof) 利用对象属性key排除重复项 遍历数组,每次判断新数组中是否存在该属性,不存在就存储在新数组中 并把数组元素作为key,最后返

  • javaScript之split与join的区别(详解)

    共同点:split与join函数通常都是对字符或字符串的操作: 两者的区别: (1)split()用于分割字符串,返回一个数组, 例如 var string="hello world?name=xiaobai"; var splitString = string.split("?"); console.log(splitString);//["hello world","name=xiaobai"] split()只有一个参数

随机推荐