为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第22天数组的新增方法

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

2022.11.14 08:25 65浏览

一、课程名称:前端工程师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来填充

 https://img1.sycdn.imooc.com/6370b1fc00014b7b04200237.jpg

      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==='女');

 https://img2.sycdn.imooc.com/6370b1ee0001f28b04200237.jpg

五、课程心得

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

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
1
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消