js中forEach、for-in和for-of循环方法 - 简书
js中forEach、for-in和for-of循环方法
一、forEach循环遍历
常用遍历数组方法：
for (var index = 0; index & myArray. index++) {
console.log(myArray[index]);
自JavaScript5之后可以使用内置的forEach方法：
myArray.forEach(function (value) {
console.log(value);
写法虽然简单了，但是也有缺点，你不能中断循环（使用break或者return）。
二、for-in循环遍历
for-in循环实际是为循环”enumerable“对象而设计的：
var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"
循环一个数组：
for (var index in myArray) {
// 不推荐这样
console.log(myArray[index]);
不推荐用for-in来循环一个数组，因为，不像对象，数组的index跟普通的对象属性不一样，是重要的数值序列指标。
for–in是用来循环带有字符串key的对象的方法。
三、for-of循环遍历
JavaScript6里引入了一种新的循环方法，它就是for-of循环，它既比传统的for循环简洁，同时弥补了forEach和for-in循环的短板。
for (var value of myArray) {
console.log(value);
for-of可以循环遍历很多东西：
1、循环一个数组（Array）：
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
我们可以使用const来替代let，这样它就变成了在循环里的不可修改的静态变量。
let iterable = [10, 20, 30];
for (const value of iterable) {
console.log(value);
js中const，var，let区别：
1、const定义的变量不可以修改，而且必须初始化。
1 const b = 2;//正确
2 ////错误，必须初始化
3 console.log('函数外const定义b：' + b);//有输出值
4 // b = 5;
5 // console.log('函数外修改const定义b：' + b);//无法输出
2、2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
1 var a = 1;
2 ////不会报错
3 console.log('函数外var定义a：' + a);//可以输出a=1
4 function change(){
6 console.log('函数内var定义a：' + a);//可以输出a=4
8 change();
9 console.log('函数调用后var定义a为函数内部修改值：' + a);//可以输出a=4
3、let是块级作用域，函数内部使用let定义后，对函数外部无影响。
1 let c = 3;
2 console.log('函数外let定义c：' + c);//输出c=3
3 function change(){
4 let c = 6;
5 console.log('函数内let定义c：' + c);//输出c=6
7 change();
8 console.log('函数调用后let定义c不受函数内部定义影响：' + c);//输出c=3
2、循环一个字符串：
let iterable = "boo";
for (let value of iterable) {
console.log(value);
3、循环一个类型化的数组（TypedArray）:
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);
4、循环一个Map：
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
console.log(value);
for (let entry of iterable) {
console.log(entry);
5、循环一个set：
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
6、循环一个 DOM collection（节点）
循环一个DOM collections，比如NodeList，之前我们讨论过，现在方便了，可以直接使用for-of循环：
// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article & p");
for (let paragraph of articleParagraphs) {
paragraph.classList.add("read");
7、循环一个拥有enumerable属性的对象
for–of循环并不能直接使用在普通的对象上，但如果我们按对象所拥有的属性进行循环，可使用内置的Object.keys()方法：
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
8、循环一个生成器(generators)
function* fibonacci() { // a generator function
let [prev, curr] = [0, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
for (let n of fibonacci()) {
console.log(n);
// truncate the sequence at 1000
if (n &= 1000) {
Iterator(遍历器)的概念 遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator的作用有三个：一是为各种数据结...
我们在学习web前端的路程起步时总是疑问，我们如何更好的遍历元素呢？迭代器和生成器是什么？今天为大家带上与精彩的ES6有关的遍历数据的一些方法和对迭代器和生成器的介绍。 一、for-of循环 （1）for循环的疑问 起初我们如何遍历数组中的元素呢？20年前JavaScrip...
传统的for循环 forEach循环数组 自从JavaScript5起，我们开始可以使用内置的forEach 句法 参数callback:执行每个元素的函数，采用三个参数：currentValue:在数组中正在处理的当前元素的值。index:在数组中正在处理的当前元素的索引...
[TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都是用来声明变量的，用法和var相似 用let或const定义的变量只能在let或const命令所在的代码块（块级作用域）中有效 es6中新增了块级作用域 ES6...
一、let 和 constlet：变量声明, const：只读常量声明（声明的时候赋值）。 let 与 var 的区别: let、const 作用于 块级作用域: 作用域在{}内，可作为局部变量(常量)、全局变量(常量)。 var 作用于 全局作用域:除非使用闭包实现局部变...
对于毕业时的不舍，半个暑假的近似冷战一般的举动可能有点显得幼稚。一直想找个机会能打破这种局面，但每每都是几句话后开始说拜拜了
我显得有些无力。
回想起每次想找你聊一聊的冲动，总是被聊天时不知说什么的尴尬压抑在心中。没有人说“我不想聊下去了”，我们只是心照不宣而已。...
Today I finished to read an english book. It's the first book of this collection. I don't like this book because it's too hard and many w...
新的一月开始了，回首过去的日子，感觉即将结束的一年自己过得混混沌沌，应该有计划的规划自己的学习跟生活，让自己能有更多的时间来完成自己的梦想。 坚持早睡早起，睡觉不超过11点，每天早上5：50按时起床。完成跟孩子一起每天的晨读半小时及睡前半小时的阅读，彼此约束，互相影响。 每...
刺激和回应之间选择的自由维克多.弗兰克尔（Victor Frank,,出生于奥地利的美国精神病学教授——译者注。弗兰克尔是一位深受弗洛伊德心理学影响的决定论者，该学派认为，一个人演幼年经历会造就他的品德和性格，进而决定他的一生。身为犹太人，弗兰克尔曾在二战...
计划10天看完，没有完成，继续阅读。。。 心理暗示与健康 之前看过一篇报道 北京总结过抗癌明星，本来只能活半年一年，结果活十几年都好好的，医生奇怪，怎么他的癌细胞转移那么厉害，还活得那么好呢，因为他们每天都在公园，二千人跳舞，活动啊，高高兴兴聊天啊！ 类似这样的事情有很多，...JS for循环中i++ 和 ++i的区别介绍 | WEB开发
JS for循环中i++ 和 ++i的区别介绍
平时都是这样写的for循环，
for(var i = 0; i & 20 ; i++){
但我看有的人这样写
for (var i = 0; i & 20 ; ++i) {
这样会对for循环有什么影响？
1.在for里好像没啥区别...
但是用在赋值的时候, 就有区别了...
var a = 1;
var b = a++;
var c = 1;
var d = ++c;
console.log(b,d); // 1, 2
a++ 是先应用a, 然后再自加
++a 是先自加, 然后在应用a
2.大概是 C/C++ 时代带来的习惯，传说 ++i 比 i++ 要快，但事实上这两者的性能在js中是差不多的。
至于具体细节，规范里面关于自增/自减运算符是这么写的：
对于放在前面的情况——
UnaryExpression : ++ UnaryExpression
Let expr be the result of evaluating UnaryExpression.
Let oldValue be ToNumber(GetValue(expr)).
ReturnIfAbrupt(oldValue).
Let newValue be the result of adding the value 1 to oldValue, using the same rules as for the + operator (see 12.7.5).
Let status be PutValue(expr, newValue).
ReturnIfAbrupt(status).
Return newValue.
　大致翻译一下：
1.令expr等于当前表达式（就是++后面的部分）的结果
2.令oldValue等于expr转换为数字的结果
3.使用和“+”运算符一样的规则，令newValue = oldValue + 1
4.将newValue赋值给expr
5.整个运算式返回newValue
对于放在后面的情况——
PostfixExpression : LeftHandSideExpression ++
1.Let lhs be the result of evaluating LeftHandSideExpression.
2.Let oldValue be ToNumber(GetValue(lhs)).
3.ReturnIfAbrupt(oldValue).
4.Let newValue be the result of adding the value 1 to oldValue, using the same rules as for the + operator (see 12.7.5).
5.Let status be PutValue(lhs, newValue).
6.ReturnIfAbrupt(status).
7.Return oldValue.
大致翻译——
1.令lhs等于当前表达式（++前面的部分）的结果
2.令oldValue等于lhs转换为数字的结果
3.使用和“+”运算符一样的规则，令newValue = oldValue + 1
4.将newValue赋值给lhs
5.整个运算式返回oldValue
可以看到，这两者的的区别只是最后一步，整个运算式是返回加一后的还是加一前的。
对于for语句而言：
for(var i = 0; i & i++)
最后一栏仅仅是自加，并没有把这个值赋值给谁，所以从这一点来看，++符号放在前面或者是后面都是一样的。
3.事实上没有太大区别。但是如果要追求那一点点效率问题的话，++i确实会效率高一些.
确实是从c++的std标准库而来，当i是一个std容器的iterator时，i不是一个数字，i++会多产生一个赋值操作，因此++i性能更高。所以c++习惯的人，在i不是数值时，喜欢用++i来节省开销。
以上所述是小编给大家介绍的JS for循环中i++ 和 ++i的区别介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对源码天空网站的支持！js中两个for循环怎么传值？
[问题点数：50分，结帖人baidu_]
js中两个for循环怎么传值？
[问题点数：50分，结帖人baidu_]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2013年8月 Web 开发大版内专家分月排行榜第一2010年2月 Web 开发大版内专家分月排行榜第一
2013年7月 Web 开发大版内专家分月排行榜第二2013年6月 Web 开发大版内专家分月排行榜第二
匿名用户不能发表回复！|Javascript中for循环语句的几种写法总结对比
for循环我们在js遍历对象或数组时都会有用到了，今天我们一起来看一些关于for循环的一些使用例子了，具体的操作细节如下文介绍。
一般写法如下：
for(var i = 0;i& arr.i++) {
var a = arr[i];
//...
这就是一个常见的，正序循环的for循环。这样写的缺点大家都明白：每次都从arr里取length与i来对比，浪费性能（而且，要是arr的长度是动态变化的，就会出现死循环）。改进这个循环的办法是用变量保存arr.length：
for(var i = 0, al = arr.i&i++) {
var a = arr[i];
//...
这样比第一种可以略微提升点性能，要是数组长，可以提升更多。
不过这样写就多了个变量al，且这个变量只在用来与i对比的时候有用，看着有点鸡肋。
如果循环顺序对你不重要，那你可以尝试倒序循环：
for(var i = arr.length-1;i & -1;i--) {
var a = arr[i];
//...
这样一来变量少些，且还缓存过arr长度，性能也不错。但这里的代码写得有点拙劣（我故意的），首先是i = arr.length-1（居然要-1，靠），然后是循环继续执行的条件i & -1，都让有洁癖的人无法忍受。
下面是我常用的倒序for循环写法：
for(var i = arr.i--;) {
var a = arr[i];
//...
这已经非常精简了。原理需要理解一下：for循环继续执行的条件，是;;之间的这个判断要为真，而这里的i–，在第一次循环进来的时候，i=arr.length，i–值不变（为什么不变？因为要在for循环体里面，才会发现i变了)；当i=1时，i- -还是1，但进入循环体后，就是0了，所以可以正常执行最后一次循环；当i=0时，i–还是0，而0已经不为真了，所以循环就不会继续执行了。
大家注意到上面的所有代码的for循环体里，都有个var a = arr[i] ，用来取出当前循环到的数组项。这实际上也是种浪费，且jsLint等会告诉你：不要在循环里声明变量。。。
倒序的for可以精简至斯，但我就是要正序，而且要效率高，变量少，怎么办？
for(var i = 0,a = arr[i++];) {
//...
这种写法好处在于：几乎不可避免的arr.length不见了，前面说的取出当前循环到的数组项的那一句也不见了。
a = arr[i++] ，在这里作为循环能执行的条件，注意这里只有一个=号，所以这不是判断句，是赋值语句，就是把arr[i++]赋给a，然后判断a是不是真值。i++与i–的原理类型我就不说了，只说当i++已经超过数组的长度时，循环肯定要停止才行，而这里真的就停止了，为什么？因为a=arr[i++] ，如果取到了超出数组本身长度的项，只会取得一个undefined，而undefined是假值，循环条件就判断失败了。
当然，这样写的缺点也很明显：
1，当arr的长度动态变化时，依然会产生死循环————因为我们从来没缓存过arr.length呀。
2，如果循环的是一个数字数组，当取出的项（即a的值）为0时，就会中止循环（因为0是假值）。
3，当数组中某一项是假值时（包括空字符串，0，null，undefined），同样会中止循环
所以大家用这种写法时，最好排除掉上面的情况再用。
这个原理同样可以用在倒序循环上。
最后我要忠告大家几句：
代码精简不等于效率高!
不要为了故意精简代码而丧失性能
顺带说几点提高for循环性能的要点：
1，适时break!不需要遍历全部的就要加跳出条件！
2，不要在for循环体里声明变量（建议一次var,多次赋值）
2，数组长度缓存，尽量少变量
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流。
你可能感兴趣的文章：
登录后，点击右上角的用户名，在下拉菜单中可以进去“我的任务”
注册自动激活，本站没有VIP！没有充值！没有推广任务等等
回复即可下载
// JavaScript Document
var c = document.getElementById(&dotu&);
var cxt = c.getContext(&2d&q...
主流编辑器有SublimeText，Notepad++，webstorm等，是使用最广泛的编辑器，但也有一些JavaScript编辑器提供有着各自的特性和功能，适应不同人的需求，以下是几款优秀的编辑器，相信你一定能找到自己喜欢的。
确保代码尽量简洁
不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具，只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。
2014年过去了，作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术，即便是强大的Angular，似乎也因为最近的一些事情而动摇。
2014年10月的ng-europe会议上，Angular开发者团队透露了一个关于...
我们的网页外观主要由CSS控制，编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现，更是可以让网页增添了不少动画元素，让我们的网页变得更加生动有趣，并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例，希望大家...
之前上传图片都是直接将图片转化为io流传给服务器，没有用框架传图片。
最近做项目，打算换个方法上传图片。
Android发展到现在，Okhttp显得越来越重要，所以，这次我选择用Okhttp上传图片。
Okhttp目前已经更新到Okhttp...
PC和手机端网站滑动拼图验证码效果源码，同时包涵了弹出式Demo，使用ajax形式提交二次验证码所需的验证结果值，嵌入式Demo，使用表单形式提交二次验证所需的验证结果值，移动端手动实现弹出式Demo三种效果
首先要确认前端使用页面，比如...
&font face=&寰?杞?闆呴粦, Arial, sans-serif &&2014骞达紝杞?浠惰?屼笟鍙戝睍杩呴EUR燂紝鍚勭?嶈??瑷EUR灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘EUR傝繖浜涜??...
下载地址：JavaScript常用特效chm下载
对了，如果打开空白，在手册上右键属性解除锁定即可。
别说了，前端今年要变天了扫描二维码关注公众号了解详情
本站(www.javascriptcn.com)所提供的等资源来源互联网，仅供学习研究之用，版权归该资源的合法拥有者所有，如用于商业用途，请购买正版，原作者若认为本站侵犯了您的版权，请联系我们，我们会立即删除！
鄂ICP备号-1
没有账号？js实现For循环单击按钮将代码块循环执行_百度经验
该经验图片、文字中可能存在外站链接或电话号码等，请注意识别，谨防上当受骗！&&&&&&&&&电脑软件js实现For循环单击按钮将代码块循环执行听语音1234567
百度经验:jingyan.baidu.comjs实现For循环单击按钮将代码块循环执行百度经验:jingyan.baidu.comDreamweaver.exe百度经验:jingyan.baidu.com1新建HTML文件2创建HTML内容和按钮3预览效果如图4创建js函数，定义变量5创建for循环代码块6输出循环代码块7在按钮上添加函数事件8预览如图点击按钮循环代码块附上代码&script&function xun(){ var x=&&,i;
for (i=0;i&5;i++){
x=x + &循环第& + i +&次& + &&br&&; } document.getElementById(&demo&).innerHTML=x;}&/script&END经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。投票(0)已投票(0)有得(0)我有疑问(0)◆◆说说为什么给这篇经验投票吧！我为什么投票...你还可以输入500字◆◆只有签约作者及以上等级才可发有得&你还可以输入1000字◆◆如对这篇经验有疑问，可反馈给作者，经验作者会尽力为您解决！你还可以输入500字相关经验111000热门杂志第1期你不知道的iPad技巧3764次分享第1期win7电脑那些事6626次分享第2期新人玩转百度经验1399次分享第1期Win8.1实用小技巧2650次分享第1期小白装大神1910次分享◆请扫描分享到朋友圈该经验图片、文字中可能存在外站链接或电话号码等，请注意识别，谨防上当受骗！}