区分JS数组中易混淆的方法

2）find()方法

• find()方法返回通过测试的数组的第一个元素的值，
• find()方法为数组中的每一个元素都调用一次函数执行：
  当数组中的元素在测试调减是返回true时，find()返回符合条件的元素，之后的值就不会再调用执行函数。
  如何没有符合条件的元素返回undefined
  fund()对于空数组，函数不会执行,默认返回undefined；find()方法不会改变数组的原始值

      var ages = [];
      console.log(ages.find((age) => age >= 24)); // undefined
      
      var agesTwo = [3, 2, 24, 34];
      console.log(agesTwo.find((age) => age >= 24)); //24

      // 也可以在对象数组中根据对象属性作为判断条件查找
      var testArr2 = [
        { name: "aaa", id: "111" },
        { name: "bbb", id: "222" },
        { name: "ccc", id: "333" },
      ];
      var findArr = testArr2.find((item) => item.name === "bbb");
      console.log(findArr); //{name: 'bbb', id: '222'}

1、indexOf()方法和findIndex()方法

1）indexOf() 方法可以返回数组中某个指定的元素位置

该方法将从头到尾地检索数组，看它是否有对应的元素。开始检索的位置在数组start处或者数组的开头。如果找到一个item，则返回item第一次出现的位置即索引，开始位置的索引是。

如果数组中没找到指定元素则返回-1。

      const arr = [1, 2, 3, 4, 5];
      console.log(arr.indexOf(5)); //4
      console.log(arr.indexOf(6)); //-1
      
      const arrs = [];
      console.log(arrs.indexOf(2)); //-1

2）findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex()方法为数组中每个元素都调用一次函数执行。

• （1）当数组中的元素在函数中返回true，则findIndex()会返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
• （2）没有符合条件的元素则返回-1

findIndex()对于空数组，函数不会执行；
findIndex()并不会改变原始数组的元素。

      const arr = [1, 2, 3, 4, 5];
      const result = arr.findIndex((item) => item >= 4);
      console.log(result); //3

      const arrs = [];
      console.log(arrs.findIndex((item) => item >= 4)); //-1

      const arrObject = [
        { id: 1, name: "one" },
        { id: 2, name: "two" },
      ];
      const results = arrObject.findIndex((items) => items.id === 1);
      console.log(results); // 0
      console.log(arrObject.findIndex((items) => items.id === 2)); //1
      console.log(arrObject.findIndex((items) => items.id === 3)); //-1

3）总结

• findIndex()和indexOf()实现都是通过循环遍历查找
• findIndex()的应用场景要比indexOf()广泛一些，可以查找大于等于小于，表达式可以随便写，indexOf就只能在第一层查找相等的值。
• findIndex()实际上相当于一个for循环，只不过找到了你不需要自己退出。

2、区分map() 和forEach()

1）map()和forEach()的定义：

• map()：创建一个新的数组，其中每一个元素由调用数组的中的每一个元素执行提供的函数得来。map方法会给原始数组中的每个元素都按照顺序调用一次callback函数。callback每次执行后的函数值（包括undefined）组合起来形成一个新的数组。callback函数只会在有值得索引上 被调用；那些从来没被赋值或者使用delete删除的索引则不会被调用。
• forEach()：针对每一个元素执行提供的函数。除了抛出异常以外，没有办法中止或跳出forEach()循环。如果你需要中止或跳出循环，forEach()方法不是应当使用的工具。

2）共同点

map循环

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
console.log(array1);
// expected output: Array [2, 8, 18, 32]
// expected output: Array [1, 4, 9, 16]

forEach()循环

const array1 = ['a', 'b', 'c'];
const resultForEach = array1.forEach(element => console.log(element));
console.log(resultForEach);
console.log(array1)
// expected output: "a"
// expected output: "b"
// expected output: "c"
// expected output: undefiend
// expected output: ['a', 'b', 'c'];

• 都是循环遍历数组中的每一项
• 每一次执行匿名函数都支持三个参数，数组中的当前项item，当前项的索引index，原始数组input
• 匿名函数中的this都是指window
• 只能遍历数组

3）差异

map()：
有返回值，可以return出来一个length和原数组一致的数组（内容可能包含undefined，null等）

     const arr = [1, 2, 3, 4];
      const arrTwo = arr.map((item, index, input) => {
        return item * 10;
      });
      console.log(arr); //[1, 2, 3, 4]
      console.log(arrTwo); //[10, 20, 30, 40]

• 参数：item是数组中的当前项，index是当前项的索引，input是原始数组
• 区别：msp的回调函数中支持return返回值，return的是一个数组，相当于数组中的每一项进行了改变（但并不影响原来的数组，只是相当于将原数组克隆了一份，把克隆的这一份数组中的对应项改变了）
  forEach()
  没有返回值，返回结果为undefined

     const array = [1, 2, 3, 4];
      const res = array.forEach((item, index, input) => {
        return (input[index] = item * 10);
      });
      console.log(res); // undefined
      console.log(array); //[10, 20, 30, 40]

• 参数：item数组中的当前项，index当前项的索引，input原始数组；
• 数组中有几项，则传递进去的匿名回调函数就需要执行几次
• 理论上这个方式是没有返回值的，只是遍历数组中的每一项，不对原数组进行修改，但是可以自己通过数组的索引来修改原来的数组。