JavaScript - 将数组与现有数组组合

Question

我正在尝试合并我的两个数组，但只移动对象。

我有一个名为parentArr 的数组，我正在尝试将其与growthArr 结合。当使用.push() 方法时，它返回parentArr 作为growthArr 内部的一个数组。我正在尝试合并来自 parentArr 的对象，而不是将其嵌套在数组中。

这是正在发生的事情的一个例子：

let growthArr = [
    {
     name: 'online stores',
      parent: 'high'
    }, {
       name: 'retail stores',
      parent: 'low'
     }, {
       name: 'walk in',
      parent: 'high'
    }
    ]
    
    
    let parentArr = [
    {
        id: 'low',
        color: '#fafafa'
    }, {
        id: 'med-low',
        color: '#B62721'
     }, {
        id: 'med',
        color: '#FF5733'
    }, {
        id: 'med-high',
        color: '#FF33FC'
    }, {
        id: 'high',
        color: '#33FF64'
    }
    ]
    
    
    growthArr.push(parentArr)
    
    
    console.log(growthArr)

为了解决这个问题，我尝试了growthArr.push.apply(parentArr)，但这样做我的parentArr 根本不显示。

这是我的预期结果，一个包含growthArr 和parentArr 中的对象的数组

[
  {
    "name": "online stores",
    "parent": "high"
  },
  {
    "name": "retail stores",
    "parent": "low"
  },
  {
    "name": "walk in",
    "parent": "high"
  },
    {
      "id": "low",
      "color": "#fafafa"
    },
    {
      "id": "med-low",
      "color": "#B62721"
    },
    {
      "id": "med",
      "color": "#FF5733"
    },
    {
      "id": "med-high",
      "color": "#FF33FC"
    },
    {
      "id": "high",
      "color": "#33FF64"
    }
]

Answer 1

concat 是你想要使用的。

let growthArr = [{
 name: 'online stores',
  parent: 'high'
}, {
   name: 'retail stores',
  parent: 'low'
 }, {
   name: 'walk in',
  parent: 'high'
}]
    
    
let parentArr = [{
    id: 'low',
    color: '#fafafa'
}, {
    id: 'med-low',
    color: '#B62721'
 }, {
    id: 'med',
    color: '#FF5733'
}, {
    id: 'med-high',
    color: '#FF33FC'
}, {
    id: 'high',
    color: '#33FF64'
}]

console.log(
  growthArr.concat(parentArr)
)

Answer 2

使用...array 作为数组的值。

let growthArr = [{
  name: 'online stores',
  parent: 'high'
}, {
  name: 'retail stores',
  parent: 'low'
}, {
  name: 'walk in',
  parent: 'high'
}];

let parentArr = [{
  id: 'low',
  color: '#fafafa'
}, {
  id: 'med-low',
  color: '#B62721'
}, {
  id: 'med',
  color: '#FF5733'
}, {
  id: 'med-high',
  color: '#FF33FC'
}, {
  id: 'high',
  color: '#33FF64'
}];

growthArr = [...growthArr, ...parentArr];

console.log(growthArr);

Answer 3

将... 语法与.push() 一起使用

growthArr.push(...parentArr)

---

这是可行的，因为.push() 接受任意数量的参数，并将它们全部推送到目标数组中。

注意： 这会改变原始数组，而不会创建新数组并覆盖它。如果有其他对数组的引用需要观察突变，这可能很重要。

---

仅供参考，您的尝试会奏效：

growthArr.push.apply(parentArr)

除了.apply 期望第一个参数是this 值（目标数组）。所以你需要这个：

growthArr.push.apply(growthArr, parentArr)

Answer 4

使用数组 concat() 方法。所以语法是

parentArr.concat(growthArr);

Answer 5

您只需要方便的spread syntax

const
  growthArr = getGrowthArr(),
  parentArr = getParentArr();
growthArr.push(...parentArr);

console.log(growthArr);

function getGrowthArr() {
  return [{
    name: 'online stores',
    parent: 'high'
  }, {
    name: 'retail stores',
    parent: 'low'
  }, {
    name: 'walk in',
    parent: 'high'
  }];
}

function getParentArr() {
  return [{
    id: 'low',
    color: '#fafafa'
  }, {
    id: 'med-low',
    color: '#B62721'
  }, {
    id: 'med',
    color: '#FF5733'
  }, {
    id: 'med-high',
    color: '#FF33FC'
  }, {
    id: 'high',
    color: '#33FF64'
  }];
}

Answer 6

这也可以通过 es6 中的解构来完成，同时创建一个新数组：

const combined = [...growthArr, ...parentArr];

Answer 7

试试这个.concat。 parentArr.concat(growthArr)

Answer 8

You have to use **concat** instead of push

let growthArr = [
    {
     name: 'online stores',
      parent: 'high'
    }, {
       name: 'retail stores',
      parent: 'low'
     }, {
       name: 'walk in',
      parent: 'high'
    }
    ]
    
    
    let parentArr = [
    {
        id: 'low',
        color: '#fafafa'
    }, {
        id: 'med-low',
        color: '#B62721'
     }, {
        id: 'med',
        color: '#FF5733'
    }, {
        id: 'med-high',
        color: '#FF33FC'
    }, {
        id: 'high',
        color: '#33FF64'
    }
    ]

   console.info(growthArr.concat(parentArr))

Answer 9

使用parentArr.concat(growthArr)。
JS 就这么简单！