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

 更新时间:2019年06月17日 10:46:27   作者:longzhoufeng  
这篇文章主要介绍了JavaScript 扩展运算符用法,结合实例形式总结分析了基于ES6的扩展运算符基本概念与使用相关操作技巧,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结

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

相关文章

  • 微信小程序实现单选选项卡切换效果

    微信小程序实现单选选项卡切换效果

    这篇文章主要为大家详细介绍了微信小程序实现单选选项卡切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02
  • 使用JS和canvas实现gif动图的停止和播放代码

    使用JS和canvas实现gif动图的停止和播放代码

    这篇文章主要介绍了使用JS和canvas实现gif动图的停止和播放代码,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • JavaScript中函数柯里化示例详解

    JavaScript中函数柯里化示例详解

    JavaScript 函数柯里化是将一个多参数的函数转换为一系列单参数的函数,每个单参数函数都可以接收一个参数,并返回一个新的函数,本文将通过代码示例给大家讲讲JavaScript函数柯里化的优缺点,需要的朋友可以参考下
    2023-09-09
  • JS使用虚拟列表查看微信聊天记录功能技巧实例

    JS使用虚拟列表查看微信聊天记录功能技巧实例

    这篇文章主要为大家介绍了JS使用虚拟列表查看微信聊天记录功能技巧实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 探索JavaScript函数的无限可能(函数基本概念)

    探索JavaScript函数的无限可能(函数基本概念)

    JavaScript中的函数是一种重要的编程概念,它允许我们封装可重用的代码块,并在需要时进行调用,本文将深入介绍JavaScript函数的各个方面,包括函数定义和调用、参数和返回值、作用域和闭包、高阶函数以及常见的函数应用场景,感兴趣的朋友一起看看吧
    2023-08-08
  • JavaScript设计模式之迭代者模式详情

    JavaScript设计模式之迭代者模式详情

    这篇文章主要介绍了JavaScript设计模式之迭代者模式详情,迭代器设计模式能够可以让我们更方便的且有规矩的进行访问复合数据的每一项,也可以通过迭代器进行完成一些流线式操作
    2022-06-06
  • chatGPT前端流式输出js实现三种方法—fetch、SSE、websocket

    chatGPT前端流式输出js实现三种方法—fetch、SSE、websocket

    项目需要接入chatgpt提供的api,后端返回流式的字符,前端接收并实时显示,在JavaScript中,使用Stream流通常指的是处理数据流的一种方式,它们允许数据被处理成块,而不是一次性处理整个数据集,这对于处理大量数据或者来自网络请求的数据非常有用,
    2024-07-07
  • Javascript获取随机数的实现方法

    Javascript获取随机数的实现方法

    下面小编就为大家带来一篇Javascript获取随机数的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 阿里巴巴技术文章分享 Javascript继承机制的实现

    阿里巴巴技术文章分享 Javascript继承机制的实现

    这篇文章主要介绍了阿里巴巴技术文章,分享的是一篇关于Javascript实现继承机制的文章,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • js 采用delete实现继承示例代码

    js 采用delete实现继承示例代码

    这篇文章主要介绍了js如何采用delete实现所谓的继承,下面有个不错的示例,大家可以参考下
    2014-05-05

最新评论