JS中遍历语法的比较
for循环
JavaScript 提供多种遍历语法。最原始的写法就是for
循环。
let arr = [1,2,3,4,5]; for (var index = 0; index < arr.length; index++) {
console.log(myArray[index]); // 1 2 3 4 5
}
缺点:这种写法比较麻烦
forEach
数组提供内置的forEach
方法
let arr = [1,2,3,4,5]; arr.forEach((element,index) => {
console.log(element); // 1 2 3 4 5
});
缺点:这种写法的问题在于,无法中途跳出forEach
循环,break
命令或return
命令都不能奏效。
for...in
for…in 用于遍历对象所有的可枚举属性,功能类似于Object.keys()。
let obj = {
name: 'cloud',
phone: '157xxxx2065'
} for (let prop in obj) {
console.log(prop); // name phone
}
可能有朋友会问,不可枚举的对象有哪些呢? 比如constructor,数组的length就属于不可枚举属性。
let arr = [10, 20, 30, 40, 50]; for (let prop in arr) {
console.log(prop); // '0' '1' '2' '3' '4'
}
缺点:
- 数组的键名是数字,但是
for...in
循环是以字符串作为键名“0”、“1”、“2”等等。 for...in
循环主要是为遍历对象而设计的,不适用于遍历数组
for...of
for…of是ES6新增的遍历方式,它提供了统一的遍历机制。所有实现了[Symbol.iterator]接口的对象都可以被遍历。for...of
循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments
对象、DOM NodeList 对象)、Generator 对象,以及字符串
优点:
- 有着同
for...in
一样的简洁语法,但是没有for...in
那些缺点 - 不同用于
forEach
方法,它可以与break
、continue
和return
配合使用 - 提供了遍历所有数据结构的统一操作接口
下面是一个使用break语句,跳出for...of
循环的例子。
for (var n of fibonacci) {
if (n > 1000)
break;
console.log(n);
}
上面的例子,会输出斐波纳契数列小于等于1000的项。如果当前项大于1000,就会使用break
语句跳出for...of
循环。
for...of获取索引
entries()
返回一个遍历器对象,用来遍历[键名, 键值]
组成的数组。对于数组,键名就是索引值;对于 Set,键名与键值相同。Map 结构的 Iterator 接口,默认就是调用entries
方法。keys()
返回一个遍历器对象,用来遍历所有的键名。values()
返回一个遍历器对象,用来遍历所有的键值。
// demo
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']
类似数组的对象
类似数组的对象包括好几类。下面是for...of
循环用于字符串、DOM NodeList 对象、arguments
对象的例子。
// 字符串
let str = "hello"; for (let s of str) {
console.log(s); // h e l l o
} // DOM NodeList对象
let paras = document.querySelectorAll("p"); for (let p of paras) {
p.classList.add("test");
} // arguments对象
function printArgs() {
for (let x of arguments) {
console.log(x);
}
}
printArgs('a', 'b');
// 'a'
// 'b'
并不是所有类似数组的对象都具有 Iterator 接口,一个简便的解决方法,就是使用Array.from
方法将其转为数组。
let arrayLike = { length: 2, 0: 'a', 1: 'b' }; // 报错
for (let x of arrayLike) {
console.log(x);
} // 正确
for (let x of Array.from(arrayLike)) {
console.log(x); // 'a' // 'b'
}
普通的对象
对于普通的对象,for...of
结构不能直接使用,会报错,必须部署了 Iterator 接口后才能使用。
let es6 = {
edition: 6,
committee: "TC39",
standard: "ECMA-262"
}; for (let e in es6) {
console.log(e);
}
// edition
// committee
// standard for (let e of es6) {
console.log(e);
}
// TypeError: es6 is not iterable
解决方法是,使用Object.keys
方法将对象的键名生成一个数组,然后遍历这个数组。
for (var key of Object.keys(someObject)) {
console.log(key + ': ' + someObject[key]);
}
JS中遍历语法的比较的更多相关文章
- JS中遍历EL表达式中后台传过来的Java集合
前言:在我的项目里有这么一个情况,后台直接model.addAttribute()存储了一个对象,此对象内部有一个集合,前端JSP处理的方法正常情况下就是直接使用EL表达式即可.但是如果在JS中需要使 ...
- 【微信小程序】--小程序中循环遍历(包括js中遍历和wxml中的遍历)
文章为博主原创,纯属个人见解,如有错误欢迎指出. 如需转载,请注明出处. 在js中遍历 for (var index in res.data.infos) { res.data.infos[index ...
- JS中遍历数组、对象的方式
1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...
- 项目开发---使用node.js中sass语法
前言:本文中所有sass文件都指后缀名为scss的文件.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. 一.sass插件的安装: gulp-sass-china // ...
- js中遍历对象的属性和值的方法
鉴于循环目标是个对象,length是为undefined,用map等对数组的循环方法不行,对象就用此下方法 for(var key in _this.lists.medicines){ medicin ...
- js中遍历对象的属性和值
今天想看一下js的数组遍历的内容,搜索到了一个关于对象遍历写好的函数,保留一下.以后好用. function allPrpos ( obj ) { // 用来保存所有的属性名称和值 var p ...
- 关于js中遍历总结
1.for循环 var arr = []; for (var i = 0; i < arr.length; i++) { if (条件1) return; if (条件2) break; if ...
- js中遍历出查询后的listmodel(下拉框系列)
function selectclassname(){ $.ajax({ url:"queryschoolclasslists.action", async:false, data ...
- JS中遍历对象属性的四种方法
Object.keys().Object.values().Object.entries().for...in.Map (1)Object.keys(): let ex1 = {c1: 'white' ...
随机推荐
- Tinyshell: 一个简易的shell命令解释器
这是自己最近学习Linux系统编程之后写的一个练手的小程序,能很好地复习系统编程中的进程管理.信号.管道.文件等内容. 通过回顾写的过程中遇到的问题的形式记录程序的关键点,最后给出完整程序代码. 0. ...
- centos快速安装redis
mkdir redis cd redis wget http://labfile.oss.aliyuncs.com/files0422/redis-2.8.9.tar.gz 解压 tar -xvfz ...
- JS高级程序设计学习笔记——继承
我们知道,在OO语言中,继承可分为接口继承和实现继承.而ECMAScript的函数没有签名,不能实现“接口继承”,只能通过原型链实现“实现继承”. 在学习了各种继承模式之后,简单总结一下各种继承模式的 ...
- React Native填坑之旅 -- 使用iOS原生视图(高德地图)
在开发React Native的App的时候,你会遇到很多情况是原生的视图组件已经开发好了的.有的是系统的SDK提供的,有的是第三方试图组件,总之你的APP可以直接使用的原生视图是很多的.React ...
- 每天一个linux命令(56)--crontab命令
上一节学习了 at 命令是针对仅运行一次的任务,循环运行的例行性计划任务,Linux 系统则是由 cron(crond)这个系统服务来控制的.Linux 系统上面原本就有非常多的计划性工作,因此这个 ...
- 使用SSM框架 搭建属于自己的APP二维码合成、解析、下载
最近公司的app上线了,在推广APP的时候出现了一个问题,因为Android和IOS的下载地址不一样,那么在推广的时候就要推广两个二维码,这样比较麻烦,如何简化我们的推广,让IOS用户扫描二维码的时候 ...
- Java中byte与16进制字符串的互换原理
我们都知道Java中的byte是由8个bit组成的,而16进制即16中状态,它是由4个bit来表示的,因为24=16.所以我们可以把一个byte转换成两个用16进制字符,即把高4位和低4位转换成相应的 ...
- GCD浅析
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } span.s1 { } 1.关于GCD ...
- js使用for in遍历时的细节问题
今天在看别人代码过程中被 "for in"搞得有点晕,所以好好研究了一下,写下来分享给对 for in遍历理解有问题的朋友. 基本格式: for (property in expr ...
- 1642: [Usaco2007 Nov]Milking Time 挤奶时间
1642: [Usaco2007 Nov]Milking Time 挤奶时间 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 582 Solved: 33 ...