目录

  • 一、JS遍历数组
  • 1. for 遍历数组
  • 2. for...in 遍历数组
  • 3. for...of 遍历数组
  • 4. forEach 遍历数组
  • 5. map 遍历数组
  • 6. filter 遍历数组
  • 7. some 和every 遍历数组
  • 8. reduce遍历数组
  • 二、JS遍历对象
  • 1. for...in 遍历对象
  • 2. Object.keys遍历对象
  • 3. Object.getOwnPropertyNames(obj) 遍历对象

一、JS遍历数组

1. for 遍历数组

let arr = [1,2,3,4,5,6] 
for(let i =0; i< arr.length; i++){
    console.log(arr[i])
}

2. for…in 遍历数组

for(let item in arr){
    console.log(arr[item])
}
  • for…in 是es5 标准，此方法遍历数组效率低，主要用来循环遍历对象的属性
  • 遍历数组时，item为数组的下标，遍历对象时item为对象的属性，即：key

3. for…of 遍历数组

for(let item of arr){
    console.log(item)
}
  • 与 for…in 不相同的是，for…of 只能遍历数组，item为数组元素的值

4. forEach 遍历数组

let arr = [1,2,3,4,5,6] 
arr.forEach(function(item,index,arr){
    console.log(item)
},obj)
  • forEach有两个参数，第一个参数是 函数，第二个参数是 对象
  • 第一个参数可以为普通函数，也可以是箭头函数（你是不是觉得这条是废话哈哈）普通函数和箭头函数区别是 如果有第二个参数obj时，this的指向问题不同
  • 如果指定了第二个参数obj，如果第一个参数是 function，function中的this会指向这个对象，如果第一个参数是箭头函数，那么由于箭头函数的特性，this的指向不会发生改变
  • forEach第一个参数function可以传入三个参数（item,index,arr）分别代表当前数组的 元素值，元素下标，和 当前的数组，通常只会传入item参数，即通常只会用到item参数
  • forEach 不能使用break或continue关键字跳出循环，如果想跳出循环可以用 return

5. map 遍历数组

let arr = [1,2,3,4,5,6] 
let new_arr = arr.map(function(item,index,arr){
    return item*2
})
console.log(new_arr)  //[2,4,6,8,10,1]
  • map 与 forEach 用法非常相似，区别：forEach没有返回值，map可以返回一个与原数组有映射关系的新的数组

6. filter 遍历数组

var arr = [1,2,3,4,5]
var arr1 = arr.filter(function(item, index,arr){
	return item >3;
})
console.log(arr1)  // [4,5]
  • filter() 用于对数组进行过滤，返回一个新数组，不会改变原始数组

7. some 和every 遍历数组

  • every() 是对数组中每一项运行给定函数，如果每一项都返回 true，则返回true
  • some() 是对数组中每一项运行给定函数，如果有一项返回true，则返回true
var arr = [1,2,3,4,5,6]
let result1 = arr.some(function(item, index, array){
    return item >3
})
console.log(result1)   // true

let result2 = arr.every(function(item, index, array){
    return item >3
})
console.log(result2)   // false

some() 会一直找符合条件的值，一旦找到，则不会继续迭代下去

every() 从迭代开始，一旦有一个不符合条件的，则会停止迭代

8. reduce遍历数组

  • reduce() 方法接受一个函数作为累加器，数组中的每个值（从左到右）开始计算，最终计算为一个值
  • reduce() 对于空数组是不会执行回调函数的
arr.reduce(callback,[initialValue])
  • reduce为数组中每个元素依次执行回调函数，callback有四个参数
callback （执行数组中每个值的函数，包含四个参数）
 
    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）
 
initialValue （作为第一次调用 callback 的第一个参数。）

二、JS遍历对象

1. for…in 遍历对象

var obj = {'0':'a', '1':'b', '2':'c'};
for(let i in obj){
    console.log(i,":",obj[i]);     //{0:a,1:b,2:c}
}

2. Object.keys遍历对象

var obj = {
    name: 'dawn',
    age: 21,
    address: '深圳'
}
for (let key of Object.keys(obj)) {
    console.log(key+':'+obj[key]);
}

for…of不能单独来遍历对象，要结合Object.keys一起使用才行

Object.keys() 方法会返回一个由一个指定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for…in循环遍历该对象时返回的顺序一致

3. Object.getOwnPropertyNames(obj) 遍历对象

//3、Object.getOwnPropertyNames(obj) 遍历对象
var obj = {
    name: 'dawn',
    age: 21,
    address: '深圳'
}
Object.getOwnPropertyNames(obj).forEach(function (key){
    console.log(key+':'+obj[key]);
})

返回一个数组，包含对象自身的所有属性（包含不可枚举属性） 遍历可以获取key和value