1、For each...in

for each...in 语句在对象属性的所有值上迭代指定的变量。对于每个不同的属性,执行一个指定的语句。

语法:

for each (variable in object) {
statement
}

variable:

变量,以迭代属性值,可以选择用var关键字声明。这个变量是函数的局部变量,而不是循环的局部变量。

object:

对象,该对象迭代属性。

statement:

为每个属性执行的语句。要在循环中执行多个语句,使用block语句({…)来对这些语句进行分组。

描述:

一些内置属性没有迭代。这些方法包括对象的所有内置方法,例如String的indexOf方法。然而,所有用户定义的属性都被迭代。
 
警告:不要在数组中使用这样的循环。只在对象上使用。
 
下面的代码片段迭代对象的属性,计算它们的和:
var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8}; for each (var item in obj) {
sum += item;
} console.log(sum); // logs "26", which is 5+13+8

2、For...in

for...in 语句遍历对象的所有非符号可枚举属性。

语法:

for (variable in object) { ...
}

variable:

在每次迭代中都为变量分配不同的属性名。

object:

对象,其非符号可枚举属性被迭代。

描述:

一个 for...in 循环只迭代可枚举的非符号属性。从数组和对象等内置构造函数创建的对象从对象继承了不可枚举的属性。原型和字符串。原型,例如String的indexOf()方法或Object的toString()方法。循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型继承的那些属性(靠近原型链中的对象的属性将覆盖原型的属性)。

Deleted, added, or modified properties:

一个for...in循环以任意顺序迭代对象的属性(请参阅delete操作符,以了解为什么不能依赖于看起来的迭代顺序,至少在跨浏览器设置中是这样)。

如果一个属性在一次迭代中被修改,然后在稍后的时间访问,它在循环中的值就是它在以后的时间的值。在访问之前被删除的属性以后将不会被访问。添加到正在进行迭代的对象中的属性可以被访问,也可以从迭代中省略。

通常,最好不要添加、修改或删除属性。

Array iteration and for...in:

注意:for…in不应该用于遍历索引顺序很重要的数组。

数组索引只是具有整数名称的可枚举属性,否则与一般对象属性相同。不能保证for…in将以任何特定顺序返回索引。for…循环语句将返回所有可枚举的属性,包括具有非整数名称的属性和继承的属性。

因为迭代的顺序与实现相关,所以在数组上迭代可能不会以一致的顺序访问元素。因此,最好使用带有数值索引的for循环。

只迭代自己的属性:

如果您只想考虑附加到对象本身的属性,而不是它的原型,那么使用getOwnPropertyNames()或执行hasOwnProperty()检查(也可以使用propertyIsEnumerable)。或者,如果您知道不会有任何外部代码干扰,您可以使用check方法扩展内置原型。

例子:

下面的函数将对象作为其参数。然后它遍历对象的所有可枚举的非符号属性,并返回一个属性名称及其值的字符串。var obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
console.log(`obj.${prop} = ${obj[prop]}`);
} // Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

下面的函数演示了hasOwnProperty()的用法:未显示继承的属性。

var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
this.color = 'red';
} ColoredTriangle.prototype = triangle; var obj = new ColoredTriangle(); for (const prop in obj) {
if (obj.hasOwnProperty(prop)) {
console.log(`obj.${prop} = ${obj[prop]}`);
}
} // Output:
// "obj.color = red"

3、For...of

for...of 语句创建一个循环遍历可迭代对象(包括内置的字符串、数组,例如类数组参数或NodeList对象、TypedArray、Map和Set以及用户定义的迭代),调用一个定制的迭代钩子,并用语句执行对象的每个不同属性的值。

语法:

for (variable of iterable) {
statement
}

variable:

在每次迭代中,将不同属性的值赋给变量。

iterable:

对象,其可迭代属性被迭代。

例子:

迭代数组

let iterable = [10, 20, 30];

for (let value of iterable) {
value += 1;
console.log(value);
}
// 11
// 21
// 31

如果不重新分配块内的变量,可以使用const而不是let。

let iterable = [10, 20, 30];

for (const value of iterable) {
console.log(value);
}
// 10
// 20
// 30

遍历字符串:

let iterable = 'boo';

for (let value of iterable) {
console.log(value);
}
// "b"
// "o"
// "o"

迭代TypedArray:

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
console.log(value);
}
// 0
// 255

迭代映射:

let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let entry of iterable) {
console.log(entry);
}
// ['a', 1]
// ['b', 2]
// ['c', 3] for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3

