循环遍历 2 个数组和对象数组，并将数组 1 和数组 2 的元素插入到对象的某些键的数组中

Question

我有一个对象数组和一个数组。 我的目的是遍历两者并将数组的每个元素插入到对象数组中的某个键中。

我打算动态插入每个数组的值

澄清说明：

1. arr1 长度 = 44
2. arr2 长度 = 44
3. arrOfObj 长度 = 44

4. 我的操作思路：

   1. 通过 forEach 或 for 循环遍历 arr1
   2. 循环通过 arr2
   3. 循环遍历 arrOfObject
   4. 插入 arrOfObject[i].labels arr1[i]
   5. 插入 arrOfObject[i].values arr2[i]

一个例子：

• 数组 1

    const arr = [ 76, 72, 69, 66, 66, 66, 65, 65, 64, 64, 64, 63, 61, 61, 61, 61, 61, 61, 60, 59, 59, 59, 58, 58, 57, 57, 56, 56, 56, 55, 54, 54, 53, 52, 52, 51, 51, 50, 50, 49, 49, 49, 47, 47]

• 阵列 2

    const arr2 = [ "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9", "Item10", "Item11", "Item12", "Item13", "Item14", "Item15", "Item16", "Item17","Item18", "Item19", "Item20", "Item21", "Item22", "Item23", "Item24", "Item25","Item26", "Item27", "Item28", "Item29", "Item30", "Item31", "Item32", "Item33", "Item34", "Item35", "Item36", "Item37", "Item38", "Item39", "Item40", "Item41", "Item42", "Item43", "Item44]

• 对象数组

    const arrOfObj = [
    {
      labels:[],
      values: [],
    },
    {
      labels:[],
      values: [],
     },
    {
      labels:[],
      values: [],
     },
    ]

所需的输出是

    const arrOfObj = [
    {
      labels:[arr1[0]],
      values: [arr2[0]],
    },
    {
      labels:[arr1[1]],
      values: [arr2[1]],
     },
    ]

-结果

    const arrOfObj = [
    {
      labels:['item1'],
      values: [76],
    },
    {
      labels:['item2'],
      values: [72],
     },
    ]

如果有一种方法可以在没有嵌套循环的情况下执行此操作（可能一个循环用于值插入，另一个用于标签插入），因为嵌套循环会降低执行性能，那么除非必要，否则最好。

同样，如果您是基础级别以上的对象和数组操作的良好来源，那么分享会很棒

到目前为止，我的作品可以在https://codesandbox.io/s/epic-archimedes-8kg6h?eslint=1&expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark上查看

非常感谢提前

Answer 1

重新编写了此功能的原始答案。 它会动态地做你想要的 x 长度 x 数组

function combineArr(target, ...arrays){
    // looping through the target array
    target.map((ele, superIndex)=>{
        // looping through the attributes of the target
        Object.keys(ele).map((key, index)=>{
            // writing the results
            target[superIndex][key] = arrays[index][superIndex]
        })
    })
    return target;
}

console.log(combineArr(arrayOfObj,arr1,arr2))

目标是你的 arrOfObj，数组将是 arr1, arr2

所以它归结为你的 arrOfObj 与 arr1 和 arr2 共享一个索引。 arrOfObj[i] arr1[i] arr2[i] 但由于 arrOfObj[i] 是一个带有键的对象，我们使它可以用 Object.keys 迭代，并使数组也可以用 ...arrays 迭代，这样 keys[i] 共享索引使用数组[i]

编辑：我能够重现您的链接中存在的错误。 使用模板生成 arrOfObj 被破坏（不知道为什么）来解决这个问题，组合器的一点改进版本见下文

// use const when possible
const arr1 = [];
const arr2 = [];


// was fine as is 
// Getting the Keys and values of input in 2 separate arrays
inputs.forEach(x => {
    for (const key in x) {
        arr1.push(key);
        arr2.push(x[key]);
    }
});

//template made some problems... don't know why
// using arrOfObj to have template dubplicated the same number of arr1 and arr2
const arrOfObj = inputs.map(() => {
    return {
        labels: [],
        values: []
    }
})

// function declaration for combiner
function combineArr(target, ...arrays) {
    target.map((ele, superIndex) => {
        Object.keys(ele).map((key, index) => {
            target[superIndex][key].push(arrays[index][superIndex])
        })
    })
    return target;
}

// calling for new array
console.log(combineArr(arrOfObj, arr1, arr2))