使用 Javascript 合并数组

【问题标题】：Merging Arrays Using Javascript使用 Javascript 合并数组
【发布时间】：2011-07-19 22:11:02
【问题描述】：

如果这个问题之前已经在这里问过但我找不到，我深表歉意。

我无法将两个数组合并在一起，而且我是 javascript 的绝对初学者。

我需要在纯 javascript 中执行此操作，而不使用任何库代码。

这里是代码；

var greetings = [
  'Hello',
  'Bonjour',
  'Ola',
],

names = {
  'One': 'Bill',
  'Two': 'John',
  'Three': 'Paul',
};

我希望结果显示为无序列表中的以下内容，并且每个语句都包含在单独的列表项中；

<ul>
   <li>Hello Bill</li><br/>
   <li>Bonjour John</li><br/>
   <li>Ola Paul</li><br/>
</ul>

如果有人能回答这个问题，并评论代码以便我了解它是如何工作的，那就完美了。

【问题讨论】：

见stackoverflow.com/questions/929776/…
你有一个对象和一个数组。这会给您带来麻烦，因为您在枚举Object时无法保证顺序。
@Russ C：再看看这个问题。 OP 似乎试图将一个项目的内容与另一个项目的内容相关联。

标签： javascript

【解决方案1】：

您无法保证使用for-in 语句时的枚举顺序。

因此，您需要有一个单独的数组来指定顺序。

var greetings = [
  'Hello',
  'Bonjour',
  'Ola',
],

names = {
  'One': 'Bill',
  'Two': 'John',
  'Three': 'Paul',
},

order = [
   'One',
   'Two',
   'Three'
], 

items = [];

for( var i = 0, len = order.length; i < len; i++ ) {
   items.push( greetings[i] + ' ' + names[ order[i] ] );
}

document.body.innerHTML = ( "<ul><li>" + items.join("</li><li>") + "</li></ul>" );

但这会很痛苦。您应该改用 2 个数组。

示例： http://jsfiddle.net/rktyF/1/

编辑： 我去掉了<br>，因为它没有必要。

【讨论】：

您好，那太棒了，是否可以对此进行扩展并向我展示如何将每个语句包含在
中，然后可以将其推入

@user：不客气，但你能用 2 个数组代替数组和对象字面量吗？

不是真的，这是我为我的培训设定的任务，但我遇到了问题......再次感谢

【解决方案2】：

用于... in，例如如下：

var i = 0, lst = [];
for(pos in names) {
  lst.push(greetings[i++] + " " + names[pos]);
}

【讨论】：

永远不要让 for in 循环未经过滤。
请原谅，如何“过滤”一个 for 循环？
@tylermwashburn：从来没有？废话。如果您不扩展Object.prototype，那么这不是问题。如果你这样做了，那么你的代码应该会中断，这样你就会学会不这样做。
@Pete Herbert Penito: "hasOwnProperty"??
你能告诉我如何不过滤吗？以及放在
- .... 很抱歉让您感到痛苦

【解决方案3】：

我不明白{ 'One': 'Bill', 'Two': 'John', 'Three': 'Paul', } 的意思... 为什么不[ 'Bill', 'John', 'Paul' ]？

如果你这样做，那就是：

var ul = document.createElement( 'ul' ),
li;
for ( var i = 0, l = greetings.length; i < l; ++i ) {
    li = document.createElement( 'li' );
    li.innerHTML = greetings[ i ] + ' ' + names[ i ];
    ul.appendChild( li );
}

【讨论】：

不是 .innerHTML jquery 吗？ ...我必须专门使用 javascript ....对不起，它只是被赋予的方式
Nope...innerHTML 是 IE 引入的一个属性，现在到处都实现了，尽管它没有规范。 developer.mozilla.org/en/DOM:element.innerHTML

【解决方案4】：

我希望你的意思..

names = ['Bill', 'John', 'Paul'];

..因为您在问题中显示的 names 不是数组。这是一个对象。

另外，为了将来参考，数组从 0 开始，而不是 1，所以..

names[1];

.. 会是约翰，尽管比尔是第一个。

var i = 0, // Arrays start at 0.
    ul = document.createElement('ul'), // Create the unordered list.
    greetings = [ 'Hello', 'Bonjour', 'Ola' ], // Make some greetings.
    names = [ 'Bill', 'John', 'Paul' ]; // Make some names.

for (; i < names.length; i++) {
    var li = document.createElement('li'); // Create a list item.

    li.innerHTML = greetings[i] + ' ' + names[i]; // Set the HTML.

    ul.appendChild(li); // Make the list item part of the list.
};

document.body.appendChild(ul); // Put the list inside the body of the document.

应该可以的。

我有一个演示设置here。

【讨论】：

谢谢伙计 .... 只有 15 岁 .... 我 19 岁，我刚开始使用 javascript，所以我可以更好地理解 HTML5 api .... 有一个好的未来人坚持它
你有什么关于开始的建议或技巧吗？
@user844070 如果某些东西不起作用，请修复它。放弃会让你一事无成。

【解决方案5】：

似乎@patrick 击败了我的一般解决方案，但我还是把它留在这里：

var greetings = [
  'Hello',
  'Bonjour',
  'Ola'
],

names = {
  'One': 'Bill',
  'Two': 'John',
  'Three': 'Paul'
};

var words = ["One", "Two", "Three", "Four", "Five", 
             "Six", "Seven", "Eight", "Nine"];
var i, greet;
var ul = document.createElement("ul");
for (i = 0; greet = greetings[i++];) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(
        greet + " " + names[words[i]]))
    ul.appendChild(li);
}

您现在可以将ul 插入到 DOM 中的适当位置。其结构：

<ul>
    <li>Hello John</li>
    <li>Bonjour Paul</li>
    <li>Ola undefined</li>
</ul>

【讨论】：