hello,大家好,我又来了.
        前面讲了字符串和数值的扩展,今天要讲的是:数组的扩展。不知道大家能否跟得上这个节奏,你们在阅读中对讲解有存在疑惑,记得留言提出来,要真正地理解,否则白白浪费阅读时间就得不偿失了。

写过javascript代码的同学都知道数组是一个很常用的数据结构,能给我们带来很多方便。如今,ES6对数组进行进一步的扩展,为我们带来更多的特性,开发者都很期待。

第八节,开始学习吧.....

我们先来学几个即简单有好玩的新函数:

Array.of()函数

函数作用:将一组值,转换成数组。

    Array.of(1,2,3,4,5);
//结果:[1,2,3,4,5]

是不是很好理解,传进去的数字是:1~5,最后经过Array.of函数处理,得到了一个数组,而数组的内容就是[1,2,3,4,5]。

Array.of函数的出现是源于Array构造函数的缺陷,这里对新知识学习不影响,所以展开不作讲解,我们只需要关心我们要掌握的知识就ok了。

Array.from( )函数

函数作用:可以将类似数组的对象或者可遍历的对象转换成真正的数组。

有哪些是类似数组的对象?最常见的就是调用getElementsByTagName方法得到的结果,它就是一个类似数组的结果,getElementsByTagName方法一定不陌生吧,我们来看一下:

    let ele = document.getElementsByTagName('a');
ele instanceof Array; //结果:false,不是数组
ele instanceof Object; //结果:true,是对象

看上面的代码,我们调用getElementsByTagName方法,得到结果存到变量ele中,然后对其进行类型判断,发现变量ele并不是一个数组,而是一个对象Array,一个类似数组的对象Object,接下来我们用Array.from( )对其进行处理,并再一次进行类型判断。

    Array.from(ele) instanceof Array;
//结果:true,是数组

这个时候我们运行的结果是:true,也就是经过Array.from函数处理返回的结果,已经变成了一个真正的数组。

Array.from函数其中一个用处就是将字符串转换成数组。看下面的案例:

  let str = 'hello';
Array.from(str);
//结果:["h", "e", "l", "l", "o"]

字符串“hello”被转换后的返回的结果已经变成了一个数组:["h", "e", "l", "l","o"]。

除了上述的两个静态方法外,还新增了一些实例方法。

find( )函数

函数作用:找出数组中符合条件的第一个元素。

   let arr = [1,2,3,4,5,6];
arr.find(function(value){
return value > 2;
});
//结果:value=3

看上面的代码,find()函数的参数是一个匿名函数,数组的每个元素都会进入匿名函数执行,直到结果为true,find函数就会返回value的值:3。倘若所有元素都不符合匿名函数的条件,find( )函数就会返回undefind。看下面的代码案例:

    let arr = [1,2,3,4,5,6];
arr.find(function(value){
return value > 7;
});
//结果:undefined

上面的案例中,数组中没有存在大于7的元素,所以find函数就会返回:undefined。

findIndex( )函数

函数作用:返回符合条件的第一个数组成员的位置。

let arr = [7,8,9,10];
arr.findIndex(function(value){
return value > 8;
});
//结果:2

上面的代码结果是:2,因为数组元素中大于8的元素是9,而元素9的位置正式2,(数组元素是从0算起)。倘若所有元素都不符合匿名函数的条件,findIndex( )函数就会返回-1。

fill( )函数

函数作用:用指定的值,填充到数组。

  let arr = [1,2,3];
arr.fill(4);
//结果:[4,4,4]

经过fill( )函数处理后的数组arr已经变成了[4,4,4];正如函数名fill(填充)一样。所有元素都被填充为数字4了。如果我想只填充部分元素可不可以呢?可以的,fill( )函数提供了一些参数,用于指定填充的起始位置和结束位置。

还是上面的案例,我们稍做调整,再演示一下:

let arr = [1,2,3];
arr.fill(4,1,3);
//结果:[1,4,4]

