ES6--数组的扩展

来源:互联网 发布:笔记本风扇反转软件 编辑:程序博客网 时间:2024/05/19 19:32

我是看了http://wiki.jikexueyuan.com/project/es6/array.html写的笔记,中间加了一些自己的理解

回顾下
concat() 连接两个或多个数组
join() 将数组的所有元素放入到一个字符串,并通过分隔符分隔
pop() 删除并返回数组的最后一个元素
posh() 从数组尾部添加一个或多个元素,返回新的长度
shift() 删除并返回数组的第一个元素
unshift() 向数组的开头添加一个或多个元素
reverse() 颠倒数组中的元素
slice(start, end) 从某个已有的数组返回选定的元素
splice() 从数组中删除/添加项目,然后返回被删除的项目
sort() 按一定得规则对数组排序

ES6

Array.from()
将两类对象转为真正的数组:类似数组的对象和可遍历的对象
比如:任何有length属性的对象 函数的arguments对象 等等

function foo(){    var args = Array.from(arguments);    console.log(args);}foo('a', 'b', 'c');//['a', 'b', 'c']

Array.from() 还可以接受第二个参数,作用类似于数组的map方法,对每个元素进行处理

Array.from(arrayLike, x => x*x);

Array.of()
将一组数值,转换为数组

Array.of(1,2,3) //[1,2,3]Array.of(3) //[3]Array.of(3).length //1

这个方法主要的目的是弥补数组构造函数Array()的不足,Array在参数少于2个时不会返回你想要的数组

let arr1 = Array();  //[]let arr2 = Array(3); //[undefined, undefined, undefined]let arr3 = Array(3,3)//[3,3]let arr4 = Array(1,2,3);//[1,2,3]

数组实例的find()和findIndex()(请注意“数组实例”,不是Array,更直白的说就是某个具体数组)
find():用于找出第一个符合条件的数组成员
它的参数是一个回调函数,所有数组成员依次执行该毁掉函数,直到找出第一个返回值为true的成员,然后返回该成员,如果没有符合的则返回undefined。

let found = [1,2,3,-4].find((n)=>n<0);console.log(found);//-4//或let found = [1,2,3,-4].find(func(n));function func(){    return n < 0;}

find的回调函数可以接受三个参数

array.find(function(val, index, arr){})

当前值,值的索引,原数组

findIndex() 用法和find类似 只是返回的是满足条件值的索引

find() findIndex() 这两个方法可以接受第二个参数,用来绑定回调函数的this对象
关于这一点的用途,我在网上搜了一下发现并没有,或许因为这个参数并不常用,可能英文的原文档有,我就猜测了一下作用:
猜测1:可能是调整循环的指针,比如从数组的第二位或第三位开始查找。
猜测2:向apply call 那样改变this 觉得这个可能性更高一点
我实际操作了一下,但无奈水平有限并没有什么结论,知道的朋友可以告诉我下,要是什么时候知道了,我会修改这部分的。

数组实例的fill()
使用给定值,填充一个数组

['a', 'b', 'c'].fill(7)// [7, 7, 7]new Array(3).fill(7)// [7, 7, 7]

可以看出来,如果原数组有元素则会全覆盖掉,创建一个数组,然后同时填充可能比较常用。
如果只有这个一个参数,那么这个方法我感觉没啥用
不过还好fill() 还可以接受第二、第三个参数,用于填充的起始和结束位置。

['a', 'b', 'c'].fill(7, 1, 2)// ['a', 7, 'c']let arr2 = ['a', 'b', 'c']arr2.splice(1, 1, 7);console.log(arr2);//['a', 7, 'c']

加了参数的这个方法和之前的splice()方法用途感觉差不多。

entries() keys() values()
ES6 提供三个新的方法——entries(),keys() 和 values()——用于遍历数组。它们都返回一个遍历器,可以用 for…of 循环进行遍历,唯一的区别是 keys() 是对键名的遍历、values() 是对键值的遍历,entries() 是对键值对的遍历

for (let index of ['a', 'b'].keys()) {  console.log(index);}// 0// 1for (let elem of ['a', 'b'].values()) {  console.log(elem);}// 'a'// 'b'for (let [index, elem] of ['a', 'b'].entries()) {  console.log(index, elem);}// 0 "a"// 1 "b"

一开始很好奇,本来数组就可以用for of 变脸为什么要用这3个方法,然后尝试了一下,正常遍历如果不做处理只能得到值,但是加上keys() values() entires() 就可以得到相应的东西,比自己去处理方便了。

数组实例的includes()
方法返回一个布尔值,表示某个数组是否包含给定的值,它的可选参数表示开始搜索的位置。

[1, 2, 3].includes(3, 3);  // false[1, 2, 3].includes(3, 1); // true

这个方法说是说与ES7 不过现在也可以使用。

数组推导
就是通过现有数组,生成新的数组。
这个有意思了,想想就知道会可以是比较常用的方法。
最近本写法

let a1 = [1,2,3,4];let a2 = [for(i of a1) i*2];a2 //2,4,6,8

注意:数组推导中, for…of 结构总是写在最前面,返回的表达式写在后面后面的表达式可以很复杂 我们一点点的来

添加if条件

var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];[for (year of years) if (year > 2000) year];// [ 2006, 2010, 2014 ][for (year of years) if (year > 2000) if(year < 2010) year];// [ 2006][for (year of years) if (year > 2000 && year < 2010) year];// [ 2006]

在一个推导中使用多个for…of,构成多重循环

var a1 = ["x1", "y1"];var a2 = ["x2", "y2"];var a3 = ["x3", "y3"];[for (s of a1) for (w of a2) for (r of a3) console.log(s + w + r)];// x1x2x3// x1x2y3// x1y2x3// x1y2y3// y1x2x3// y1x2y3// y1y2x3// y1y2y3//排列组合的结果

不过需要注意的是,for …of循环复杂点的写法是for(let s of a1),这里我们省略了let ,没有写不代表用的是var
字符串也可以视为数组,用推导,而且我们还有Array.from()方法将类数组转为数组去用。

从上面的例子可以看得出来这个数组的扩展很像map 和 filter 方法。

[for (i of [1, 2, 3]) i * i];// 等价于[1, 2, 3].map(function (i) { return i * i });[for (i of [1,4,2,3,-8]) if (i < 3) i];// 等价于[1,4,2,3,-8].filter(function(i) { return i < 3 });

具体使用时根据情况选择吧


插播个有关也无关的概念吧
就是Array对象方法,和 Array.prototype方法。
Array对象 是我们 arr = new Array(1,2,3) new关键词后面的,他是一个对象,和Number,String等一样 上面提到的Array.from()中 from()是Array对象的方法。
Array.prototype方法 就是我们最常用的一些 比如 push , pop, concat map 等等(所以说本文一开始我写错了概念),而Array.prototype方法 也是我们常说的实例方法。

Array对象方法 Array实例方法(Array.prototype方法) 这里会好理解一些吧。

其实这些概念不懂也并不太会影响实际开发,比如我现在才意识到(尴尬而不是礼貌的微笑)

原创粉丝点击