javascript - 如果属性匹配，则将新值插入数组

Question

1. 迭代 HTML 项并将它们插入数组
2. 如果项目名称与数组中已有的对象名称属性匹配，只需将其数据添加到该对象中即可。

我尝试查看几个不同的答案，但最终要么出现控制台错误，要么覆盖我现有的数据。

var item = {};
var items = [];

$('li').each(function() {
    var itemName = $(this).find('.name').text();
    var itemData = $(this).find('.data').text();
    
    //for(var i = 0, lens = items.length; i < 1; i++) {
    //    if(items[i].name === itemName) {
    //         ?
    //    }
    //}

    item = {
        name: itemName,
        data: itemData
    }
    items.push(item);
});

<li>
    <span class="name">Item 1</span>
    <span class="data">3</span>
</li>
<li>
    <span class="name">Item 1</span>
    <span class="data">6</span>
</li>
<li>
    <span class="name">Item 1</span>
    <span class="data">9</span>
</li>
<li>
    <span class="name">Item 2</span>
    <span class="data">3</span>
</li>
<li>
    <span class="name">Item 2</span>
    <span class="data">6</span>
</li>

Answer 1

此代码将实现您的目标:

var items = {};

$('li').each(function() {
    var itemName = $(this).find('.name').text();
    var itemData = $(this).find('.data').text();

    items[itemName] = items[itemName] || [];
    items[itemName].push(itemData);
});

var result = Object.keys(items).map(function(name) {
  return {name: name, data: items[name]};
});

console.log(result);

更新 1:(添加其他属性)

var items = {};

$('li').each(function() {
    var itemName = $(this).find('.name').text();
    var itemData = $(this).find('.data').text();

    items[itemName] = items[itemName] || {name: itemName};
    //Add data
    items[itemName].data = items[itemName].data || [];
    items[itemName].data.push(itemData);
    //Add other property
    items[itemName].time = Date.now();
});

var result = Object.keys(items).map(function(name) {
  return items[name];
});

演示:

var item = {};
var items = {};

$('li').each(function() {
    var itemName = $(this).find('.name').text();
    var itemData = $(this).find('.data').text();
  
    items[itemName] = items[itemName] || [];
    items[itemName].push(itemData);
});

var result = Object.keys(items).map(function(name) {
  return {name: name, data: items[name]};
});

console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
    <span class="name">Item 1</span>
    <span class="data">3</span>
</li>
<li>
    <span class="name">Item 1</span>
    <span class="data">6</span>
</li>
<li>
    <span class="name">Item 1</span>
    <span class="data">9</span>
</li>
<li>
    <span class="name">Item 2</span>
    <span class="data">3</span>
</li>
<li>
    <span class="name">Item 2</span>
    <span class="data">6</span>
</li>