迭代一个集合:

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3

迭代参数对象:

(function() {
for (let argument of arguments) {
console.log(argument);
}
})(1, 2, 3); // 1
// 2
// 3

查看更多例子请访问:https://devdocs.io/javascript/statements/for...of

 
 

For each...in / For...in / For...of 的解释与例子的更多相关文章

  1. In-Memory:内存数据库

    在逝去的2016后半年,由于项目需要支持数据的快速更新和多用户的高并发负载,我试水SQL Server 2016的In-Memory OLTP,创建内存数据库实现项目的负载需求,现在项目接近尾声,系统 ...

  2. 【.net 深呼吸】细说CodeDom(8):分支与循环

    有人会问,为啥 CodeDom 不会生成 switch 语句,为啥没生成 while 语句之类.要注意,CodeDom只关心代码逻辑,而不是语法,语法是给写代码的人用的.如果用.net的“反编译”工具 ...

  3. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  4. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  5. 防御XSS攻击-encode用户输入内容的重要性

    一.开场先科普下XSS 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶 ...

  6. H5实现摇一摇技术总结

    摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...

  7. Unity3d学习 相机的跟随

    最近在写关于相机跟随的逻辑,其实最早接触相机跟随是在Unity官网的一个叫Roll-a-ball tutorial上,其中简单的涉及了关于相机如何跟随物体的移动而移动,如下代码: using Unit ...

  8. App开发:模拟服务器数据接口 - MockApi

    为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块.本篇文章就尝试为使用gradle的android项目设计实现Moc ...

  9. ASP.NET Core 之 Identity 入门(一)

    前言 在 ASP.NET Core 中,仍然沿用了 ASP.NET里面的 Identity 组件库,负责对用户的身份进行认证,总体来说的话,没有MVC 5 里面那么复杂,因为在MVC 5里面引入了OW ...

  10. 你必须知道的EF知识和经验

    注意:以下内容如果没有特别申明,默认使用的EF6.0版本,code first模式. 推荐MiniProfiler插件 工欲善其事,必先利其器. 我们使用EF和在很大程度提高了开发速度,不过随之带来的 ...

随机推荐

  1. 那什么时候会触发BFC呢?块级格式化上下文

    <html>根元素: float的值不为none: overflow的值为auto.scroll或hidden: display的值为table-cell.table-caption和in ...

  2. python基础--numpy.dot

    # *_*coding:utf-8 *_* # athor:auto import numpy dot = numpy.dot([0.100, 0.200],2.) print(dot) #[ 0.2 ...

  3. LeetCode 21. Merge Two Sorted Lists(c++)

    要定义两个链表 判断时依次对应每一个链表的值进行判断即可. /** * Definition for singly-linked list. * struct ListNode { * int val ...

  4. centOS6.5 mysql-community-server安装失败

    卸载mysql,重新装 yum install mysql-server 图中没有放卸载的图 [root@cgrctenOS6 ~]# yum install mysql-community-serv ...

  5. UGUI中粒子特效与UI的遮挡问题

    问题背景: 在做主线任务时发现完成任务后的特效显示穿透上面的UI层,不美观,策划不乐意了,抓紧解决下 解决思路: 首先讲下影响渲染顺序的因素: 能够影响渲染顺序的因素有:1.Camera Depth  ...

  6. maven环境搭建及创建maven项目

    Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 1.maven下载地址http://maven.apache.org/download.cgi ...

  7. Epson L4158打印机安装与配置

    上周购买了一台打印.扫描.复印三合一的Epson L4158喷墨打印机,主要用于打印数学纸版笔记套图.长笛乐谱.常用软件的cheatsheet(例如,GNU/Linux命令.GNU Emacs快捷键. ...

  8. 微服务(Microservices)【翻译】

    微服务 “微服务架构(Microservice Architecture)”一词在过去几年里广泛的传播,它用于描述一种设计应用程序的特别方式,作为一套独立可部署的服务.目前,这种架构方式还没有准确的定 ...

  9. eclipse乱码解决

    设置utf-8 1.点击window>preferences>content types 2.点击右侧Text 3.点击Java Source File 4.下面输入UTF-8 5.点击u ...

  10. 神器PHPStorm个人最常用快捷键

    PHPStorm是目前PHP开发者最常用的IDE之一,善用快捷键可以极大地提升效率,网上有很多盘点,多而全,但很多要么不实用,要么操作不方便,下面盘点一下个人平时最常用的,亲测有效. CTRL+N 查 ...