专栏首页寻找石头鱼深入理解ES6之—增强的数组功能

深入理解ES6之—增强的数组功能

创建数组

Array.of()方法

ES6为数组新增创建方法的目的之一,是帮助开发者在使用Array构造器时避开js语言的一个怪异点。Array.of()方法总会创建一个包含所有传入参数的数组,而不管参数的数量与类型。

let arr = Array.of(1, 2);
console.log(arr.length);//2

let arr1 = Array.of(3);
console.log(arr1.length);//1
console.log(arr1[0]);//3

let arr2 = Array.of('2');
console.log(arr2.length);//1
console.log(arr2[0]);//'2'

在使用Array.of()方法创建数组时,只需将想要包含在数组内的值作为参数传入。

Array.from()方法

在js中将非数组对象转换为真正的数组是非常麻烦的。在ES6中,将可迭代对象或者类数组对象作为第一个参数传入,Array.from()就能返回一个数组。

function arga(...args) {
    let arg = Array.from(arguments);
    console.log(arg);
}

arga('cc', 26, 'man');//['cc',26,'man']

映射转换

如果你想实行进一步的数组转换,你可以向Array.from()方法传递一个映射用的函数作为第二个参数。此函数会将数组对象的每一个值转换为目标形式,并将其存储在目标数组的对应位置上。

function arga(...args) {
    return Array.from(arguments, value => value + 1);
}

let arr = arga('cc', 26, 'man');
console.log(arr);//['cc1',27,'man1']

如果映射函数需要在对象上工作,你可以手动传递第三个参数给Array.from()方法,从而指定映射函数内部的this值

let helper = {
    diff: 1,
    add(value) {
        return value + this.diff;
    }
}

function translate() {
    return Array.from(arguments, helper.add, helper);
}

let arr = translate('cc', 26, 'man');
console.log(arr);

可迭代对象上使用

Array.from()方法不仅可以用于类数组对象,也可用于迭代对象。(Set,Map)

数组上的新方法

find()与findIndex()方法

find()与findIndex()方法均接受两个参数:一个回调函数,一个可选值用于指定回调函数内部的this。该回调函数可接受三个参数:数组的某个元素,该元素对应的索引位置,以及该数组本身。该回调函数应当在给定的元素满足你定义的条件时返回true,而find()和findIndex()方法均会在回调函数第一次返回true时停止查找。

二者唯一的区别是:find()方法返回匹配的值,而findIndex()返回匹配位置的索引。

let arr = [1, 2, 3, 'cc', 5, 1, 9];

console.log(arr.find((value, keys, arr) => {
    return value > 2;
}))//3

console.log(arr.findIndex((value, keys, arr) => {
    return value > 2;
}))//2

fill()方法

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

let arr = [1, 2, 3, 'cc', 5];
arr.fill(1);
console.log(arr);//[1,1,1,1,1];

如果不想改变数组中的所有元素,而只是想改变其中一部分,那么可以使用可选的起始位置参数与结束位置参数(不包括结束位置的那个元素)

let arr = [1, 2, 3, 'cc', 5];

arr.fill(1, 2);
console.log(arr);//[1,2,1,1,1]

arr.fill(0, 1, 3);
console.log(arr);//[1,0,0,1,1];

copyWithin()方法

copyWithin()方法与fill()类似,可以一次性修改数组的多个元素。不过,与fill()使用单个值来填充数组不同,copyWithin()方法允许你在数组内部复制自身元素。为此你需要传递两个参数给copyWithin()方法:从什么位置开始填充,以及被用来复制的数据的起始位置索引。

//将数组的前两个元素复制到数组的最后两个位置
let arr = [1, 2, 3, 'cc', 5];

arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]

默认情况下,copyWithin()方法总是会一直复制到数组末尾,不过你还可以提供一个可选参数来限制到底有多少元素会被覆盖。这第三个参数指定了复制停止的位置(不包含该位置本身)。

let arr = [1, 2, 3, 'cc', 5, 9, 17];

//从索引3的位置开始粘贴
//从索引0的位置开始复制
//遇到索引3时停止复制
arr.copyWithin(3, 0, 3);
console.log(arr);//[1,2,3,1,2,3,17]

类型化数组

类型化数组是有特殊用途的数组,被设计用来处理数值类型数据。

数值数据类型

类型化数组允许存储并操作八种不同的数值类型:

  1. 8位有符号整数(int8)
  2. 8位无符号整数(uint8)
  3. 16位有符号整数(int16)
  4. 16位无符号整数(uint16)
  5. 32位有符号整数(int32)
  6. 32位无符号整数(uint32)
  7. 32位浮点数(float32)
  8. 64位浮点数(float64)

