如何重排对象数组中每个对象的内部键顺序而非对数组本身排序

报错原因 #

你代码报错的核心问题是：move函数接收的参数是数组内的对象元素，而splice是JavaScript数组的专属方法，普通对象不存在该方法，因此调用thearr.splice时直接抛出异常。

补充说明：ES6+规范中普通对象的字符串类型键会严格按照插入顺序存储排列，因此我们可以通过重新构造对象的方式调整键的顺序。

场景专属解决方案（适配你当前的需求） #

你需要的是把id放到name之前，其余键顺序不变，直接遍历数组重构每个对象即可，代码最简：

$scope.reorderObjKeys = (originArr) => {
  return originArr.map(item => {
    return {
      id: item.id,
      name: item.name,
      address: item.address
    }
  })
}

// 调用示例
const reorderedArr = $scope.reorderObjKeys(obj)

通用解决方案（支持任意键位置调整） #

如果你需要更通用的、支持指定任意键移动到指定位置的方法，可以参考以下实现：

/**
 * 重排对象内部键顺序
 * @param {Object} obj 要处理的原对象
 * @param {String} key 要移动的键名
 * @param {Number} targetIndex 目标索引位置（从0开始）
 * @returns {Object} 调整键顺序后的新对象
 */
const moveObjKeyToIndex = (obj, key, targetIndex) => {
  const keys = Object.keys(obj)
  // 先拿到当前键的索引
  const currentIndex = keys.indexOf(key)
  if (currentIndex === -1 || currentIndex === targetIndex) return obj
  // 调整键数组的顺序
  keys.splice(targetIndex, 0, keys.splice(currentIndex, 1)[0])
  // 按新的键顺序构造新对象
  return keys.reduce((newObj, k) => {
    newObj[k] = obj[k]
    return newObj
  }, {})
}

// 遍历数组调整每个对象的键顺序
$scope.arraymove = (arr, moveKey, targetIndex) => {
  return arr.map(item => moveObjKeyToIndex(item, moveKey, targetIndex))
}

// 调用示例：把id键移到索引0的位置
const reorderedArr = $scope.arraymove(obj, 'id', 0)

注意事项 #

• 以上实现均返回新数组/新对象，不会修改原数据，避免产生副作用
• 该特性依赖ES6+对象键顺序规范，如果需要兼容IE8及以下的极端老旧环境，不建议依赖对象键顺序做逻辑处理，建议取值时明确指定键名

内容的提问来源于stack exchange，提问作者Peter The Angular Dude