es6 for循环在webpack环境只循环一次

在webpack安装es6运行环境,执行下面代码
图片说明

如上图for执行了一次
使用let声明只在各自作用域有效,上面的for循环应该是执行4次,于是我直接在浏览器敲代码

图片说明

a打印了四次,证明了我期望的结果,我不知道为什么同样的代码结果却不一样,求大佬解答
顺便贴上es6的运行环境
地址

ps:我猜是不是环境是将es6转换成es5,也就是将let变成了var,才导致的结果,那如果这样,以后我用es6写循环,不很坑,瑟瑟发抖,该怎么用es6写循环呀

1个回答

es6草案对于for语句中使用let来声明循环变量如何工作并没有完全的说明,导致各个浏览器或js的运行环境都以自己的理解来执行。
就我所知就有三种不同的运行结果、其中ie浏览器又是与别人差别最大的。
所以for语句中使用let一定要小心。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

关于ES6的for of循环遍历DOM的问题

我写了个小DEMO熟悉for of循环遍历DOM,却发现一些问题并不知道怎么解决。代码如下面。 js代码如下: var DOM1 = document.getElementsByTagName("li"); console.log(DOM1); for (let d of DOM1) { console.log("执行"); console.log(d); } HTML中相关代码如下: <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> 控制台输出如下:![图片说明](https://img-ask.csdn.net/upload/201707/29/1501296737_207784.png) 这说明li都获取到了啊,但就是for循环中的不执行,请指点为什么。 (浏览器是支持ES6的)

webpack 如何不转译 es6 es7 代码 ?

webpack 即使不使用 babel-loader 也会转译 es6 到 es5, 如何使它不对 es6 es7 代码进行转译?

jQuery for循环进行了异步请求,怎么让它每一次循环完全执行完毕之后再执行下一个循环

for(var i = 0 ; i < arr.length ; i++){ jQuery.get(arr[i],function(data){ var reg = /"(.*?)"/g var str1 = ""; data.replace(reg,function($1){ str1 += $1.slice(1,-1); }) console.log(str1); }) } 这样子怎样才能让每次循环执行完毕之后才去执行下一次循环呢

js 中的for循环 怎么每循环一次睡眠3秒???

每循环一次for, 睡眠3秒后,然后执行方法( collClickRemoteAssist(record);) 继续循环一次,睡眠3秒,执行方法。。。。。 ------------------------------------以下是setTimeout方法测试-------不可取-------------- setTimeout( function(){ collClickSecond(record); },3000 ); 要是使用setTimeout方法,程序会睡眠3秒后一次执行完循环,等于延迟了3秒。 怎么解决?????????

let的变量范围,for循环中值得获取

ES6语法中for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。 ``` for (let i = 0; i < 3; i++) { let i = 'abc'; console.log(i); } // abc // abc // abc ``` 上面代码正确运行,输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域,有各自单独的作用域。 请问如何调用for循环中的i,我想要使用一个数组去接受这个参数,那岂不是不能够获取到i变量的值 ``` var a = []; for (let i = 0; i < 3; i++) { let i = 'abc'; a[i] = i; } ``` 上面代码的输出结果是一个数组: ``` [ abc: 'abc' ] ``` ,那该怎么调用?? 并且下面代码怎么会只输出一个结果: ``` for (var i = 0; i < 3; i++) { var i = 'abc'; console.log(i); } ``` 输出结果为:abc,不应该是3个abc吗???

ES6导入重复?

<div class="post-text" itemprop="text"> <p>Im trying to keep my code (sever and client side) as modular as possible and this requires a lot of importing and exporting, however I have an unanswered question.</p> <p>I tried to search from here, I read topical blog posts and even watched few YT videos but it's still not fully explained. I would love to avoid making this mistake right now and avoid rewriting my logic later.</p> <hr> <p><strong>File1</strong></p> <pre><code>import React from 'react'; // do something </code></pre> <p><strong>File2</strong></p> <pre><code>import React from 'react'; // do something else </code></pre> <p><strong>File3</strong></p> <pre><code>import File1 from './file1'; import File2 from './file2'; // do something with both </code></pre> <hr> <ul> <li>Is it smart enough? Can I import same module as much as I want and it imports it only once?</li> <li>What if I need to <code>import React</code> to <strong>File3</strong> too? Is it still smart enough to handle this situation? </li> </ul> <p>Im using Node, Babel and Webpack.</p> </div>

循环中回调,所有回调完之后执行其它操作

新人问题。。 我有一个循环,这个循环中请求一个数据,类似于下面这样 ``` for() { let req = xxx; req.setComplete(function() { doXXX(); }) req.send(xxx); } ``` 需要请求到所有的数据,然后才能做另一个操作,我目前是有一个数组,回调中请求到一个就数组写东西,然后回调中判断是否写满了数组,写满了就做另一个操作。 但是事实上,每次另一个操作都被执行了好几遍。。这个JavaScript怎么处理啊。 我只是想所有回调完之后执行另一个操作,不是想顺序一个一个send回调。

大神们谁会用es6遍历这样的树状结构啊

``` var root = [{ name:'D盘', children:[{ name:'学习', children:[ { name:'电子书', children:[ { name:'文学', children:[ { name:'茶馆' }, { name:'红与黑' } ] } ] } ] }, { name:'电影', children:[ { name:'美国电影' }, { name:'日本电影' } ] } ] } ``` 大神们谁会用es6遍历这样的树状结构啊 用es5可以这样, 但是es6就行不通了 ``` function getMenuName(menus) { var name = ""; for (var i = 0; i < menus.length; i++) { menus[i].label = menus[i].name; menus[i].value = menus[i].id; (function(data) { console.log('遍历') var m = arguments[0]; for (var j = 0; j < m.length; j++) { console.log(m[i].name); m[i].label = m[i].name if( m[j].children != null && m[j].children.length > 0) { arguments.callee(m[j].children); //递归匿名方法 } } })(menus[i].children); } } ```

webpack4配置相关信息打包问题

刚刚学习webpack4找了半天没有找到这个错误,请教一下大家这是什么问题 ``` ERROR in Entry module not found: SyntaxError: E:\webpack_demo\package.json (directory description file): SyntaxError: Unexpected token } in JSON at position 169 ``` ``` const path = require('path'); module.exports = { entry: './src/entry.js', //入口文件(你要打包的文件) output: { //出口文件 filename: 'bundle.js', //文件名 path: path.resolve(__dirname,'dist') //路径,__dirname表示当前路径 } } ```

es6自定义方法在百度App下报错,其他浏览器均正常

我自己写了一个es6组件,在其他浏览器,包括百度急速浏览器下都是正常的运行,但是在百度App下就报了这个错,请问是咋回事?![图片说明](https://img-ask.csdn.net/upload/201806/27/1530063248_155651.jpg)![![图片说明](https://img-ask.csdn.net/upload/201806/27/1530063319_173353.png)![图片说明](https://img-ask.csdn.net/upload/201806/27/1530063311_92368.png)

es6是如何通过let解决闭包的?

var ary=[]; for(var i=0;i<10;i++){ ary[i]=function(){ console.log(i) } } ary[6](); 上述代码执行后毫无疑问是10,es6之前解决闭包问题的办法通常是这样的: var ary=[]; for(var i=0;i<10;i++){ (function(j){ //隐式执行var j=i; ary[j]=function(){ console.log(j) } })(j); } ary[6](); 现在通过立即执行函数,让函数ary[0]~ary[9]的作用域链首位都是一个匿名函数作用域, 所以ary[6]会找它作用域链首位的j,所以结果是6,那么下面的代码怎么理解呢? var ary=[]; for(let i=0;i<10;i++){ ary[i]=function(){ console.log(i); } } ary[6](); 结果也是6,感到很费解,ary[6]执行时会沿着作用域链一级一级向上找,但函数体内 没有声明i,所在的块级作用域(循环体)也没有声明i,只有‘for(let i=0;i<10;i++)’ 这里声明了i,那么ary[6]只能在这个作用域下找到I,可是这个i不是10吗? 这个问题困扰我好久了 ,哪位大神给出满意解答我会提高悬赏哦

es6环境搭建中遇到了问题

$ gulp --watch [09:29:11] Requiring external module babel-register C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:328 throw e; ^ Error: Couldn't find preset "es2015" relative to directory "C:\\Users\\jinxin\\Desktop\\es6" at C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:293:19 at Array.map (<anonymous>) at OptionManager.resolvePresets (C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:275:20) at OptionManager.mergePresets (C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:264:10) at OptionManager.mergeOptions (C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:249:14) at OptionManager.init (C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:368:12) at compile (C:\Users\jinxin\Desktop\es6\node_modules\_babel-register@6.26.0@babel-register\lib\node.js:103:45) at loader (C:\Users\jinxin\Desktop\es6\node_modules\_babel-register@6.26.0@babel-register\lib\node.js:144:14) at Object.require.extensions.(anonymous function) [as .js] (C:\Users\jinxin\Desktop\es6\node_modules\_babel-register@6.26.0@babel-register\lib\node.js:154:7) at Module.load (module.js:507:32)

在 forEach 循环中使用 async / await

<div class="post-text" itemprop="text"> <p>Are there any issues with using <code>async/await</code> in a <code>forEach</code> loop? I'm trying to loop through an array of files and <code>await</code> on the contents of each file. </p> <pre><code>import fs from 'fs-promise' async function printFiles () { const files = await getFilePaths() // Assume this works fine files.forEach(async (file) =&gt; { const contents = await fs.readFile(file, 'utf8') console.log(contents) }) } printFiles() </code></pre> <p>This code does work, but could something go wrong with this? I had someone tell me that you're not supposed to use <code>async/await</code> in a higher order function like this so I just wanted to ask if there was any issue with this.</p> </div> <p>转载于:https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop</p>

初学es6,ES6 语法中 yield 关键字什么意思啊?百度了一大堆,还是看不懂,哪位大神用白话解释一下

初学es6,ES6 语法中 yield 关键字什么意思啊?百度了一大堆,还是看不懂,哪位大神用白话解释一下

关于ES6解构赋值的问题

![图片说明](https://img-ask.csdn.net/upload/201808/23/1535011935_543010.png) 本人对ES6解构赋值了解的不是很深入,请问上面这段ES6解构如何理解,可以写的详细一点的解释吗?

关于es6模板字符串的问题

当模板字符串作为标签模板传递给标签函数时,函数接受到的参数为(arr,...values),其中arr为模板字符串中不是变量部分的集合,那么为什么当原模板字符串中起始位置(或末尾)出现变量时,数组arr中会在对应的起始(或末尾)多出一个空元素?

ES6和CommonJS有什么区别???

ES6和CommonJS有什么区别???我知道的是导入时形式不同 // ES6 import MyModule from './modules/MyModule.js'; // CommonJS var MyModule = require('./modules/MyModule.js'); 其他呢??

eclipse的JSHint插件对于ES6的支持问题

在配置中设置 "esnext" : true,或者 "esversion" : 6 之后还是无法识别ES6语法,请问各位该怎么设置呢,感谢! ![图片说明](https://img-ask.csdn.net/upload/201702/28/1488272716_9382.png)

为了兼容ie11在webpack+babel打包vue.js后发现报错"ReferenceError: “i”未定义"

# 问题:使用webpack+babel打包es6=>es5,运行打包后的项目报错"ReferenceError: “i”未定义",页面空白,babel-polyfill已经引入。 > !!!!但是,在Chrome中可以正常运行不报错说明应该不是代码问题,那就应该还是打包的问题吧,请大佬指点指点!!!!!!! ## 报错 ![图片说明](https://img-ask.csdn.net/upload/202003/25/1585127424_793749.png) ## webpack配置 ![图片说明](https://img-ask.csdn.net/upload/202003/25/1585127512_299443.png) ## babelrc配置 ![图片说明](https://img-ask.csdn.net/upload/202003/25/1585127556_341536.png) ## 代码中引入方式 **第一张图的vue引入报错,第二张图居然没报错** ![图片说明](https://img-ask.csdn.net/upload/202003/25/1585127790_813223.png) ![图片说明](https://img-ask.csdn.net/upload/202003/25/1585127996_673220.jpg) **** > 菜鸡在此,请各位赐教

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

相关热词 c# 开发接口 c# 中方法上面的限制 c# java 时间戳 c#单元测试入门 c# 数组转化成文本 c#实体类主外键关系设置 c# 子函数 局部 c#窗口位置设置 c# list 查询 c# 事件 执行顺序
立即提问