js双重for循环优化 实例代码

在JavaScript中，如果需要对两个数组进行双层循环操作，例如合并两个二维数组，可以使用嵌套循环。然而，当数据量大时，这种直接的双重循环可能会导致性能问题。以下是一个简单的例子，展示了如何优化这种场景：

// 原始的双层循环（不推荐）
function naiveMerge(arr1, arr2) {
    let result = [];
    for (let i = 0; i < arr1.length; i++) {
        for (let j = 0; j < arr2.length; j++) {
            result.push([arr1[i], arr2[j]]);
        }
    }
    return result;
}

// 更优的解决方案（利用Array.prototype.flatMap）
function optimizedMerge(arr1, arr2) {
    return arr1.flatMap(row => row.concat(arr2));
}

在这个优化版本中，我们使用了`Array.prototype.flatMap()`，它会创建一个新的数组，其中每个元素都是原数组中对应元素的扁平化结果。这样避免了创建大量的临时数组，提高了效率。

相关问题

js双重for循环map优化 实例代码

在JavaScript中，当需要遍历两个数组并对它们进行对应元素操作时，通常会使用双层`for`循环。然而，当数据量较大时，这种做法可能会导致性能问题。此时可以考虑使用`Array.prototype.map()`函数结合`reduce()`或者`forEach()`来优化。以下是使用`reduce()`的一个例子：

// 假设我们有两个数组 arr1 和 arr2
let arr1 = [1, 2, 3];
let arr2 = ['a', 'b', 'c'];

// 使用 reduce() 进行优化
let result = arr1.reduce((acc, val, index) => {
    acc[val] = arr2[index]; // 对应元素相加或替换
    return acc;
}, {});

console.log(result); // 输出：{1: "a", 2: "b", 3: "c"}

// 或者使用 forEach()
let optimizedMap = {};
arr1.forEach((val, index) => {
    optimizedMap[val] = arr2[index];
});

console.log(optimizedMap);

这两个例子都利用了数组的特性，避免了双重循环，提高了代码效率。注意，`reduce()`适合于减少状态的情况，而`forEach()`则更适合简单地遍历并更新对象。

wx:for的双重循环

### 微信小程序 `wx:for` 实现双重循环

在微信小程序中，通过使用 `wx:for` 指令可以方便地实现数据列表的渲染。对于双重循环的需求，可以通过在外层和内层分别应用 `wx:for` 来达成目标。

#### 外层循环
外层循环负责遍历题目集合，每一个元素代表一道完整的单选题。假设存在一个名为 `questions` 的数组，其中包含了多个对象，每个对象表示一题及其选项[^4]。

<view wx:for="{{questions}}" wx:key="id">
    <!-- 单选题题目 -->
</view>

这段代码定义了一个视图容器 `<view>` ，它将会被重复创建多次，每次对应于 `questions` 数组中的一个成员。属性 `wx:key` 提供了一种方式来提高性能并帮助框架识别哪些项目已被修改、添加或移除[^3]。

#### 内层循环
为了展示每一题下的具体选项，可以在上述模板内部再嵌套一层带有 `wx:for` 属性的新标签，用来迭代当前题目内的选项列表：

<view wx:for="{{questions}}" wx:key="id">
    <text>{{item.questionText}}</text> <!-- 显示问题描述 -->

    <block wx:for="{{item.options}}" wx:key="index"> <!-- 这里是第二层循环 -->
        <label class='radio'>
            <radio value="{{index}}"/>
            {{option}}
        </label>
    </block>

</view>

此处引入了新的变量名 `options` 和 `questionText` 假设它们存在于每条记录之中；而 `{{index}}` 是由内置函数自动生成的位置索引值，可用于唯一标识各个选项。

#### 完整实例
下面给出的是一个更具体的例子，展示了如何利用双重 `wx:for` 构建包含若干个具有不同选项集的问题界面结构：

// data.js 中的数据模型示例
Page({
  data: {
    questions: [
      { id: 'q1', questionText: "What is the capital of France?", options: ["Paris", "Berlin", "Madrid"] },
      { id: 'q2', questionText: "Which planet has rings around it?", options: ["Earth", "Mars", "Saturn"] }
    ]
  }
})

<!-- index.wxml 文件片段 -->
<view wx:for="{{questions}}" wx:key="id" style="margin-bottom: 20px;">
  <text>{{item.questionText}}</text><br/>
  
  <block wx:for="{{item.options}}" wx:key="index">
    <label class="radio-inline">
      <radio name="{{'group_' + item.id}}" value="{{index}}"/>&nbsp;
      {{item.options[index]}}
    </label><br/>
  </block>
</view>

此段 WXML 结合 JSON 数据源能够动态生成一系列带编号的选择题，并允许用户交互选择答案。