JS 按照数组顺序对对象进行排序

在JavaScript中，可以通过将对象转换为可排序的结构（如数组），使用自定义比较函数基于参考数组的顺序进行排序，然后转换回对象来实现。以下是一个通用的函数示例，它接受一个参考数组和一个待排序的对象，并返回一个新对象，其键按照参考数组的顺序排列。

**需求：**自定义排序 el-table 表格的列。

思路：根据数组字段的顺序，对对象中的key值进行重新排序。

// 示例代码

const referenceOrder = ['sunday', 'monday', 'wednesday', 'thursday', 'friday'];
const unsortedObject = {
  wednesday: 'wednesday',
  friday: 'friday',
  monday: 'monday',
  thursday: 'thursday',
  sunday: 'sunday'
};



// 预期输出:
const unsortedObject = {
  sunday: 'sunday',
  monday: 'monday',
  wednesday: 'wednesday',
  thursday: 'thursday',
  friday: 'friday'
};

代码实现：

/**
 * 按照数组顺序对对象进行排序
 * @param {Array} arr - 排序依据的数组
 * @param {Object} obj - 需要排序的对象
 * @returns {Object} 按数组顺序重新排列的对象
 */

export function sortObjectByArray(arr, obj) {
  const sortedObj = {};
  arr.forEach(key => {
    if (obj.hasOwnProperty(key)) {
      sortedObj[key] = obj[key];
    }
  });
  return sortedObj;
}


 let sortedObject = sortObjectByArray(arr, object);
 console.log(sortedObject);
 // 输出结果: {
    sunday: 'sunday',
    monday: 'monday',
    wednesday: 'wednesday',
    thursday: 'thursday',
    friday: 'friday'
  };

问题：

在Vue中发现 调用 hasOwnProperty 报错：不要使用对象原型上的方法，因为原型的方法可能会被重写。

Do not access Object.prototype method 'hasOwnProperty' from target object no-prototype-builtins

原因：

出现这种报错是因为使用Vue.js启动项目会自动生成配置为与ESLint一起使用的样板

ESLint是一个能帮助识别报告JS中的不良模式，以便维护代码

在ECMAScript5.1中，新增了 Object.create，它支持使用指定的 \[Prototype] 创建对象。Object.create(null)是一种常见的模式，用于创建将用作映射的对象

Object.create(null) 创建的对象是一个空对象，在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如：toString(), hasOwnProperty()等方法

因为 no-prototype-builtins 规则不允许Object.prototype直接从对象调用方法，所以会导致这种错误

解决方法：

将xxx.hasOwnProperty('yyy')修改为Object.prototype.hasOwnProperty.call(xxx, 'yyy')

/**
 * 按照数组顺序对对象进行排序
 * @param {Array} arr - 排序依据的数组
 * @param {Object} obj - 需要排序的对象
 * @returns {Object} 按数组顺序重新排列的对象
 */

export function sortObjectByArray(arr, obj) {
  const sortedObj = {};
  arr.forEach(key => {
    // if (obj.hasOwnProperty(key)) {  // 修改前
    if (hasOwnKey(obj, key)) {  // 修改后
      sortedObj[key] = obj[key];
    }
  });
  return sortedObj;
}


function hasOwnKey(obj, key) {
  return Object.prototype.hasOwnProperty.call(obj, key)
}

记录一下~