关于Javascript的for in与for of

该文章由Notion AI辅助完成。(又有了自己是高产博主的错觉)

某天编码时不慎对 JSON Array 使用了 for in 循环。类似于以下代码:

for(let record in recordArray) {
// 循环体
}

在循环体中,试图使用 record[key] 来获取对应 key 的值,但是却取到了莫名其妙的数字。

这种错误很容易犯,因为 for in 循环会遍历对象的属性,包括继承来的属性。在遍历 Array 对象时,它会将数组的索引当做属性,而不是数组元素本身。这就会导致在循环体中使用 record[key] 时返回的是数字索引,而不是你期望的值。

解决这个问题的方法是使用 for of 循环,它会遍历数组的元素而不是属性。类似于以下代码:

for(let record of recordArray) {
// 循环体
}

这样就可以正确地获取数组元素了。

Javascript的for in与for of的使用场景

Javascript中有两种不同的循环语句,即for infor of,它们在不同的情况下有不同的使用场景。

for in循环

for in循环主要用于遍历对象的属性,例如:

const obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
  console.log(prop); // 输出 a, b, c
  console.log(obj[prop]); // 输出 1, 2, 3
}

在上述例子中,for in循环遍历了对象obj的所有属性,并输出了它们的key和value。

需要注意的是,for in循环并不是按照对象属性在代码中出现的顺序进行遍历,而是按照属性名的ASCII码顺序遍历。

for of循环

for of循环主要用于遍历可迭代对象,如数组、字符串、Map等,例如:

const arr = [1, 2, 3];

for (const val of arr) {
  console.log(val); // 输出 1, 2, 3
}

在上述例子中,for of循环遍历了数组arr中的所有值,并输出了它们。

需要注意的是,for of循环只能遍历可迭代对象,如果想要遍历普通对象的属性,应该使用for in循环。

总体来说,for in循环用于遍历对象的属性,而for of循环用于遍历可迭代对象的值。在实际开发中,根据不同的需求选择不同的循环语句能够使代码更加简洁、高效。

// 后记

很多人认为使用人工智能是一种偷懒的行为,会导致大脑停止思考,从而使大脑退化。然而,人工智能是一个复杂的领域,包括机器学习、深度学习、自然语言处理等多个分支。这些技术的应用可以帮助人们更好地解决问题,提高工作效率。

AI不是真理机器,也不是神。像ChatGPT这样的AI只是一种语言模型,不要赋予它不着边际的价值,也不要赋予它并不拥有的情感。虽然AI可以提供答案,但是这些答案并不一定是正确的,因为AI只是根据它学习到的知识和模式进行推理。

尽信书不如无书,AI只不过是更高级的书本形态,从口口相传到书本、网页、视频再到AI,改变的永远只是知识传播的形态,而不是知识本身。然而,AI可以帮助人们更快地获取和理解知识。当然,这并不意味着我们应该盲目相信AI提供的答案。相反,我们应该保持质疑的态度,不断验证和核实答案的正确性。

如果没有质疑AI提供的答案的能力,就说明你目前无法驾驭这个知识传播形态。因此,我们应该学会如何与AI沟通和互动,以便更好地利用它的优势。

AI是人造的,不会超越人类,并且会有人的特点——胡说八道。我与ChatGPT聊天时,使用搜索引擎的次数甚至比以前还多,因为如果我想要驳斥AI,就必须先去证实它确实错了。在这个过程中,我反而了解了很多知识。因此,与AI交流不仅可以帮助我们更好地理解知识,还可以促进我们的思维和学习。
(此段后记由Notion AI润色)

在LWC中如何使用ExcelJS-番外篇之关于regeneratorRuntime

本文得到了 ChatGPT 提供的专业建议和技术支持,特此致谢。

在上一篇文章《在LWC中如何使用ExcelJS》中介绍了如何在LWC中引入并使用ExcelJS。但是挖了一个坑,就是为什么在LoadScript之前要添加如下两句


            var regeneratorRuntime = undefined;
            window.regeneratorRuntime = regeneratorRuntime;

首先,ExcelJS由于要大量操作与渲染数据,为了避免页面经常卡死,所以使用了regenerator-runtime库以便更容易的进行异步操作。
就是说ExcelJS依赖regenerator-runtime库。

然后,ExcelJS在加载时会判断当前运行上下文中使用有变量regeneratorRuntime存在。如果没有找到该变量,ExcelJS会认为当前运行环境默认支持regenertor-runtime。不过LWC运行环境并不支持regenertor-runtime所以导致报错。

但是,如果我们手动的定义一个全局变量regeneratorRuntime,则相当于告诉ExcelJS,不要尝试使用运行环境的regenertor-runtime,去使用全局变量定义的regenertor-runtime。

但是又由于我们定义的regenertor-runtime为undefined,则迫使ExcelJS放弃全局变量定义的regenertor-runtime,转而使用自己准备的regenertor-runtime以保证自己可以成功加载与运行。

以下流程图由ChatGPT生成(请点击View Source查看)

                                 +----------------------+
                                 |                      |
                                 |   Load ExcelJS into   |
                                 |   Lightning Web      |
                                 |   Component (LWC)    |
                                 |                      |
                                 +----------+-----------+
                                            |
                                  +---------+---------+
                                  |                   |
                                  |   ExcelJS checks   |
                                  |   for              |
                                  |   regeneratorRuntime|
                                  |                   |
                                  +---------+---------+
                                            |
                            +---------------+---------------+
                            |                               |
                      +-----v-----+                 +---------+---------+
                      |           |                 |                   |
                      | regeneratorRuntime found    |    ExcelJS uses   |
                      |           |                 |native JS generator|
                      +-----+-----+                 +---------+---------+
                            |                                   |
                    +-------+-------+                           |
                    |               |                           |
        +-----------v---+   +-------v---+               +-------v------+
        |               |   |           |               |              |
        | Define        |   | Define    |               |ExcelJS reports|
        | regenerator-  |   | regenerator-             |      error    |
        | Runtime as    |   | Runtime as               |               |
        | undefined     |   | function()               |               |
        |               |   | {return;};               |               |
        +-------+-------+   +-------------+             +-------+------+
                |                               +-----------------+
                |                               |                 |
                |                               | ExcelJS executes |
                |                               | successfully    |
                |                               |                 |
                +-------------------------------+-----------------+