频道栏目
首页 > 资讯 > HTML/CSS > 正文

ES6--数组的扩展

17-09-16        来源:[db:作者]  
收藏   我要投稿

回顾下

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
// 1

for (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方法) 这里会好理解一些吧。

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

相关TAG标签
上一篇:C语言读写mysql
下一篇:dwz个人学习笔记(三)dialog弹出框,最小化,弹出位置,dialog中刷新dialog
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站