Array构造函数中有一个ES6新增的创建数组的静态方法from()用于将类数组结构或可迭代对象转换为数组实例
顾名思义,就是类似于数组,但又不完全是数组,我们亲切的称它为和数组有相同结构的对象,注意再强调一遍它是对象!
那它和数组有什么本质的区别嘞?我们引入JavaScript中最常见的类数组:arguments,废话不多说,上代码:
function fn() {
console.log(arguments);
}
fn('I','love','u');
我们定义一个函数fn用来打印函数的参数,返回arguments对象,在控制台我们可以看到以下输出结果:
于是乎,我们在控制台打印个数组 ['I', 'love', 'u'] 查看它的结构:
经过一系列的比较我们发现:类数组和数组一样都具有键、值对以及length属性,不同之处在于类数组不具有数组原型上定义的丰富的形如concat()、map()等操作数组的方法。
下面我们来总结一下:
- 类数组是一个对象
- 类数组具有length属性
- 类数组使用数字作为key值
JavaScript中还有许多类数组,由于今天的内容不在这儿,所以就不再一一赘述,有补充的老铁可以在评论区留言鸭!
Array.from(arraylLike, MapFn, thisArg)
- arrayLike:第一个参数,指定一个类数组对象or可迭代对象
- MapFn(可选):第二个参数,新数组中的每一个元素执行该回调函数
- thisArg(可选):第三个参数,执行回调函数MapFn时的this对象
返回值:一个新数组实例
下面以一个简单的例子使用Array.from()方法进行数组的浅拷贝
浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。
示例如下:
const arr = [1, 2, 3];
// 浅拷贝,只复制指向对象的指针,不复制对象本身
const arrCopy = Array.from(arr);
console.log(arrCopy); // [1, 2, 3]
console.log(arr === arrCopy); // false
根据上栏类数组的特性可以知道字符串是类数组的结构
下面我们通过两个小例子使用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']
对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"]
当我们为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()的基本使用,我言简意赅地将它的一系列操作称为“转正”,基于类数组(也可称作伪数组)对象及可迭代对象最终通过它转换为数组对象,从而实现了“转正”后的数组对象可以使用其内建的丰富的操作数组的方法。