深入浅出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对象，在控制台我们可以看到以下输出结果：

        

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

                                                              

         经过一系列的比较我们发现：类数组和数组一样都具有键、值对以及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()的基本使用，我言简意赅地将它的一系列操作称为“转正”，基于类数组(也可称作伪数组)对象及可迭代对象最终通过它转换为数组对象，从而实现了“转正”后的数组对象可以使用其内建的丰富的操作数组的方法。