使用JavaScript/AngularJS生成两指定数组的长度为2的组合

嘿，这需求很清晰嘛！要把两个数组的元素两两拼接成长度为2的字符串组合，不管用原生JavaScript还是AngularJS都有很直接的解法，我给你详细说说👇

这里有两种常用写法，你可以根据自己的习惯选：

方式一：嵌套遍历（直观易懂） #

最直观的方式就是用两层循环，遍历第一个数组的每个元素，再和第二个数组的每个元素拼接，把结果收集到新数组里：

const arr1 = ['b','c','d','e'];
const arr2 = ['h','i','k','l','m','n'];
const result = [];

// 嵌套forEach遍历两个数组
arr1.forEach(item1 => {
  arr2.forEach(item2 => {
    result.push(item1 + item2);
  });
});

console.log(result);
// 输出就是你要的 ['bh','bi','bk','bl','bm','bn','ch','ci',...]

方式二：ES6简洁写法（一行搞定） #

如果你的环境支持ES6+，可以用flatMap配合map，一行代码就能生成结果，看起来更清爽：

const arr1 = ['b','c','d','e'];
const arr2 = ['h','i','k','l','m','n'];
const result = arr1.flatMap(item1 => arr2.map(item2 => item1 + item2));

console.log(result);

AngularJS里的逻辑其实和原生JS一致，只是通常会把逻辑放在控制器中，方便和视图绑定：

angular.module('myApp', [])
  .controller('ComboController', function($scope) {
    // 定义两个源数组
    $scope.firstArr = ['b','c','d','e'];
    $scope.secondArr = ['h','i','k','l','m','n'];
    // 存储最终组合的数组
    $scope.comboList = [];

    // 生成组合的方法
    $scope.generateCombos = function() {
      $scope.comboList = [];
      // 用AngularJS的forEach遍历
      angular.forEach($scope.firstArr, function(item1) {
        angular.forEach($scope.secondArr, function(item2) {
          $scope.comboList.push(item1 + item2);
        });
      });
    };

    // 页面初始化时自动生成组合
    $scope.generateCombos();
  });

对应的HTML视图可以这样写，用ng-repeat渲染组合列表：

<div ng-app="myApp" ng-controller="ComboController">
  <h3>生成的组合列表：</h3>
  <ul>
    <li ng-repeat="combo in comboList">{{ combo }}</li>
  </ul>
</div>

这样页面加载后就能直接看到所有的两两组合啦～

内容的提问来源于stack exchange，提问作者neha