[ES6-重点纪录] 取值迴圈 for…of

ES6 新的迭代迴圈方法，基本上这与传统上阵列的forEach()方法是类似的，另外这跟for...in迴圈很相似，但这两者的用法是不同的，以下会多举例比较他们之间的关係。

概念与用途

相对于for...in是取得物件的 "键名/属性名"，而for...of是取得物件的 "键值/属性值"可以使用的範围包括 Array、Set、Map、字串或实作迭代器(Iterator)介面的物件除了可用在阵列结构上，主要还是用来获取有迭代性质物件的内容

let arr = ['a', 'b', 'c', 'd'];// for...in 取得 "键名/属性名"for (let key in arr) {    console.log(key); // '0' '1' '2' '3'}// for...of 取得 "键值/属性值"for (let value of arr) {    console.log(value); // 'a' 'b' 'c' 'd'}// 使用在字串上let string = 'Hello';for (let i of string) {    console.log(i); // 'H' 'e' 'l' 'l' 'o'}

使用特性

for...of 迴圈只会返回具有数字索引属性的内容

let arr = ['a', 'b', 'c']arr.text = 'Hello';for (let i in arr) {    if (arr.hasOwnProperty(i)) {        console.log(i); //  '0', '1', '2', 'text'    }}for (let i of arr) {    console.log(i); // 'a', 'b', 'c'}

可使用阵列的entries()方法来获取[key, value]

let arr = ['a', 'b', 'c', 'd'];for (let [key, value] of arr.entries()) {    console.log(key, value);}// 0, 'a'// 1, 'b'// 2, 'c'// 3, 'd'

内层是阵列或物件类型的资料时，可以直接以解构赋值的方式去迭代循环取出如果取出的变数没有对应到值，则会变成undefined

// 内层为阵列类型时let arr = [    [1, 2, 3],    [4, 5, 6],    ['Hello', 'world']];for (let [x, y, z] of arr) {    console.log(x, y, z);}// 1, 2, 3// 4, 5, 6// 'Hello', 'world', undefined// 内层为物件类型时let family = [    {name: 'ES6', type: 'JavaScript'},    {name: 'for', type: 'Iterator'}];for (let {name, type} of family) {    console.log(name + ': ' + type);}// 'ES6: JavaScript'// 'for: Iterator'