ES6数组的扩展

news/2024/7/10 22:38:43 标签: es6, 前端, javascript

1.扩展运算符

说明:rest参数的逆运算,将数组转换为用逗号隔开的参数序列

javascript">function fun(a) {
   console.log(...a); //1 2 3
  }
  fun([1, 2, 3])

2.扩展运算符的应用

        2.1例子1

javascript">const arr2 = [1, 2, 3]
const arr3 = arr2
arr2[0] = 10
console.log(arr3); //[10,2,3]

说明:当两个引用变量指向同一个对象,如果一个变量,指向另一个变量,那么修改对象里面的值,其他所有的变量看到的是修改后的值

          2.2复制数组

javascript"> const arr = [1, 2, 3]
 const arr1 = [...arr]
 arr[0] = 10
console.log(arr1); //[1,2,3]

        2.3合并数组

javascript"> const arr4 = [1, 2]
const arr5 = [3, 4]
const arr6 = [8, 9]
const arr7 = [...arr4, ...arr5, ...arr6]
const arr8 = arr4.concat(arr5, arr6)
console.log(arr8); //[1, 2, 3, 4, 8, 9]
 console.log(arr7); // [1, 2, 3, 4, 8, 9]

说明:上面合并方法都是浅拷贝

        2.4与解构赋值解构

javascript"> const [first, ...rest] = [1, 2, 3, 4, 5]
        console.log(first); //1 
        console.log(rest);[2, 3, 4, 5]

        2.5解构字符串

javascript">  const value = [...'hello']
      console.log(value);['h', 'e', 'l', 'l', 'o']

        2.6Map和Set结构,Generator函数

        说明: 扩展运算符内部调用的是数据结构的Iterator接口

javascript">  let map = new Map([[1, "张三"], [2, "李四"], [3, "王二"]])
        let arr9 = [...map.keys()]
        let arr10 = [...map.values()]
        let arr11 = [...map.entries()]
        console.log(arr9); //[1, 2, 3]
        console.log(arr10); //['张三', '李四', '王二']
        console.log(arr11); //[Array(2), Array(2), Array(2)]

        Generator函数运行后,返回一个遍历器对象

javascript">  const arr12 = function* () {
            yield 1;
            yield 2;
            yield 3;
        }
        console.log(...arr12());  //1 2 3

3. Array.of()

        解释:将一组值转换为数组

javascript">   let arr17=Array.of(1,2,3,4,5)
        console.log(arr17); //[1, 2, 3, 4, 5]

        说明:Array.of()总是返回参数值组成的数组。如果没有参数,就返回一个空数组。 

4.Array.from()

        解释: 类似数组的对象和可遍历的对象转变成数组

javascript"> let likeArray = {
            0: "张三",
            1: "李四",
            2: "王二",
            length: 3
        }

        ES6之前

        注意:JavaScript中的原型链是通过原型对象来实现的

javascript">    const arr14 = [].slice.call(likeArray)
        console.log(arr14); // ['张三', '李四', '王二']

        ES6之后

javascript"> let arr13 = Array.from(likeArray)
        console.log(arr13); //['张三', '李四', '王二']

        4.1Array.from()第一个参数

说明:如果参数为数组,也要返回一摸一样的数组

javascript"> let arr15=[1,2]
        console.log(Array.from(arr15)); //[1, 2]

        4.2Array.from()第二个参数

        说明:Array.from()还可以接受一个函数作为第二个参数,类似与数组的map()方法

javascript"> let arr16=Array.from([1,2],(a)=>a*3)
        console.log(arr16); //[3,6]

        4.3Array.from()第三个参数

        说明:Array.from()还可以接受this作为它的第三个参数

5.find()

        说明:用于找出第一个符合条件的数组成员。它的参数是一个回调函数,没有找到就返回undefined;回调函数有三个参数,第一个是当前值,第二个是当前值的索引,第三个值原数组。

javascript">      let num=[1,2,3].find(a=>a>2)
      console.log(num); //3

6.findIndex()

说明:类似于find方法,只是数组成员都不符合条件,那么返回-1

7.findLast()和findLastIndex()

说明:从数组的最后一个成员开始,依次向前检查,其他保持不变

8.fill()

说明:使用给定值,填充一个数组,还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

javascript"> const arr18=["a","b","c"].fill(5)
    console.log(arr18);   //[5, 5, 5]
 const arr19=["1","2","3"].fill("李四",2,3)
    console.log(arr19); //['1', '2', '李四']

