JavaScript中利用for循环遍历数组


Posted in Javascript onJanuary 15, 2017

先看一段代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
 <script>
  // 一个普通的数组  
  var arr =[3,5,2,6];
  // 普通的for 循环遍历
  for(var i = 0 ; i < arr.length; i++){
   console.log(i,"类型:"+typeof i,arr[i]);
  }
  // 用for in 遍历数组
  for(var k in arr){
   console.log(k,"类型:"+typeof k,arr[k]);
  }
 </script>
</body>
</html>

这段代码显示出了 一点 for循环遍历数组 和for in 循环遍历 数组的一点区别:

JavaScript中利用for循环遍历数组

标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型。

这还不是坑,只是一点区别。

再看一段代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
 <script>
  // 一个普通的数组  
  var arr =[3,5,2,6];
  // 在数组原型上扩展一个方法
  Array.prototype.extend = function(){
   console.log("在数组原型扩展一个方法");
  }
  // 普通的for 循环遍历
  for(var i = 0 ; i < arr.length; i++){
   console.log(i,"类型:"+typeof i,arr[i]);
  }
  // 用for in 遍历数组
  for(var k in arr){
   console.log(k,"类型:"+typeof k,arr[k]);
  }
 </script>
</body>
</html>

这段代码就是在上边的代码的基础上,为Array做了一下扩充。很简单,只是添加了一个函数。但是我们来看运行会出现了什么情况:

JavaScript中利用for循环遍历数组

输出的结果中,多出了一行,这一行就是我们扩展的一个函数,不是我们定义在数组中的值。到此这个问题就出来了。

综上所述,用for...in...在通常情况下确实可以正确运行。

但是如果我们在项目采用的是用foreach遍历数组,假设有一天谁不小心自己为了扩展js原生的Array类,或者引入一个外部的js框架也扩展了原生Array。那问题就来了。

 所以最好还是用for循环遍历数组

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 #Javascript
JavaScript调试的多个必备小Tips
Jan 15 #Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 #Javascript
js实现密码强度检验
Jan 15 #Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 #Javascript
vue实现简单实时汇率计算功能
Jan 15 #Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 #Javascript
You might like
PHP CURL获取返回值的方法
2014/05/04 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
python创建和使用字典实例详解
2013/11/01 Python
Python使用新浪微博API发送微博的例子
2014/04/10 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python基础知识点 初识Python.md
2019/05/14 Python
python3字符串操作总结
2019/07/24 Python
解决Python中回文数和质数的问题
2019/11/24 Python
Django多个app urls配置代码实例
2020/11/26 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
单身联谊活动方案
2014/01/29 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
大学生就业求职信
2014/06/12 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang