ES6新特性： for-of ,生成器（Generators）,反撇号 “`”

编程语言JavaScript是ECMAScript的实现和扩展，由ECMA（一个类似W3C的标准组织）参与进行标准化。ECMAScript定义了：

语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
类型 – 布尔型、数字、字符串、对象等。
原型和继承
内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。
ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义
。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。

1.for-of（for-in循环用来遍历对象属性。）
这是最简洁、最直接的遍历数组元素的语法，同时还可以遍历DOM NodeList对象，Set,Map。
这个方法避开了for-in循环的所有缺陷
与forEach()不同的是，它可以正确响应break、continue和return语句

 

Array:
for (var value of Array) {
console.log(value);
}

Set:
for (var word of Set) {
console.log(word);
}
Map:
for (var [key, value] of Map) {
console.log(key + "'s phone number is: " + value);
}}

对象的属性(也可for-in)：
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}

 

2.ES6生成器（Generators），数据和循环的新标准。
普通函数使用function声明，而生成器函数使用function*声明。
在生成器函数内部，有一种类似return的语法：关键字yield。二者的区别是，普通函数只可以return一次，而生成器函数可以
yield多次

 

// 拆分一维数组icons 旧写法
// 根据长度rowLength
//function splitIntoRows(icons, rowLength) {
// var rows = [];
// for (var i = 0; i < icons.length; i += rowLength) {
// rows.push(icons.slice(i, i + rowLength));
// }
// return rows;
//}


// 拆分一维数组icons
// 根据长度rowLength
function* splitIntoRows(icons, rowLength) {
for (var i = 0; i < icons.length; i += rowLength) {
yield icons.slice(i, i + rowLength);
}
}

function* GetJsonData(ctaArr) {
for (let i of ctaArr) {
yield ({ "text": i.innerHTML, "data": i.getAttribute("data") });
}
}

 

//
$(document).ready(function () {
var array1 = [1,2,3,4,5];
var array2 = splitIntoRows(array1, 2);
console.log(array2.length);
console.log(array2.next());
for (var a of array2) {
console.log(a);
}
//常用获取页面数据组装json
let ctaArr = Array.from($("#testDiv p"));
var jsons = GetJsonData(ctaArr);
console.log(Array.from(jsons) );
for (var a of jsons) {
console.log(a);
}

});

html:

<div id="testDiv">
<p name="pText" data="a">1</p>
<p name="pText" data="b">2</p>
<p name="pText" data="c">3</p>
</div>

 

3.反撇号 “`” 多行字符串，${} 占位符 ，常用于组装html

 

模板占位符中的代码可以是任意JavaScript表达式，所以函数调用、算数运算等这些都可以作为占位符使用，你甚至可以在一个
模板字符串中嵌套另一个，我称之为模板套构（template inception）。

如果这两个值都不是字符串，可以按照常规将其转换为字符串。例如：如果action是一个对象，将会调用它的.toString()方法
将其转换为字符串值。

如果你需要在模板字符串中书写反撇号，你必须使用反斜杠将其转义：`\``等价于"`"。
同样地，如果你需要在模板字符串中引入字符$和{。无论你要实现什么样的目标，你都需要用反斜杠转义每一个字符：`\$`和`
\{`。

 

 

let GetMoveFlashHtml = function (srcUrl, index, url, title, editId) {
let html = `<li index='${index}' src='${srcUrl}' url='${url}' title='${title}' editid='` + editId +`'>
<img src="${srcUrl}" />
<span>${title}</span>
<div class="flash_edit_btn">
<a href="#" editid="`+ editId+`">编辑</a>
<a href="#" editid="`+ editId +`">删除</a>
</div>
</li>`;

return html;
}