Es6

再来看一个更常见的例子,了解下如果不用ES6,而用闭包如何解决这个问题。

var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){

clickBoxs[i].onclick = function(){
    console.log(i)
}

}
我们本来希望的是点击不同的clickBox,显示不同的i,但事实是无论我们点击哪个clickBox,输出的都是5。下面我们来看下,如何用闭包搞定它。

function iteratorFactory(i){

var onclick = function(e){
    console.log(i)
}
return onclick;

}
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){

clickBoxs[i].onclick = iteratorFactory(i)

}
数组去重 es6 数组去重 (更加简单)
const o = Array.from(new Set(x));
异步加载 async await 程序按顺序执行

学习ES6的基本语法网址
ttps://segmentfault.com/a/1190000004365693u

时间: 2024-08-28 06:02:28

Es6的相关文章

(转)Babel-现在开始使用 ES6

在 2 月 20 号 ECMAScript 第六版就正式推出了,这门语言一直保持稳定快速的发展而且新功能也在慢慢被现在主流的 JavaScript 引擎所接受.不过要想在浏览器端或者 Node 端直接运行 ES6 代码还得等上一些日子.幸好 TC39 (负责研究开发 EMCAScript 规格的组织) 做了大量工作让我们现在可以使用 ES6 中的大部分特性了. 代码转换 能够实现 ES6 到 ES5 的代码转换多亏了 Babel (以前叫 6to5) 以及 Traceur 之类的项目.这些转换器

ES6 Features系列:Template Strings &amp; Tagged Template Strings

1. Brief   ES6(ECMAScript 6th edition)于2015年7月份发布,虽然各大浏览器仍未全面支持ES6,但我们可以在后端通过Node.js 0.12和io.js,而前端则通过Traceur或Babel这类Transpiler将ES6语法预转译为ES5语法,来提前兴奋一把.而仅需适配 IE9+的朋友们现在更是可以开始撸ES6了,而不必为学哪门JavaScript超集语言而烦恼.(ES6又名为ECMAScript 2015或JavaScript.next,ES4的部分较

拥抱ES6——OSS JavaScript SDK开发手记

JavaScript作为当下最火的语言(之一),结合OSS能够创建出非常丰富的跨前后端的应用.现在,OSS正式推出JavaScript SDK,使用OSS的 前后端 同学 都 可以方便地使用. ES6 首先,什么是ES6? 其实ES6是最新版本的ECMAScript,也就是JavaScript标准. ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. > ES

浅谈JavaScript、ES5、ES6

什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不需要类型声明,通常变量的类型是被赋值的那个值的类型. 弱类: 计算时可以不同类型之间对使用者透明地隐式转换,即使类型不正确,也能通过隐式转换来得到正确的类型. 原型: 新对象继承对象(作为模版),将自身的属性共享给新对象,模版对象称为原型.这样新对象实例化后不但可以享有自己创建时和运行时定义的属性,

解析JavaScript的ES6版本中的解构赋值_基础知识

什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量.这个语法非常简洁,而且比传统的属性访问更加清晰. 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; var first = someArray[0]; var second = someArray[1]; var third = someArray

详解JavaScript ES6中的模板字符串_基础知识

在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是普通的字符串: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 之所以被称为模板字符串,是因为模板字符串为 JS 引入了简单的字符串插值特性,也就是说,可以方便优雅地将 JS 的值

详解JavaScript ES6中的Generator_基础知识

今天讨论的新特性让我非常兴奋,因为这个特性是 ES6 中最神奇的特性. 这里的"神奇"意味着什么呢?对于初学者来说,该特性与以往的 JS 完全不同,甚至有些晦涩难懂.从某种意义上说,它完全改变了这门语言的通常行为,这不是"神奇"是什么呢. 不仅如此,该特性还可以简化程序代码,将复杂的"回调堆栈"改成直线执行的形式. 我是不是铺垫的太多了?下面开始深入介绍,你自己去判断吧. 简介 什么是 Generator? 看下面代码: function* qu

ES6 你可能不知道的事 - 基础篇

序 ES6,或许应该叫 ES2015(2015 年 6 月正式发布),对于大多数前端同学都不陌生. 首先这篇文章不是工具书,不会去过多谈概念,而是想聊聊关于每个特性 你可能不知道的事,希望能为各位同学 正确使用 ES6,提供一些指导. 对于 ES6,有些同学已经在项目中有过深入使用了,有些则刚刚开始认识他,但不论你是属于哪一类,相信这篇文章都有适合你的部分.针对文章中的问题或不同意见,欢迎随时拍砖.指正. 正文 Let + Const 这个大概是开始了解 ES6 后,我们第一个感觉自己完全明白并

Sublime Es6教程2-基本语法

2.基本语法 let, const, forEach,for of class, extends, super arrow functions, template string, destructuring, default, rest arguments 以上是我们需要掌握的常用的ES新特性,一个一个的玩,不要怕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

ES6 中 的 var、let 和 const 应该如何选择?

本文讲的是ES6 中 的 var.let 和 const 应该如何选择?, 通过学习让事情变得简单这个原则也许是成为更好的开发者途径中最重要的事.这意味着在标识符的上下文中单个标识符应该只被用来表示单一的概念. 有时候为了表示一些数据就很容易创建一个标识符,然后使用该标识符作为一个临时的空间去存储一些值作为一个过渡. 举个例子,你可能只为了得到 URL 中的 query string 的某个值,而先创建了一个标识符存储完整 URL ,然后是 query string ,最后才是该值.这种做法应该