for of 与for in、数组的新增遍历方法

对象属性遍历

• for… in 遍历一个都想自由的、继承的、可枚举的、非Symbol的属性，还能遍历原型上的属性，所以for…in拿到的是对象本身及对象原型上的属性

• for…of遍历可迭代对象

数组遍历

for … in

for in遍历数组，会存在一些问题，比如：

• index索引为字符串型数字，不能直接进行几何运算

var arr = [1,2,3]
    
for (let index in arr) {
  let res = index + 1
  console.log(res)
}
//01 11 21

• 遍历顺序有可能不是按照实际数组的内部顺序
• 使用for in会遍历数组所有的可枚举属性，包括原型。
• 如果不想遍历原型方法和属性的话，可以在循环内部判断一下，使用 hasOwnProperty() 方法可以判断某属性是不是该对象的实例属性

var arr = [1,2,3]
Array.prototype.a = 123
    
for (let index in arr) {
  let res = arr[index]
  console.log(res)
}
//1 2 3 123

//使用 `hasOwnProperty()` 方法可以判断某属性是不是该对象的实例属性
for(let index in arr) {
    if(arr.hasOwnProperty(index)){
        let res = arr[index]
  		console.log(res)
    }
}
// 1 2 3

for… of

for of遍历的是数组元素值，而且for of遍历的只是数组内的元素，不包括原型属性和索引

var arr = [1,2,3]
arr.a = 123
Array.prototype.a = 123
    
for (let value of arr) {
  console.log(value)
}
//1 2 3

• for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象（iterator）的集合，但是不能遍历对象，因为没有迭代器对象。
• 但如果想遍历对象的属性，你可以用for in循环（这也是它的本职工作）或用内建的Object.keys(), Object.entries方法

var myObject={
　　a:1,
　　b:2,
　　c:3
}
for (let key of Object.keys(myObject)) {
  console.log(key + ": " + myObject[key]);
}
//a:1 b:2 c:3
for (let [key, vaule] of Object.entries(myObject) ){
    console.log(key, vaule);
}
//a 1 b 2 c 3

小结
for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值
for in总是得到对象及原型的key或数组、字符串的下标
for of总是得到对象的value或数组、字符串的值

数组的新增遍历方法

一、map

map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。

let arr = ['d', 's', 'r', 'c'];
let arr2 = arr.map(item => item === 's')
console.log(arr2);//[ false, true, false, false ]
console.log(arr)//[ 'd', 's', 'r', 'c' ]

结果：
map会对数组的每一项进行处理，返回新数组，返回的新数组包含对之前每 一项处理结果；

二、filter

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

let arr = ['d', 's', 'r', 'c'];
let arr2 = arr.filter(item => item === 's')
console.log(arr2);//[ 's' ]
console.log(arr)//[ 'd', 's', 'r', 'c' ]

结果：
　　filter只会把符合条件的数值返回，形成一个新数组；

三、some

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。some() 方法会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。

let arr = ['d', 's', 'r', 'c'];
let arr2 = arr.some(item => item === 's')
console.log(arr2);//true
console.log(arr)//[ 'd', 's', 'r', 'c' ]

结果：
　　some()会一直运行直到回调函数返回true;

四、every

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。every() 方法使用指定函数检测数组中的所有元素：如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。

let arr = ['d', 's', 'r', 'c'];
let arr2 = arr.every(item => item === 's')
console.log(arr2);//false
console.log(arr)//[ 'd', 's', 'r', 'c' ]

结果：

every()会一直运行直到回调函数返回false;

五、reduce

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。

let arr = ['d', 's', 'r', 'c'];
let arr2 = arr.reduce((total, item) => {
   return total + item
}, '')
console.log(arr2);//dsrc
console.log(arr)//[ 'd', 's', 'r', 'c' ]

结果：

因为是字符串，reduce就直接拼接了；