1. for...in 用于对数组或者对象的属性的可枚举属性进行循环操作。注意该对象来自原型链上的可枚举属性也会被循环。下面看例子
var arr = ["lee","hello","zhangsan"];
for(var i in arr) {
console.log(arr[i]);//lee hello zhangsan
}
数组也是对象 也可以添加自己的属性 我们为arr添加一个name属性
arr.name = “安妮宝贝”
for(var i in arr) {
console.log(arr[i]);//lee hello zhangsan 安妮宝贝
} 那么怎么理解该对象来自原型链上的可枚举属性也会被循环?看下面的例子
var bar = {a:1,b:2,c:3};
function foo() {
this.color = "red";
}
foo.prototype = bar;
var obj = new foo();
for(var prop in obj){
console.log("o."+prop+"="+obj[prop])//o.color = red o.a = 1 o.b =2 o.c = 3 } 最后一个例子复制代码运行一下看看结果
<ul id="box">
<li class="child">1</li>
<li class="child">2</li>
<li class="child">3</li>
<li class="child">4</li>
</ul>
<script>
var ul = document.querySelector("#box");
var li = ul.querySelectorAll(".child");
for(var i in li) {
console.log(li[i]);
li[i].onclick = function() {
alert("hello")
}
}
</script>
2.forEach是ES5中操作数组的一种方法,主要功能是遍历数组直接看例子
var arr = ["zhangsan","lisi","wangwu"];
arr.name ="sdfsdfsdf";
arr.forEach(function(element){
console.log(element)// zhangsan lisi wangwu
}) //复制下面的例子看看结果 你就会理解forEach
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
alert(array);
alert(element);
alert(index);
});
3. for...of 你只需要记住以下三点
- 这是最简洁方便遍历数组的方法
- 避开了for...in循环的所有缺陷
- 与for each不同的是它可以正确响应break continue 和return语句
- 可以循环字符串
var str = "hello"
for(var x of str) {
console.log(x)// h,e,l,l,o
}
简单的例子说明for in for of的不同
var arr = ["zhangsan","lisi","wangwu"]
for (var j of arr){
console.log(j)// zhangsan lisi wangwu
}
var arr = ["zhangsan","lisi","wangwu"]
for (var j in arr){
console.log(j)// 1 2 3
以上各位看官可以看出来了吧。for in 操作数字只是返回索引 for of 返回的是值
4 Object.keys()
未完待续
javascript中的几种遍历方法浅析的更多相关文章
-
Hashtable类中的四种遍历方法对比
要遍历一个Hashtable,api中提供了如下几个方法可供我们遍历: keys() - returns an Enumeration of the keys of this Hashtable ke ...
-
JavaScript 中的12种循环遍历方法
原文:JavaScript 中的12种循环遍历方法 题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];f ...
-
Jquery中each的三种遍历方法
Jquery中each的三种遍历方法 $.post("urladdr", { "data" : "data" }, function(dat ...
-
Java中Map的三种遍历方法
Map的三种遍历方法: 1. 使用keySet遍历,while循环: 2. 使用entrySet遍历,while循环: 3. 使用for循环遍历. 告诉您们一个小秘密: (下↓面是测试代码,最爱看 ...
-
深入了解JavaScript中的Symbol的使用方法
这篇文章主要介绍了深入了解JavaScript中的Symbol的使用方法,本文针对ES6版本的JS进行讲解,需要的朋友可以参考下 Symbol 是什么? Symbols 不是图标,也不是指在代码中可以 ...
-
探究JavaScript中的五种事件处理程序
探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...
-
java 完全二叉树的构建与四种遍历方法
本来就是基础知识,不能丢的太干净,今天竟然花了那么长的时间才写出来,记一下. 有如下的一颗完全二叉树: 先序遍历结果应该为:1 2 4 5 3 6 7 中序遍历结果应该为:4 2 5 ...
-
JavaScript中的三种弹出对话框
学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性 ...
-
简单了解JS中的几种遍历
忙了好一段时间,项目上线后终于有那么一点点空档期静下来整理一些问题了.当我们在开发项目的时候,用到遍历的地方肯定少不了,那么我们有那么多的遍历方法,在不同情况下用那种方法会更优雅而且还没bug呢? 首 ...
随机推荐
-
C# 闭包
1. 首先要说明的是, delegate 被编译器 编译成一个class, 所以才能传来传去(具体参考 <CLR via C#>第四版), 所以 Action.Func也是如此 2. 在C ...
-
【算法与数据结构】二叉搜索树的Java实现
为了更加深入了解二叉搜索树,博主自己用Java写了个二叉搜索树,有兴趣的同学可以一起探讨探讨. 首先,二叉搜索树是啥?它有什么用呢? 二叉搜索树, 也称二叉排序树,它的每个节点的数据结构为1个父节点指 ...
-
WatiN和HttpWatch交互简介
Httpwatch是一款强大的网页数据分析工具,它可以在不改变浏览器和网络设置的基础上捕捉http和https数据.查看底层的http数据,包括headers, cookies, cache等,同时统 ...
-
谁会是 Zabbix 和 Nagios 的继任者?
[编者按]本文根据 Dataloop.IO 的创始人兼 CEO David Gildeh 对监控工具市场的现状分析以及对未来发展趋势的展望,展开拓展讨论. 为什么监控还是一塌糊涂? 为了调研市场,从而 ...
-
NET Core 1.0 RC2
NET Core 1.0 RC2 历险之旅 文章背景:对于.NET Core大家应该并不陌生, 从它被 宣布 到现在已经有1-2年的时间了,其比较重要的一个版本1.0 RC2 也即将发布..Net C ...
-
react-router3.x hashHistory render两次的bug,及解决方案
先写一个简单App页面,其实就是简单修改了react-router的官方例子中的animations例子,修改了两个地方: 1.路由方式由browserHistory修改为hashHistory 2. ...
-
腾讯云centos7.2安装宝塔面板和LAMP
1.安装好centos7.2系统后,登录centos系统输入如下命令: yum install -y wget && wget -O install.sh http://downloa ...
- 单用户模式破解root密码
-
C#模拟键盘按键的三种方式实现
1.System.Windows.Forms.SendKeys 组合键:Ctrl = ^ .Shift = + .Alt = % 模拟按键:A private void button1_Click(o ...
-
华为ensp工具栏丢失解决方法
电脑是win8系统 不知道什么原因,华为模拟器的工具栏神奇的消失了,感觉很郁闷,每次要写字的时候都找不到在哪里(菜单里也没有),于是在官方论坛里面找了一下终于找出原因了. 关闭ensp,点击属性,进入 ...