美文网首页
ES6之增强的数组功能

ES6之增强的数组功能

作者: 27亿光年中的小小尘埃 | 来源:发表于2019-12-20 01:13 被阅读0次

Array.of()

解决创建数组时的怪异行为, Array.of() 方法总会创建一个包含所有传
入参数的数组,而不管参数的数量与类型。下

Array.from()

将可迭代对象或者类数组对象作为第一个参数传入,Array.from()就能返回一个数组。也就意味着将任意包含 Symbol.iterator属性的对象转换为数组。如果你想实行进一步的数组转换,你可以向Array.from()方法传递一个映射用的函数作为第二个参数。此函数会将类数组对象的每一个值转换为目标形式,并将其存储在目标数组的对应位置上。

function translate() {
    return Array.from(arguments, (value) => value + 1);
}
let numbers = translate(1, 2, 3);
console.log(numbers); // 2,3,4

此代码将 (value) => value + 1 作为映射函数传递给了 Array.from() 方法,对每个项进行
了一次 +1 处理。如果映射函数需要在对象上工作,你可以手动传递第三个参数给Array.from() 方法,从而指定映射函数内部的 this 值。

let helper = {
    diff: 1,
    add(value) {
        return value + this.diff;
    }
};
function translate() {
    return Array.from(arguments, helper.add, helper);
}
let numbers = translate(1, 2, 3);
console.log(numbers); // 2,3,4

数组新增的方法

find()findIndex() 方法均接受两个参数:一个回调函数、一个可选值用于指定回调函
数内部的 this 。该回调函数可接收三个参数:数组的某个元素、该元素对应的索引位置、
以及该数组自身,这与 map() 和 forEach() 方法的回调函数所用的参数一致。该回调函数
应当在给定的元素满足你定义的条件时返回 true ,而 find() 与 findIndex() 方法均会在
回调函数第一次返回 true 时停止查找。
二者唯一的区别是: find() 方法会返回匹配的值,而 findIndex() 方法则会返回匹配位置
的索引。

示例:

let numbers = [25, 30, 35, 40, 45];
console.log(numbers.find(n => n > 33)); // 35
console.log(numbers.findIndex(n => n > 33)); // 2

fill() 方法

fill() 方法能使用特定值填充数组中的一个或多个元素。当只使用一个参数的时候,该方法
会用该参数的值填充整个数组,例如:

let numbers = [1, 2, 3, 4];
numbers.fill(1);
console.log(numbers.toString()); // 1,1,1,1

此代码中的 numbers.fill(1) 调用将 numbers 数组中的所有元素都填充为 1 。若你不想改
变数组中的所有元素,而只想改变其中一部分,那么可以使用可选的起始位置参数与结束位
置参数(不包括结束位置的那个元素),就像这样:

let numbers = [1, 2, 3, 4];
numbers.fill(1, 2);
console.log(numbers.toString()); // 1,2,1,1
numbers.fill(0, 1, 3);
console.log(numbers.toString()); // 1,0,0,1

如果提供的起始位置或结束位置为负数,则它们会被加上数组的长度来算出最终的位
置。例如:将起始位置指定为 -1 ,就等于是 array.length - 1 ,这里的 array 指的
是 fill() 方法所要处理的数组。

copyWithin() 方法

用单个值来填充数组不同, copyWithin()方法允许你在数组内部复制自身元素。为此你需要
传递两个或者3个参数给 copyWithin()方法:从什么位置开始进行填充,以及被用来复制的数据的起
始位置索引,结束索引。

let numbers = [1, 2, 3, 4];
// 从索引 2 的位置开始粘贴
// 从数组索引 0 的位置开始复制数据
numbers.copyWithin(2, 0);
console.log(numbers.toString()); // 1,2,1,2

类似于 fill() 方法,如果你向 copyWithin() 方法传递负数参数,数组的长度会自动
被加到该参数的值上,以便算出正确的索引位置。

类型话数组主要与webGl相关,此处就不做描述

相关文章

  • ES6之增强的数组功能

    Array.of() 解决创建数组时的怪异行为, Array.of() 方法总会创建一个包含所有传入参数的数组,而...

  • [ES6] 增强的数组功能

    新增的数组 API 静态方法 Array.of(...args): 使用指定的数组项创建一个新数组 在 new A...

  • ES6(十)增强的数组功能1

    1.创建数组 2.新增的方法 3.fill()方法 4.copyWithin() 方法 创建数组 ES6之前:Ar...

  • JS基础之ES6 数组的改进

    数组是一种基础的JavaScript对象。ES6标准继续改进数组,添加了很多功能。 一、 创建数组 在es6以前,...

  • es6语言特性的总结(2)

    数组 ES6中对于数据做了进一步的增强,以便能够更加方便地创建数组以及操作数组。 创建数组 Array.of 该方...

  • es6-数组新增功能与改进

    数组 es6加入了一些数组的新功能,以及改进了旧功能 保证永远传的是数组的元素 将类对象转换成数组的方式 映射转换...

  • 2018-03-26

    拥抱 ES6 之数组扩展 https://segmentfault.com/a/1190000003857670?...

  • 10. 增强的数组功能

    1. 创建数组 1.1 Array.of() 方法 使用的都是构造函数,但是传入不同参数造成的结果不同。这种行为既...

  • js数组扁平化和数组去重处理(对比)

    数组扁平化(多维数组)(es6) 数组去重 (es6) 数组去重(es5)

  • ES6 数组新用法(一)

    《深入理解ES6》阅读随笔 在 ES6 中,对数组功能进行了扩展。可以使用新增的 Array.of() 和 Arr...

网友评论

      本文标题:ES6之增强的数组功能

      本文链接:https://www.haomeiwen.com/subject/prcbnctx.html