所有与类型化数组相关的操作和对象都围绕着这八种数据类型。为了使用它们,你首先需要创建一个数组缓冲区用于存储数据。

数组缓冲区

数组缓冲区(array buffer)是内存中包含一定数量字节的区域,而所有的类型化数组都基于数组缓冲区。你可以使用下例这样使用ArrayBuffer构造器来创建一个数组缓冲区:

let buffer = new ArrayBuffer(10);//分配了10个字节

也可以使用slice()方法来创建一个新的,包含已有缓冲区部分内容的数组缓冲区。该slice()方法 类似于数组上的同名方法,可以使用起始位置与结束位置参数,返回由原缓冲区元素组成的一个新的ArrayBuffer实例。

let buffer1 = buffer.slice(2, 5);
console.log(buffer1.byteLength);//3

仅仅创建一个缓冲区而不能写入数据没有什么意义。为了写入数据,你需要创建一个视图。

使用视图操作数组缓冲区

数组缓冲区代表了一块内存区域,而视图则是你操作这块区域的接口。视图工作在数组缓冲区或者其子集上,可以读写某种数值数据类型的数据。DataView类型是数组缓冲区的通用视图,允许你对前述所有八种数值数据类型进行操作。

使用DataView首先需要创建ArrayBuffer的一个实例,再在上面创建一个新的ArrayBuffer视图

循环数组元素的几种方法

在我们的开发过程中都有遇到这样的问题:逐个取出数组中的元素。那么在js中有哪些方法可以完成这个工作呢?

for循环

可能我们最先能想到的是for循环了,这也是我们最常用的。

let arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

for-in

通过键值(索引)来对数组进行遍历

let arr = [1, 2, 3, 4, 5];

for (let i in arr) {
    console.log(arr[i]);
}

forEach()

forEach()方法是数组对象的原生方法,用于对数组进行遍历,传入的参数是一个回调函数,该回调函数接收三个参数元素值,元素索引和数组对象

let arr = [1, 2, 3, 4, 5];

arr.forEach((value, key, arr) => console.log(`索引${key}的值是${value}`));

for-of

for-of循环在循环每次执行时会调用可迭代对象的next()方法,并将结果对象的value储存在一个变量上。循环过程会持续到结果对象的done属性编程true为止。

let arr = [1, 2, 3, 4, 5];

for (let num of arr) {
    console.log(num);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js数组方法详解(最新最全)

    数组是js中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响。本文所有的栗子都是在es...

    寻找石头鱼
  • 深入理解ES6之—数据解构

    解构赋值表达式的值为表达式右侧的值。当解构表达式的右侧的计算结果为null或者undefined时,会抛出错误。

    寻找石头鱼
  • 深入理解ES6之—对象

    在js中比较两个值时,你可能会用相等运算符==或者严格相等运算符 ===。为了避免在比较时发生强制类型转换,许多开发者更倾向于使用后者。

    寻找石头鱼
  • ES6系列_8之函数和数组

    ES6为我们提供了这样的解构赋值使在前后端分离时,后端返回来JSON格式的数据,前端可以直接把这个JSON格式数据当作参数,传递到函数内部进行处理。比如:

    wfaceboss
  • 第29天:js-数组添加删除、数组和字符串相互转换

    一、添加数组 var arr=[1,3,5]; arr.push(7,9);//添加7和9到数组arr后面,得到[1,3,5,7,9] 1、push();可向数...

    半指温柔乐
  • 前端学习(40)~js学习(十七):数组的常见方法&数组的遍历

    unshift():在数组最前面插入一个或多个元素,返回结果为该数组新的长度。插入元素后,其他元素的索引会依次调整。

    Vincent-yuan
  • ES6系列_6之新增的数组知识

    JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式,json数组格式如下:

    wfaceboss
  • ES6数组操作方法

    concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个副本。

    用户1437675
  • JavaScript数组创建及常见方法汇总(修订版)

    插入:可以向指定位置插入任意数量的元素,需要提供3个参数:起始位置、0(要删除的元素数量)、插入的元素

    用户1272076
  • JavaScript数组创建及常见方法汇总

    插入:可以向指定位置插入任意数量的元素,需要提供3个参数:起始位置、0(要删除的元素数量)、插入的元素

    用户1272076

扫码关注云+社区

领取腾讯云代金券