ES6中数组新增了哪些扩展?

ES6中数组新增了哪些扩展?

在这里插入图片描述

1、扩展运算符的应⽤

ES6通过扩展元素符 … ,好⽐ rest 参数的逆运算,将⼀个数组转为⽤逗号分隔的参数序列

console.log(...[1, 2, 3]) 
// 1 2 3 3 
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5 
[...document.querySelectorAll('div')] 
// [<div>, <div>, <div>]

主要⽤于函数调⽤的时候,将⼀个数组变为参数序列

      function push(array, ...items) {array.push(...items);}function add(x, y) {return x + y;}const numbers = [4, 38];add(...numbers); // 42

可以将某些数据结构转为数组

[...document.querySelectorAll('div')]

能够更简单实现数组复制

const a1 = [1, 2]; 
const [...a2] = a1; 
// [1,2]

数组的合并也更为简洁了

      const arr1 = ["a", "b"];const arr2 = ["c"];const arr3 = ["d", "e"];[...arr1, ...arr2, ...arr3]; // [ 'a', 'b', 'c', 'd', 'e' ]

注意:通过扩展运算符实现的是浅拷⻉,修改了引⽤指向的值,会同步反映到新数组
下⾯看个例⼦就清楚多了

 const arr1 = ['a', 'b', [1, 2]]; const arr2 = ['c']; const arr3 = [...arr1, ...arr2] arr[1][0] = 9999 // 修改arr1⾥⾯数组成员值 console.log(arr[3]) // 影响到arr3,['a','b',[9999,2],'c']

扩展运算符可以与解构赋值结合起来,⽤于⽣成数组

const [first, ...rest] = [1, 2, 3, 4, 5]; 
first // 1 
rest // [2, 3, 4, 5] 
const [first, ...rest] = []; 
first // undefined 
rest // [] 
const [first, ...rest] = ["foo"]; 
first // "foo" 
rest // []

如果将扩展运算符⽤于数组赋值,只能放在参数的最后⼀位,否则会报错

const [...butLast, last] = [1, 2, 3, 4, 5]; 
// 报错 
const [first, ...middle, last] = [1, 2, 3, 4, 5]; 
// 报错

可以将字符串转为真正的数组

[...'hello'] // [ "h", "e", "l", "l", "o" ]

定义了遍历器(Iterator)接⼝的对象,都可以⽤扩展运算符转为真正的数组

let nodeList = document.querySelectorAll('div'); 
let array = [...nodeList]; 
let map = new Map([ [1, 'one'],[2, 'two'], [3, 'three'], ]); 
let arr = [...map.keys()]; // [1, 2, 3]

如果对没有 Iterator 接⼝的对象,使⽤扩展运算符,将会报错

const obj = {a: 1, b: 2}; 
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

2、构造函数新增的⽅法

关于构造函数,数组新增的⽅法有如下:
• Array.from()
• Array.of()

2.1、Array.from()

将两类对象转为真正的数组:类似数组的对象和可遍历 (iterable) 的对象(包括 ES6 新增的数 据结构 Set 和 Map )

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 };
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

还可以接受第⼆个参数,⽤来对每个元素进⾏处理,将处理后的值放⼊返回的数组

Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
2.2、Array.of()

⽤于将⼀组值,转换为数组

Array.of(3, 11, 8) // [3,11,8]

没有参数的时候,返回⼀个空数组
当参数只有⼀个的时候,实际上是指定数组的⻓度
参数个数不少于 2 个时, Array() 才会返回由参数组成的新数组

Array() // [] 
Array(3) // [, , ,] 
Array(3, 11, 8) // [3, 11, 8]

3、实例对象新增的⽅法

关于数组实例对象新增的⽅法有如下:
• copyWithin()
• find()、findIndex()
• fill()
• entries(),keys(),values()
• includes()
• flat(),flatMap()

3.1、copyWithin()

将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组
参数如下:
• target(必需):从该位置开始替换数据。如果为负值,表⽰倒数。
• start(可选):从该位置开始读取数据,默认为 0。如果为负值,表⽰从末尾开始计算。
• end(可选):到该位置前停⽌读取数据,默认等于数组⻓度。如果为负值,表⽰从末尾开始计算