9. includes()

说明:判断某个数组中是否包含指定值

javascript"> const arr20=["a","b"]
    console.log(arr20.includes("a")); //true

没有这个方法之前用 

javascript">    if(arr20.indexOf("a")==-1){
       
    }

10.flat()

说明:数组成员有时候还是数组,那么可以使用flat()用于将嵌套数组提取出来,变成一维数组

javascript"> const arr21=[1,23,4,[12,12]]
    console.log(arr21.flat());//[1, 23, 4, 12, 12]  

 注意:float默认参数为1,如果想要提取多个层,那么写上整数就好了,不管写多少层,在flat参数中写上infinity就可以无论多少层

11.flatMap()

说明:对原数组每一个成员执行一个函数,相当于Array.prototype.map()

javascript">  const arr22=[1,2,4]
    //  当然参数是函数和this,函数可以接受三个值,当前值,当前的索引,原数组
     console.log(arr22.flatMap((a)=>a*10));  //[10, 20, 40]  只能展开一层数组。

12at()

说明:检索指定索引对应的值,可以为负。

javascript">  const arr23=[5,12,25,14]
        console.log(arr23.at(1)); // 12
        console.log(arr23.at(-1)); //14

         


http://www.niftyadmin.cn/n/317082.html

相关文章

路径规划算法:基于麻雀优化的路径规划算法- 附代码

路径规划算法:基于麻雀优化的路径规划算法- 附代码 文章目录 路径规划算法:基于麻雀优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要:本文主要介绍利用智能优化算法麻雀…

嵌入式系统中常见的摄像头接口

MIPI CSI:MIPI CSI(Mobile Industry Processor Interface Camera Serial Interface)是一种专用于手机和移动媒体设备的摄像头接口标准。它具有高速传输、低功耗和可靠性等优点,已经成为现代嵌入式摄像头的主要接口之一。 USB cam…

你不知道的裁员攻略:真正的离职赔偿是2N起步,不是N+1!计算赔偿金时,年终奖要计入总收入!...

最近裁员现象猖獗,许多人都不知道如何维护自己的合法权益,在和公司撕扯时屡屡被坑。一位曾经和字节撕过且成功的网友,友情给大家写了一份离职攻略。但要注意,这份攻略只针对那些守规矩的大公司,如果是不守规矩的小公司…

Grafana系列-统一展示-8-ElasticSearch日志快速搜索仪表板

系列文章 Grafana 系列文章 概述 我们是基于这篇文章: Grafana 系列文章(十二):如何使用 Loki 创建一个用于搜索日志的 Grafana 仪表板, 创建一个类似的, 但是基于 ElasticSearch 的日志快速搜索仪表板. 最终完整效果如下: 📝…

Django SQL注入漏洞 CVE-2022-28346

漏洞简介 Django 在2022年发布的安全更新&#xff0c;修复了在 QuerySet 的 annotate()&#xff0c; aggregate()&#xff0c; extra() 等函数中存在的 SQL 注入漏洞。 影响版本 2.2< Django Django <2.2.283.2< Django Django <3.2.134.0< Django Django <4…

Python入门(六)if语句(一)

if语句&#xff08;一&#xff09; 1.概述2.一个简单的实例3. 条件测试3.1 检查是否相等3.2 数值比较3.3 检查多个条件3.4 布尔表达式 作者&#xff1a;xiou 1.概述 编程时经常需要检查一系列条件&#xff0c;并据此决定采取什么措施。在Python中&#xff0c;if语句让你能够检…

如何使用 SVG.js 中的一些相关方法来创建、设置和操作 image 元素

SVG.js 是一个基于 JavaScript 的 SVG 库&#xff0c;提供了许多常用的 SVG 元素和方法&#xff0c;方便开发者进行 SVG 图形的创建和操作。其中&#xff0c;image 元素是 SVG.js 中较为常用的元素之一&#xff0c;本文将详细介绍 SVG.js 中与 image 元素相关的方法。 一、创建…

基于Python3的tkinter Text文本框加滚动条显示信息

用tkinter进行界面程序开发中&#xff0c;经常需要将信息展示到界面上&#xff0c;给用户及时的反馈和想要看到的结果。Text控件允许用户以不同的样式、属性来显示和编辑文本&#xff0c;它可以包含纯文本或者格式化文本&#xff0c;同时支持嵌入图片、显示超链接以及带有 CSS …