----关于JS中迭代的三个“FOR”----
for each...in
使用一个变量迭代一个对象的所有属性值,对于每一个属性值,有一个指定的语句块被执行。
一些对象的内置属性是无法被遍历到的,包括所有的内置方法,例如String对象的indexOf方法。不过大部分的用户自定义属性都是可遍历的。
【警告:永远不要使用 for each...in语句遍历数组,仅用来遍历常规对象。(有可能会对数组顺序发生改变)】
语法:
for each (variable in object) {
statement
}
参数:
variable
用来遍历属性值的变量,前面的var关键字是可选的。该变量是函数的局部变量而不是语句块的局部变量。
object
该对象的属性值会被遍历。
statement
遍历属性值时执行的语句。 如果想要执行多条语句, 请用({ ... }) 将多条语句括住。
eg:
var sum = 0;
var obj = {prop1: 5, prop2: 13, prop3: 8};
for each (var item in obj) {
sum += item;
}
console.log(sum);
// output:logs "26", which is 5+13+8
for...in
以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。
for...in 循环只遍历可枚举属性。
像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性。
语法:
for (variable in object) {...}
参数:
variable
在每次迭代时,将不同的属性名分配给变量。
object
被迭代枚举其属性的对象。
eg:
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"
for...of
在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代例子,并为每个不同属性的值执行语句。
对于for...of的循环,可以由break, throw 或return终止。
语法:
for (variable of iterable) {
//statements
}
参数:
variable
在每次迭代中,将不同属性的值分配给变量。
iterable
被迭代枚举其属性的对象。
eg:
let iterable = [10, 20, 30];
for (let value of iterable) {
value += 1;
console.log(value);
}
// 11
// 21
// 31
-------------------------------------------------------------------------------------------------------------------------------
关于 for...in 和 for...of 之间的区别:
无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。
for...in 语句以原始插入顺序迭代对象的可枚举属性。
for...of 语句遍历可迭代对象定义要迭代的数据。
----关于JS中迭代的三个“FOR”----的更多相关文章
- js中迭代元素特性与DOM中的DocumentFragment类型 笔记
JS中迭代元素特性 在需要将DOM结构序列化为XML或者HTML字符串时,多数都会涉及遍历元素的特性,这个时候attributes属性就可以派上用场. 以下代码展示了如何迭代元素的每一个特性,然后将他 ...
- js中confirm揭示三个按钮“是”“否”“取消”
js中confirm提示三个按钮“是”“否”“取消” 重载DOM中confirm window.confirm = function(str) { str=str.replace(/\'/g, & ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- 关于原生js中函数的三种角色和jQuery源码解析
原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...
- JS 中 原生方法 (三) --- Date 日期
本文也说主要阐释了 Javascript 中的基础类型和 引用类型的自带方法,那么熟悉的同学又可以绕道了 总是绕道,真是羞耻悳boy 当然 本文阐述的主要类容 from MDN ( zh-cn ) D ...
- js中迭代方法
基础遍历数组: for() for( in ) for(var i = 0;i<arr.length;i++){ ...
- js中创建对象的三种方式
1. 对象字面量 var obj={ name:"小小", age:3, car:{ brand:"baoma", } }; } 2.使用内置构造函数 var ...
- js中迭代的常用几种方法
var arr = [1,3,2,5,3]; //forEach 两个参数,第一个为数组内容,第二个为数组下标arr.forEach(function(item,index) { console.lo ...
- JS中var声明与function声明以及构造函数声明方式的区别
JS中常见的三种函数声明(statement)方式有这三种: // 函数表达式(function expression) var h = function () { // h } // 函数声明(fu ...
随机推荐
- go语言问题集锦
==============================================beego框架=========================================== 1.使 ...
- 关于vue
render:(h)=>h(App):声明App组件的内容 挂载到节点 const root=document.createElement("div")document.bo ...
- Could not read document: Can not deserialize instance of java.lang.String out of START_ARRAY
线上问题: { "timestamp": "1544510665", "status": 400, "error": & ...
- frist Django app — 一、 创建工程
缘起 既然python都学了,学习python的时候感觉是相见恨晚,一种新的编程语言带给我一种新的思考问题的方式,为了巩固学过的东西并进一步学习python,就想学学Django,看看会不会带给我关于 ...
- PHP+Ajax实现文件上传功能
前端显示界面: 1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 传统应用、服务器集群、分布式、SOA各种架构的简单解释
传统架构:无论是SE应用还是WEB应用,传统架构都是表现层---业务层---持久层---数据库 1000并发(tomcat单台500并发,tomcat一般做集群的话,节点数量不能太多,5个左右): ...
- 项目管理利器maven学习笔记(一):maven介绍及环境搭建
maven介绍 maven下载与环境搭建 http://maven.apache.org/download.cgi# 解压到指定位置,比如我解压到D盘 设置maven环境变量 添加一个变量名,变量值为 ...
- 拦截过滤防御XSS攻击 -- Struts2.3 以及 2.5 的解决方式
使用Struts2框架开发的后台在防御XSS攻击的时候很多方式都不能用,因为Struts2对请求进行的二次封装有区别.以下针对Struts2的XSS攻击进行拦截过滤防御解决: Struts2.3 本方 ...
- vim简单命令
保存文件:普通模式(在 :)后面 1.wq 2.q 3.!q 4.shirft+zz 直接退出vim 5.set nu 设置行号 行号移动: 1.shift+1;移动到该行末尾 2.shirft ...
- ExpandableListView解析JSON数据
效果图: 说明:刚开始使用这个控件我花费了3天的时间,但是一直都没有达到预期的效果,要么就是直接全部不显示,要么就是数据累加 ...