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;随着开源工具的发…

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

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

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. 死锁产生后的解决 一. 死锁出现的场景…

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

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

深度学习基础知识-残差网络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;原生鸿蒙操作系统在中国市…

Python 多个版本管理 -- 最简方式

目录 一、下载Python文件 二、安装文件&#xff0c;并配置环境变量 三、重命名Python.exe 四、配置完毕&#xff0c;开始使用&#xff0c;效果图 一、下载Python文件 Python 官方地址The official home of the Python Programming Languagehttps://www.python.org/downloa…

C#的Event事件示例小白级剖析

1、委托Delegate 首先说一下delegate委托&#xff0c;委托是将方法作为参数进行传递。 // 定义了一个委托类型public delegate void MyDelegate(int num);// 定义了一个啥也不干的委托实例public MyDelegate m_delegate _ > {};// 定义了一个和委托相同格式的方法public …

流畅!HTMLCSS打造网格方块加载动画

效果演示 这个动画的效果是五个方块在网格中上下移动&#xff0c;模拟了一个连续的加载过程。每个方块的动画都是独立的&#xff0c;但是它们的时间间隔和路径被设计为相互协调&#xff0c;以创建出流畅的动画效果。 HTML <div class"loadingspinner"><…

Java Iterator 实现杨辉三角

一、问题描述 杨辉三角定义如下&#xff1a; 1/ \1 1/ \ / \1 2 1/ \ / \ / \1 3 3 1/ \ / \ / \ / \1 4 6 4 1/ \ / \ / \ / \ / \ 1 5 10 10 5 1 把每一行看做一个list&#xff0c;试写一个 Iterator&#xff0c;不断输出下一行的 list&#xf…

PostGis--几何构造函数

目录 1、简介2、ST_Centroid / ST_PointOnSurface3、ST_Buffer4、ST_Intersection5、ST_Union6、substr和substringPS: 1、简介 接着上一个文章&#xff1a; 到目前为止&#xff0c;我们看到的所有函数都“按原样”处理几何图形并返回 对象分析&#xff08;ST_Length&#xf…