ES6中数组的扩展

1. 扩展运算符

用三个点(...)表示,它如同rest参数的逆运算,将数组转为用逗号分隔的参数序列。扩展就是将一个集合分成一个个的。

console.log(...[1, 2, 3]); // 1, 2, 3

可以用于函数调用

扩展运算符后还可以放置表达式

...(x > 0 ? ['a'] : [])

如果扩展运算符后是一个空数组,则不产生任何效果

[...[], 1]  // [1]

可以替代数组的apply方法

扩展运算符的应用

合并数组

ES5中使用concat方法

const arr1 = ['a', 'b'];
arr1.concat(['c']); // ['a', 'b', 'c']

ES6的合并数组

[...[1, 2, 3], ...[4, 5]]; // [1, 2, 3, 4, 5]

与解构赋值结合

用来生成数组

// ES5
a = list[0]; rest = list.slice(1);
// ES6
[a, ...rest] = list;

如果用于数组赋值,只能将其放在参数的最后一位,否则会报错。

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

函数的返回值

函数只能返回一个值,如果要返回多个值,可以使用扩展运算符

字符串

将字符串转为真正的数组

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

实现了Iterator接口的对象

任何Iterator接口的对象都可以用扩展运算符转为真正的数组。

Map和Set结构、Generator函数

扩展运算符内部调用的是数据结构的Iterator接口,因此只要具有Iterator接口的对

象,都可以使用扩展运算符。

2. Array.from()

将类似数组的对象、可遍历对象转为真正的数组

只要是部署了Iterator接口的数据结构,Array.from都能转为数组。

Array.from('he');
// ['h', 'e']

类似数组的对象本质就是有length属性

Array.from还可以接受第二个参数,作用类似map方法,用来对每个元素进行处理,将处理的值放入返回的数组中。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * X);

另一个应用,将字符串转为数组,返回字符串长度。


Array.from({length: 2}, () => 'jack');
// ['jack', 'jack']
// 通过length可以确定第二个参数的运行次数

3. Array.of()

将一组值转为数组

Array.of(3, 22, 3); // [3, 22, 3]

Array()的不足

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

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

Array.of方法可以用代码模拟

function ArrayOf() {return [].slice.call(arguments);
}

4. 数组实例的copyWithin()

会在当前数组内部将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组,也就是说,使用这个方法会修改当前的数组。

3个参数

  • target(必选),从该位置开始替换数据
  • start(可选), 从该位置开始读取数据,默认为0,如果是负数,表示倒数。
  • end(可选), 到该位置停止读取,默认数组的长度,如果是负数,表示倒数。
[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]

表示从下标为3的位置开始复制到数组末尾的数据,在下标为0的位置开始换数据。

对于没有copyWithin方法可以使用以下代码

[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);// Int32Array [4, 2, 3, 4, 5]

5. 数组实例的find()和findIndex()

  • find

find方法用于找出第一个符合条件的数组成员,参数是一个回调数,所有成员都会依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合的,返回undefined。

[1, 2, -5, 10].find((value, index, arr) => {return value > 0
})
// -5

上面的代码找出小于0的成员。

回调函数可以接受3个参数,依次是当前的值、当前的index以及原数组。

  • findIndex

findIndex返回第一个符合条件的数组成员的位置,如果都不符合,返回-1。

第一个参数是回调函数,第二个参数可选,绑定this对象。

6. 数组实例的fill()

给定值填充一个数组。

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

特别适合空数组的初始化。

还可以接受第二个和第三个参数,用来指定填充的起始位置和结束位置。

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

上面的代码表示,fill方法从1号位开始向原数组填充7,到2号位之前结束。

7. 数组实例的entries()、keys()和values()

用来遍历数组,可用于for…of循环遍历。

分别是遍历键值对、键、值

for(let index of ['a', 'b'].keys()) {// code
}

8. 数组实例的includes()

方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串中的includes类似。

