虽然写vue已经两三年了，但是貌似都是在CV中度过，遇到问题大多是百度解决，反思了一下觉得要把经常遇到的问题总结下，这样也会提高工作效率，也好为以后的跳槽打好基础

正文开始~

1.for in

以任意顺序遍历一个对象的可枚举属性，遍历数组时，key为数组下标字符串；遍历对象，key为对象字段名

数组

let arr = [{age: 1}, {age: 5}, {age: 100}, {age: 34}]
for (let key in arr) {
    console.log(key, arr[key])
}
// 打印
// 0 {age: 1}
// 1 {age: 5}
// 2 {age: 100}
// 3 {age: 34}

 对象

let obj = {f1: 'test1', f2: 'test2'}
for (let key in obj) {
    console.log(key, obj[key])
}
// 打印
// f1 test1
// f2 test2

for in 缺点

1. for in 迭代顺序依赖于执行环境，不一定保证顺序
2. for in 不仅会遍历当前对象，还包括原型链上的可枚举属性
3. for in 没有break中断
4. for in 不适合遍历数组，主要应用为对象

2.for of 

ES6新引入的语法，在可迭代的对象上（包括 Array，Map，Set，String，TypedArray，arguments对象，NodeList对象）创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

Object对象不是可迭代对象，故for of不支持。for of有个很大的特点是支持数组的break中断。

数组 

let arr = [{age: 1}, {age: 5}, {age: 100}, {age: 34}]
for(let {age} of arr) {
    if (age > 10) {
        break // for of 允许中断
    }
    console.log(age)
}
// 打印
// 1
// 5

for of 优点

1. for of 有与for in 一样的简洁语法（这也是两者容易混乱的点），但没有for in的缺点
2. for of 保证顺序且不会仅遍历当前对象
3. for of 可与break，continue，return配合

 3.forEach

• 数组名.forEach（function（数组中一个元素的值）{对这个值进行处理....}）
• 数组名.forEach（test）test为方法名，不用加（），把函数引用传进去

Array.prototype.add = function() {
   console.log('yellow');
 }
let arr = new Array('red', 'green', 'blue')

// 方法1
arr.forEach(function(item) {
  console.log(item);  //  red green blue
})
// 方法2
function print(something) {
  console.log(something);  //  red green blue
}
arr.forEach(print);

 forEach 缺点

forEach方法提供一个回调函数，不能使用break语句跳出循环，也不能使用return语句从闭包函数中返回

4.map

let arr = new Array('java', 'js', 'php')

arr.map(item => console.log(item)) // java js php
arr.map((item,index) => {
  console.log(index + ':' + item); // 0:java 1:js 2:php
})

map可以改变当前循环的值，返回一个新的被改变过值之后的数组（map需return），一般用来处理需要修改某一个数组的值 

5.filter

filter方法有返回值，返回值是一个新的数组，原数组的每一项成员，执行迭代函数的返回值如果为真值，则会将这个成员放进新数组，如果返回值为假值，则不会放到新数组。

let arr = [1, 2, 3];
let arr1 = arr.filter(item => {
  return  item > 1;
})
console.log(arr); // [ 1, 2, 3 ]
console.log(arr1); // [ 2, 3 ]

filter方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组 

注意：它直接返回一个新的数组

6.some和every

some方法有返回值，如果原数组的每一项成员执行迭代函数的结果，有一项为真值，那么some方法会返回true，如果找到符合条件的，则立即终止
every方法有返回值，如果原数组的每一项成员执行迭代函数的结果，有一项为假值，那么every方法会返回false，会查找所有元素，即使找到了符合条件的也不会立即终止
some和every方法的一个优点是，只要确定了结果，就会立即返回结果
every和some都适合用于对数组成员进行一个条件判断的场景

let arr = [1, 2, 3];
let arr1 = arr.some(item => {
  return  item > 1;
})
let arr2 = arr.every(item => {
  return  item > 1;
})
console.log(arr1); // true
console.log(arr2); // flase

注意：返回的是布尔值，some如果找到第一个满足条件的元素,则终止循环. 不在继续查找. 

注意： every() 不会对空数组进行检测。 注意： every() 不会改变原始数组。

7.reduce 

reduce方法有两个参数，第一个参数是一个回调函数（必须），第二个参数是初始值（可选）。回调函数有四个参数，依次为本轮循环的累计值、当前循环的元素、该元素的下标、数组本身

let arr = [1, 2, 3];
let res = arr.reduce((val, item, index) => {
  return val + item * index;
}, 10);
console.log(arr); // [ 1, 2, 3 ]
console.log(res);  // 18

8.find 和 findIndex (返回第一个符合条件的) 

let arr = [1, 1, 2, 3];
let bool1 = arr.find(item => item == 1);  
let bool2 = arr.find(item => item == 4);  
let index1 = arr.findIndex(item => item == 1); 
let index2 = arr.findIndex(item => item == 4);  
console.log(bool1); // 1
console.log(bool2); // undefined
console.log(index1); // 0
console.log(index2); // -1

9.for

 基础的for循环在这里就不再赘述了