专栏首页女程序员的日常_LinES6的扩展运算符(...)---数组篇

ES6的扩展运算符(...)---数组篇

哈喽,大家好,又一周过去了,时间过得好快,各位宝宝这一周有没有进步呢?有没有更了解自己呢?嗯哼,我有点心虚……o(╯□╰)o

speak in cheap!

接着上周的ES6的扩展运算符,我们这周主题是数组与扩展运算符(...);

与数组一起扩展运算符的作用其实就是将数组转换成用逗号分隔的参数序列;

let a =[1,2,...[3,4,5]]
//a =[1,2,3,4,5];

用于函数的参数;

let a=[1,2,3]
a.push(...[4,5,6]);
// a = [1,2,3,4,5,6]

根据它的特性,扩展运算符可用于:

1.数组的解构赋值

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 [...a,b] = [1,2,3,4,5,6];
//报错
const [first ,...middle,last] = [1,2,3,4,5];
//报错

2.数组的合并

// ES5
[2,3].concat([7,8]);
// ES6
[2,3,...[7,8]];

3.将字符串转成真正的数组

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

使用上面的写法可以正确识别32位Unicode字符串的长度;

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

4.将具有Iterator接口的对象,转为真正的数组。

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

nodeList是一个类数组,使用扩展运算符可以将类数组转换成真正的数组;

原型部署了iterator的数据有数组、类似数组的对象、Map、Set;

为什么对象没有部署iterator接口呢?原因如下:

对象的属性哪个先遍历,哪个后遍历,需要操作者手动指定;遍历遍历器是一种线性处理,给对象部署iterator接口相当于对非线性数据结构进行一种线性转换;还有就是给对象部署iterator接口不是很必要,因为Map有iterator接口可以弥补这一点。

总之...和数组一起有三种用法:

(1) 展开运算;例如数组合并、作为函数参数、字符串转数组

(2) 剩余运算;数组的解构赋值

(3) 转数组:将具有iterator接口的对象转换成真正的数组

所以关于扩展运算符,到这里只是了解了而已,之后还需要深入学习,共同进步吧,各位宝宝们!

愿我们有能力不向生活缴械投降---Lin

本文分享自微信公众号 - 女程序员的日常(gh_df41d619fb70),作者:凛

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • docker基础

    重点:volumes:将主机的数据卷或者文件挂载到容器里。(使得容器内目录与主机内目录完全同步)

    用户3258338
  • Iterator 、Generator(一)

    调用Generator函数,返回一个遍历器对象,代表Generator函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着value和don...

    用户3258338
  • 为什么vue中的data必须是一个函数?

    object是引用类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了。

    用户3258338
  • windows下mysql初始密码设置

    2.打开 Windows 环境变量设置, 新建变量名 MYSQL_HOME , 变量值为 MySQL 安装目录路径, 在 环境变量 的 Path 变量中添加 ;...

    用户5640963
  • 数据猿·金猿榜丨2017中国医疗大数据领域最具潜力创业公司

    【数据猿导读】 “2017中国医疗大数据领域最具潜力创业公司”盘点源于数据猿推出的“金猿榜”系列内容,旨在通过媒体的方式与原则,发掘大数据领域最具潜力的创新型企...

    数据猿
  • Numpy 修炼之道 (6)—— 复制和视图

    当计算和操作数组时,它们的数据有时被复制到新的数组中,有时不复制。这里我们做个区分。

    abs_zero
  • Java的基本语法。

    在java语言中,用来标志类名、对象名、变量名、方法名、类型名、数组名、包名的有效字符序列,称为“标识符”;

    7537367
  • torch.utils.data.DataLoader()

    数据加载器,结合了数据集和取样器,并且可以提供多个线程处理数据集。在训练模型时使用到此函数,用来把训练数据分成多个小组,此函数每次抛出一组数据。直至把所有的数据...

    于小勇
  • 2019秋招:460道Java后端面试高频题答案版【模块二:Java集合类】

    个人觉得 Java 集合类在面试过程中是个超高频的模块,所以一定要认真准备每个知识点。那么我个人学习这块知识点的方法是:

    乔戈里
  • Java数组,这一篇文章就真够了

    虽然随着Java版本的演变,数组的分量在慢慢减弱,日常使用时大多使用List进行替代。但ArrayList底层依旧采用数组来进行实现,而数组依旧有很多应用的场景...

    程序新视界

扫码关注云+社区

领取腾讯云代金券