如何在 JavaScript 中创建和修改关联数组？答案

【问题标题】：How do I create and modify an associative array in JavaScript?如何在 JavaScript 中创建和修改关联数组？
【发布时间】：2020-01-26 08:16:36
【问题描述】：

我正在尝试将一些代码从服务器端移动到客户端。我正在努力使用 Javascript。看来我需要使用对象与数组来实现。

我有一些带有循环数据属性的输入字段。

$(".selection:checked").each(function(){

    $selection_id=$(this).data('selection_id');
    $swatch_id=$(this).data('swatch_id');

});

首先，我想创建一个如下形式的数组：

$array[$selection_id]=$swatch_id;

即array(100=>123,200=456,300=789)

其次，我想遍历一个元素列表并根据数组键换出一个值。

即element has key 100 and value 1000 then:

$array[100]=1000;

新数组是array(100=>1000,200=456,300=789)

最后，我需要把那个数组变成一个字符串，格式如下：

"100:1000,200:456,300:789"

我是 Javascript 新手，但仍在努力理解对象。任何帮助表示赞赏。

【问题讨论】：

请添加HTML代码也有助于检查场景

标签： javascript jquery javascript-objects associative-array

【解决方案1】：

您最好创建一个对象来存储 $selection_id => $watch_id 映射。您可以使用以下语法实现它

const mapping = {};
mapping[$selection_id] = $watch_id;

那么这个array(100=>123,200=456,300=789) 会是这样的

mapping = {
   100: 123,
   200: 456,
   300: 789
}

可以使用 mapping[100] 访问值，这将为您提供 123。如果您想将其转换为您指定的字符串，请执行以下操作。

const mapString = Object.keys(mapping).reduce((acc, curr) =>
  `${acc}${curr}:${mapping[curr]},`,
"").slice(0, -1)

它会给你这个输出"100:123,200:456,300:789"

更新

要生成 mapString，请使用以下内容。谢谢@Soc 的建议。

const mapString = Object.keys(mapping).map(key => `${key}:${mapping[key]}`).join(',');

【讨论】：

我个人比较喜欢：const mapString = Object.keys(mapping).map(key => `${key}:${mapping[key]}`).join(',')

【解决方案2】：

使用javascript对象最简单的方法就可以实现这个

var mapObj = {};
$(".selection:checked").each(function(){


    var selection_id= $(this).data('selection_id');
    var swatch_id= $(this).data('swatch_id');
    //insert value in object
    mapObj[selection_id] = swatch_id;

});
// print object
console.log(mapObj);

// fetch particular key value
console.log(mapObj[100]);

// change value of object 
mapObj[100] = 1000;
console.log(mapObj);

// convert to string 
var string = "";
$.each(mapObj,function(index,val){
  string += index+':'+val+','; 
});
string = string.replace(/(^\s*,)|(,\s*$)/g, '');
console.log(string);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input class="selection" data-selection_id="100" data-swatch_id="123" type="checkbox"  name="vehicle1" value="Bike" checked> I have a bike<br>
    <input class="selection" data-selection_id="200" data-swatch_id="456" type="checkbox" name="vehicle2" value="Car" checked> I have a car<br>
    <input class="selection" data-selection_id="300" data-swatch_id="789" type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br>

【讨论】：

【解决方案3】：

首先创建一个对象

var obj = {}

然后像这样循环遍历它

$(".selection:checked").each(function(){

    $selection_id=$(this).data('selection_id');
    $swatch_id=$(this).data('swatch_id');
    obj[$selection_id] = $swatch_id;
});

它会创建一个类似的对象：

{"100": 123, "200": 456, "300": 700}

您可以更改 100 的值，例如：

obj[100] = 1000

然后转成字符串：

Object.keys(obj).reduce((acc, val) => {
   acc.push(`${val}:${obj[val]}`); 
   return acc;
},[]).join()

【讨论】：