这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战
前面几篇更文我们学习了 JavaScript 中的 【JavaScript 学习-特殊符号-位运算符】、【JavaScript 学习-逻辑运算符-短路了?】、 【JavaScript 学习-箭头函数】、
本文来继续学习 JavaScript - ES6新的循环语句 for/of
JavaScript - ES6 新增: for/of
我们对 for循环 都特别熟悉了, ES6 新增的循环语句 for/of 也有一个关键字 for, 但是这个 for 却和常规的for循环是完全不同的循环.
同样长相(结构)类似的还有 for/in, 这里先看 for/of, 下文在记录 for/in
for/of
for/of 循环用于遍历可迭代对象! 可迭代的对象例如: 数组/ 字符串/ 集合/ 映射, 这些对象都是一组或者一批元素组成的, 可以循环来获取每个元素.
来个最简单的小例子: 遍历一个数值数组求和问题
const arr = [1, 2, 3, 5, 6, 9, 8, 1],
sum = 0
for (let item of arr) {
sum += item
}
console.log(sum) // ==> 35
从上面的例子我们可以看出来 for/of 和 for 循环特别像, for 关键字后面跟着一对圆括号, 里面包含怎么样来循环(即循环条件), 然后后面跟着个花括号--循环体;
在上面的代码中 arr 中的元素都会被遍历一次, 即每个元素都会运行一次. 在循环体执行完成后, 都会把数组的下一个元素赋值给元素变量. 从头到尾进行迭代
for/of 与对象
上面的代码是通过 for/of 遍历的是数组, 而对象呢?
对象(默认) 是不能迭代的. 如果在运行时尝试对常规对象进行 for/of 遍历就会抛出错误 TypeError.
如果想遍历对象, 我们可以使用 Object.keys获取对象的属性键名, 返回一个对象的属性名的数组. 然后就可以使用 for/of 对其进行遍历迭代了.
let obj = { aa: 1, bb: 2, cc: 3, dd: 5 }
let objProArr = Object.keys(obj)
let res = ''
for (let key in objProArr) {
res += key
}
console.log(res) // aabbccdd
