广州web培训
达内广州五羊中心

18589266248

热门课程

达内-广州Web前端培训机构:如何把元素用到数组与函数中?

  • 时间:2017-04-28 16:05
  • 发布:deadcoderising
  • 来源:deadcoderising

今天广州Web前端培训机构小编就说说如何把元素用到数组与函数中?如果你的可遍历对象中有一些元素,你想把这些元素应用于另一个新的数组或者一个函数调用,JavaScript新增语法spread syntax(扩展语法)。spread syntax其实很简单,通常的做法,就是你会从索引开始,利用循环访问每个元素。但是广州Web前端培训机构小编要说的是通过spread syntax这个事情就变的很简单了,你可以使用三个点作为前缀,应用于可遍历对象上,问题就解决了。

为了更直观,我们一起看几个用例就明白了。

复制一个数组

假设有一个数组名字是names。

JavaScript

const names = ['Luke','Eva','Phil'];

广州Web前端培训机构

如何把names里面的元素复制到一个新数组中呢?

传统的做法是用循环来实现,但是广州Web前端培训班小编使用spread syntax,解决方法很简洁。

JavaScript

const copiedList = [...names]  

console.log(copiedList); // ['Luke','Eva','Phil']

可以看到比循环方法简单的多。

这里广州Web前端培训小编值得一提的是,这里复制的是引用。也就是说如果一个数组中的元素发生改变,那么另一个数组中的元素也相应地发生改变。

JavaScript

var initialArray = [{name: "Luke"}];  

var copiedArray = [...initialArray];

initialArray[0]['name'] = 'Mark';

console.log(initialArray); //Array [{'name': 'Mark'}]  

console.log(copiedArray); //Array [{'name': 'Mark'}]

连接数组

spread syntax另一个用法是连接数组,做法是把你想要扩展的数组放到一起。如下:

JavaScript

const concatinated = [...names, ...names];  

console.log(concatinated); // ['Luke','Eva','Phil', 'Luke','Eva','Phil']

把独立变量扩展到一起

除了把元素复制到一个新数组中,还可以把独立变量一起扩展到某数组中。下面举个例子,把第一个元素和names数组扩展到一起。

JavaScript

const first = ['Emily', ...names];  

console.log(first); // ['Emily','Luke','Eva','Phil']

还可以把独立变量放到names的后面。

JavaScript

const last = [...names, 'Emily'];  

console.log(last); // ['Luke','Eva','Phil', 'Emily']

在函数调用中使用spread syntax

那么广州Web培训班小编已经掌握了如何在数组中运用spread syntax。

上一篇:达内-广州HTML5培训:JS/Sources断点是如何调试的?
下一篇:达内-广州HTML5培训: 利用HTML5让web app运行更流畅!

马上预约三天免费体验课

姓名:

电话:

每位前端开发大师都比学的Web自适应

达内web前端与后端开发有何不同?

达内前端开发课程轻松搞定H5代码分离

前端工程师必学的触发DOM事件处理方法

选择城市和中心
江西省

贵州省

广西省

海南省