javascript中的几种遍历方法浅析
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呢? 首 ...
随机推荐
- 2-23c#基础循环语句
循环语句 必须具备四要素:初始条件.循环条件.循环体.状态改变 for (初始条件; 循环条件; 状态改变) { 循环体} 简单举例 for(int i=1;i<=10;i++)//就是 ...
- Python 正则表达式(字符)详解
Python正则表达式 - 简介 其实正则表达式这种技术,源于一个很简单的问题: 如何通过变成使得计算机具有在文本中检索某种模式的能力? 而正则表达式为通过编程实现高级的文本模 ...
- Collection和Map
(1)Collection和Map的继承体系. (2)ArrayList(数组).LinkedList(链表).Vector(线程同步).Stack(继承Vector先进后出的栈).PriorityQ ...
- Flume-ng源码解析之Channel组件
如果还没看过Flume-ng源码解析之启动流程,可以点击Flume-ng源码解析之启动流程 查看 1 接口介绍 组件的分析顺序是按照上一篇中启动顺序来分析的,首先是Channel,然后是Sink,最后 ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- Java 注解 入门
这几天在学习Spring3.x,发觉现在许多框架都用上了java注解功能,然后自己就对java注解这方面初步学习了一下. 首先,注解跟注释不是一个意思,也根本不是同一个事物. 注释就是我们平常平常中对 ...
- 剑指offer_数组中的逆序对
题目描述 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P. 并将P对1000000007取模的结果输出. 即输出P%100 ...
- Servlet 3.0/3.1 中的异步处理
在Servlet 3.0之前,Servlet采用Thread-Per-Request的方式处理请求,即每一次Http请求都由某一个线程从头到尾负责处理.如果一个请求需要进行IO操作,比如访问数据库.调 ...
- 深入理解java String 及intern
一.字符串问题 字符串在我们平时的编码工作中其实用的非常多,并且用起来也比较简单,所以很少有人对其做特别深入的研究.倒是面试或者笔试的时候,往往会涉及比较深入和难度大一点的问题.我在招聘的时候也偶尔会 ...
- ServletConfig使用
一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为servlet配置一些 ...