Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。
给你学习路线,html-css-js-ajax-jq-html5-css3-bootstrap-vue.js-node.js-react.jd
数组作为JavaScript中常见常用的类型,ES6也对数组的功能进行了改进。下面和大家分享一下ES6中数组的新特性。
小编推荐一个学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前端的学习裙【 五四七,三零二,三八三 】,无论你是大牛还是小白,是想转行还是想入行都可以来了解一起进步一起学习!裙内有开发工具,很多干货和技术资料分享!
数组就和大家介绍到这里,欢迎你给我留言,等待你的反馈~