JS遍历方法大总结

最新推荐文章于 2024-08-13 12:48:55 发布

人间草木96

最新推荐文章于 2024-08-13 12:48:55 发布

阅读量243

点赞数

分类专栏：面试总结

本文链接：https://blog.csdn.net/qq_43258252/article/details/101681202

版权

面试总结专栏收录该内容

87 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

</body>
<script>
  let arr = [1, 2, 3, 4], str = 'wang', obj = {
    name: 'wang',
    age: '23'
  }
  // for循环用于遍历数组，字符串
  // 使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。
  // for循环不能遍历对象
  for (let i = 0; i < arr.length; i++) {
    console.log(i)
    console.log(arr[i])
    console.log(`${i}-${arr[i]}`)
  }
  for (let i = 0; i < str.length; i++) {
    console.log(i)
    console.log(str[i])
    console.log(`${i}-${str[i]}`)
  }

  // for in 循环用于遍历数组，类数组或对象
  // 1.index索引为字符串型数字，不能直接进行几何运算
  // 2.遍历顺序有可能不是按照实际数组的内部顺序
  // 3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性
  // 所以for in更适合遍历对象，不要使用for in遍历数组。
  // 记住，for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。
  for (let i in arr) {
    console.log(i)
    console.log(arr[i])
    console.log(`${i}-${arr[i]}`) //  `  反引号    字符串模板
  }
  for (let i in str) {
    console.log(i)
    console.log(str[i])
    console.log(`${i}-${str[i]}`)
  }
  for (let key in obj) {
    console.log(key)
    console.log(obj[key])
    console.log(`${key}-${obj[key]}`)
  }

  // ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。
  // ES6中新引入的for of循环不能遍历对象,会报错，需要Object.entries()处理一下
  // 所以for of更适合遍历数组、字符串，不要使用for of遍历对象。
  for (let v of arr) {
    console.log(v)
  }
  for (let v of str) {
    console.log(v)
  }
  // 报错  ->  Uncaught TypeError: obj is not iterable
  // for (let v of obj) {
  //   console.log(v)
  // }
  // Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，
  // 其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。
  for (let [key, value] of Object.entries(obj)) {
    console.log(key, value)
  }

  // forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
  // v 当前元素 ，index 当前元素的索引值 ， arr 当前元素所属的数组对象
  // forEach和map的最大区别就在于，forEach没有返回值。
  // 即便你给forEach加上return也没用
  // 可以自己通过数组的索引来修改原来的数组
  // 不能遍历字符串、对象
  arr.forEach((v, index, arr) => {
    console.log(v)
    console.log(index)
    console.log(arr)
  })

  // map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
  // map() 方法按照原始数组元素顺序依次处理元素。
  // 注意： map() 不会对空数组进行检测。
  // 注意： map() 不会改变原始数组。
  // （不会改变原始数组，只是相当于把原数组克隆了一份，把克隆这一份的数组中的对应项改变了 ）
  // 不能遍历字符串、对象
  arr.map((v, index, arr) => {
    console.log(v)
    console.log(index)
    console.log(arr)
  })




</script>

</html>