在 JavaScript 中将两个数组转换为 JSON 对象
给定两个数组,任务是将这两个数组转换为一个 JSON 对象。其中第一个数组的元素是对象的键,第二个数组的元素是对象的值。
输入-输出场景
让我们看看如何将两个数组转换为 JSON 对象的场景。假设有两个数组包含一些元素。现在,我们需要将这两个数组转换为一个 JSON 对象。
Array1 = [1, 2, 3, 4]; Array2 = ['A', 'B', 'C', 'D']; Output = {"1":"A", "2":"B", "3":"C", "4":"D"} //JSON object
在本文中,我们将讨论在 Javascript 中使用不同方法将两个数组转换为 JSON 对象的不同方法。
使用 forEach() 方法
forEach() 方法将为数组中的每个元素执行指定的函数一次。以下是 forEach() 方法的语法。
forEach((ele, index) => { /* … */ })
其中,
‘ele’ 表示正在处理的数组的当前元素。
‘index’ 是当前数组元素的索引。
返回值为 undefined。
示例
为了将两个数组转换为 JSON 对象,我们使用了 forEach() 方法来迭代第一个数组。我们使用了索引从第二个数组中获取元素。在每次迭代中,forEach() 方法都会将键值对分配给 JSON 对象。
以下是将两个数组转换为 JSON 对象的示例。
<!DOCTYPE html> <html> <head> <title>Converting two arrays into a JSON object in JavaScript</title> </head> <body> <p id="para"></p> <script> const arr1 = ['Item', 'color', 'weight', 'cost']; const arr2 = ['Washing machine', 'White', 60, '20000']; function func(arr1, arr2){ const obj = {}; arr1.forEach((Curr_element, index) => { obj[Curr_element] = arr2[index]}) return obj; }; document.getElementById("para").innerHTML = JSON.stringify(func(arr1, arr2)); </script> </body> </html>
使用 object.assign() 方法
JavaScript 中的 object.assign() 方法会将一个或多个源对象的所有可枚举属性复制到目标对象。
示例
在下面的示例中,我们创建了两个数组并将这两个数组作为参数传递给函数。然后我们使用扩展运算符 (… ) 复制第一个数组,并使用 map() 方法中传递的函数将第一个数组的每个元素与第二个数组的元素关联。然后 Object.assign() 会将这些数组值转换为具有键值对的对象。
<!DOCTYPE html> <html> <head> <title>Converting two arrays into a JSON object in JavaScript</title> </head> <body> <p id="para"></p> <script> let Stud = ['Nik', 'Tej', 'Krish']; let Rno = [7, 3, 10]; function func(Stud, Rno){ return Object.assign(...Stud.map((element, index)=>({[element]: Rno[index]}) )); }; document.getElementById("para").innerHTML = JSON.stringify(func(Stud, Rno)); </script> </body> </html>
使用 push() 方法和 for 循环
JavaScript 中的 push() 方法用于向数组添加新元素。在以下示例中,我们尝试将数组转换为 JSON 对象。
const options = ['A', 'B', 'C', 'D']; const values = [true, false, false, false]; const mapArrays = (options, values) => { const res = []; for(let i = 0; i < options.length; i++){ res.push({ opt: options[i], val: values[i] }); }; return res; }; console.log(mapArrays(options, values));
广告