avaScript备忘录 —— 创建数组的3种方式

1 # 直接声明

JavaScript是弱类型语言，因此你可以直接将一个数组赋值给一个变量，即创建了一个数组：

let arr = [1, 2, 3];

绝大多数情况下使用的都会使用这种语法创建/声明数组。其中数组使用中括号 [...] 包裹，元素之间用逗号 , 分隔。

有时为了代码优雅，遇到数组元素很长很多时，也可以采用换行方式编写：

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

2 # 以对象方式创建数组

这是创建数组的另一种语法，即使用构造函数 Arrary()：

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

备注： 调用 Array() 时可以使用或不使用 new。两者都会创建一个新的 Array 实例。但出于编程规范，建议使用 new 关键字。

用这种方式创建数组是，里面的参数有两种使用情况：

1. 仅一个Number类型参数

let arr = new Array(6);

当只传入一个 Number类型 的参数时，传入的参数则会被认定为是所创建数组的长度，而非元素。且这个数组仅有长度没有任何元素，若访问则是undefined。

补充知识：

含空槽的数组又被称作为稀疏数组。稀疏数组在使用数组迭代方法时，空槽元素都将被跳过。如果访问空槽元素，结果会是 undefine。

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

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()要求传入的第一个参数 —— 一个 类数组对象 或 可迭代对象。

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

该方法会根据类数组对象创建一个长度为length的数组，其中的元素key是合理下标值的元素。

什么是类数组对象？

顾名思义，就是形似数组的对象。对象的属性都含有key与value，而这个关系也可以看作是数组的下标与值的关系——key为下标，value为值。此外还有一个特别的key是length，用于表示数组长度。

类数组对象还有个别名叫arguments对象。

所以一个形似数组的对象是：

javascript

复制代码

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]

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

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

什么是可迭代对象？

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

常见的内置可迭代对象有:

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

比如从String创建数组:

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

再比如从Set创建数组:

let set = new Set([1, 2, 3]);
let arr = Array.from(set);
console.log(arr); // [1, 2, 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]

作者：Dikkoo
链接：https://juejin.cn/post/7376575006535237669

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

山高自有客行路

水深自有渡船人

- 2024.05.10 -

在编程的世界里，数据是构建一切的基础。而在JavaScript中，有一种特殊且强大的数据结构，它就是——数组。

今天，我们就来一起探索数组的奥秘，从创建到使用，一步步掌握这个重要的工具。

一、什么是数组

数组（Array）是一种按顺序存储多个值的数据结构。你可以把它想象成一个盒子，这个盒子可以存放多个物品，而且每个物品都有一个编号，我们可以通过这个编号来找到或者修改这个物品。

在JavaScript中，数组是一种特殊的对象，用于存储和操作多个值。与其他编程语言不同，JavaScript的数组可以同时存储不同类型的值，并且长度是动态的，可以根据需要随时添加或删除元素。

JavaScript数组使用方括号([])来表示，其中的每个元素用逗号分隔。例如，以下是一个包含不同类型元素的数组的示例：

var myArray = [1, "two", true, [3, 4, 5]];

数组中的元素可以通过索引来访问和修改，索引从0开始。例如，要访问数组中的第一个元素，可以使用以下代码：

var firstElement = myArray[0];

JavaScript也提供了一些内置方法来操作数组，如push()、pop()、shift()、unshift()等，用于添加、删除和修改数组中的元素。

二、数组的作用

数组在编程中扮演着非常重要的角色。它可以帮助我们：

• 存储多个值：我们可以在一个变量中存储多个值，而不需要为每个值创建单独的变量。
• 操作数据：我们可以对数组中的元素进行添加、删除、修改和查找等操作。
• 实现各种算法：通过数组，我们可以实现排序、搜索等常见算法。
• 循环遍历：数组的元素是有序的，可以使用循环结构遍历数组的每个元素，从而对每个元素进行相同或类似的操作。这在处理大量数据时非常有用。

