deep-in-es6(一)
一 迭代器和for-of循环
以前的一些遍历数组:
function c(n) {
console.log(n);
}
方法一:
for(let i = 0;i < arr.length;i++) {
c(i);
}
方法二:ES5语法
arr.forEach(function(value,index) {
//c(value+" "+index);
if(value > 5) {
//break; //报错
//return value;
c(value+" "+index);
}
});
有个小缺陷,再次循环中不能使用break,return语句。
方法三:遍历对象的for-in循环
for(var index in arr) {
c(arr[index]+" "+index);
}
有很多缺点:
1.其中的index是字符串,不是数字,如果进行计算会产生很大的麻烦。
2.它不但遍历数组,还可以遍历数组的属性,如果数组中有枚举属性,则for-in循环会额外的执行一次。就连原型链上的属性也会访问。
3.for-in循环最大的缺点会按照随机顺序遍历数组。
4.for-in循环的设计是为了遍历对象,可以遍历字符串类型的值,但不适用于数组。
1.1 方法四:for-of循环
for(let value of arr) {
c(value);
}
解决了for-in遍历数组的一切缺点,也满足forEach()迭代的缺点,能使用break,return语句。
for-of遍历其他集合:它支持数组遍历,还支持大多数类数组对象。例如:DOM NodeList对象,字符串的遍历,Set,Map(es6新增的对象)。他们都有个共同点,他们都有一个迭代器的方法。不支持普通对象(普通对象的遍历for-in),或者可以使用内建的Object.keys();
for(var key of arr.keys()) {
c(key);//遍历的索引值
}
1.2 迭代器:
给人以类型的对象添加迭代器的方法。
给随便的一个类字符串添加toString();的方法即可转换成字符串,同样给任意的对象添加[Symbol.iterator]();方法就可以使用for-of来遍历该对象。
eg:给jQuery添加和数组一样的fot-of遍历的方法:、
jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
Symbols是es6里面的新类型。拥有[Symbol.iterator]();的对象是可迭代的。
var zeroesForeverIterator = {
[Symbol.iterator] : function() {//命名而已,保证新的和已有的不冲突。
return this;
},
next : function() {
return {
done : false,
value : 0
}
}
};
以上是一个简单的迭代器,for-of循环首先调用集合的[Symbol.iterator]();方法,接着返回一个新的迭代器对象,迭代器对象可以是任意具有.next();方法的对象,for-of循环将重复调用这个方法,每次循环调用一次。
语法运行环境:
web重要使用这种语法,要使用Babel和Traceur这些预编译器将es6代码翻译成es5代码。
在服务器端:不需要任何的预编译器,io.js支持es6,node中需要启用--homoney选项来启动相关属性。
deep-in-es6(一)的更多相关文章
- ES-6常用语法和Vue初识
一.ES6常用语法 1.变量的定义 1. 介绍 ES6以前 var关键字用来声明变量,无论声明在何处都存在变量提升这个事情,会提前创建变量. 作用域也只有全局作用域以及函数作用域,所以变量会提升在函数 ...
- 用简单的方法学习ES6
ES6 简要概览 这里是ES6 简要概览.本文大量参考了ES6特性代码仓库,请允许我感谢其作者@Luke Hoban的卓越贡献,也感谢@Axel Rauschmayer所作的[优秀书籍]//explo ...
- 超实用的 JavaScript 代码片段( ES6+ 编写)
Array 数组 Array concatenation (数组拼接) 使用 Array.concat() ,通过在 args 中附加任何数组 和/或 值来拼接一个数组. const ArrayCon ...
- 基于 es6 的 javascript 实用方法
一.求数字数组的平均数 - 使用 数组的 reduce() 方法将每个值添加到累加器,初始值为0,总和除以数组长度. const average = arr => arr.reduce((acc ...
- es6注意点
补救方法: 详情:http://es6.ruanyifeng.com/#docs/array 取出文本内容 实现深拷贝 jq实现不完全深拷贝 jQuery.extend = jQuery.fn.ext ...
- es6 + 笔记整理
1. ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数: const required = () => {throw new Error('Missing ...
- ES6模块import细节
写在前面,目前浏览器对ES6的import支持还不是很好,需要用bable转译. ES6引入外部模块分两种情况: 1.导入外部的变量或函数等: import {firstName, lastName, ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- ES6的一些常用特性
由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...
- ES6(块级作用域)
我们都知道在javascript里是没有块级作用域的,而ES6添加了块级作用域,块级作用域能带来什么好处呢?为什么会添加这个功能呢?那就得了解ES5没有块级作用域时出现了哪些问题. ES5在没有块级作 ...
随机推荐
- 重复执行shell脚本。
while ((1)); do gclient runhooks; sleep 2; donewhile ((1)); do ifconfig; sleep 1; done
- 【Git 四】一款不错的 Git 客户端
平常做开发使用 git bash 进行代码提交,一直没有使用过 git 相关的客户端. 直到有次同一分支下两个日志进行代码比较时,bash 返回的结果可视化理解起来比较差. 如果更改的部分比较多,问题 ...
- [SHOI2008]堵塞的交通(线段树维护联通性)
题目 2行c列个点,开始时互不联通,支持给同一列或着同一行相邻的两个点连边,和询问两个点能否在一个联通块里. 1≤C≤100000 1<=操作数<=100000; 题解 线段树的又一个骚操 ...
- PKU 2528 Mayor's posters
题意: 一个公告板上面贴海报,宽度都是一样的,长度可能不一样.后面的海报可能把前面的覆盖掉.问最后能看见多少张不同的海报. 思路: 这题原来做过,是用线段树的区间染色写的.记录每个区间是纯色还是杂色. ...
- PKU 2288 Islands and Bridges 状态dp
题意: 给你一张地图,上面有一些岛和桥.你要求出最大的三角哈密顿路径,以及他们的数量. 哈密顿路:一条经过所有岛的路径,每个岛只经过一次. 最大三角哈密顿路:满足价值最大的哈密顿路. 价值计算分为以下 ...
- iOS经常使用设计模式——工厂方法(简单工厂模式,工厂方法模式, 抽象工厂模式)
1. 简单工厂模式 怎样理解简单工厂,工厂方法. 抽象工厂三种设计模式? 简单工厂的生活场景.卖早点的小摊贩.他给你提供包子,馒头,地沟油烙的煎饼等,小贩是一个工厂.它生产包子,馒头,地沟油烙的煎饼. ...
- JAVA类库LinkList的基本实现
写完调试了好久,边界不优点理,具体的请看JDK类库,下面仅仅是基本实现: import java.util.Iterator; /** * 类名:MyLinkedList 说明:LinkedList的 ...
- IBM软件技术峰会归来
为期两天在北京国际饭店会议中心的IBM软件技术峰会已近结束,此次大会最大的收获是能和沃森实验室的王博士沟通探讨人工智能软件的发展问题.领略到IBM 云计算首席架构师Jason R.McGee如何呼风唤 ...
- 图论:Tarjan算法
在有向图中,若两点至少包含一条路径可以到达,则称两个顶点强连通,若任意两个顶点皆如此,则称此图为强联通图.非强连通图有向图的极大强连通子图,称为强连通分量(strongly connected com ...
- JavaScript进阶之执行上下文和执行栈
js引擎的执行过程 执行上下文和执行栈属于js引擎的执行过程的预编译阶段. 执行上下文(Execution Context) 执行上下文是当前 JavaScript 代码被解析和执行时所在环境的抽象概 ...