2个参数

  • 第一个:要检测的值
  • 第二个:开始搜索的位置,默认0。负数表示倒数,负数大于数组长度时,会重置为0
[1, 2, 3].includes(3, 3); // false

indexOf缺点

  • 不够语气化,其含义是找到参数值第一个出现的位置,所以要比较是否不等于-1, 表达起来不直观。
  • 内部使用严格相等运算符(===),会导致对NaN误判。

NaN和自身都不相等。

代替模拟代码

const contains = (() => {Array.prototype.includes ? (arr, value) => arr.includes(value) : (arr, value) => arr.some(el => el === value);
})

Map结构中的has方法是用来查找键名的

Set结构中的has方法用来查找值的

9. 数组的空位

Array当参数为一个值是,则代表生成length为该值的空数组。

Array(3); // [, , ,]

在ES5中对空位处理很不一致

  • forEach()、filter()、every()和some()都会跳过空位
  • map()会跳过空位,但会保留这个值
  • join()和toString()会将空位视为undefined,而undefined和null会被理解成空字符串。

在ES6中明确规定空位转为undefined

Array.from方法会将数组的空位转为undefined。

扩展运算符也会转为undefined

copyWithin方法会连空位一起复制

fill方法会将空位视为正常的数组位置

for…of 循环也会遍历空位

entries()、keys()、values()、find()和findIndex()会将空位转为undefined

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

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

相关文章

YOLOv2解析 | 批归一化 锚 主干网

文章目录 1 改进1.1 Batch Normalization 批归一化1.2 High Resolution Classifier 更高分辨率的分类器1.3 **Convolutional With Anchor Boxes 带锚盒的卷积**1.4 Dimension Clusters 维度集群1.5 更深更宽的主干网络1.6 Fine-Grained Features** **细粒度特征 **1.,7 Multi-S…

Altium Designer 批量添加元器件后缀

Altium Designer 批量添加元器件后缀 方法一方法二可能出现的问题要注意 方法一 您可以使用 Altium Designer 中的“批量修改元器件名称”功能来批量添加元器件后缀。具体步骤如下: 1.为了方便显示 操作流程,我这里复制了几个原理图的文件,粘…

剑指offer——JZ22 链表中倒数最后k个结点 解题思路与具体代码【C++】

一、题目描述与要求 链表中倒数最后k个结点_牛客题霸_牛客网 (nowcoder.com) 题目描述 输入一个长度为 n 的链表,设链表中的元素的值为 ai ,返回该链表中倒数第k个节点。 如果该链表长度小于k,请返回一个长度为 0 的链表。 数据范围&…

好奇喵 | Surface Web ---> Deep Web ---> Dark Web

