JS数组之new Array()/Array.of()/Array.from()

794 阅读3分钟

这是我参与更文挑战的第25天,活动详情查看: 更文挑战

数组API是JS开发者频繁使用的,在JS学习中很重要。

数组是一个基础的一维数据结构,在各种编程语言中都非常重要。JS天生的灵活性,又进一步发挥了数组的特长,丰富了数组的使用场景。

leetcode中数组相关的题目占比也非常多,所以熟练使用数组的各种API非常有必要。

Array的构造器

Array构造器用于创建一个新的数组,通常我们推荐使用对象字面量的方式创建一个数组,例如var a = []就是一个比较好的写法。比如我想创建一个长度为6的空数组,用对象字面量的方式是无法创建的。

//使用Array构造器,可以自定义长度。
var a = Array(2)// [empty × 2]
// 使用对象字面量
var b = [];
b.length = 6; // [undefined × 6]

new Array(arg1,arg2,...) 参数长度为0或长度大于等于2时,传入的参数将哪找顺序依次成为新数组的第0到第N项(参数长度为0时,返回空数组)。

new Array(len) 当len不是数值的时候,处理和上面是一样的,返回一个只包含len元素的数组,当len为数值的时候,返回len个empty的数组([empty × len])。

有一点需要注意,就是new Array这种方法是没办法用来创建单个元素的数组的,比如[1]这个数组,是无论如何也拿new Array创建不出来的,因为new Array(1)返回的也只是[empty × 1]

ES6新增的构造方法:Array.of和Array.from

Array.of整体用的比较少,Array.from具有灵活性。

Array.of

Array.of是将参数依次转换为数组中的一项,然后返回这个新数组,而不管这个参数是数字还是其他数据类型,基本和Array构造器功能一致,但是区别就在于对单个参数的处理上。上面说了Array()方法没办法实现单个数值元素的数组,但是Array.of就可以完美解决这个问题

A = new Array(1)
console.log(A)//[empty]
B = Array.of(1)
console.log(B)//[1]

而对于其他的操作Array.of是和new Array是完全一样的。

Array.from

Array.from的设计初衷是基于其他对象创建新数组,准确来说就是从一个类似数组的可迭代对象中创建一个新的数组实例。其实就是只要有一个对象有迭代器,Array.from就能把它变成一个数组。(返回新的数组,而不更改原对象)

从语法上看Array.from有三个参数

  1. 类似数组的对象,可迭代的对象
  2. 加工函数,新生成的数组会经过这个函数的加工再返回
  3. this作用域,表名加工函数执行的时候this的值

这三个参数只有第一个是必选,后面都是可选。

var obj = {0: 'a', 1: 'b', 2:'c', length: 3};
Array.from(obj, function(value, index){
  console.log(value, index, this, arguments.length);
  return value.repeat(3);   //必须指定返回值,否则返回 undefined
}, obj);

image-20210625222524766

可以看到["aaa","bbb","ccc"]中的a,b,c都被重复了三次。这表名了通过Array.from这个方法可以自定义加工函数的处理方式,而返回需要的值,如果不确定返回值,就返回undefined,最终也是生成一个包含若干个undefined元素的空数组。

image-20210625222836778

如果不指定this的话,加工函数完全可以是一个箭头函数。上述代码可简写为如下

Array.from(obj,(value)=>value.repeat(3))
//["aaa","bbb","ccc"]

除了上面的obj对象,可迭代的对象包括String,Set,Map等,Array.from统统可以处理。

//String
Array.from('abc') //["a","b","c"]
//Set
Array.from(new Set(['abc','def'])) //["abc","def"]
//Map
Array.from(new Map([1,"a"],[2,'b']))//[[1,'a'],[2,'b']]