for in 和 for of 相对于大家肯定都不陌生,都是用来遍历属性的没错。那么先看下面的一个例子:
const obj = {
a: 1,
b: 2,
c: 3
}
for (let i in obj) {
console.log(i)
// a
// b
// c
}
for (let i of obj) {
console.log(i)
// Uncaught TypeError: obj is not iterable 报错了
}
以上代码通过 for in 和 for of 对一个obj对象进行遍历,for in 正常的获取了对象的 key值,分别打印 a、b、c,而 for of却报错了。
以上是遍历对象,下面再看一个遍历数组的例子。
const arr = ['a', 'b', 'c']
// for in 循环
for (let i in arr) {
console.log(i)
// 0
// 1
// 2
}
// for of
for (let i of arr) {
console.log(i)
// a
// b
// c
}
以上代码是对一个数组进行遍历, for in 返回的值为 0、1、2,这不是数组的下标吗? 而 for of 返回的是 a、b、c,这一次没有报错,为什么呢?
const arr = ['a', 'b']
// 手动给 arr数组添加一个属性
arr.name = 'qiqingfu'
// for in 循环可以遍历出 name 这个键名
for (let i in arr) {
console.log(i)
// a
// b
// name
}
结合上面的两个例子,分析得出:
for ... in 循环返回的值都是数据结构的 键值名。
遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
for ... in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。如——例3
特别情况下, for ... in 循环会以任意的顺序遍历键名
总结一句: for in 循环特别适合遍历对象。
for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名
一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。
例1这个对象,没有 Symbol.iterator这个属性,所以使用 for of会报 obj is not iterable
for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。
提供了遍历所有数据结构的统一接口
只要有 iterator 接口的数据结构,都可以使用 for of循环。
以上这些都可以直接使用 for of 循环。 凡是部署了 iterator 接口的数据结构也都可以使用数组的 扩展运算符(...)、和解构赋值等操作。
我也想让对象可以使用 for of循环怎么办?使用 Object.keys() 获取对象的 key值集合后,再使用 for of
以例1为例
const obj = {
a: 1,
b: 2,
c: 3
}
for (let i of Object.keys(obj)) {
console.log(i)
// 1
// 2
// 3
}
也可以给一个对象部署 Symbol.iterator属性。
来源:https://www.cnblogs.com/qiqingfu/archive/2018/11/28/10035554.html
在第一篇文章中,我们介绍了 async / await 如何帮助处理异步事件,但在异步处理集合时却无济于事。在本文中,我们将研究该filter函数,它可能是支持异步函数的最直观的方法。
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。==只要是部署了Iterator接口==的数据结构,Array.from都能将其转为数组。
JavaScript获取数组中的最大值和最小值:方法一:传统循环遍历,方法二:利用Math.max和Math.min,方式三.利用sort排序...
js判断JS 判断某变量是否为某数组中的一个值的4种方法(总结),分享给大家。indexOf()、正则表达式、arr.find() 、for循环结合if判断
every、some、filter、map这几个方法有时候总是傻傻分不清,尤其map,总是一下子有点懵逼记不清和其他方法的区别,每次都需要查一下API,他们的相同点都是需要遍历数组中的每一项,重点是他们的区别.
做项目时想要根据判断对象是否为空,然后执行不同的操作,下面就整理下如何实现,针对数组和对象的通用方法。方法一:isPrototypeOf()和length判断、方法二:hasOwnProperty、方法三:利用JSON.stringify()方法
当你需要拷贝一个数组的全部或者部分到一个新数组的时候,优先使用map和filter而不是forEach。使用map和filter有很多好处,比如关注点分离、易于测试、可读性和异步编程的支持,因此这是一个明智的选择。
如何快速的创建一个包含100个元素的数组, 最初见到的问题是如何创建100个为元素为0 的数组,研究了一系列的方法,包含Es6 新的API ,不得不说, ES6 好强大!
在设计树形结构的数据时候,数据库一般为:id,name,parent...如果后端不处理直接返给前端,前端就需要把这个一维数组转换为树形结构数组。下面整理了下如何通过js实现一维数组转换为树形结构数组。
在前端开发中,相信大家都遇到过数组和字符串相互转换的情况 ,JavaScript提供了split()和join()这2个函数来进行转换,下面就介绍数组对象和字符串的相互转换。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!