[1, 2, 3, 4, 5].copyWithin(0, 3) // 将从 3 号位直到数组结束的成员(4 和 5),复制到 从 0 号位开始的位置,结果覆盖了原来的 1 和 2 
// [4, 5, 3, 4, 5]
3.2、find()、findIndex()

find() ⽤于找出第⼀个符合条件的数组成员
参数是⼀个回调函数,接受三个参数依次为当前的值、当前的位置和原数组

[1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10

findIndex 返回第⼀个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2

这两个⽅法都可以接受第⼆个参数,⽤来绑定回调函数的 this 对象。

function f(v) {return v > this.age;}let person = { name: 'John', age: 20 };[10, 12, 26, 15].find(f, person); // 26
3.3、fill()

使⽤给定值,填充⼀个数组

['a', 'b', 'c'].fill(7) 
// [7, 7, 7] 
new Array(3).fill(7) 
// [7, 7, 7]

还可以接受第⼆个和第三个参数,⽤于指定填充的起始位置和结束位置

['a', 'b', 'c'].fill(7, 1, 2) 
// ['a', 7, 'c']

注意,如果填充的类型为对象,则是浅拷⻉

3.4、entries(),keys(),values()

keys() 是对键名的遍历、 values() 是对键值的遍历, entries() 是对键值对的遍历

   for(let index of['a', 'b'].keys()) {console.log(index);}// 0 // 1 for (let elem of ['a', 'b'].values()) {console.log(elem);}// 'a' // 'b' for (let [index, elem] of ['a', 'b'].entries()) {console.log(index, elem);}// 0 "a"
3.5、includes()

⽤于判断数组是否包含给定的值

[1, 2, 3].includes(2) // true 
[1, 2, 3].includes(4) // false 
[1, 2, NaN].includes(NaN) // true

⽅法的第⼆个参数表⽰搜索的起始位置,默认为 0
参数为负数则表⽰倒数的位置

[1, 2, 3].includes(3, 3); // false 
[1, 2, 3].includes(3, -1); // true
3.6、flat(),flatMap()

将数组扁平化处理,返回⼀个新数组,对原数据没有影响

[1, 2, [3, 4]].flat() // [1, 2, 3, 4]

flat() 默认只会“拉平”⼀层,如果想要“拉平”多层的嵌套数组,可以将 flat() ⽅法的参数 写成⼀个整数,表⽰想要拉平的层数,默认为1

[1, 2, [3, [4, 5]]].flat() 
// [1, 2, 3, [4, 5]] 
[1, 2, [3, [4, 5]]].flat(2) 
// [1, 2, 3, 4, 5]

flatMap() ⽅法对原数组的每个成员执⾏⼀个函数相当于执⾏ Array.prototype.map() ,然 后对返回值组成的数组执⾏ flat() ⽅法。该⽅法返回⼀个新数组,不改变原数组

// 相当于 [[2, 4], [3, 6], [4, 8]].flat() [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]

flatMap() ⽅法还可以有第⼆个参数,⽤来绑定遍历函数⾥⾯的 this

4、数组的空位

数组的空位指,数组的某⼀个位置没有任何值 ES6 则是明确将空位转为 undefined ,包括 Array.from 、扩展运算符、 copyWithin() 、 fill() 、 entries() 、 keys() 、 values() 、 find() 和 findIndex() 建议⼤家在⽇常书写中,避免出现空位

5、排序稳定性

将 sort() 默认设置为稳定的排序算法

    const arr = ['peach', 'straw', 'apple', 'spork'];const stableSorting = (s1, s2) => {if (s1[0] < s2[0]) return -1;return 1;};arr.sort(stableSorting)  // ["apple", "peach", "straw", "spork"]

排序结果中, straw 在 spork 的前⾯,跟原始顺序⼀致

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/884746.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件

Slider 和 Progress 是鸿蒙系统中的常用 UI 组件。Slider 控制数值输入&#xff0c;如音量调节&#xff1b;Progress 显示任务的完成状态&#xff0c;如下载进度。本文通过代码示例展示如何使用这些组件&#xff0c;并涵盖 进度条类型介绍、节流优化、状态同步 和 定时器动态更…

GitHub个人主页美化

效果展示 展示为静态效果&#xff0c;动态效果请查看我的GitHub页面 创建GitHub仓库 创建与GitHub用户名相同的仓库&#xff0c;当仓库名与用户名相同时&#xff0c;此仓库会被视作特殊仓库&#xff0c;其README.md&#xff08;自述文件&#xff09;会展示在GitHub个人主页…

Windows 命令提示符(cmd)中输入 mysql 并收到错误消息“MySQL不是内部或外部命令,也不是可运行的程序或批处理文件?

目录 背景: 过程&#xff1a; 1.找到MySQL安装的路径 2.编辑环境变量 3.打开cmd&#xff0c;输入mysql --version测试成功 总结: 背景: 很早之前安装了Mysql数据库&#xff0c;想查询一下当前安装的MySQL客户端的版本号&#xff0c;我在命令行界面输入mysql --verion命令回…

<项目代码>YOLOv8 夜间车辆识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

太强了!Ollama + MaxKB零代码本地搭建个人知识库AI应用,数据安全,还可以有权限控制!!

零代码本地搭建AI应用 &#x1f4da; 借助开源的&#xff0c;大模型应用不再遥不可及 &#x1f680; 当提到“大模型”和“本地部署”&#xff0c;很多人可能第一反应是&#xff1a;“这是不是只有那些顶尖的技术大牛才能搞定&#xff1f;” 其实&#xff0c;随着开源工具的发…

速盾:企业该如何判断高防cdn的质量?

随着互联网的快速发展&#xff0c;网络安全问题也越来越突出。为了保护企业的网络安全&#xff0c;许多企业都选择了使用CDN&#xff08;内容分发网络&#xff09;来加强对自身网站的防护。而在选择CDN服务时&#xff0c;高防CDN无疑是企业的首选。那么&#xff0c;企业应该如何…

Unreal5从入门到精通之如何在指定的显示器上运行UE程序

前言 我们有一个设备,是一个带双显示器的机柜,主显示器是一个小竖屏,可以触屏操作,大显示器是一个普通的横屏显示器。我们用这个机柜的原因就是可以摆脱鼠标和键盘,直接使用触屏操作,又可以在大屏观看,非常适合用于教学。 然后我们为这款机柜做了很多个VR项目,包括Uni…

人工智能技术在网络安全领域被恶意利用

知识图谱 1. 量子信息技术├── 1.1 量子计算│ └── 威胁现有密码学│ └── 抗量子攻击的密码算法├── 1.2 量子通信│ └── 极高的安全性│ └── 量子密钥分发 (QKD)│ └── 检测窃听行为2. 云计算├── 2.1 多…

Docker安装XXL-JOB分布式调度任务

一、持久化 1、下载 xxl-job 源码,找到持久化脚本 2、创建 xxl-job 数据库,将上述文件中的脚本在本库执行即可 create database xxl_job charset utf8mb4 collate utf8mb4_general_ci; 二、安装 1、下载 xxl-job 镜像 docker pull xuxueli/xxl-job-admin:2.4.1 2、创建…

【华为HCIP实战课程三十】中间到中间系统协议IS-IS路由渗透及TAG标识详解,网络工程师

一、路由泄露 1、默认情况Level 1不会学到Level2的明细路由&#xff0c;L2可以学到L1的明细路由 2、FIB数据转发&#xff0c;路由负载&#xff0c;通过随机数据中的五元组hash,hash值决定数据走哪条链路 R1设备ping和telnet通过抓包查看走的都是S1/0/0接口 抓包进行过滤;ip.a…

如何将MySQL彻底卸载干净

目录 背景&#xff1a; MySQL的卸载 步骤1&#xff1a;停止MySQL服务 步骤2&#xff1a;软件的卸载 步骤3&#xff1a;残余文件的清理 步骤4&#xff1a;清理注册表 步骤五:删除环境变量配置 总结&#xff1a; 背景&#xff1a; MySQL卸载不彻底往往会导致重新安装失败…

死锁(Dead Lock)

目录 一. 死锁出现的场景 1. 一个线程, 一个锁对象 2. 两个线程, 两个锁对象 3. N个线程, M个锁对象 二. 造成死锁的必要条件 1. 锁是互斥的 2. 锁是不可被抢占的 3.请求和保持 4. 循环等待 三. 死锁的解决方案 1. 预防死锁 2. 死锁产生后的解决 一. 死锁出现的场景…

C++各个版本的主要特性

C是一种高级编程语言&#xff0c;以其强大的功能、灵活性和高效性而闻名。随着C标准的不断更新&#xff0c;C语言持续发展&#xff0c;各个版本引入了不同的主要特性&#xff0c;以适应现代软件开发的需求。以下是对C各个版本主要特性的归纳&#xff1a; C98/03 值初始化&…

【Android 系统中使用CallStack类来追踪获取和操作调用栈信息】

Android系统CallStack类的使用 定义使用方法使用场景注意事项应用举例 定义 在 Android 系统中&#xff0c;CallStack 类是一个用于获取和操作调用栈信息的工具类。这个类通常用于调试和日志记录&#xff0c;以帮助开发者了解函数调用的顺序和位置。以下是您提供的代码片段的解…

自然语言处理方向学习建议

自然语言处理方向学习建议 自然语言处理&#xff08;NLP&#xff09;作为人工智能的一个重要分支&#xff0c;近年来在学术界和工业界都取得了显著的发展。作为即将或正在攻读博士学位的你&#xff0c;投身于NLP领域无疑是一个充满挑战与机遇的选择。以下是一些针对NLP方向学习…

深度学习基础知识-残差网络ResNet

目录 一、ResNet 的核心思想&#xff1a;残差学习&#xff08;Residual Learning&#xff09; 二、ResNet 的基本原理 三、ResNet 网络结构 1. 残差块&#xff08;Residual Block&#xff09; ResNet 的跳跃连接类型 2. 网络结构图示 四、ResNet 的特点和优势 五、ResNe…

【Mac】安装 VMware Fusion Pro

VMware Fusion Pro 软件已经正式免费提供给个人用户使用&#xff01; 1、下载 【官网】 下拉找到 VMware Fusion Pro Download 登陆账号 如果没有账号&#xff0c;点击右上角 LOGIN &#xff0c;选择 REGISTER 注册信息除了邮箱外可随意填写 登陆时&#xff0c;Username为…

基于springboot+vue实现的网上书店系统 (源码+L文)

基于springbootvue实现的网上书店系统 &#xff08;源码L文&#xff09;4-104 5.1 系统主要功能设计 整体系统的主要功能模块如图5-1&#xff1a; 图5-1系统总体功能图 5.1.1 用户端功能 用户端的主要功能设计包括首页、图书信息、商城公告、购物车等模块&#xff0c;这些功…

鸿蒙5.0时代:原生鸿蒙应用市场引领开发者服务新篇章

前言 10月22日原生鸿蒙之夜发布会宣布HarmonyOS NEXT正式发布&#xff0c;首个版本号&#xff1a;鸿蒙5.0。这次“纯血鸿蒙”脱离了底层安卓架构成为纯国产的独立系统&#xff0c;仅凭这一点就有很多想象空间。 目前鸿蒙生态设备已超10亿&#xff0c;原生鸿蒙操作系统在中国市…

算法效率(时间复杂度、空间复杂度,提高算法效率的方法)

目录 1.复杂度的概念 2.复杂度的重要性 3.时间复杂度 3.1⼤O的渐进表⽰法 4.空间复杂度 5.提高算法效率的方法 算法效率‌是指算法执行的时间&#xff0c;具体来说&#xff0c;是通过依据该算法编制的程序在计算机上运行时所消耗的时间来度量的‌。算法效率是衡量算法优劣…