学JS的心路历程-for of和for in
我们在刚入门JS时候,说到要跑出数组的每个值肯定都是这样子:
var arr = [1,2,3,4,5,6];
for(let i = 0;i < arr.length;i++){
console.log(arr[i])
}
在这之后,有出了forEach作为数组原型使用:
var arr = [1,2,3,4,5,6];
arr.forEach((item)=>console.log(item));
但是,物件要怎么办呢?我们也可以用forEach吗(navaceLLes):
var obj = {a:1,b:2,c:3,d:4};
obj.forEach((item)=>console.log(item));
// TypeError: obj.forEach is not a function
看来是不行,幸好后来JS提供了for-in:
var obj = {a:1,b:2,c:3,d:4};
for(let item in obj){
console.log(item);
console.log(obj[item])
}
可以看到我们跑出来的都是key值,那数组也能跑吗?
var arr = [“a”,“b”,“c”,“d”,“e”,“f”];
for(let item in arr){
console.log(item);
console.log(arr[item]);
}
恩….看起来好像是可以,但是这边要注意到几个for-in陷井。
var arr = [“a”,“b”,“c”,“d”,“e”,“f”];
arr.sayHi =“HI!!!“;
for(let item in arr){
console.log(item);
console.log(arr[item]);
}
可以看到说,我们自定义的属性也会被显示出来。
而且for-in的遍历顺序可能会有浏览器上的差异,导致无法以一致的顺序遍历元素,因此MDN建议不要用于数组上:
那有没有只能显示数组值的方法呢?
有的,ES6推出了for-of,可以在「可迭代的物件」(Array,,Map,Set,String,TypedArray,arguments等)上作使用。
var arr = [“a”,“b”,“c”,“d”,“e”,“f”];
arr.sayHi =“HI!!!“;
for(let item of arr){
console.log(item);
}
var obj = {a:1,b:2,c:3,d:4};
for(let item of obj){
console.log(item);
}//TypeError: obj is not iterable
所以一般来说没有办法在物件上作使用,若真的不得已要用的话可以这样写:
var obj = {a:1,b:2,c:3,d:4};
for(let item of Object.keys(obj)){
console.log(obj[item]);
}
Object.keys(obj)会把所有物件内的key值转为数组,这样我们就能遍历该物件了。
不过通常来说,for-in会比较推荐用在物件上,而for-of会推荐用在数组上(victorynewsite)。
学JS的心路历程-for of和for in的更多相关文章
- 学JS的心路历程Day26 - PixiJS -入坑
后来知道也可以透过canvas让网页动起来! 而PixiJS是使用WebGL在canvas上绘制内容与制作动态 且同时有下列特色: 支持多点触控 掩码与混合模式 可外加WebGL滤镜 多装置支持 等等 ...
- 学JS的心路历程 -函式(三)this
this是什么,取决于被呼叫的呼叫地点. 昨天有提到说,呼叫函式时候会传递隐含参数:arguments和this并讲解了arguments,今天我们就来探讨this吧! 什么是this 我们都会呼叫函 ...
- 学JS的心路历程 - JS应用
各家电商网站都推出了各种活动和现今优惠券,当时在逛PTT时看到了有篇文章,提供代码教大家用JS的方式抢票,看了一下后发现好像很多人好奇这是怎么做的,于是就想说想一篇文章来讲解一下. 我们先来看一下折价 ...
- 学JS的心路历程 - JS的Class
没错,你没有看错,虽然前面说JS是原型继承,但在ES6以后新增了class关键字!!! 不过底层实作仍然是以原型继承方式进行,所以基本上算是一个语法糖. 今天我们就来看一下如何使用吧! class 首 ...
- 学JS的心路历程-物件与原型(三)
昨天有说明到函式与建构式的原型,及指定建构式函式原型为另一个建构式函式,但其实这会造成复写constructor的问题. 复写constructor的问题(vmwork) 我们昨天有提到「建构式函式可 ...
- 学JS的心路历程 -物件与原型(二)
昨天有提到说Object.setPrototypeOf可以指定一个物件为另一个物件的原型,但有想过到底这个原型,也就是[[Prototype]]最终会到何处吗? 答案是Object.prototype ...
- 学JS的心路历程-物件与原型(一)
前两天说明面向对象的三大特性及JS不符合面向对象,只能称作支持面向对象而已,今天我们来看看JS的原型继承. 首先我们先来看,什么是原型(vmwork): 两个物件之间的原型关系(prototype r ...
- 学JS的心路历程-JS支持面向对象?(二)
昨天讲了面向对象的继承,今天我们来谈谈多态和封装吧! 多态polymorphism 抽象讲法解释,就是使用单一界面操作多种型态的物件 继承父类别,定义与父类别中相同的方法,但实作内容不同,称为复写(o ...
- 学JS的心路历程-JS支持面向对象?(一)
昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特 ...
- 学JS的心路历程-闭包closure
闭包是是纯函式语言的一个特性,也是JS的一个关键性的特色,虽然不了解也能开发程序,但我们不是这种人对吧? 闭包不仅可以减少某些高阶功能的代码数量和复杂度,并且可以让我们做到原本无法做的复杂功能.听到这 ...
随机推荐
- Https 忽略证书\使用自定义证书的java代码实现
public SSLContext createIgnoreVerifySSL() throws KeyManagementException, NoSuchAlgorithmException, K ...
- [UGUI]Text文字效果
参考链接: http://www.xuanyusong.com/archives/3471 https://www.cnblogs.com/lyh916/p/9162463.html https:// ...
- ubuntu 16042 安装过程
IDE接口的硬盘被称为hd SCSI和SATA接口的硬盘则被称为sd 第1块硬盘称为sda, 第2块硬盘称为sdb 一块硬盘最多有4个主分区,主分区以外的分区称为扩展分区,硬盘可以没有扩展分区,但是一 ...
- poi excel设置合并单元格边框格式
版本3.17 //设置合并单元格的边框 public static void setBorderForMergeCell(BorderStyle style,int color, CellRangeA ...
- leetcode1006
func clumsy(N int) int { var ary []int ; n-- { ary = append(ary, n) } re := N % //4个数字一组 firstgroup ...
- hasattr getattr setattr delattr --> (反射)
class Room: def __init__(self,name): self.name = name def big_room(self): print('bigroot') R = Room( ...
- 腾讯云Linux VPS新硬盘分区与挂载教程(面板重装不丢失数据)
以腾讯云Centos系统服务器为例,小记的是数据盘不在本地,大小为20G,以下的教程来自小夕博客的一篇相关添加教程的修改,适合腾讯云Linux Centos系统.说明:参数也许不对,我没有截图了,但所 ...
- centos7 Apache 2.4.6 多域名多网站配置
Apache 2.4.6 多域名多网站配置 在/etc/httpd/conf 下 编辑 vim httpd.conf 添加:ServerName 外网IP 并注释 #DocumentRoot &quo ...
- BBS-项目流程分析-表的创建
http://www.cnblogs.com/alice-bj/tag/Django%20-%20BBS/ https://www.cnblogs.com/venicid/p/9365019.html ...
- RACSignal常见用法
RACSignal 两种用法, 1:异步操作,一般创建signal的时候写逻辑,然后通过subscribeNext拿到异步执行的结果 2:监听的属性的变化,及时给出回应,一般赋值的时候用RACObse ...