上面的代码中第2个参数和第3个参数的意思是:从位置1的元素开始填充数字4,截止到位置3之前,所以是位置1和位置2的元素被数字4填充了,得到的结果:[1,4,4]。

entries( )函数

函数作用:对数组的键值对进行遍历,返回一个遍历器,可以用for..of对其进行遍历。

遍历器和for..of也是ES6的新增特性,目前我们还没有介绍到,我们可以先进行一下简单地认知。

回到我们的entries( )函数,看个案例:.

 for(let [i,v] of ['a', 'b'].entries())
{
console.log(i,v);
}
//0 "a"
//1 "b"

上面的代码中,我们将entries( )函数返回的一个遍历器,用for...of进行遍历,并打印出结果,能得到数组的键值:0和1,以及对应的数组元素:‘a‘和’b‘。

如果只想遍历数组的索引键的话,可以使用另一个实例方法。

keys( )函数

函数作用:对数组的索引键进行遍历,返回一个遍历器。

   for(let index of ['a', 'b'].keys())
{
console.log(index);
}
//
//

正如上面的运行结果一样,我们打印出了数组的索引键:0和1。

如果我们想只对数组的元素进行遍历,我们可以使用两一个实例方法。

values( )函数

作用:对数组的元素进行遍历,返回一个遍历器。

for(let value of ['a', 'b'].values())
{
console.log(value);
}
//a
//b

上面的代码运行结果也是我们预料之中的,最终打印出了数组的元素:a和b。

除了新增函数以外,ES6还为数组带来了一个新的概念:数组推导。

数组推导

数组推导:用简洁的写法,直接通过现有的数组生成新数组。

举个例子:加入我们有一个数组,我在这个数组的基础上,每个元素乘以2,得到一个新数组。

我们看看传统的实现方法:

 var arr1 = [1,2,3,4];
var arr2 = [];
for(let i=0;i<arr1.length;i++){
//每个元素乘以2后,push到数组arr2
arr2.push(arr1[i]*2);
}
console.log(arr2);
//结果:[2,4,6,8]

传统的方式,除了以上的方式,我们还可以用forEach方法实现。但我们现在介绍的主要是利用ES6提供的新写法:数组推导。

  var arr1 = [1, 2, 3, 4];
var arr2 = [for(i of arr1) i * 2];
console.log(arr2);
//结果: [ 2, 4, 6, 8 ]

我们同样可以得到数组arr2,它的值和上一段代码的一样。并且代码量大大地减少了。这就是数组推导给我们带来的便利。

在数组推导中,for..of后面还可以加上if语句,我们看来看看代码案例:

 var array1 = [1, 2, 3, 4];
var array2 = [for(i of array1) if(i>3) i];
console.log(array2);
//结果: [4]

在上面代码中,我们不再是对数组的元素乘以2,而是用if做了个判断:数组的元素要大于3。所以运行的结果是:[ 4 ]。

好了,数组的扩展介绍得差不多了,主要是一些新增函数的使用介绍,这些函数都非常便利,为开发者省去了不少代码量。如果存在疑惑,可以留言提问,前端君都会回复。

本节小结

总结:ES6为数组带来了很多很实用的方法:Array.of( )、Array.from( )、find( )、findIndex( )、fill( )、entries( )、values(),此外还有一个更简洁的语法:数组推导,能让我们更方便地生成一个新数组。
更多学习内容和干货请参考我的视频-我的空间

已连接

ES6中对数组的扩展的更多相关文章

  1. ES6中的数组方法扩展

    上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成9 ...

  2. ES6中的数组

    数组是js中很重要的数据类型,虽然在 ES5 中,关于数组的方法和属性很多.但为了更加简洁.高效的操作数组,ES6 中又在数组原型上和实例上新增了一些方法. 一.Array方法 1.1 Array.f ...

  3. ES6(三)数组的扩展

    1.Array.form ES6中,Array.from = function(items,mapfn,thisArg) {  }   Array.from 用于将 类数组 和 可遍历对象(实现了It ...

  4. ES6中对函数的扩展

    ES6一路扩展,字符串.数组.数值.对象无一“幸免”,ES6说要雨露均沾,函数也不能落下,今天,就来讲解ES6对函数的扩展. 参数的默认值 在开发中,给函数的参数指定默认值,是很普遍很常见的一个需求, ...

  5. ES6中对数值的扩展

    上一节和大家学习了字符串的扩展,这一节轮到了数值,我们一起来学习数值的扩展. 剧透一下,这一节并不会很烧脑,都是介绍类的知识讲解,理解性的东西不多,初学者们也可以愉快地看完. 传统的写法 在介绍数值的 ...

  6. ES6中的数组常用方法

    数组在JS中虽然没有函数地位那么高,但是也有着举足轻重的地位,下面我就结合这ES5中的一些常用的方法,与ES6中的一些方法做一些说明和实际用途.大家也可以关注我的微信公众号,蜗牛全栈. 一.ES5中数 ...

  7. ES6 学习6 数组的扩展

    本章学习要点: 扩展运算符 Array.from() Array.of() 数组实例的 copyWithin() 数组实例的 find() 和 findIndex() 数组实例的 fill() 数组实 ...

  8. ES6中的数组reduce()方法详解

    reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行),将其结果汇总为单个返回值. 1. 语法reduce说明 arr.reduce(callback(accumu ...

  9. ES6中有关数组的一些新操作

    1.Array.isArray() 用于确定传递的值是否是一个 Array. Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); ...

随机推荐

  1. mongodb的增加和删除

    一  mongodb中使用insert()方法来增加集合中的文档: db.myTable.insert({name:'arvin',age:12}) //对名为myTable的集合插入数据 插入数据 ...

  2. 使用RandomString方法后,结果返回相同的随机数解决办法

    所遇问题: 在做超市管理系统的登录项目时,在对“随机数的产生”出现一个问题,在产生多个随机数的时候,出现了产生了多个一样的随机数,具体代码如下: /// <summary> /// 生成随 ...

  3. java单元/集成测试中使用Testcontainers

    1.Testcontainers介绍: Testcontainers是一个Java库,它支持JUnit测试,提供公共数据库.SeleniumWeb浏览器或任何可以在Docker容器中运行的轻量级.一次 ...

  4. python基础-深浅拷贝

    深拷贝与浅拷贝 总结: # 浅拷贝:list dict: 嵌套的可变数据类型是同一个 # 深拷贝:list dict: 嵌套的不可变数据类型彼此独立 浅拷贝 # 个人理解: # 在内存中重新创建一个空 ...

  5. js获取dom节点之 id 获取

    在JavaScript中,标准的id选择器调用语法是: document.getElementById('myid').style.width = pc + "%"; 但是,今天发 ...

  6. PTA数据结构与算法题目集(中文) 7-6

    PTA数据结构与算法题目集(中文)  7-6 7-6 列出连通集 (25 分)   给定一个有N个顶点和E条边的无向图,请用DFS和BFS分别列出其所有的连通集.假设顶点从0到N−1编号.进行搜索时, ...

  7. CF633(div.2)B. Sorted Adjacent Differences

    题目描述 http://codeforces.com/contest/1339/problem/B 有一个长度为 \(n(3\le n \le 10^5)\) 的整数序列 \(a_1,a_2,..., ...

  8. Windows上安装Docker

    一.下载地址: https://hub.docker.com/editions/community/docker-ce-desktop-windows 二.安装直接下一步下一步就好了 具体可看: ht ...

  9. Git常用命令(一)

    $ git init 初始化仓库(会生成一个隐藏文件.git) $ git add + (文件名) 实现对指定文件的跟踪 $ git commit 提交更新$ git clone + URL 克隆远程 ...

  10. spring07

    关于spring的泛型依赖注入主要是继承等方面的知识 具体实现的简单的代码如下: package bao1; public class BaseRepository <T>{ } pack ...