如何将第一个数组中的 index[0] 中的值分配给第二个数组中的 index[0]？答案

【问题标题】：How to assign a value from index[0] in first array to index[0] in second array?如何将第一个数组中的 index[0] 中的值分配给第二个数组中的 index[0]？
【发布时间】：2019-09-08 21:09:44
【问题描述】：

我需要为一个人分配一种颜色。我有两个数组：人物和颜色。 1.当我选择Adam时，应该是粉色，Estefania-黄色，Adrian-红色，Wladimir-紫色，Samantha-橙色。 2. 换句话说：人数组中的索引 0 分配（连接）到颜色数组中的索引 0， people 数组 assign(connect) 中的索引 1 和 colors 数组中的索引 1，人数组中的索引 2 分配（连接）到颜色数组中的索引 2；等等

示例代码：http://plnkr.co/edit/TPZjXkkSRrIc5ApzP07F?p=preview

index.html

<html lang="en" ng-app="demo">
<head>
  <meta charset="utf-8">
  <title>AngularJS ui-select</title>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">

  <!-- ui-select files -->
  <script src="select.js"></script>
  <link rel="stylesheet" href="select.css">

  <script src="demo.js"></script>

  <!-- Select2 theme -->
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">

  <style>
    body {
      padding: 15px;
    }

    .select2 > .select2-choice.ui-select-match {
      /* Because of the inclusion of Bootstrap */
      height: 29px;
    }

    .selectize-control > .selectize-dropdown {
      top: 36px;
    }
  </style>
</head>

<body ng-controller="DemoCtrl">



  <h3>Array of strings</h3>
  <button ng-click='clearTag()'>Delete</button>
  <ui-select tagging tagging-label="new tag" multiple ng-model="vm.multipleDemo" 
  on-select="OnClickSelect($item)" on-remove="OnRemoveSelect($item)"
  theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select name...">{{$item.name}}</ui-select-match>
    <ui-select-choices  repeat="item in people | filter:$select.search">
      {{item.name}}
    </ui-select-choices>
  </ui-select>
  <p>Selected: {{vm.multipleDemo}}</p>
  <hr>



</body>
</html>

**demo.js**


'use strict';

var app = angular.module('demo', ['ngSanitize', 'ui.select']);



app.controller('DemoCtrl', function($scope, $http, $timeout) {
  $scope.vm = {multipleDemo: []};
    $scope.people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 12, country: 'United States' },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21, country: 'Ecuador' },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30, country: 'Ecuador' },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 30, country: 'United States' },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43, country: 'Colombia' }

  ];

  $scope.colors = [
   'pink', 'yellow', 'red', 'purple', 'orange', 'green'
  ];


  $scope.OnClickSelect=function(item)
  {
   $scope.vm.multipleDemo.push(item.name);
  }

  $scope.OnRemoveSelect = function(item) { 
    window.console.log($scope.people);
   var index = $scope.people.indexOf(item.name);
   $scope.people.splice(index, 1); 
  }

  $scope.clearTag = function() {
    /*for(var i =0; i < $scope.vm.multipleDemo.length; i++) {
      $scope.vm.multipleDemo.splice($scope.vm.multipleDemo[i]);
      $scope.people.push($scope.vm.multipleDemo[i]);
    }*/
    var i =0;
    while(i < $scope.vm.multipleDemo.length) {
      i++;
      $scope.vm.multipleDemo.splice($scope.vm.multipleDemo[i]);
      $scope.people.push($scope.vm.multipleDemo[i]);
    }
  }
});```

【问题讨论】：

这个答案应该会有所帮助stackoverflow.com/questions/32937181/…
您的具体问题是什么？

标签： javascript arrays angular

【解决方案1】：

我不确定 Angular 编写代码的方式，但我会使用 Array.forEach 或 Array.map。这是我如何使用 vanilla js 来实现的

每个人：

people.forEach((person, index) => {
    person.color = colors[index];
}

地图：

people = people.map((person, index) => {
    person.color = colors[index];
    return person;
}

【讨论】：

【解决方案2】：

您可以使用 javascript .map 函数根据索引映射数组。我们可以使用 person 对象并为其分配 color 属性，并将其作为 People 数组中每个项目的新对象返回。结果被分配回人员。

let people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 12, country: 'United States' },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12, country: 'Argentina' },
    { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina' },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21, country: 'Ecuador' },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30, country: 'Ecuador' },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 30, country: 'United States' },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43, country: 'Colombia' }
   
  ];
  
 const colors = [
   'pink', 'yellow', 'red', 'purple', 'orange', 'green'
  ];

  people= people.map((person, index) =>
    ({ ...person,
      color: colors[index]
    }))
    
    console.log(people);

【讨论】：