JavaScript扩展运算符
来源:互联网 发布:什么软件可以加微信群 编辑:程序博客网 时间:2024/05/17 22:13
扩展运算符格式
扩展运算符格式很简单,就是三个点(...
)
扩展运算符作用???
扩展运算符允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展。
下面开始通过四个例子来深刻理解扩展运算符
- 创建一个数组
middle
- 创建第二个包含
middle
的数组 - 输出结果
var middle = [3, 4];var arr = [1, 2, middle, 5, 6];console.log(arr);// [1, 2, [3, 4], 5, 6]
在上例中,没有使用扩展运算符。middle
作为数组放入另一个数组中。
但是如果想让输出结果只有一个数组???
这时候就用到扩展运算符,看下面例子,除了使用扩展运算符其他都与上面例子相同。
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
中。
复制数组
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']
拼接数组
使用扩展运算符可以代替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']
Math
也可以使用math函数连同扩展运算符。如这个例子中,将使用Math.max()
Math.max()
将返回一组数最大值。
Math.max();// -InfinityMath.max(1, 2, 3);// 3Math.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
字符串转数组
使用扩展运算符将字符串转换为数组。
var str = "hello";var chars = [...str];console.log(chars); // ['h', 'e',' l',' l', 'o']
参考
原文链接
欢迎订阅掘金专栏和知乎专栏
- JavaScript扩展运算符
- JavaScript 扩展运算符
- es6 javascript对象的扩展运算符
- es6 javascript对象的扩展运算符
- JavaScript ...运算符(扩展运算符)以及rest运算符介绍
- + - * /运算符扩展
- 扩展赋值运算符
- 扩展运算符
- JavaScript被扩展以支持并行运算
- JavaScript被扩展以支持并行运算
- ES6-数组的扩展-扩展运算符
- 学习js扩展运算符
- es6的扩展运算符
- javascript中的运算符
- javascript 逗号运算符
- javascript中的运算符
- JavaScript 的运算符
- javascript 逗号运算符
- 安装XGBoost教程(Anaconda)
- Pyunit源码笔记之一 典型例子,后面将分析源码
- ArcGIS Server 自定义比例尺切图
- C++ 关键路径
- [BZOJ 1101][POI2007]Zap:莫比乌斯反演
- JavaScript扩展运算符
- 从无到有:微信后台系统的演进之路
- C#如何测试代码运行时间
- svn服务器搭建及使用
- linux下手动安装git教程
- C#基础之你追我跑
- Bootstrap源码解读1 下拉菜单
- PHP自动加载机制
- 文章标题