for...of 与 for...in 区别
2018-03-23 11:07
127 查看
一、for...of
1.定义
for...of 语句遍历可迭代对象(包括数组、Set 和 Map 结构、arguments 对象、DOM NodeList 对象、字符串等)。
2.语法
for (variable of iterable) { //statements }
3.示例
<ul> <li>mazey</li> <li>luna</li> <li>cherrie</li> </ul> <script> // 数组 let arr = ['mazey', 'luna', 'cherrie']; for (let v of arr) { console.log(v); } // mazey luna cherrie // 字符串 let str = 'mlc'; for (let v of str) { console.log(v); } // m l c // 类数组对象 let obj = { 0: 'mazey', 1: 'luna', 2: 'cherrie', length: 3 }; // 需使用Array.from转换成可迭代对象 for (let v of Array.from(obj)) { console.log(v); } // mazey luna cherrie // Set let s = new Set(['mazey', 'luna', 'cherrie']); for (let v of s) { console.log(v); } // mazey luna cherrie // Map let m = new Map([ ['name0', 'mazey'], ['name1', 'luna'], ['name2', 'cherrie'] ]); for (let [i, v] of m) { console.log(v); } // mazey luna cherrie // DOM NodeList let domList = document.querySelectorAll('li'); for (let v of domList) { console.log(v.innerText); } // mazey luna cherrie </script>
二、for...of 与 for...in 区别
1.for...in 遍历键名,for...of 遍历键值
let arr = ['mazey', 'luna', 'cherrie']; for (let k in arr) { console.log(k); } // 0 1 2 for (let v of arr) { console.log(v); } // mazey luna cherrie
2.for...in 会把对象上手动添加的属性和原型上的属性暴露出来
let obj = { 0: 'mazey', 1: 'luna', 2: 'cherrie', length: 3 }; obj.name = 'objName'; for (let k in obj) { console.log(k); } // 0 1 2 length name for (let v of Array.from(obj)) { console.log(v); } // mazey luna cherrie
三、for...of 其它优点
1.相对于数组自带的 forEach 方法,for...of 可以与 break、continue 和 return 配合使用。
2.正确识别32位 UTF-16 字符。
相关文章推荐
- for forEach for...in... for...of...区别
- for...in、for...of、forEach、map的区别
- for ... of循环和for ... in循环的区别
- JavaScript for...of与for...in的区别
- for...of与for...in的区别
- for...in与for...of的区别
- for...in和for...of循环的区别
- forEach、for-in与for-of的区别
- for...in 与for ...of的区别
- for ... of循环和for ... in循环有何区别?
- for..in,for..of和forEach的区别
- for … of和for … in的区别
- 小tips:JS之for in、Object.keys()和Object.getOwnPropertyNames()的区别
- 使用splice函数对数组中的元素进行删除for循环和for...in的区别
- INFO: At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging for this logger for a complete list of JARs that were scanned but no TLDs were found in them. Skipping unneeded
- 关于for...in和for...of的思考
- js--语法--for和for-in;访问对象的属性.和[]的区别
- JavaScript里的循环方法:forEach,for-in,for-of
- 数据库 oracle for update of 和 for update区别【经典】
- Unable to find a value for "字段名" in object of class java.lang.String using operator "."