Array.apply(),new Array(),arr =[] 的区别

前言

为什么会写这篇文章呢？看Vue文档渲染函数的时候发现一个问题很好奇,Array.apply(null, { length: 20 })为什么这样定义数组?然后查阅资料做了一个小结记录一下，麻雀虽小，五脏俱全。

Array.apply()

apply[1]()在MDN中解释是这样的:

func.apply(thisArg, [argsArray])

thisArg 必选的。在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。

argsArray 可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象

function printArguments() {
    console.log(arguments)
    Array.prototype.forEach.call(arguments, function (item) {
        console.log(item);
    });
}
printArguments(undefined,undefined)

由此可见{length:20}是个类数组如argument只提供了length的属性相当于创建了一个长度为20，每个元素为undefined的数组

(20) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

new Array()

new Array(20)和Array(20)只是创建了一个长度为20,元素是空的数组

(20) [empty × 20]

arr = []

let arr=[];
arr.length= 20

(20) [empty × 20]

由此可见new Array(20)和let arr=[];arr.length= 20等价

Array.from()

Array.from[2]() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

Array.from({length:20})

(20) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

结尾

以上就是本文的全部内容,有错误的地方欢迎指出，欢迎点评?,更多干货欢迎关注公众号:小丑的小屋

参考资料

[1]

apply: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

[2]

from: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from