网站首页 > 技术文章 正文
扩展运算符用三个点号表示,功能是把数组展开成一系列用逗号隔开的值
简单理解就是你把一个数组前面加三个点,它就会展开成你想要的形状。
没有扩展运算符的苦逼生活:
let arr = [1,2,3,4] console.log(arr[0], arr[1], arr[2], arr[3]) // 1 2 3 4
有了扩展运算符之后的生活:
let arr = [1,2,3,4] console.log(...arr) // 1 2 3 4
可以大家会好奇什么时候会用到?
数组拼接
在我们日常开发中经常会用到数组拼接对吧?比如做电商网站的时候会有商品拼接,做论坛也会有帖子拼接之类的!
就是说我们后台可能会有几千几万条帖子或帖子之类的,我们不可能一下子全获取到,那页面要加载的时间太长了,比如淘宝,你输入一件商品,一点搜索,嗖!它把那个商品几万条一下子全给你了,然后手机凉了,垃圾软件!卸啦!
所以一般我们都是10条20条这样子,当用户触发某个行为一直再更多的数据,比如上拉触底!但是我们也知道,我们不可能在获取到新数据就覆盖旧数据!那体验效果也太差了!
所以我们一般都是那新获取的数据去拼接你刚刚的数组。
以前我们都是用concat来做数组的拼接工作。
有了扩展运算符之后:
这只是一种写法,你还可以:旧数组.push(...新数组),这样也可以啦!
克隆数组:
大家都知道,js数据类型分为简单数据类型和引用类型。引用类型的变量只是指向内存空间的一个指针,如果我们想直接克隆的话,只是克隆了一份指向内存空间的指针而已。(相当于钥匙)
举例:我们把内存空间比作一个房间,这个房间里有很多零食(数组的下边对应的值或对象的属性对应的值)你有一把这个房间的钥匙,你朋友也有一把(有两个都指向这个内存空间的指针,你可以把指针理解为变量),然后你朋友用钥匙开门,拿走了一些零食喂他女朋友了,当你开门时,你会发现零食少了很多!
但是使用扩展运算符的话就可以一行代码实现深度克隆:
关键代码就是: let arr2 = [...arr1]
当然,扩展运算符肯定不止这些啦,其实它主要用于函数调用。
函数调用
加载我们这个方法需要传入很多形参,我们一般用arguments实参列表来处理!
嗯,没什么问题。。。
可以现在大家都用ES6的箭头函数了(箭头函数不改变this指向)
那么问题来了!!
箭头函数是没有arguments实参列表的!
哼哼,这个时候我们就可以用神一样的扩展运算符来轻松应对:
还有,当我们使用call(),改变this指向的时候需要穿形参是,使用扩展运算符也是超棒的选择:
ps: call()和apply()的作用是改变this指向,区别是传参列表不同。
- 上一篇: JS面试之数组的几个不low操作(js 数组面试题)
- 下一篇: Es6基础语法(es6的语法有哪些)
猜你喜欢
- 2024-10-11 js中传统和es6方式 实现数组去重(js数组去重方法es6)
- 2024-10-11 重读《学习JS数据结构与算法-第三版》- 第3章 数组 二
- 2024-10-11 ES6的这些操作技巧,你会吗(es6 教程)
- 2024-10-11 Es6基础语法(es6的语法有哪些)
- 2024-10-11 JS面试之数组的几个不low操作(js 数组面试题)
- 2024-10-11 数组的扩展(数组扩展长度的方法)
- 2024-10-11 ES6中Array数组你应该知道的操作(es6数组排序的方法)
- 2024-10-11 ES6 数组的遍历方法最重要的不在代码本身,而是语义化!
- 2024-10-11 ES6 数组解构赋值(es6 结构赋值)
- 2024-10-11 如何使用ES6语法给数组去重(es6数组去重复)
- 02-21走进git时代, 你该怎么玩?_gits
- 02-21GitHub是什么?它可不仅仅是云中的Git版本控制器
- 02-21Git常用操作总结_git基本用法
- 02-21为什么互联网巨头使用Git而放弃SVN?(含核心命令与原理)
- 02-21Git 高级用法,喜欢就拿去用_git基本用法
- 02-21Git常用命令和Git团队使用规范指南
- 02-21总结几个常用的Git命令的使用方法
- 02-21Git工作原理和常用指令_git原理详解
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)