JavaScript 扩展运算符用法实例小结【基于ES6】


Posted in Javascript onJune 17, 2019

本文实例讲述了JavaScript 扩展运算符用法。分享给大家供大家参考,具体如下:

扩展运算符格式

扩展运算符格式很简单,就是三个点(…)

重点:需要ES6 语法支持

扩展运算符作用???

扩展运算符允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展。

1、将一个数组放入另一个数组中

下面开始通过四个例子来深刻理解扩展运算符

①. 创建一个数组middle
②. 创建第二个包含middle的数组
③. 输出结果

var middle = [3, 4];
var arr = [1, 2, middle, 5, 6];
console.log(arr);
// [1, 2, [3, 4], 5, 6]

在上例中,没有使用扩展运算符。middle作为数组放入另一个数组中

2、如果想让输出结果只有一个数组???

这时候就用到扩展运算符,看下面例子,除了使用扩展运算符其他都与上面例子相同。

var middle = [3, 4];
var arr = [1, 2, ...middle, 5, 6];
console.log(arr);
// [1, 2, 3, 4, 5, 6]

当创建数组arr和使用在middle数组上使用扩展运算符时,不是将middle数组直接插入到arr中,而是将middle数组扩展,然后将元素插入到arr中。

3、复制数组

slice()是JavaScript数组的方法,作用是复制数组。我们同样可以使用扩展运算符复制数组。

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
// ['a', 'b', 'c']

arr数组中的元素扩展成为单独元素被分配到arr2中。现在可以随意改变arr2数组,且都不会对源数组arr产生影响

这是因为,arr数组值被扩展后添加到arr2数组中,我们设置arr2等于arr的值,而不是其本身。我们可以关注没有扩展运算符时发生事情,就能理解了。

如果创建数组然后设置另一个数组等于其本身,如下:

var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
// ['a', 'b', 'c']

现在我们将arr2数组赋值给arr数组,这意味着只要改变arr2,arr数组就会发生变化。

arr2.push('d');
console.log(arr2);
// ['a', 'b', 'c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd']

4、拼接数组

使用扩展运算符可以代替concat()来拼接数组。

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr1 = arr.concat(arr2);
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

使用扩展运算符

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr = [...arr, ...arr2];
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

5、Math

也可以使用math函数连同扩展运算符。如这个例子中,将使用Math.max()

Math.max()将返回一组数最大值。
Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

在没有扩展运算符,在数组上使用Math.max()最容易方法就是使用.apply()

var arr = [2, 4, 8, 6, 0];
function max(arr) {
 return Math.max.apply(null, arr);
}
console.log(max(arr));
// 8

现在看看使用扩展运算符做同样事情。只需要两行代码就可以做到同样效果。

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
// 8

6、字符串转数组

使用扩展运算符将字符串转换为数组。

var str = "hello";
var chars = [...str];
console.log(chars);
// ['h', 'e',' l',' l', 'o']

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
通过实例解析js简易模块加载器
Jun 17 #Javascript
如何从头实现一个node.js的koa框架
Jun 17 #Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 #Javascript
深入解析koa之异步回调处理
Jun 17 #Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 #Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 #Javascript
JS实现的字符串数组去重功能小结
Jun 17 #Javascript
You might like
消息持续发送的完整例子
2006/10/09 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
python微信公众号开发简单流程实现
2020/03/09 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
如何选择使用结构还是类
2014/05/30 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
医院信息公开实施方案
2014/05/09 职场文书
医学求职信
2014/05/28 职场文书
财务工作检讨书
2014/10/29 职场文书
收入证明申请书
2015/06/12 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Python基础之元编程知识总结
2021/05/23 Python
深入理解python协程
2021/06/15 Python
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS