数组-循环方法

遍历数组方法for、forEach、map、filter、every、some、reduce --- find、findIndex、keys、values、entries

1、forEach()

// 参数1：item    数组中的每项元素
// 参数2：index   数组的索引值
// 参数3：array   原数组

// 注意点：
// 1、空数组不会执行forEach,  forEach中的return,只是跳出本次循环，后续循环还会继续执行（需要通过return结束循环，使用for循环）
// 2、遍历的次数，在循环开始就确定了，遍历过程中追加的元素，不会遍历
// 3、空元素会跳过遍历，undefined和null不会
let arr = [1, 2, , 3] // 只会循环三次
let arr = [1, 2, undefined, null, 3] // 循环5次
 // 一般使用方法 arr.forEach(item => {})
 // 需要索引值使用传参
 arr.forEach((item, index, array) => {
    console.log(item, 'item');
    console.log(index, 'index');
    console.log(array, 'array');
  })
  // 例：
  let a = [1, 2, ,3]; // 最后第二个元素是空的，不会遍历(undefined、null会遍历)
  let obj = { name: 'OBKoro1' };
  let result = a.forEach((value, index, array) => {
    a[3] = '改变元素';
    a.push('添加到尾端，不会被遍历')
    console.log(value, 'forEach传递的第一个参数'); // 分别打印 1 ,2 ,改变元素
    console.log(this.name); // OBKoro1 打印三次 this绑定在obj对象上
    // break; // break会报错
    return value; // return只能结束本次回调 会执行下次回调
    console.log('不会执行，因为return 会执行下一次循环回调')
  }, obj);
  console.log(result); // 即使return了一个值,也还是返回undefined
  // 回调函数也接受接头函数写法

2、filter() 过滤原数组，返回满足条件的新数组

    let arr = [1, 2, 3]
    arr1 = arr.filter(item => item > 2)
    console.log(arr1); // [3]
    // 带参数
    arr2 = arr.filter((item, index, arr) => {
      return item < 3 && index > 0
    })
    console.log(arr2); // [2]

3、map() 遍历数组，对数组员数进行处理之后，返回新数组

    let arr = [1, 2, 3]
    let arr1 = arr.map(item => {
      return item + '拼接'
    })
    console.log(arr1); // ["1拼接", "2拼接", "3拼接"]

4、every() 检测数组所有元素是否符合条件

    // 如果有一个元素不满足条件，就返回false,不会继续执行
    // 如果都满足条件返回true
    let arr = [3, 2, 10, 5]
    let val = arr.every(item => item > 5)
    console.log(val); // false

5、some() 数组中是否有满足条件的元素

    // 如果有一个条件满足就返回true, 后面的元素不会继续执行
    // 如果都不满足，返回false
    let arr = [3, 2, 10, 5]
    let val = arr.some(item => item > 5)
    console.log(val); // true

6、find() 根据条件找到符合条件的第一个数组成员，并返回该成员，如果没找到返回undefined

    // ES6： find() 和findIndex() 都可以识别NaN, indexOf不可以
    let arr = [3, 2, 10, 5, 12]
    let val = arr.find(item => item > 5)
    console.log(val); // 10

7、findIndex() 根据条件找符合的第一个元素的位置，找到了返回索引值，找不到返回-1

    let arr = [3, 2, 10, 5, 12]
    let val = arr.findIndex(item => item > 5)
    console.log(val); // 2

8、ES6： keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值

    let arr = [5, 12, 9]
    for (let k of arr.keys()) {
      console.log(k); // 0, 1, 2
    }
    for (let k of arr.values()) {
      console.log(k); // 5, 12, 9
    }
    for (let k of arr.entries()) {
      console.log(k); // [0, 5], [1, 12], [2, 9]
    }

9、reduce() 数组迭代器，数组中的每一个元素执行回调函数，不包括数组中被删除的元素和未被赋值的元素

    // arr.reduce(callback, [initialValue])  callback 必需， initialValue(第一次调用的初始值) 可选
    // callback的参数
    // 参数1（初始值，或上一次回调函数的返回值）：必需
    // 参数2（当前元素值）：必需
    // 参数3（当前索引值）：可选
    // 参数4（当前数组）：可选

    // 用法1：数组求和
    let arr = [1, 2, 4, 8, 10]
    let sum = arr.reduce(function(prev, cur) {
      return prev + cur
    }, 0)
    console.log(sum); // 25
    let sum = arr.reduce(function(prev, cur) {
      return prev + cur
    }, 10)
    console.log(sum); // 35

    // 用法2：数组最大值,最小值
    let arr = [6, 20, 4, 8, 10]
    let maxNum = arr.reduce(function(prev, cur) {
      // return Math.max(prev, cur)
      return Math.min(prev, cur)
    })
    console.log(maxNum);

    // 用法3：数组去重
    let arr = [1, 5, 6, 5, 4, 6]
    let arr1 = arr.reduce(function(prev, cur) {
      prev.indexOf(cur) === -1 && prev.push(cur)
      return prev
    }, [])
    console.log(arr1); // [1, 5, 6, 4]

    // 用法4：二维数组，转化为一维数组
    let arr = [[1, 2], [4, 5], [7, 8]]
    let arr1 = arr.reduce(function(prev, cur) {
      return prev.concat(cur)
    }, [])
    console.log(arr1); // [1, 2, 4, 5, 7, 8]