You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

JavaScript合并不同值动态数组及测验应用数组存库问题求助

嘿,我来帮你搞定这两个JavaScript问题!

问题1:合并两个值不同的动态数组

如果你的需求是合并两个数组后,最终数组里没有重复值,分两种场景处理:

场景1:数组元素是基本数据类型(字符串、数字、布尔等)

Set结合扩展运算符就能快速实现,代码简洁易懂:

const array1 = [1, "苹果", true];
const array2 = [true, 2, "香蕉"];
// 合并并自动去重
const mergedUniqueArray = [...new Set([...array1, ...array2])];
console.log(mergedUniqueArray); // 输出 [1, "苹果", true, 2, "香蕉"]

原理是先把两个数组合并成一个,再转成Set(自动过滤重复值),最后转回普通数组。

场景2:数组元素是对象(需按对象属性去重)

如果数组里存的是对象(比如每个对象有唯一id),就得用reduce手动判断去重:

const array1 = [{id: 1, content: "问题1"}, {id: 2, content: "问题2"}];
const array2 = [{id: 2, content: "问题2"}, {id: 3, content: "问题3"}];
// 根据id属性去重合并
const mergedUniqueArray = [...array1, ...array2].reduce((acc, current) => {
  // 检查累加器里是否已有相同id的对象
  const isDuplicate = acc.find(item => item.id === current.id);
  if (!isDuplicate) acc.push(current);
  return acc;
}, []);
console.log(mergedUniqueArray); // 输出 [{id:1,...}, {id:2,...}, {id:3,...}]

问题2:整理问题与答案为数组存入数据库

你需要把每个问题和它对应的答案选项绑定成一组,生成结构化数组后再存入数据库,这样后续读取和使用会更方便。

第一步:正确收集用户输入的问题和答案

结合你用jQuery动态创建元素的场景,先把用户输入的值收集到对应数组:

// 收集所有问题输入框的值(假设问题输入框的类是.question-input)
const Array1 = $('.question-input').map(function() {
  return $(this).val().trim(); // 移除首尾空格,避免空内容
}).get(); // 把jQuery对象转为普通数组

// 收集每个问题对应的答案选项(假设每个问题的答案组类是.option-group,选项输入框类是.option-input)
const Array2 = $('.option-group').map(function() {
  // 过滤掉空的选项输入
  return $(this).find('.option-input').map(function() {
    const val = $(this).val().trim();
    return val ? val : null;
  }).get().filter(item => item !== null);
}).get();

第二步:绑定问题与答案,生成结构化数组

Array1(问题)和Array2(对应答案)一一对应,生成适合存库的格式:

// 生成最终的测验数据数组
const quizData = Array1.map((questionText, index) => {
  return {
    question: questionText,
    options: Array2[index] || [] // 若某个问题无选项,默认空数组
  };
});

// 最终结构示例:
// [
//   { question: "HTML的全称是?", options: ["超文本标记语言", "超文本传输协议", "动态页面语言"] },
//   { question: "以下哪个是JavaScript框架?", options: ["Vue", "React", "Angular"] }
// ]

第三步:发送到后端存入数据库

fetch把结构化数组通过接口发送到后端,完成存库操作:

fetch('/api/save-quiz-data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 告知后端发送的是JSON格式
  },
  body: JSON.stringify(quizData), // 把数组转为JSON字符串
})
.then(response => response.json())
.then(result => {
  console.log("测验数据保存成功!", result);
  // 这里可以添加成功提示,比如弹窗告知用户
})
.catch(error => {
  console.error("保存失败:", error);
  // 处理错误情况,比如提示用户重试
});

内容的提问来源于stack exchange,提问作者Arun Kumar

火山引擎 最新活动