三、创建数组的方法

在JavaScript中，有多种方法可以创建数组，下面列出常见的三种：

1）字面量方式：

这是最常见的创建数组的方式，只需要在一对方括号[]中放入元素即可，如

var arr = [];

2）使用Array构造函数：

通过new Array()也可以创建数组，如

var arr = new Array();

3）使用Array.of()方法：

这个方法可以创建一个具有相同元素的新数组实例，如

var arr = Array.of(1, 2, 3);

四、使用数组的方法

创建了数组后，我们就可以对它进行各种操作了：

1、访问和修改数组元素

要访问和修改数组元素，需要使用数组的索引。数组的索引从0开始，依次递增。要访问数组元素，可以使用以下语法：

console.log(arr[0]); // 输出第一个元素
arr[1] = 4; // 修改第二个元素的值

2、向数组末尾添加元素

要向数组的末尾添加一个元素，可以使用数组的push()方法。该方法会在数组的末尾添加指定的元素。以下是使用push()方法向数组末尾添加元素的示例：

arr.push(5);

3、从数组末尾移除元素

要从数组的末尾移除一个元素，可以使用数组的pop()方法。该方法会移除并返回数组中的最后一个元素。以下是使用pop()方法从数组末尾移除元素的示例：

arr.pop();

4、从数组末尾移除元素

要从数组的末尾移除一个元素，可以使用数组的unshift()方法。该方法会移除并返回数组中的最后一个元素。以下是使用unshift()方法从数组末尾移除元素的示例：

arr.unshift(0);

5、从数组开头移除元素

要从数组的开头移除一个元素，可以使用数组的shift（）方法，并将索引值设置为0。该方法会移除并返回数组中的第一个元素。以下是使用shift（）方法从数组开头移除元素的示例：

arr.shift();

6、获取数组的长度

要获取数组的长度，可以使用内置函数length（）。length（）函数返回数组中元素的个数。以下是获取数组长度的示例：

console.log(arr.length);

7、遍历数组

要遍历数组的所有元素，可以使用for循环。下面是遍历数组的示例：

for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}

8、数组排序

要对数组进行排序，可以使用JavaScript内置的sort()方法。下面是对数组进行排序的示例：

arr.sort();

9、数组反转

要对数组进行反转，可以使用JavaScript内置的reverse()方法。下面是对数组进行反转的示例：

arr.reverse();

10、 数组搜索

要在数组中搜索特定的元素，可以使用循环遍历数组，逐个比较每个元素与目标值，找到目标值后返回其索引。下面是一个示例代码：

console.log(arr.indexOf(3)); // 返回3在数组中的索引位置
console.log(arr.includes(4)); // 检查数组中是否包含4

以上就是一些常见的数组操作方法，可以根据需要使用适当的方法来操作数组中的元素。

想要快速入门前端开发吗？推荐一个免费前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！「链接」

五、使用数组方法的注意事项

1、数组方法是JavaScript中针对数组对象的内置方法，可以方便地对数组进行操作和处理。

2、使用数组方法之前，需要先创建一个数组对象。可以使用数组字面量创建一个数组，也可以使用Array()构造函数来创建一个数组。

3、数组方法可以改变原始数组，也可以返回一个新的数组。需要根据实际需求来选择使用具体的方法。

4、改变原始数组的方法包括：push()、pop()、shift()、unshift()、splice()、sort()、reverse()等。

5、不改变原始数组的方法包括：slice()、concat()、join()、map()、filter()、reduce()、forEach()等。

6、使用数组方法时需要注意方法的参数和返回值，不同的方法可能需要不同的参数，并且返回值类型也可能不同。

7、数组方法的具体用法可以参考JavaScript官方文档或者其他相关教程和资源。熟练掌握数组方法可以提高代码的效率和可读性。

以上就是JavaScript数组的创建和使用方法，希望对你有所帮助。记住，数组是JavaScript中非常重要的一部分，掌握好它可以让我们的编程工作更加高效。

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享