【金秋打卡】第22天数组的新增方法

一、课程名称：前端工程师2022版

二、课程章节：ES6语法扩展-ES6的新增方法

三、课程讲师：Alex

四、课程内容

1、includes()

（1）作用：判断数组中是否含有某个成员

（2）判断原理：基本遵循严格相等（===），但是对于NaN的判断与===不同，includes认为NaN===NaN

（3）基本用法：

      console.log([1, 2, 3].includes("2")); //false

      console.log([1, 2, 3].includes(2)); //true

      console.log(NaN === NaN); //false

      console.log([1, 2, NaN].includes(NaN)); //true

（4）第二个参数：表示搜索的起始位置，默认值是0

      console.log([1, 2, 3].includes(2, 2)); //false

      console.log([1, 2, 3].includes(2, 1)); //true

（5）应用：

对数组进行去重

      const arr = [];

      for (const item of [1, 2, 1]) {

        if (!arr.includes(item)) {

          arr.push(item);

        }

      }

      console.log(arr);//(2) [1, 2]

2、Array.from()

（1）作用：Array.from()是构造函数的方法，不能通过实例来调用，它的作用是将其他数据类型转换成数组

（2）基本用法：

    console.log(Array.from('str')); //(3) ['s', 't', 'r']

（3）可以通过Array.from()转换成数组的类型

1）所有可遍历的：如数组本身、字符串、Set、Map、NodeList、arguments

      console.log(Array.from(new Set([1, 2, 1])));  //(2) [1, 2]

    //可遍历的使用Array.from没有直接在数组中展开看上去直观

      console.log([...new Set([1, 2, 1])]);  //(2) [1, 2]

2）拥有length属性的任意对象：length控制最终的数组长度，而Array.from()只会把数字键的转化成对应的数组的元素值，而其他的键名是不会进行转化的，而是会用undefined来填充

      const obj = {

        0: "a",

        1: "b",

        name: "alex",

        length: 3,

      };

      // console.log([...obj]);//×，这类对象没法在数组中展开，这类最好使用Array.from

      console.log(Array.from(obj)); //(3) ['a', 'b', undefined]

（4）第二个参数：是一个回调，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

console.log(

    [1, 2].map((value) => {

      return value * 2;

        })

      ); //(2) [2, 4]

console.log(Array.from("12", (value) => value * 2)); //(2) [2, 4]

console.log(Array.from("12").map((value) => value * 2)); //(2) [2, 4]

（5）第三个参数：用于修改this指向，默认情况下是window

      Array.from(

        "12",

        (value) => {

          console.log(this); //window

        },

        // 注意箭头函数在声明的时候就确定好了this，所以是不能修改this指向的，如果想要修改，必须使用一般函数

        document

      );

      Array.from(

        "12",

        function () {

          console.log(this); //#document

        },

        document

      );

3、find()和findIndex()

（1）作用：

1）find()用来找到某个值，找到满足条件的一个立即返回那个值

2）findIndex()用来找到某个值的索引值，找到满足条件的一个，立即返回其索引

（2）基本用法

      console.log(

        [1, 5, 10, 15].find((value, index, arr) => {

          // console.log(value,index,arr);

          // 返回第一个大于9的值

          return value > 9;

        })

      ); //10

      console.log(

        [1, 5, 10, 15].findIndex((value, index, arr) => {

          // console.log(value,index,arr);

          // 返回第一个大于9的值

          return value > 9;

        })

      ); //2

（3）第二个参数：修改this指向

      console.log(

        [1, 5, 10, 15].find(function (value, index, arr) {

          console.log(this); //#document

          return value > 9;

        }, document)

      ); //10

（4）应用：通过获取到的数据中筛除一些东西，选择需要的东西，比如从服务器端获取了学生数据，要使用不同的板块显示不同的内容

    const students =[

        {name:'张三',sex:'男',age:16},

        {name:'李四',sex:'女',age:22},

        {name:'王五',sex:'男',age:32},

    ]  

    students.find(value=>value.sex==='女');

    students.findIndex(value=>value.sex==='女');

五、课程心得

今天学习了数组的新增方法includes()、Array.from()和find()和findIndex()，这几个方法对于处理数组的应用来说都很实用，要记清楚相关的参数的作用等知识，不要搞混。