当前位置：首页 > 全部内容 > 详解JavaScript创建数组的三种方式

详解JavaScript创建数组的三种方式

作者：小括号时间：2026-10-31 13:55:40浏览：167

本文详细介绍JavaScript中创建数组的三种主要方式：直接使用中括号声明、使用Array构造函数以及利用Array.from方法。重点解析Array.from如何处理类数组对象和可迭代对象，并演示映射函数的初始化用法，帮助开发者根据场景选择最优方案。

1 直接声明

JavaScript作为弱类型语言，允许直接将数组赋值给变量，从而完成数组的创建。

let arr = [1, 2, 3];

在实际开发中，绝大多数场景下都会采用这种语法来创建或声明数组。数组元素被包裹在中括号 [...] 内，各元素之间通过逗号 , 进行分隔。

为了提升代码的可读性与优雅度，当数组元素数量较多或内容较长时，可以采用换行格式进行编写。

let fruit - [
    "apple",
    "banana",
    "orange",
    "..."
]

2 以对象方式创建数组

这是创建数组的另一种语法形式，即通过调用构造函数 Arrary() 来实现。

let arr = new Array();
let arr = Array();

备注：调用 Array() 构造函数时，可以使用也可以省略 new 关键字。无论是否使用 new，两者均会创建一个新的 Array 实例。但遵循编程规范，建议始终使用 new 关键字。

在使用该方式创建数组时，传入的参数存在两种不同的处理情况：

2.1. 仅一个Number类型参数

let arr = new Array(6);

当仅传入一个 Number 类型的参数时，该参数会被解释为所创建数组的长度，而非具体的数组元素。此时创建的数组仅包含长度属性而不包含任何实际元素，若尝试访问其中的元素，结果将是 undefined。

补充知识：

包含空槽的数组通常被称为稀疏数组。在使用数组迭代方法时，这些空槽元素会被自动跳过。如果直接访问空槽元素，返回值为 undefined。

let arr = new Array(6);
console.log(arr); // [ <6 empty items> ]
console.log(arr[0]); // undefined
console.log(arr.length); // 6

2.2. 有一个非Number类型参数 或 有多个参数

承接上文，如果仅有一个参数但该参数并非 Number 类型，则该参数会被正常识别为数组中的一个元素。

let arr = new Array("hello");
console.log(arr); // [ 'hello' ]
console.log(arr[0]); // hello
console.log(arr.length); // 1

若传入多个参数，其效果等同于使用中括号 [...] 声明数组，所有传入的参数均被视为数组的元素。

let arr = new Array("hello", "world", "!");
console.log(arr); // [ 'hello', 'world', '!' ]
console.log(arr.length); // 3

通常情况下不建议使用这种方式，因为它容易引起误解，且不如中括号 [...] 方式简洁直观。

3 使用 Array.from() 方法创建

前两种基础创建方式无法直接生成初始化的数组，这在某些特定场景下（例如创建哈希数组）可能无法满足需求。Array.from() 方法正是为了解决这一问题而存在的。

Array.from() 是一个全局静态方法，其功能是从可迭代对象或类数组对象创建一个新的浅拷贝数组实例。此外，它还支持传入一个映射函数，用于对数组内部元素进行初始化处理。

首先，我们需要明确 Array.from() 方法要求传入的第一个参数必须是一个类数组对象或可迭代对象。

3.1. 由类数组对象创建数组

该方法会根据类数组对象的属性，创建一个长度为 length 的数组，其中包含的元素由合理的 key 决定。

什么是类数组对象？

顾名思义，类数组对象是指结构类似数组的对象。这类对象的属性包含 key 和 value，这种关系可类比于数组的下标与值的关系——key 对应下标，value 对应值。此外，类数组对象还包含一个特殊的 key：length，用于表示数组的长度。

类数组对象还有一个常见的别称，即 arguments 对象。

因此，一个形似数组的对象示例如下：

let arguments = {
    0: 1,
    1: 2,
    2: 3,
    3: 4,
    length: 4
}

同时，这里提供几个使用不符合规范的类数组对象创建数组的示例：

  • 长度与元素数量不符

生成的数组元素数量将严格依据 length 的值执行。如果未指定 length，则默认值为 0，即生成一个空数组。

let arguments = {
    0: 1,
    1: 2,
    2: 3,
    length: 4
}

let arr = Array.from(arguments);
console.log(arr); // [1, 2, 3, undefined]

let arguments = {
    0: 1,
    1: 2,
    2: 3,
    length: 0
}

let arr = Array.from(arguments);
console.log(arr); // []

  • 键值不符合下标规范

如果键值不符合下标规范，该键值对将被直接忽略。其他符合规范的键值对则会被视为数组元素。

let arguments = {
    0: 1,
    1: 2,
    3: 3,
    length: 4
}

let arr = Array.from(arguments);
console.log(arr); // [1, 2, undefined]

3.2. 由可迭代对象创建数组

除了从类数组对象创建数组外，Array.from() 还可以从任何可迭代对象创建数组。

什么是可迭代对象？

可迭代对象是指实现了 [Symbol.iterator] 方法的对象，该方法返回一个迭代器。该迭代器对象具有 next() 方法，每次调用 next() 都会返回一个包含 value 和 done 属性的对象，用于遍历该可迭代对象。

