美文网首页
for forEach、for…in 、 for…of异同点

for forEach、for…in 、 for…of异同点

作者: leviys | 来源:发表于2021-04-06 23:07 被阅读0次


for循环

最原始的遍历,自Javascript诞生起就一直用的 就是for循环,它用来遍历数组

````

var arr = [1,2,3,4]

for(var i = 0 ; i< arr.length ; i++){

console.log(arr[i])

}

````

for循环中可以使用return、break等来中断循环

forEach

对数组的每一个元素执行一次提供的函数(不能使用return、break等中断循环),不改变原数组,无返回值undefined。

````

let arr = ['a', 'b', 'c', 'd']

arr.forEach(function (val, idx, arr) {

    console.log(val + ', index = ' + idx) // val是当前元素,index当前元素索引,arr数组

    console.log(arr)

})

````

for…in

循环遍历的值都是数据结构的键值

````

let obj = {a: '1', b: '2', c: '3', d: '4'}

for (let o in obj) {

    console.log(o)    //遍历的实际上是对象的属性名称 a,b,c,d

    console.log(obj[o])  //这个才是属性对应的值1,2,3,4

}

````

 for in也可以循环数组但是特别适合遍历对象

for…of

它是ES6中新增加的语法,用来循环获取一对键值对中的值

循环一个数组

````

let arr = ['China', 'America', 'Korea']

for (let o of arr) {

    console.log(o) //China, America, Korea

}

````

循环一个普通对象(报错)

````

let obj = {a: '1', b: '2', c: '3', d: '4'}

for (let o of obj) {

    console.log(o)  //Uncaught TypeError: obj[Symbol.iterator] is not a function

}

````

一个数据结构只有部署了 Symbol.iterator 属性, 才具有 iterator接口可以使用 for of循环。例子中的obj对象没有Symbol.iterator属性 所以会报错。

哪些数据结构部署了 Symbol.iteratoer属性了呢?

1.数组 Array

2.Map

3.Set

4.String

5.arguments对象

6.Nodelist对象, 就是获取的dom列表集合

如果想让对象可以使用 for of循环怎么办?使用 Object.keys() 获取对象的 key值集合后,再使用 for of

````

let obj = {a: '1', b: '2', c: '3', d: '4'}

for (let o of Object.keys(obj)) {

    console.log(o) // a,b,c,d

}

````

或者使用内置的Object.values()方法获取对象的value值集合再使用for of

````

let obj = {a: '1', b: '2', c: '3', d: '4'}

for (let o of Object.values(obj)) {

    console.log(o) // 1,2,3,4

}

````

循环一个字符串

````

let str = 'love'

for (let o of str) {

    console.log(o) // l,o,v,e

}

````

循环一个Map

````

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

for (let [key, value] of iterable) {

  console.log(value);

}

// 1

// 2

// 3

for (let entry of iterable) {

  console.log(entry);

}

// [a, 1]

// [b, 2]

// [c, 3]

````

循环一个Set

````

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

for (let value of iterable) {

  console.log(value);

}

// 1

// 2

// 3

````

相关文章

  • for forEach、for…in 、 for…of异同点

    for循环 最原始的遍历,自Javascript诞生起就一直用的 就是for循环,它用来遍历数组 ```` var...

  • javascript 遍历数组/对象

    for 循环遍历 foreach() 和map() 不同点:forEach() 方法对数组的每个元素执行一次提供的...

  • forEach() 方法 和 map() 方法对比

    相同点 语法相同 Array.prototype.forEach() Array.prototype.map() ...

  • 1forEach与map的区别 相同点:循环每一项 三个参数 this指向window 可以循环的只有数组 不同点...

  • 简单前端面试题

    简单面试题 1.map与foreach区别、 共同点1.都是循环遍历数组中的每一项。2.forEach() 和 m...

  • 2018-11-24遍历数组

    遍历数组的两种方法forEach和map共同点: 不同点: push() 方法可向数组的末尾添加一个或多个元素,并...

  • 对JS数组进行处理的几组方法对比整理

    第一组:map、forEach 相同点:都是对数组进行遍历操作不同点:map是会返回一个新数组 下边上代码看看 第...

  • forEach和map遍历

    一、原生JS forEach()和map()遍历 共同点: 2.匿名函数中的this都是指Window。 3.只能...

  • 面试题

    js题 1. map forEach filter 的区别 相同点: 都是用来遍历数组的 都支持三个参数(当前...

  • JavaScript中,map和foreach的异同点

    起因 我平时两个都会用,也知道一个有返回值一个没有返回值。但公司一个小妹子突然有一天就问我她有没有用对的时候,我竟...

网友评论

      本文标题:for forEach、for…in 、 for…of异同点

      本文链接:https://www.haomeiwen.com/subject/dnwtdqtx.html