ECMAScript6 新特性——“数组的扩展”

Eminjannn 发布于2019-08-19 18:01 / 2701人阅读

摘要：原来的也被修改了数组实例的喝方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为的成员，然后返回该成员。数组实例的方法使用给定值，填充一个数组。

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()

方法返回一个布尔值，表示某个数组是否包含给定的值，该方法属于ES7

var 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]

云服务器 GPU云服务器新特性新特性整理新特性总结 PHP新特性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79106.html

ECMAScript6(6)：数组的扩展

摘要：数组的扩展将类数组对象和可遍历对象转化为真正的数组。这两个函数的参数都是回调函数。遍历数组找到符合条件回调函数返回为的第一个值返回其值返回其下标。这三个方法用来遍历数组返回一个遍历器供使用其中是对键的遍历是对值的遍历是对键值对的遍历。数组的扩展 Array, from() 将类数组对象和可遍历对象转化为真正的数组。 var arrayLike = { 0 : a, 1 : b...

DrizzleX 2019-08-23 11:46 评论0 收藏0
【前端】ES6入门基础知识

摘要：关于的入门了解新增模板字符串为提供了简单的字符串插值功能箭头函数操作符左边为输入的参数，而右边则是进行的操作以及返回的值。将对象纳入规范，提供了原生的对象。增加了和命令，用来声明变量。关于ES6的入门了解新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-o...

philadelphia 2019-08-21 17:21 评论0 收藏0
ECMAScript6 新特性——“let和const命令”

摘要：基本用法所声明的变量，只在命令所在的代码块内有效。在循环中适合使用不存在变量提升不像那样会发生变量提升现象暂时性死区只要块级作用域内存在命令，它所声明的变量就绑定这个区域，不再受外部的影响。块级作用域实际上为新增了块级作用域。 1 let 基本用法所声明的变量，只在let命令所在的代码块内有效。 { let b = 100; console.log(b); //100...

PascalXie 2019-08-19 17:59 评论0 收藏0
ECMAScript6 新特性——“正则的扩展”

摘要：第二个参数指定修饰符，如果存在则使用指定的修饰符。属性表示是否设置了修饰符属性的属性返回正则表达式的正文的属性返回正则表达式的修饰符字符串必须转义，才能作为正则模式。 1 RegExp构造函数 ES6 允许RegExp构造函数接受正则表达式作为参数。第二个参数指定修饰符，如果存在则使用指定的修饰符。 var regexp = new RegExp(/xyz/i, ig); consol...

Shisui 2019-08-19 18:00 评论0 收藏0
ECMAScript6 新特性——“数值的扩展”

摘要：二进制和八进制表示法提供了二进制和八进制数值的新的写法，分别用前缀或和或表示。用来检查是否为有穷以及是否为这两个新方法只对数值有效，非数值一律返回。引入了和这两个常量，用来表示这个范围的上下限。因为有精度限制，超过的次方的值无法精确表示。 1 二进制和八进制表示法 ES6提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。 console.log(0b10...

Dean 2019-08-19 18:02 评论0 收藏0