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.rhkb.cn/news/463616.html

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

相关文章

基于物联网的户外环境检测装置教学文章

引言 随着物联网&#xff08;IoT&#xff09;技术的发展&#xff0c;越来越多的应用被广泛研究和应用于我们的日常生活中。户外环境检测装置是一种利用传感器、网络连接和数据分析技术&#xff0c;监测和分析环境数据&#xff08;如温度、湿度、空气质量等&#xff09;的设备。…

ubuntu20安装opencv3.2记录

系统环境 ubuntu20安装了ros-noetic&#xff0c;所以系统默认装了opencv4.2.0&#xff0c;但是跑fastlivo推荐的是opencv3.2.0&#xff0c;而且海康相机别人写的ros驱动&#xff08;海康相机ros驱动&#xff09;也是需要opencv3.2.0&#xff0c;最终还是选择安装多版本的openc…

全!新!LLM推理加速调研

本文主要内容 介绍一篇大模型推理加速综述论文&#xff0c;简单说明了LLM推理加速的基本内容。 介绍了推理阶段的prefilling&#xff08;主要方向&#xff1a;计算优化&#xff09;和decoding&#xff08;主要方向&#xff1a;内存优化&#xff09;差异。 prefilling优化方面…

大数据-206 数据挖掘 机器学习理论 - 多元线性回归 回归算法实现 算法评估指标

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

Python+Appium+Pytest+Allure自动化测试框架-安装篇

文章目录 安装安装ADT安装NodeJs安装python安装appium安装Appium Server&#xff08;可选&#xff09;安装Appium-Inspector&#xff08;可选&#xff09;安装allure安装pytest PythonAppiumPytestAllure框架的安装 Appium是一个开源工具&#xff0c;是跨平台的&#xff0c;用于…

Nature Methods | 新型三维光场显微成像技术

欢迎关注GZH《光场视觉》 近日&#xff0c;中科院脑科学与智能技术卓越创新中心王凯研究组在《自然方法》&#xff08;Nature Methods&#xff09;上&#xff0c;在线发表了题为Volumetric Voltage Imaging of Neuronal Populations in Mouse Brain by Confocal Light Field M…

深度学习基础—循环神经网络的梯度消失与解决

引言 深度学习基础—循环神经网络&#xff08;RNN&#xff09;https://blog.csdn.net/sniper_fandc/article/details/143417972?fromshareblogdetail&sharetypeblogdetail&sharerId143417972&sharereferPC&sharesourcesniper_fandc&sharefromfrom_link深…

基于向量检索的RAG大模型

一、什么是向量 向量是一种有大小和方向的数学对象。它可以表示为从一个点到另一个点的有向线段。例如&#xff0c;二维空间中的向量可以表示为 (&#x1d465;,&#x1d466;) &#xff0c;表示从原点 (0,0)到点 (&#x1d465;,&#x1d466;)的有向线段。 1.1、文本向量 1…

Bartender 5 for Mac 菜单栏管理软件 安装教程【保姆级教程,操作简单小白轻松上手使用】

Mac分享吧 文章目录 Bartender 5 for Mac 菜单栏管理软件 安装完成&#xff0c;软件打开效果一、Bartender 5 菜单栏管理软件 Mac电脑版——v5.2.3⚠️注意事项&#xff1a;1️⃣&#xff1a;下载软件2️⃣&#xff1a;安装软件3️⃣&#xff1a;打开软件&#xff0c;根据自己…

国产操作系统重新安装软件商店

国产操作系统类似于手机的“应用商店”&#xff0c;都会有一个“软件商店”&#xff0c;方便用户安装管理电脑的软件。这个软件商店不仅有各种软件&#xff0c;还有各类外设驱动和移动应用环境模拟功能。软件商店可以下载安装软件&#xff0c;还可以更新、卸载软件。 软件商店 …

FastAPI中如果async def和def 路由的区别

