深入浅出ES6中Array.from()方法

文章目录

  • 前言
  • 一、类数组是啥?
  • 二、Array.from()
    • 1.语法
    • 2.浅拷贝
    • 3.从类数组结构生成数组
    • 4.从可迭代对象生成数组
    • 5.增强新数组
  • 总结


前言

        Array构造函数中有一个ES6新增的创建数组的静态方法from()用于将类数组结构或可迭代对象转换为数组实例

一、类数组是啥?

        顾名思义,就是类似于数组,但又不完全是数组,我们亲切的称它为和数组有相同结构的对象,注意再强调一遍它是对象!

        那它和数组有什么本质的区别嘞?我们引入JavaScript中最常见的类数组:arguments,废话不多说,上代码:

function fn() {
    console.log(arguments);
}
fn('I','love','u');

        我们定义一个函数fn用来打印函数的参数,返回arguments对象,在控制台我们可以看到以下输出结果:

        深入浅出ES6中Array.from()方法_第1张图片

        于是乎,我们在控制台打印个数组 ['I', 'love', 'u'] 查看它的结构:

                                                              深入浅出ES6中Array.from()方法_第2张图片

         经过一系列的比较我们发现:类数组和数组一样都具有键、值对以及length属性,不同之处在于类数组不具有数组原型上定义的丰富的形如concat()、map()等操作数组的方法。

下面我们来总结一下:

  1.      类数组是一个对象                                                                                                       
  2.      类数组具有length属性                                                                                                 
  3.      类数组使用数字作为key值

        JavaScript中还有许多类数组,由于今天的内容不在这儿,所以就不再一一赘述,有补充的老铁可以在评论区留言鸭!

二、Array.from()

1.语法

 Array.from(arraylLike, MapFn, thisArg)

  • arrayLike:第一个参数,指定一个类数组对象or可迭代对象
  • MapFn(可选):第二个参数,新数组中的每一个元素执行该回调函数
  • thisArg(可选):第三个参数,执行回调函数MapFn时的this对象

返回值:一个新数组实例

2.浅拷贝

下面以一个简单的例子使用Array.from()方法进行数组的浅拷贝

浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。

示例如下:

const arr = [1, 2, 3];
// 浅拷贝,只复制指向对象的指针,不复制对象本身
const arrCopy = Array.from(arr);
console.log(arrCopy);    // [1, 2, 3]
console.log(arr === arrCopy);    // false

3.从类数组结构生成数组

根据上栏类数组的特性可以知道字符串是类数组的结构

下面我们通过两个小例子使用Array.from()方法进行以下操作

  • 将字符串对象拆分成单字符数组实例
  • 将arguments对象转化为数组实例

示例如下:

let str = "FFPrincess";
console.log(Array.from(str));
// ['F','F','P','r','i','n','c','e','s','s']
function arrayLike() {
    console.log(Array.from(arguments));
}
arrayLike('a','b','c');
// ['a', 'b', 'c']

4.从可迭代对象生成数组

对ES6新增集合类型Map与Set(后续文章详细介绍),对于其可迭代的特性

下面我们通过两个小例子使用Array.from()方法进行以下操作:

  • 从Set集合中生成数组实例
  • 从Map集合中分别迭代键、值生成各自的数组实例

示例如下:

const s = new Set(["one", "two", "three"]);
console.log(Array.from(s));
// ["one", "two", "three"]
const m = new Map([['1','red'], ['2','yellow'], ['3','green']]);
console.log(Array.from(m.keys()));
// [1, 2, 3]
console.log(Array.from(m.values()));
// ["red", "yellow", "green"]

5.增强新数组

当我们为Array.from()指定了第二个参数以后,我们便不用再像此前以Array.from().map()的形式通过创建中间数组来增强新数组了,只需要通过第二个参数作为映射函数直接增强新数组的值。

下面我们通过一个小例子使用Array.from()方法进行以下操作实现原数组数组的二次幂:

  • 使用箭头函数(后续文章介绍)表达式作为参数传入增强数组

示例如下:

const arr_1 = [2,4,6,8];
const arr_2 = Array.from(arr_1, x => x**2);
console.log(arr_2);   
// [4, 16, 32, 64]

当我们为Array.from()指定了第三个参数以后,表示映射函数的this值,this用来指向该函数的调用者(具体含义后续文章详细介绍)

下面我们通过一个小例子使用Array.from()方法进行以下操作实现原数组的增量为1:

  • 通过对象字面量创建对象obj并在其内部定义操作新数组的函数add
  • 将函数作为Array.from()第二个参数传入
  • 指定Array.from()第三个参数将this指向调用该函数的对象

示例如下:

let obj = {
    add(value) {
        return value + 1;
    }
}
const arr_1 = [2,4,6,8];
const arr_2 = Array.from(arr_1, obj.add, obj);
console.log(arr_2);
// [3, 5, 7, 9]

总结

        以上就是今天介绍主要内容,本文介绍了ES6新增Array.from()的基本使用,我言简意赅地将它的一系列操作称为“转正”,基于类数组(也可称作伪数组)对象及可迭代对象最终通过它转换为数组对象,从而实现了“转正”后的数组对象可以使用其内建的丰富的操作数组的方法。                       

你可能感兴趣的:(javascript,es6)