JavaScript 扩展运算符
2017-06-01 10:53
197 查看
扩展运算符格式
扩展运算符格式很简单,就是三个点(…)
重点:需要ES6 语法支持
扩展运算符作用???
扩展运算符允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展。1、将一个数组放入另一个数组中
下面开始通过四个例子来深刻理解扩展运算符1、创建一个数组middle
2、创建第二个包含middle的数组
3、输出结果
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(bf15
)来拼接数组。
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']
参考
中文
英文
相关文章推荐
- 从零开始学_JavaScript_系列(41)——对象的扩展(4)扩展运算符三个点...
- es6 javascript对象的扩展运算符
- JavaScript ...运算符(扩展运算符)以及rest运算符介绍
- JavaScript扩展运算符
- JavaScript 扩展运算符
- es6 javascript对象的扩展运算符
- JavaScript 运算符
- 《javascript语言精髓与编程实践》——javascript运算符语义的二义性
- Web开发技术——JavaScript语法3(函数、运算符、比较和逻辑运算符)
- 第7周-项目1-完整实现复数类中的运算符重载-扩展+、-、*、/运算符的功能
- 从firefox 与 Ie 鼠标事件区别分析javascript或运算符“||”
- ExtJS学习-----------Ext.String,ExtJS对javascript中的String的扩展
- javascript typeof()的用法与运算符用法
- 一个日期的扩展函数库包括计算周次和本周时间范围(javascript)
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理
- JavaScript 学习之 instanceOf, typeOf 运算符
- javascript中的||运算符
- javascript中的扩展和继承
- javascript原生的事件扩展