本文记录Javascript学习过程中的ES6新特性的使用
ES6是什么?ECMAScript的第六个版本(1、2、3、5、6)
增加了一些例如箭头函数 a=>a+1;字符串插值、代理Proxy、Promise等新特性
1、ES6之Iterators(迭代器)
原始版本:
for(var i = 0;i<array.length;i++){
console.log(array[i]);
}
ES5版本:
array.forEach(function(value)){
console.log(value);
}
缺陷:
- 不能用Break中断循环,
- 也不能用return返回外层函数
for in 版本:
for(var index in array){
console.log(array[index]);
}
缺陷:
- index不是实际的数字而是字符串“0”,“1”,“2”,此时如果用字符串算数计算:“2”+1 = “21”转换为字符串
- for-in循环体除了会遍历数组元素外,还会遍历自定义属性。如var array= [];array[0] = 0 ; array[1] = 2;array.exapmle
- 在遍历过程中循环将额外执行一次,遍历“array.example”的索引。数组原型链上的属性都能被访问到。
- 在某些情况下,这段代码可能按照随机顺序遍历数组元素
- for-in 是为普通对象设计的,币可以遍历得到字符串类型的key,因此不适用于数组遍历
推荐的for-of:
for(var value of array){
console.log(value);
}
优点:
- 这是最简洁、最直接的遍历数组元素的语法
- 这个方法避开了 for-in 循环的所有缺陷
- 与 forEach()不同的是,它可以正确响应 break、 continue 和 return 语句
- for-in 循环用来遍历对象属性。
- for-of 循环用来遍历数据—例如数组中的值。
for-of循环也可以遍历其他的集合
- 支持数组、还支持大多数类数组对象如DOM的NodeList对象;
- 支持字符串遍历,他将字符串视为一系列的Unicode字符来进行遍历
for(var char of ""){ console.log(char);}
- 同样支持Map和Set对象遍历
- Map和Set是ES6中的新类型 例如:Set对象可以自动去重复
-
// 基于单词数组创建一个 set 对象 var uniqueWords = new Set(words); //遍历 for(var word of uniqueWords){ console.log(word);}
Map对象则是键值对(key-Value)形式组成的,因此需要解构(destructuring)
for (var [key, value] of phoneBookMap) {
console.log(key + "'s phone number is: " + value);}
深入理解
for-of 循环语句通过方法调用来遍历各种
集合。数组、 Maps 对象、 Sets 对象以及其它在我们讨论的对象有一个共同点,它们都有一个迭代器方法
当你为对象添加 myObject.toString()方法后,就可以将对象转化为字符串,同样地,
当你向任意对象添加 myObject[Symbol.iterator]()方法,就可以遍历这个对象了。
//JQuery中的each() 扩展 for-of循环
// 因为 jQuery 对象与数组相似
// 可以为其添加与数组一致的迭代器方法
jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
在 ES6 标准中使用 symbol 来作为方法名,而不是使用字符串(Symbol为ES6新特性)
上述代码通过引用symbol实现了ES6中的for-of。所以拥有[Symbol.iterator]()的对象都可以迭代。
迭代器对象
for-of 循环首先调用集合的[Symbol.iterator]()方法,紧接着返回一个新的迭代器对
象。迭代器对象可以是任意具有.next()方法的对象; for-of 循环将重复调用这个方法,
每次循环调用一次。
var zeroesForeverIterator = {
[Symbol.iterator]: function () {
return this;
},
next: function () {
return {done: false, value: 0};
} };
每一次调用.next()方法,它都返回相同的结果,返回给 for-of 循环的结果有两种可
能: (a) 我们尚未完成迭代; (b) 下一个值为 0。这意味着(value of zeroesForeverIterator)
{}将会是一个无限循环。
迭代器对象也可以实现可选的.return()和.throw(exc)方法。如果 for-of 循环过早退出
会调用.return()方法,异常、 break 语句或 return 语句均可触发过早退出。如果迭代器需
要执行一些清洁或释放资源的操作,可以在.return()方法中实现。大多数迭代器方法无
须实现这一方法。 .throw(exc)方法的使用场景就更特殊了: for-of 循环永远不会调用它。
写一个简单的for-of循环然后按照下面的方法调用重写被迭代的对象
//for-of 循环
for(VAR of ITERABLE) { //sentence}
//instance
var $iterator = ITERABLE[Symbol.iterator]();
var $result = $iterator.next();
while(!$result.done){
VAR = $result.value;
//sentence
$result = $iterator.next();
}
参考资料《深入浅出ES6》《ES6-in-depth》