如何在保持键值不变时上下移动JavaScript对象属性

首先明确：ES6及之后的JavaScript规范中，对象的自有键会按照插入顺序保存，因此我们可以通过操作键的数组顺序，重新构建对象来实现键值对的上下移动。

核心实现思路 #

1. 将对象的键提取为数组，定位目标键的索引
2. 根据移动方向（向上/向下），交换目标键与相邻键的位置（需判断边界，避免越界）
3. 基于新的键数组，重新生成顺序调整后的对象

具体代码实现 #

// 通用移动函数
function moveField(obj, targetKey, direction) {
  const keys = Object.keys(obj);
  const index = keys.indexOf(targetKey);
  
  // 边界判断：向上时不能是第一个元素，向下时不能是最后一个元素
  if ((direction === 'up' && index === 0) || (direction === 'down' && index === keys.length - 1)) {
    return { ...obj }; // 不满足移动条件，返回原对象副本
  }

  // 交换索引位置
  const swapIndex = direction === 'up' ? index - 1 : index + 1;
  [keys[index], keys[swapIndex]] = [keys[swapIndex], keys[index]];

  // 根据新的键数组构建新对象
  const newObj = {};
  keys.forEach(key => {
    newObj[key] = obj[key];
  });
  
  return newObj;
}

// 示例调用
let fields =  {
    g8fdfc8: { label: 'Email', logic: [] },
    ac1200: { label: 'Age', logic: [] }
};

// 将ac1200向上移动
fields = moveField(fields, 'ac1200', 'up');
console.log(fields);
// 输出：{ ac1200: { label: 'Age', logic: [] }, g8fdfc8: { label: 'Email', logic: [] } }

// 将ac1200向下移动（回到原顺序）
fields = moveField(fields, 'ac1200', 'down');
console.log(fields);
// 输出：{ g8fdfc8: { label: 'Email', logic: [] }, ac1200: { label: 'Age', logic: [] } }

结合jQuery的按钮交互示例 #

假设你的表单编辑器中，每个字段项对应包含「向上」「向下」按钮的DOM结构：

<div class="fields-container">
  <div class="field-item" data-key="g8fdfc8">
    <span>Email</span>
    <button class="btn-up">↑</button>
    <button class="btn-down">↓</button>
  </div>
  <div class="field-item" data-key="ac1200">
    <span>Age</span>
    <button class="btn-up">↑</button>
    <button class="btn-down">↓</button>
  </div>
</div>

绑定点击事件，更新fields对象并同步视图：

// 绑定按钮事件的通用逻辑
function bindFieldButtons() {
  // 向上按钮点击事件
  $('.btn-up').off('click').on('click', function() {
    const targetKey = $(this).closest('.field-item').data('key');
    fields = moveField(fields, targetKey, 'up');
    renderFields(fields);
  });

  // 向下按钮点击事件
  $('.btn-down').off('click').on('click', function() {
    const targetKey = $(this).closest('.field-item').data('key');
    fields = moveField(fields, targetKey, 'down');
    renderFields(fields);
  });
}

// 渲染字段列表的函数
function renderFields(fields) {
  const container = $('.fields-container');
  container.empty();
  Object.keys(fields).forEach(key => {
    const field = fields[key];
    container.append(`
      <div class="field-item" data-key="${key}">
        <span>${field.label}</span>
        <button class="btn-up">↑</button>
        <button class="btn-down">↓</button>
      </div>
    `);
  });
  // 重新绑定按钮事件
  bindFieldButtons();
}

// 初始化绑定
bindFieldButtons();

注意事项 #

• 该实现依赖ES6的对象键顺序规范，现代浏览器及Node.js环境均支持，jQuery项目中无需额外兼容处理
• 若使用非常旧的JavaScript环境（ES5及以下），对象键顺序不保证，建议改用数组存储字段项（比如[{ key: 'g8fdfc8', label: 'Email', ... }, ...]），数组的顺序操作会更直观可靠

内容的提问来源于stack exchange，提问作者webifo