常见的内置可迭代对象包括：

  • Array
  • TypedArray（例如 Uint8Array）
  • NodeList
  • HTMLCollection
  • arguments对象
  • 用户自定义的可迭代对象

例如从 String 创建数组：

let str = 'hello';
let arr = Array.from(str);
console.log(arr); // ["h", "e", "l", "l", "o"]

3.3. 映射函数

此外，Array.from() 还可以接受第二个参数，作为一个映射函数，用于对每个元素进行处理后再放入新数组，从而实现初始化效果：

let set = new Set([1, 2, 3]);
let arr = Array.from(set, x => x * x);
console.log(arr); // [1, 4, 9]

这个映射函数的行为类似于数组的 map() 方法：

关于 map() 方法

map() 的作用是创建一个新数组，新数组中的每个元素均由原数组中对应元素调用一次提供的函数后的返回值组成。

map() 包含两个参数：

callbackFn：为数组中的每个元素执行的函数。其返回值将作为新数组的一个元素被添加。

thisArg（可选）：执行 callbackFn 时用作 this 的值。

在调用 callbackFn 时，将传入 3 个参数：

currentValue：正在处理的当前元素。

index（可选）：正在处理的当前元素的索引。

array（可选）：调用了 map() 的数组本身。

但是，在 Array.from() 中调用映射函数时，仅传入 2 个参数（element、index），不接受 map() 中 callbackFn 的第三个参数 array。这是因为在 Array.from() 的执行过程中，数组仍在构建中。

除此之外，Array.from() 方法还接受第三个可选参数，即 "this 值"，这与 map() 的 thisArg 参数一致。

let person = {
  name: 'John',
  sayHello: function() {
    return `Hello, my name is ${this.name}`;
  }
};

let nameArr = Array.from([1, 2, 3], function() {
  return this.sayHello();
}, person);

console.log(nameArr); // ["Hello, my name is John", "Hello, my name is John", "Hello, my name is John"]

因此，可以说 Array.from(obj, mapFn, thisArg) 和 Array.from(obj).map(mapFn, thisArg) 会具有相同的结果。只是 Array.from() 不会创建中间数组，而是直接构建一个新数组。

Array.from() 映射函数使用案例

  • 初始化哈希函数

let hash = Array.from({length: 26}, (item) => item = 0);

  • 将字符串转换为大写

let str = 'hello';
let arr = Array.from(str, (char) => char.toUpperCase());
console.log(arr); // ["H", "E", "L", "L", "O"]

  • 平方数组元素

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = Array.from(numbers, (x) => x * x);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

  • 获取元素及其索引

let colors = ['red', 'green', 'blue'];
let colorDetails = Array.from(colors, (color, index) => `${index}. ${color}`);
console.log(colorDetails); // ["0. red", "1. green", "2. blue"]

  • 使用箭头函数作为映射函数

let set = new Set([1, 2, 3]);
let doubledSet = Array.from(set, x => x * 2);
console.log(doubledSet); // [2, 4, 6]

总结

在JavaScript中，创建数组主要有 3 种方式，每种方式都有其独特的特点和适用场景。选择合适的数组创建方式可以有效提高代码的可读性和性能。

直接声明

  • 特点：语法简洁、直观，适用于大部分场景。

  • 使用场景：适合绝大多数的数组创建需求，尤其是需要创建包含已知元素的数组。

  • 案例：

let arr = [1, 2, 3];
let fruits = [
    "apple",
    "banana",
    "orange",
    "..."
];

以对象方式创建数组

  • 特点：使用 Array() 构造函数，可以创建空数组或指定长度的数组。适用于一些特殊情况。

  • 使用场景：适合需要创建特定长度的空数组或从单个非数字参数创建数组的情况。

  • 案例：

let arr = new Array(6); // 创建一个长度为6的空数组
let singleElementArray = new Array("hello"); // 创建一个包含单个元素的数组
let multipleElementsArray = new Array("hello", "world", "!"); // 创建一个包含多个元素的数组

使用Array.from()方法创建：

  • 特点：从类数组对象或可迭代对象创建数组，同时可以使用映射函数对数组元素进行初始化操作。

  • 使用场景：适合从类数组对象（如 arguments 对象）、可迭代对象（如 Set、String）创建数组，或需要对元素进行初始化操作时使用。

  • 案例：

// 从类数组对象创建数组
let arguments = {
    0: 1,
    1: 2,
    2: 3,
    length: 4
};
let arr = Array.from(arguments);
console.log(arr); // [1, 2, 3, undefined]

// 从字符串创建数组
let str = 'hello';
let strArray = Array.from(str);
console.log(strArray); // ["h", "e", "l", "l", "o"]

// 使用映射函数
let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = Array.from(numbers, x => x * x);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

以上就是详解JavaScript创建数组的三种方式的详细内容，更多关于JavaScript创建数组的资料请关注本站其它相关文章！

作者最新文章

JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败

2026-11-05 16:08:46

JavaScript常见SyntaxError语法错误排查与修复方法

2026-11-05 13:58:44

JS中slice、substring和substr截取字符串的区别

2026-11-05 13:43:47

JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型

2026-11-05 11:53:32

为什么JS数组push后得到的是数字而不是数组？

2026-11-05 09:59:18

相关标签：

JavaScript创建数组