前端小知识：使用 Array.of() 轻松创建数组

前端达人

于 2024-09-10 08:03:45 发布

阅读量326

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/Ed7zgeE9X/article/details/142135979

版权

小伙伴们！你在开发JavaScript的时候，有没有遇到过创建数组时踩“坑”的情况？比如说你想创建一个包含单个数字的数组，结果却莫名其妙生成了一个空数组。这种情况是不是很让人抓狂？别急，今天我们来聊聊专为解决这个问题设计的Array.of()方法，它让数组创建变得更直观、简单，还能避免那些让人头疼的"坑"。

我们为什么需要Array.of()？🌿

先给大家举个现实中的例子吧：想象一下，你在电商网站购物，点击了购买10个手机的按钮，但是系统误会了你的意思，给你空着一个购物车，却没有真正往里加任何商品。这种情况就像你用传统的Array()方法来创建数组时可能遇到的问题。

// 错误示例：使用Array()创建数组
let products = Array(5);
console.log(products);  // 输出：[ , , , , ] （一个长度为5的空数组）

你是不是希望看到一个包含数字5的数组？但结果是一个有5个空位的数组，结果和你期望的完全不同。

为了解决这个问题，ES6引入了**Array.of()**，它让你可以准确地创建你想要的数组，不会再有意外。

用Array.of()创建数组：像往购物车加商品一样简单🌟

Array.of()就像是一个新的"购物车"，你往里面加什么，它就能显示什么。无论你是加1个产品还是多个，结果都完全符合你的预期。来看几个例子吧：

// 正确示例：使用Array.of()创建数组
let products = Array.of(5);
console.log(products);  // 输出：[5] （数组中包含数字5）

let mixedProducts = Array.of(1, "手机壳", true);
console.log(mixedProducts);  // 输出：[1, "手机壳", true] （混合类型的数组）

无论你是想放一个数字、字符串还是布尔值，Array.of()都会乖乖地给你一个包含这些值的数组，就像你在购物车里加了商品一样，不会有任何“误会”。

业务场景中的实际应用：创建商品订单 🌍

想象你正在开发一个电商平台，用户提交了订单，你需要根据订单数量和商品信息生成一个数组来展示。我们来用Array.of()看看怎么做。

// 使用Array.of()创建订单信息数组
let orderID = 12345;
let productName = "智能手机";
let quantity = 3;

let orderInfo = Array.of(orderID, productName, quantity);
console.log(orderInfo);  // 输出：[12345, "智能手机", 3]

这样，你就能生成一个包含订单ID、产品名称和数量的数组，方便在系统中处理。Array.of()确保每一个值都准确地存入数组，避免了任何意外的空数组情况。

动态创建数组：订单折扣示例 💡

在实际开发中，我们经常需要根据动态数据生成数组。比如说，你要根据用户购买的商品数量计算折扣，并把相关信息存入数组。

let quantity = 5;  // 购买的商品数量
let price = 100;  // 每件商品的价格
let discount = quantity >= 5 ? 0.1 : 0;  // 购买5件以上打9折

// 动态创建包含订单信息的数组
let orderDetails = Array.of(quantity, price, quantity * price, discount, "订单折扣信息");
console.log(orderDetails);  // 输出：[5, 100, 500, 0.1, "订单折扣信息"]

通过Array.of()，你可以轻松将动态生成的数据组织成数组，随时展示订单的详细信息。