ECMAScript6 新特性——“数组的扩展”
2016-07-19 11:03
393 查看
1 Array.from()
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。语法如下:
ES5:
var arr = [].slice.call(arrayLike);
ES6:
var arr = Array.from(arrayLike);
var o = {length: 3}; var a = Array.from(o); console.log(Object.prototype.toString.call(a)); //[object Array] console.log(a.toString()); //,, console.log(0 in a); //true console.log(a[0]); //undefined a.forEach(function(item, index, array) { console.log(item); //undefined x 3 });
又如:
var o = {0: "Oliver", 1: 18, length: 2}; var a = Array.from(o); console.log(Object.prototype.toString.call(a)); //[object Array] console.log(a.toString()); //Oliver,18 console.log(0 in a); //true console.log(a[0]); //Oliver a.forEach(function(item, index, array) { console.log(item); //Oliver //18 });
如果参数是数组,Array.from会返回一个一模一样的数组
var a = Array.from([1,2,3]); console.log(a.join("")); //123 var arr = [].concat([1,2,3]); console.log(arr.join("")); //123
任何有length属性的对象,都可以通过Array.from方法转为数组
Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
var a = Array.from([1,2,3], x => x + 1); console.log(a.join("")); //2,3,4 var a = Array.from([1,2,3]).map(function(x) {return x + 1;}); console.log(a.join("")); //2,3,4
如果map函数里面用到了this关键字,还可以传入该方法第三个参数,用来绑定this
2 Array.of()
Array.of方法用于将一组值,转换为数组。var a0 = Array(3); var a1 = Array.of(3); var a2 = Array.of(undefined); console.log(a0, a1, a2); //[] [3] [undefined]
该方法只是用于弥补Array()的不足
3 数组实例的copyWithin()
在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。var a = [1,2,3,4,5]; var newArr = a.copyWithin(0, 2, 3); console.log(newArr); //[3, 2, 3, 4, 5] console.log(a); //原来的a也被修改了 var newArr = Array.prototype.copyWithin.call(a, 0, 2); console.log(newArr); //[3, 4, 5, 4, 5]
4 数组实例的find()喝findIndex()
find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
var a = [13,2,0,14,-5]; var result = a.find(function(x, i, a) { return x > 0; }); console.log(result); //13 var result = a.find(x => x > 0); console.log(result); //13
findIndex方法,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
var a = [13,2,0,14,-5]; var result = a.findIndex(function(x, i, a) { return x < 0; }); console.log(result); //4 var result = a.findIndex(x => x < 0); console.log(a[result]); //-5
5 数组实例的fill()
fill方法使用给定值,填充一个数组。方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
var a = [,,,]; console.log(a); //[] a.fill(); console.log(a); //[undefined, undefined, undefined] var a = [1,2,3]; a.fill(0); console.log(a); //[0,0,0] a.fill(1, 1, 2); console.log(a); //[0,1,0]
6 数组实例的entries(),keys(),values()
可以用for...of循环进行遍历keys()是对键名的遍历
values()是对键值的遍历
entries()是对键值对的遍历
var a = [1, 2, 3, 4, 5]; console.log(a.keys()); //ArrayIterator{} for(let index of a.keys()){ console.log(index); }; for(let [index, elem] of a.entries()){ console.log(index, elem); }; //ArrayIterator {} //0 //1 //2 //3 //4 //0 1 //1 2 //2 3 //3 4 //4 5
7 ES7:数组实例的includes()
方法返回一个布尔值,表示某个数组是否包含给定的值,该方法属于ES7var a = [1,2,3,4,5,NaN]; console.log(a.includes(2), a.includes(NaN)); //ture true //.includes方法支持比较NaN console.log(a.indexOf(2), a.indexOf(NaN)); //1 -1 //.indexOf则有缺陷
8 数组的空位
数组的空位指,数组的某一个位置没有任何值空位不是undefined,一个位置的值等于undefined,依然是有值的。空位是没有任何值
forEach(),
filter(),
every()和
some()都会跳过空位。
map()会跳过空位,但会保留这个值
join()和
toString()会将空位视为undefined,而undefined和null会被处理成空字符串。
ES6则是明确将空位转为undefined
Array.from方法会将数组的空位,转为undefined
扩展运算符(
...)也会将空位转为undefined
copyWithin()会连空位一起拷贝
fill()会将空位视为正常的数组位置
for...of循环也会遍历空位
entries()、
keys()、
values()、
find()和
findIndex()会将空位处理成undefined
9 ES7:数组推导
ES7的新功能,允许直接通过现有数组生成新数组var a1 = [1, 2, 3, 4]; var a2 = [for (i of a1) i * 2]; a2 // [2, 4, 6, 8]
相关文章推荐
- BSS段 data段 text段 堆heap 和 栈stack
- 《C++ 笔记》 Part5 C++ 资源大全中文版
- 游戏AI设计经验分享——行为树的研究
- linux命令笔记
- 计蒜客-程序设计竞赛入门
- 用js动态添加html元素,以及属性的简单实例
- CodeForces 447B DZY Loves Strings
- O(n)线性时间找第K大,中位数
- 全选、全不选checked的应用
- djago app 中model数量限制
- 关于图片oom以及图片回收机制
- 实现一个简单的数据库
- Kali Linux 中VIM没有配色的解决办法
- 使用mybatis generator时出现xml解析错误:XML Parser Errors occurred
- MySQL常见命令总结及资料汇总
- cocospod遇到的问题
- 为什么要分页加载
- mybatis-generator 生成器
- Linux常用命令大全
- Hibernate 官方文档(入门) 第一章 1.2 - Mapping associations 映射联系