ES6-ES13学习笔记(5.0)

news/2024/7/10 22:39:54 标签: es6, es13, 学习, 笔记, 前端

ES2022的函数

//findLast findLastIndex()  ES2022

发现在电脑自带的联想浏览器不支持此函数,还报错了

对于ECMA的支持还和浏览器有关以及浏览器版本有关,然后我使用Google浏览器就可以正常使用,

 

 1.扩展运算符:三个点...    

 ...复制为浅复制,如果数组中拥有嵌套就不行了

2.array.from 转换为数组

3.Array.of 

注意与Array()的区别,如果直接使用Array(5),只是声明只有5个内容的空数组,而Array.of (5)则是声明数组元素为5的数组,即[5]。

4.find findIndex()  正序查找

//findLast findLastIndex()  ES2022  逆序查找

5.//flat() flatMap()

扁平化处理,将高维数组转换成一维数组

flatMap()适合复杂对象的展开

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-06-01 09:41:03
 * @LastEditors: Mei
 * @LastEditTime: 2023-06-01 10:34:43
 * @FilePath: \vscode\ECMA\06\01.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        //1.扩展运算符  ...复制为浅复制,如果数组中拥有嵌套就不行了
        let arr1=[1,2,3]
        let arr2=['a','b','c']
        let arr3=arr1.concat()
        arr3.pop()
        let arr4=[...arr2]
        console.log(arr1)
        console.log(arr2)
        console.log(arr3)
        console.log(arr4)

        let arr5=[4,5,6]
        console.log([...arr1,...arr5])
        let myarr=[1,2,3,4,5,6,7,8]
        let [a,b,...c]=myarr
        console.log(a,b,c)

        //2. Array.from
        //arguments

        function test(){
            console.log(Array.from(arguments))
            console.log(arguments)
        }
        test(1,2,3,4)

        let olis=document.querySelectorAll("li")
        console.log(olis)
        Array.from(olis).map(function(){})

        //3.  Array.of
        let arr=[1,2,3]
        let arr6=Array(1,2,3)
        let arr7=Array.of(1,2,3)
        let arr8=Array(5)
        let arr9=Array.of(5)
        console.log(arr6,arr7)
        console.log(arr8)
        console.log(arr9)

        //4. find findIndex()

        let arr10=[11,12,13,14,15]

        let res=arr10.find(function(item){
            return item>13
        })
        let res2=arr10.findIndex(function(item){
            return item>13
        })
        console.log(res)
        console.log(res2)

        //findLast findLastIndex()  ES2022
        // let res3=arr10.findLast(function(item){
        //     return item>13
        // })
        // console.log(res3)

        let arr11=new Array(3).fill('mez')
        console.log(arr11)
        let arr12=[11,22,33]
        console.log(arr12.fill("mez",1,2))


        //flat() flatMap()

        let arr13=[1,2,3,[4,5,6]]
        let arr14=arr13.flat()
        console.log(arr13,arr14)
        
        let arr15=[
            {
                name:"A",
                list:["安阳,鞍山"]
            },
            {
                name:"B",
                list:["北京","保定"]
            }
            
        ]
        console.log(arr15.flat())
        let res4=arr15.flatMap(function(item){
            return item.list
        })
        console.log(res4)
    </script>
</body>
</html>

 

 


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

相关文章

STCube 串口通信开发过程/STM32F334串口通信程序源码工程--亲测直接可用

目录 一.参数选项修改 1.模式选择 2.硬件流控制: 3.基本参数设置 a.引脚参数配置图

【数据分析之道-Matplotlib(六)】Matplotlib饼图

文章目录 专栏导读1、Matplotlib饼图pie()语法格式2、设置饼图各个扇形的标签与颜色3、突出显示第二个扇形&#xff0c;并格式化输出百分比4、shadows通过将参数设置为&#xff1a;向饼图添加阴影 True5、使用legend()函数为每个楔形添加解释列表6、将title参数添加到legend 函…

开源赋能 普惠未来|中软国际寄语 2023 开放原子全球开源峰会

中软国际作为行业领先的全球化软件与信息技术服务企业及数字化转型服务商&#xff0c;近年来积极布局开源生态&#xff08;OpenHarmony、openEuler&#xff09;、智能云、ERP、AIGC、教育科技、智能车六大赛道&#xff0c;加速业务转型创新。 中软国际为开放原子开源基金会白金…

7个CICD工具大比拼,谁最牛逼

文章目录 一、Gitlab二、Travis CI三、Jenkins四、Circle CI五、Bamboo六、Codeship七、TeamCity Devops的盛行推动着CI/CD工具的快速发展&#xff0c;除了传统的CI工具&#xff0c;也出现了很多新兴的CI/CD框架&#xff0c;这些框架各有优缺点&#xff0c;究竟该如何选择&…

1164 Good in C(38行代码+超详细注释)

分数 20 全屏浏览题目 切换布局 作者 陈越 单位 浙江大学 When your interviewer asks you to write "Hello World" using C, can you do as the following figure shows? Input Specification: Each input file contains one test case. For each case, the …

​LeetCode解法汇总2517. 礼盒的最大甜蜜度

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣 描述&#xff1a; 给你一个正整数数组 price &#xff0c;其中 price[i] 表示第 i 类糖果的价格&a…

WPS小技巧:在word进行手写批注、观看版式、自动保存、检测拼写错误的单词。

手写批注&#xff1a; 在审阅中可以看到一个画笔功能 点开后可以进行手写批注&#xff1a; 观看版式&#xff1a; 在视图选项卡中可以看到各种不同的版式&#xff1a; 选择不同&#xff0c;表现效果也不同&#xff1a; 全屏显示&#xff1a; 阅读模式&#xff1a; 写作模式&am…

【论文总结】Drifuzz: Harvesting Bugs in Device Drivers from Golden Seeds

Drifuzz:从金种子中收获设备驱动程序中的漏洞 摘要: 现代计算机中的外围硬件通常被认为是安全的且不带恶意&#xff0c;并且设备驱动程序以信任从硬件输入的方式实现。然而&#xff0c;最近的漏洞攻击&#xff08;如Broadpwn&#xff09;已经证明攻击者可以通过易受攻击的外围…