js数组和对象遍历方法

for

let str = ''
for (let i = 0; i < 100; i++) {
  if (i === 10) {
    break // 跳出循环
  }
  if (i % 2 === 0) {
    continue // 跳过本次循环
  }
  str += i
}
console.log(str) // "13579"

let arr = ['z', 'x', 'y', 'o', 'n', 'g']
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]) // z, x, y, o, n, g
}

---

for … in

• 以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。（for … in是为遍历对象属性而构建的，不建议与数组一起使用）

const obj = { a: 1, b: 2, c: 3 }
for (const k in obj) {
    console.log('obj.' + k + ' = ' + k)
}
// "obj.a = a"  
// "obj.b = b"  
// "obj.c = c"

---

for … of

• 在可迭代对象上创建一个迭代循环，调用自定义迭代钩子，为每个不同属性的值执行语句

const arr = ['a','b','c']
for (const v of arr) {
  console.log(v)
}
// "a"
// "b"
// "c"

for ... in 与 for ... of的区别 ✨

---

Array.prototype.forEach()

• forEach 可以接收两个参数（回调函数, 回调函数中this的值），如果使用箭头函数，thisArg参数会被忽略
• callback可以接收三个参数 （当前元素，当前元素的索引，当前数组）
• 在forEach执行过程中，除抛出异常外，没有办法终止或跳出循环

let arr = ['z', 'x', 'y', 'o', 'n', 'g']
arr.forEach(function (value, index, array) {
  console.log(value)  // z, x, o, n, g
  if (value === 'x') {
    this.shift()
  }
}, arr)

---

Array.prototype.map()

• map方法和forEach类似，接收一个回调函数作为参数，将数组所有成员一次传入函数，
• 然后把每次的执行结果组成一个新数组返回，如果不是为了使用返回值，就不要用map

let arr = ['z', 'x', 'y', 'o', 'n', 'g']
const newArr = arr.map(function (value, index, array) {
  return value.charCodeAt(0)
}, arr)
console.log(newArr) // [122, 120, 121, 111, 110, 103]

---

Array.prototype.filter()

• filter方法用来过滤数组，返回满足条件成员组成的一个新数组

let arr = ['z', 'x', 'y', 'o', 'n', 'g']
const newArr = arr.filter(function (value, index, array) {
  return value.charCodeAt(0) >= 120
}, arr)
// const newArr = arr.filter(value => value.charCodeAt(0) >= 120)
console.log(newArr) // ['z', 'x', 'y']

---

Array.prototype.some() & Array.prototype.every()

• some、every方法功能和用法都相似，返回一个布尔值，表示数组成员是否符合某种条件
• some 当有一个数组成员符合条件就返回true；every 当全部数组成员符合条件才返回true，否则返回false
• 对于空数组 some返回false，every返回true，回调函数都不会执行

let arr = ['z', 'x', 'y', 'o', 'n', 'g']
const someRes = arr.some(function (value, index, array) {
  return value.charCodeAt(0) > 120  // 只要有一个charcode大于120就返回true
}, arr)
const everyRes = arr.every(function (value, index, array) {
  return value.charCodeAt(0) > 120  // charcode大于120才返回true
}, arr)
console.log(someRes, everyRes) // true, false

---

Array.prototype.reduce() & Array.prototype.reduceRight()

• reduce()，reduceRight() 依次处理数组中每个成员，最终累计为一个值；
  reduce从左到右，reduceRight从右到左

• 接收两个参数 回调函数，第一个参数的默认值

• 回调函数接收四个参数 前两个参数是必须的，后两个参数是可选的 👇

  previousValue: 上一次执行返回的累积值，默认为数组的第一个成员

  currentValue: 当前变量，[如果没有指定参数1的默认值] 默认为数组的第二个成员

  currentIndex: 当前位置，默认0

  array: 原数组

• 如果数组为空，没有指定第一个参数的默认值，将抛出异常，如果指定了第一个参数的默认值，callback不会执行，该参数会被直接返回

let arr = ['z', 'x', 'y']
const reduceRes = arr.reduce(function (previousValue, currentValue, currentIndex, array) {
  return previousValue + currentValue
}, 'i am ')
console.log(reduceRes) // "i am zxy"

const max = arr.reduce((a, b) => a > b ? a : b) // 找出数组中最大值
console.log(max) // z

---

Object.keys, Object.values

• Object.keys(obj)： 返回一个由该对象自身的所有属性名组成的数组
• Object.values(obj)： 返回一个由该对象自身的所有属性值组成的数组

const obj = {
  id: 10000001,
  name: 'zxyong',
  age: 18,
}
Object.keys(obj).forEach(function (key) {
  console.log(key,this[key])
}, obj)
// "obj.id = 10000001"
// "obj.name = zxyong"
// "obj.age = 18"

---

Object.entries()

• 返回一个给定对象自身可枚举属性的键值对数组

const obj = {
  id: 10000001,
  name: 'zxyong',
  age: 18,
}
for (const [k, v] of Object.entries(obj)) {
  console.log(k + ' => ' + v)
}
// "a => 1"
// "b => 2"
// "c => 3"

---

Object.getOwnPropertyNames

• 与 Object.keys类似，返回一个包含自身所有属性名的数组，（包含不可枚举的属性名）

let arr = ['z', 'x', 'y']
Object.getOwnPropertyNames(arr) // ["0", "1", "2", "length"]

参考链接
https://wangdoc.com/javascript/
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript