ECMAScript6 新特性——“数组的扩展”
来源:互联网 发布:如何用编程能力赚钱 编辑:程序博客网 时间:2024/05/17 10:07
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); //trueconsole.log(a[0]); //undefineda.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,18console.log(0 in a); //trueconsole.log(a[0]); //Olivera.forEach(function(item, index, array) { console.log(item); //Oliver //18});
如果参数是数组,Array.from会返回一个一模一样的数组
var a = Array.from([1,2,3]);console.log(a.join("")); //123var 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,4var 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); //13var 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); //4var 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()
方法返回一个布尔值,表示某个数组是否包含给定的值,该方法属于ES7
var a = [1,2,3,4,5,NaN];console.log(a.includes(2), a.includes(NaN)); //ture true//.includes方法支持比较NaNconsole.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扩展运算符(
...
)也会将空位转为undefinedcopyWithin()
会连空位一起拷贝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]
- ECMAScript6 新特性——“数组的扩展”
- ECMAScript6的新特性--数据类型
- ECMAScript6的新特性简述
- ECMAScript6的新特性简述
- ECMAScript6的新特性总结
- ECMAScript6标准数组的扩展
- ECMAScript6笔记:数组的扩展
- ECMAScript6(6):数组的扩展
- ECMAScript6的新特性箭头函数
- ECMAScript6新特性简介
- ECMAScript6 新特性总结
- ECMAScript6(ES6)新特性
- ECMAScript6-学习笔记(数组的扩展)
- 【JavaScript】1.ECMAScript6新特性
- ECMAScript6新特性(一)
- ECMAScript5和ECMAScript6的新特性及浏览器支持情况
- ECMAScript6数值的扩展
- ECMAScript6(ES6)标准之对象Object扩展方法及新特性
- 高效调用lua函数
- BSS段 data段 text段 堆heap 和 栈stack
- Java 应用一般架构
- 计蒜客-程序设计竞赛入门
- 游戏AI设计经验分享——行为树的研究
- ECMAScript6 新特性——“数组的扩展”
- 10张图带你深入理解Docker容器和镜像
- CodeForces 678D Iterated Linear Function 矩阵快速幂
- js本地存储 localstorage
- swift7-可选类型
- oracle 新建表空间
- VS2013下安装&编译Windows Caffe
- imageloader的使用
- java 抽象类和接口区别