for...of 与 for...in 区别
一、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...of 与 for...in 区别的更多相关文章
- c#与java的区别
经常有人问这种问题,用了些时间java之后,发现这俩玩意除了一小部分壳子长的还有能稍微凑合上,基本上没什么相似之处,可以说也就是马甲层面上的相似吧,还是比较短的马甲... 一般C#多用于业务系统的开发 ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- 【原】nodejs全局安装和本地安装的区别
来微信支付有2年多了,从2年前的互联网模式转变为O2O模式,主要的场景是跟线下的商户去打交道,不像以往的互联网模式,有产品经理提需求,我们帮忙去解决问题. 转型后是这样的,团队成员更多需要去寻找业务的 ...
- 探究@property申明对象属性时copy与strong的区别
一.问题来源 一直没有搞清楚NSString.NSArray.NSDictionary--属性描述关键字copy和strong的区别,看别人的项目中属性定义有的用copy,有的用strong.自己在开 ...
- X86和X86_64和X64有什么区别?
x86是指intel的开发的一种32位指令集,从386开始时代开始的,一直沿用至今,是一种cisc指令集,所有intel早期的cpu,amd早期的cpu都支持这种指令集,ntel官方文档里面称为&qu ...
- Java中Comparable与Comparator的区别
相同 Comparable和Comparator都是用来实现对象的比较.排序 要想对象比较.排序,都需要实现Comparable或Comparator接口 Comparable和Comparator都 ...
- MySQL中interactive_timeout和wait_timeout的区别
在用mysql客户端对数据库进行操作时,打开终端窗口,如果一段时间没有操作,再次操作时,常常会报如下错误: ERROR (HY000): Lost connection to MySQL server ...
- 设置line-height:1.5和line-height:150%或者line-height:150px的区别
直接正题: 看一下line-height可能的值: 其实可以分为两类: (1)不带单位的(如line-height:1.5),这种是推荐使用的: (2)带单位的(如line-heigth:30px/1 ...
- C#中Length和Count的区别(个人观点)
这篇文章将会很短...短到比你的JJ还短,当然开玩笑了.网上有说过Length和count的区别,都是很含糊的,我没有发现有 文章说得比较透彻的,所以,虽然这篇文章很短,我还是希望能留在首页,听听大家 ...
- select、poll、epoll之间的区别总结
select.poll.epoll之间的区别总结 05/05. 2014 select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪 ...
随机推荐
- 代码覆盖率?coverage
http://www.infoq.com/cn/articles/test-coverage-rate-role 代码覆盖率?coverage http://www.cnblogs.com/cod ...
- springboot整合docker部署(两种构建Docker镜像方式)--2019-3-5转
原文:https://www.cnblogs.com/shamo89/p/9201513.html 项目结构 package hello; import org.springframework.boo ...
- CvSplit
/* possible split in the tree */ typedef struct CvSplit { CvTreeCascadeNode* parent; CvTreeCascadeNo ...
- python之圆周率
#!/usr/bin/env python #-*- coding:utf-8 -*- ############################ #File Name: pi.py #Author: ...
- CSS学习笔记(1)--浮动
总结:浮动只能在脱离文档流的当前位置向上浮动,不能像定位一样到处乱跑. 清除浮动,设置一个类.clear{clear:both;} 1.没有浮动,都独占一行: <!DOCTYPE html> ...
- MapReduce编程实例2
MapReduce编程实例: MapReduce编程实例(一),详细介绍在集成环境中运行第一个MapReduce程序 WordCount及代码分析 MapReduce编程实例(二),计算学生平均成绩 ...
- TCP/IP笔记(八)应用层协议
TCP/IP的应用层涵盖了OSI参考模型中第5.第6.第7层的所有功能,不仅包含了管理通信连接的会话层功能.转换数据格式的标识层功能,还包括与对端主机交互的应用层功能在内的所有功能. 利用网络的应用程 ...
- 【iOS与EV3混合机器人编程系列之四】iOS_WiFi_EV3_Library 剖析之中的一个:WiFi UDP和TCP
在上一篇文章中.我们通过编写EV3 Port Viewer项目实现了iOS监測EV3的实时端口数据. 程序最核心的部分就是我们的开源码库iOS_WiFi_EV3_Library. 那么,在本文中,我们 ...
- Sql Server根据表名生成查询的存储过程(查询条件可选)
static void Main(string[] args) { string 表名 = "water_emstime"; string sql = "exec Get ...
- 红黑树red-black tree
书籍:<算法导论>第13章 红黑树性质:1. 每个节点要么red要么black.2. 根节点是black节点.3. 叶子节点是black节点.4. red节点的左右儿子节点都是black节 ...