es6${}、for循环for-of
2018-09-09 本文已影响245人
de_self
Template Literals（模板对象） in ES6
如在es5中拼凑字符串需要+''以及变量名
var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/api/messages/' + id;
在es6中新增添了${}的使用方法
var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;
多行字符串
在es6中多行字符串也不需要进行拼接了，直接写入就好
es5中
var roadPoem = 'Then took the other, as just as fair,\n\t'
+ 'And having perhaps the better claim\n\t'
+ 'Because it was grassy and wanted wear,\n\t'
+ 'Though as for that the passing there\n\t'
+ 'Had worn them really about the same,\n\t'
es6
var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
for循环
在es5中for循环包含了基础for循环，for-in，for-each
基础for循环
for(var i = 1;i<=5;i++0{
console.log(i);
}
书写麻烦
for-in
var array = [1,2,3,4,5];
for(var index in array){
console.log(array[index]);
}
效率极低，为其他循环的1/7
for-each
const arr = [1, 2, 3];
arr.forEach((data) => {
console.log(data);
});
forEach 不能 break 和 return；
for-in 缺点更加明显，它不仅遍历数组中的元素，还会遍历自定义的属性，甚至原型链上的属性都被访问到。而且，遍历数组元素的顺序可能是随机的。
for-of
const arr = [‘a‘, ‘b‘, ‘c‘];
for(let data of arr) {
console.log(data);
}
总结一下，for-of 循环有以下几个特征：
这是最简洁、最直接的遍历数组元素的语法。
这个方法避开了 for-in 循环的所有缺陷。
与 forEach 不同的是，它可以正确响应 break、continue 和 return 语句。
其不仅可以遍历数组，还可以遍历类数组对象和其他可迭代对象。
