JS常用遍历方法对比、for in 和 for of 对比

1.数组遍历

（1）会改变原数组

• for循环：

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

• forEach循环：

let arr = [1, 2, 3]

arr.forEach((item, index) => {
  console.log(item, index)
})

• for of循环：

for of 允许遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构

let arr = [1, 2, 3]

for (let item of arr) {
  console.log(item)
}

（2）会返回新数组

• map:

array.map((item,index,arr)=>{
	//item是操作的当前元素
	//index是操作元素的下标
	//arr是需要被操作的元素
})

• filter:

let arr = [1,2,3];
let tt = arr.filter(function(i){
 return i>1;  //遍历数组中是所有元素返回大于1的元素
})
// [2,3]

• some:

some 方法用于检测数组中的元素（只要有一个满足条件就是true）是否满足指定条件（函数提供）,返回 boolean 值

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// true

2.对象遍历

（1）for in

也允许遍历数组

let obj = {name: '张三', age: 18}
for(let i in obj) {
    console.log(i, obj[i])
}

// name 张三
// age 18

（2）Object.keys / values()

let obj = {
    name: '张三',
    age: 18
}

console.log(Object.keys(obj)) // ['name', 'age']
console.log(Object.values(obj)) // ['张三', 18]

3. for of 和 for in 区别

let arr = ['一','二','三','四','五']

let obj = {
    name: '张三',
    age: 18
}

（1）for in 既可用来遍历数组，也可用来遍历对象

• 遍历对象结果为对象的 key
• 遍历数组，结果为数组的下标

for(let key in obj) {
     console.log('for in对象：', key); 
}

// for in对象：name
// for in对象：age

for(let i in arr) {
     console.log('for in数组', i);
}

// for in数组 0
// for in数组 1
// for in数组 2
// for in数组 3
// for in数组 4

（2）for of 用来遍历迭代器（数组，Map，Set，String，TypedArray）

• 数组

for(let i of arr) {
    console.log('for of数组', i);
}

// for of数组 一
// for of数组 二
// for of数组 三
// for of数组 四
// for of数组 五

for(let key of obj) {
    console.log('for of对象：', key);
}

// 报错（obj is not iterable）

• String

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

• Map

var a = {name:'Jack'};
const m = new Map([
    ['name','Jack'],
    [a,{name:'Rose'}]
])

for(let value of m){
    console.log(value);
}

/*
    ["name", "Jack"]
    [{name: "Jack"}, {name: "Rose"}]
*/

• Set

const s = new Set(['hello','world','你好','世界'])

for(let value of s){
    console.log(value);
}

// hello
// world
// 你好
// 世界

• TypedArray

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}

// 0
// 255

• arguments 对象

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3