在python的整体生态中&#xff0c;虽然已经有很多库支持了异步调用&#xff0c;如可以使用httpx或者aiohttp代替requests库发起http请求&#xff0c;使用asyncio.sleep 代替time.sleep&#xff0c; 但是依然还有很多优秀的第三方库是不支持异步调用也没有可代替的库&#xff0c…

Pinctrl子系统中Pincontroller和client驱动程序的编写

往期内容 本专栏往期内容&#xff1a; Pinctrl子系统和其主要结构体引入Pinctrl子系统pinctrl_desc结构体进一步介绍Pinctrl子系统中client端设备树相关数据结构介绍和解析inctrl子系统中Pincontroller构造过程驱动分析&#xff1a;imx_pinctrl_soc_info结构体Pinctrl子系统中c…

【C++动态规划】2435. 矩阵中和能被 K 整除的路径|1951

本文涉及知识点 C动态规划 LeetCode2435. 矩阵中和能被 K 整除的路径 给你一个下标从 0 开始的 m x n 整数矩阵 grid 和一个整数 k 。你从起点 (0, 0) 出发&#xff0c;每一步只能往 下 或者往 右 &#xff0c;你想要到达终点 (m - 1, n - 1) 。 请你返回路径和能被 k 整除的…

【QT】Qt对话框

个人主页~ Qt窗口属性~ Qt窗口 五、对话框2、Qt内置对话框&#xff08;1&#xff09;Message Box&#xff08;2&#xff09;QColorDialog&#xff08;3&#xff09;QFileDialog&#xff08;4&#xff09;QFontDialog&#xff08;5&#xff09;QInputDialog 五、对话框 2、Qt内…

视频推荐的算法(字节青训)

题目&#xff1a; 西瓜视频 正在开发一个新功能&#xff0c;旨在将访问量达到80百分位数以上的视频展示在首页的推荐列表中。实现一个程序&#xff0c;计算给定数据中的80百分位数。 例如&#xff1a;假设有一个包含从1到100的整数数组&#xff0c;80百分位数的值为80&#…

线程基础知识、jmm(Java内存模型)

目录 线程基础知识 并发与并行 进程和线程 线程优先级 创建线程的方式主要有三种 休眠 作出让步 join() 方法 线程协作注意什么 理解线程状态 选择合适的协作工具 共享资源的访问控制 避免竞争条件 创建线程几种方式 线程状态&#xff0c;状态之间切换 新建&…

2.数组越界访问如何调试HardFault错误

数组越界 在项目开发过程中&#xff0c;配置串口外设是一个常见的任务&#xff0c;但在实际操作中&#xff0c;我们可能会遇到一些预料之外的问题。例如&#xff0c;在调试过程中&#xff0c;我们发现单片机只接受了一次数据后便不再接收&#xff0c;这无疑是一个棘手的问题。…

0-ARM Linux驱动开发-字符设备

一、字符设备概述 Linux 系统中&#xff0c;设备被分为字符设备、块设备和网络设备等。字符设备以字节流的方式进行数据传输&#xff0c;数据的访问是按顺序的&#xff0c;一个字节一个字节地进行读取和写入操作&#xff0c;没有缓冲区。例如&#xff0c;终端&#xff08;/dev…

openGauss数据库-头歌实验1-4 数据库及表的创建

一、创建数据库 &#xff08;一&#xff09;任务描述 本关任务&#xff1a;创建指定数据库。 &#xff08;二&#xff09;相关知识 数据库其实就是可以存放大量数据的仓库&#xff0c;学习数据库我们就从创建一个数据库开始吧。 为了完成本关任务&#xff0c;你需要掌握&a…

深入浅出 Spring Boot 与 Shiro:构建安全认证与权限管理框架

一、Shiro框架概念 &#xff08;一&#xff09;Shiro框架概念 1.概念&#xff1a; Shiro是apache旗下一个开源安全框架&#xff0c;它对软件系统中的安全认证相关功能进行了封装&#xff0c;实现了用户身份认证&#xff0c;权限授权、加密、会话管理等功能&#xff0c;组成一…