WEB前端学习:ES6的数组改动

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。

给你学习路线,html-css-js-ajax-jq-html5-css3-bootstrap-vue.js-node.js-react.jd

数组作为JavaScript中常见常用的类型,ES6也对数组的功能进行了改进。下面和大家分享一下ES6中数组的新特性。

WEB前端学习:ES6的数组改动_第1张图片

小编推荐一个学Web前端的学习裙【 五四七,三零二,三八三 】,无论你是大牛还是小白,是想转行还是想入行都可以来了解一起进步一起学习!裙内有开发工具,很多干货和技术资料分享!

1.创建数组的新方式

在ES6之前的JavaScript版本中,我们创建数组主要有两种方式,一是通过构造函数

var array = new Array();

另一种是直接声明数组字面量

var array = [];

ES6新增了两种创建数组的方法:Array.of()Array.from()。下面介绍一下这两种方法的用法和功能。

Array.of()会把所有接收的参数存入数组,不管参数的类型。

let array = Array.of(1,2,3,4);

它和构造函数不同的地方在于:如果构造函数接收的参数为数字,该参数将设定数组的长度而不是存入数组。

var array = new Array(2);console.log(array.length); // 2

Array.from()方法可以接收可迭代对象或数组对象作为参数,并将其转化为数组。我在文章ES6霸气,一行代码搞定数组去重 中曾经使用过from方法。

function unique (array) {return Array.from(new Set(array))}unique([1,1,1,2,2,2,3])

在ES6小册子--函数 中介绍的函数不定参数也可以使用Array.from方法。

Array.from()还可以接收一个方法参数,对数组进行映射处理。

let arrayConvert = function (...arg){return Array.from(arg, (item) => {return item + 1})}

如果你认真看完了之前的几章关于ES6的介绍,相信你一定能够理解上面的代码。我这里不做过多的解释了,可以翻看之前的几篇文章。

2.数组的新方法

find() 和 findIndex()

这两个方法都是用来搜索数组的方法,根据方法名可以看出find返回的是查找的值,findIndex返回的是索引。它们和indexOf的不同点主要在于接收的参数是回调函数。我们来举个例子说明一下:

let array = [1,2,3,4,5];console.log(array.find(item => item%2 ===0 ))

这是查找偶数的方式,需要注意的是find寻找到第一个满足条件的元素后就不再查找后面的元素。所以上面代码输出的值是2。

小编推荐一个学Web前端的学习裙【 五四七,三零二,三八三 】,无论你是大牛还是小白,是想转行还是想入行都可以来了解一起进步一起学习!裙内有开发工具,很多干货和技术资料分享!

fill方法可以填充一个或者多个数组元素,修改元素的值为传入的参数。

let array = [1,2,3,4,5];array.fill(0);console.log(array)// [0,0,0,0,0]

fill方法可以指定开始索引和排除索引,指定从哪里开始填充,排除哪些位置的元素。

let array = [1,2,3,4,5];array.fill(0,2,3);console.log(array) // [1,2,0,4,0]

array.fill(0,2,3)第一个参数为要填充的值--0,第二个参数为开始索引--2,第三个参数为排除索引--3。

copyWithin()

copyWithin用法和fill一样,作用是复制某一个元素,并覆盖其他一个或多个元素。我们举个例子:

let arrayA = [1,2,3,4,5];arrayA.copyWithin(2,0,2);console.log(arrayA); // [1,2,1,2,5]

copyWithin(2,0,2)第一个参数是复制到的位置即粘贴的位置。第二个参数是开始复制的位置,第三个参数是停止复制的位置。

WEB前端学习:ES6的数组改动_第2张图片

小编推荐一个学Web前端的学习裙【 五四七,三零二,三八三 】,无论你是大牛还是小白,是想转行还是想入行都可以来了解一起进步一起学习!裙内有开发工具,很多干货和技术资料分享!

数组就和大家介绍到这里,欢迎你给我留言,等待你的反馈~

你可能感兴趣的:(WEB前端学习:ES6的数组改动)