ES6的内置对象扩展方法怎么用(es6,开发技术)

时间:2024-05-04 19:35:59 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

    Array的扩展方法

    1.扩展运算符(展开语法)

    扩展运算符可以将数组或者对象转换为逗号分隔的参数序列

    letary=[1,2,3];...ary//1,2,3console.log(...ary);//123//console.log方法可以接收以","分隔的参数,一次输出多个内容//为啥输出的结果没有逗号了,因为参数序列里的逗号被console.log当成参数分隔符了
    <scripttype="text/javascript"> letarr=['a','b','c']; console.log(...arr);//abc console.log('a','b','c');//abc </script>

    2、扩展运算符的应用

    1.合并数组

    扩展运算符可以用于合并数组

    //方法一letary1=[1,2,3];letary2=[4,5,6];letary3=[...ary1,...ary2];console.log(ary3);//[1,2,3,4,5,6]
    //方法二ary1.push(...ary2);

    注意:push()方法可以接收多个值,每个值之间用“,”分隔

    letary1=[1,2,3]; letary2=[4,5,6]; ary2.push(...ary1); console.log(ary2);//[4,5,6,1,2,3]

    2. 将伪数组转换为真正的数组

    将类数组或可遍历对象转换为真正的数组

    letoDivs=document.getElementByTagName('div');oDivs=[...oDivs];
    <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <scripttype="text/javascript"> varoDivs=document.getElementsByTagName('div'); console.log(oDivs); varary=[...oDivs]; console.log(ary); </script></body>

    ES6的内置对象扩展方法怎么用

    3.构造函数方法:Array.from()

    将类数组或可遍历对象转换为真正的数组

    letarrayLike={'0':'a','1':'b','2':'c',length:3//必须要有这一句};console.log(arrayLike);letarr2=Array.from(arrayLike);//['a','b','c']console.log(arr2);

    ES6的内置对象扩展方法怎么用

    方法还可以接收第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组

    letarrayLike={"0":1,"1":2,"length":2}letnewAry=Array.from(arrLike,item=>item*2);
    vararrayLike={ "0":"1", "1":"2", "length":2 } varary=Array.from(arrayLike,item=>item*2)//数组里有多少元素这一句就执行多少次 console.log(ary)//[2,4]

    4.实例方法 :find()

    用于找出第一个符合条件的数组成员,如果没有找到返回undefined

    letary=[{id:1,name:'张三'},{id:2,name:'李四'}];lettarget=ary.find((item,index)=>item.id==2)
    <scripttype="text/javascript"> varary=[{ id:1, name:'张三' },{ id:2, name:'李四' }]; lettarget=ary.find((item)=>{ returnitem.id==1; }); console.log(target); </script>

    ES6的内置对象扩展方法怎么用

    5.findIndex()

    用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1

    letary=[1,5,10,15];letindex=ary.findIndex((value,index)=>value>9);console.log(index);//2
    <scripttype="text/javascript"> letary=[10,20,50]; letindex=ary.findIndex((item)=>{ returnitem>15; }); console.log(index);//1 </script>

    6.includes()

    表示某个数组是否包含给定的值,返回布尔值

    [1,2,3].includes(2);//true[1,2,3].includes(4);//false
     </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
    本文:ES6的内置对象扩展方法怎么用的详细内容,希望对您有所帮助,信息来源于网络。
    上一篇:Vue 2.7的功能有哪些下一篇:

    9 人围观 / 0 条评论 ↓快速评论↓

    (必须)

    (必须,保密)

    阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18