前言 我们可能听说过深网(deep Web)、暗网(dark Web)等名词,有些时候可能会认为它们是一个东西,其实不然,两者的区别还是比较大的。 什么是deep web? 深网是网络的一部分,与之相对应的是表层网络(surface …

jsbridge实战2:Swift和h5的jsbridge通信

[[toc]] demo1: 文本通信 h5 -> app 思路: h5 全局属性上挂一个变量app 接收这个变量的内容关键API: navigation代理 navigationAction.request.url?.absoluteString // 这个变量挂载在 request 的 url 上 ,在浏览器实际无法运行,因…

Spring事务

事务概念 逻辑上的一组操作,要么都成功、要么都失败 典型案例:银行转账 事务特性:ACID【原子、一致、隔离、持久】 搭建环境 银行转账操作 web: service:逻辑操作,调用dao dao:创建两个方法 …

强化学习环境 - robogym - 学习 - 2

强化学习环境 - robogym - 学习 - 2 文章目录 强化学习环境 - robogym - 学习 - 2项目地址为什么选择 robogymRearrange - 环境部分介绍Robot Control Interface - 机器人控制接口Environment - listEnvironment Randomization - 接口设置 项目地址 https://github.com/openai…

PAT(Basic Level) Practice(中文) 1015德才论

前言 ※ PTA是 程序设计类实验辅助教学平台 ,里边包含一些编程题目集以供练习。 这道题用java解,我试了三种解法,不断优化,但始终是三个测试点通过、三个测试点超时。我把我的代码放在这里,做个参考吧。 1015 德才…

获取上证50的所有股票代码

我们可以从网页(板块 - 上证50_ - 股票行情中心 - 搜狐证券)中获取, 然后打印出来: import requests from bs4 import BeautifulSoupurl "https://q.stock.sohu.com/cn/bk_4272.shtml" response requests.get(url) …

junit @ExcludePackages排除多个包

在JUnit中,可以使用ExcludePackages注解来排除多个包。该注解可以用在测试类或测试方法上。 如果要排除多个包,可以在ExcludePackages注解的value属性中使用数组来指定要排除的包名。例如,要排除包com.example.package1和com.example.packag…

秋招问题记录贴

最近面试有点多,没来的及写面经,就单独开个帖子记录一下碰到的一些不懂的技术问题: AQS中两个队列如何工作,这个结合os中阻塞和就绪两种情况讲分布式的理解,这个问的频率很高nacos怎么进行服务注册和发现的mysql什么情…

TcpConnection的读写操作【深度剖析】

文章目录 前言一、TcpConnection的读二、TcpConnection的写三、TcpConnection的关闭 前言 今天总结TcpConnection类的读写事件。 一、TcpConnection的读 当Poller检测到套接字的Channel处于可读状态时,会调用Channel的回调函数,回调函数中根据不同激活…

treectrl类封装 2023/8/13 下午4:07:35

2023/8/13 下午4:07:35 treectrl类封装 2023/8/13 下午4:07:53 TreeCtrl 类是一个常用的图形用户界面控件,用于实现树形结构的展示和交互。以下是一个简单的 TreeCtrl 类的封装示例: python import wxclass MyTreeCtrl(wx.TreeCtrl):def __init__(self, parent):super()…

java限流

限流可以使用redis的过期时间自动过期限流的key,, 也可以使用一个定时器,在指定时间后清除这个key,,比如Timer Timer的使用 Timer timer new Timer() timer.schedule(timerTast,delay,period) public static void …

mysql面试题13:MySQL中什么是异步复制?底层实现?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:讲一讲mysql中什么是异步复制?底层实现? MySQL中的异步复制(Asynchronous Replication)是一种复制模式,主服务器将数据写入二进制日志后,无…

mysql面试题14:讲一讲MySQL中什么是全同步复制?底层实现?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:讲一讲mysql中什么是全同步复制?底层实现? MySQL中的全同步复制(Synchronous Replication)是一种复制模式,主服务器在写操作完成后,必须等待…

AI配套的技术: 矢量数据库的概念

一、说明 随着人工智能的快速采用和围绕大型语言模型发生的创新,我们需要在所有这些的中心,能够获取大量数据,将其上下文化,处理它,并使其能够有意义地搜索。 为原生整合生成式 AI 功能而构建的生成式 AI 流程和应用程…

JUC第十四讲:JUC锁: ReentrantReadWriteLock详解

JUC第十四讲:JUC锁: ReentrantReadWriteLock详解 本文是JUC第十四讲:JUC锁 - ReentrantReadWriteLock详解。ReentrantReadWriteLock表示可重入读写锁,ReentrantReadWriteLock中包含了两种锁,读锁ReadLock和写锁WriteLock&#xff…

ES6中的let、const

let ES6中新增了let命令,用来声明变量,和var类似但是也有一定的区别 1. 块级作用域 只能在当前作用域内使用,各个作用域不能互相使用,否则会报错。 {let a 1;var b 1; } console.log(a); // 会报错 console.log(b); // 1为什…

Day-05 CentOS7.5 安装docker

参考 : Install Docker Engine on CentOS | Docker DocsLearn how to install Docker Engine on CentOS. These instructions cover the different installation methods, how to uninstall, and next steps.https://docs.docker.com/engine/install/centos/ Doc…