深入解析object.entries方法

一、object.entries方法

在ECMAScript2017版规范中，新增了一个方法——Object.entries()，它可以将一个对象的键值对输出成一个数组，其中每个数组元素的第一个为键名，第二个为键值，这个方法十分实用，下面我们来看看它的基本用法。

const obj = {
  name: '张三',
  age: 18,
  sex: '男'
};
const arr = Object.entries(obj);
console.log(arr); // [["name", "张三"], ["age", 18], ["sex", "男"]]

可以看出，输出的数组中包含了对象obj的所有属性和其对应的值，依次排列构成了二维数组。

二、object.entries兼容性处理

虽然object.entries方法非常实用，但是它对于老版本浏览器存在兼容性问题，事实上只有IE11及以上版本、Firefox 47及以上版本、Chrome 54及以上版本、Safari 10及以上版本、Opera 41及以上版本才支持该方法。

因此，我们需要对兼容性进行处理，以便让代码在多个浏览器环境下运行。

if (!Object.entries) {
  Object.entries = function (obj) {
    var ownProps = Object.keys(obj),
      i = ownProps.length,
      resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];
    return resArray;
  };
}

可以看到，这里的处理方法比较简单，就是检测是否存在Object.entries属性，如果不存在，就手动创建一个并向其中加入对象的属性和值，然后返回数组。

三、object.entries异常捕获

在使用Object.entries()的过程中，我们还需注意异常捕获，以免出现错误导致程序操作失败。

try {
  const arr = Object.entries(null);
  console.log(arr); // null（如果没有try...catch，这里将会报错）
} catch (err) {
  console.error(err);
}

可以看到，这里使用了try…catch方法来捕获异常并进行处理，如果Object.entries()中的参数是空值，那么就会抛出一个错误，我们使用try…catch方法捕获这个错误并进行处理。

四、object.entries 兼容

接下来，我们来详细介绍一下Object.entries()方法的兼容性问题。

首先，需要注意的是Object.entries()并不是所有浏览器都支持，所以我们需要对其进行兼容性处理。

其次，就算是在支持Object.entries()的浏览器中，如果当前页面需要兼容更低的浏览器版本，那么依然需要进行兼容性处理。

五、object.entries is not

有些时候，我们在使用Object.entries()方法时，可能会出现Object.entries is not a function这样的错误提示，这个时候我们需要对代码进行检查和排查错误。

出现这种错误的原因可能是因为两个原因：

1. 浏览器中不支持Object.entries()方法
2. 代码中存在一些错误

如果是第一个原因，那么我们需要同前面三个小结一样对兼容性进行处理；如果是第二个原因，那么我们需要检查代码的语法和逻辑是否正确。

六、object.entries 兼容ie11

在IE11浏览器中，Object.entries()方法是不被支持的，但是我们依然可以通过一些方法实现类似的功能。

var obj = {
  name: '张三',
  age: 18,
  sex: '男'
};
var arr = [];
for (var key in obj) {
  arr.push([key, obj[key]]);
}
console.log(arr); // [["name", "张三"], ["age", 18], ["sex", "男"]]

这段代码的思路其实就是通过循环遍历对象的所有属性，然后将每个属性的键名和值存储到一个数组中，最后返回这个数组。

七、object.entries的用法

除了上面介绍的基本用法，Object.entries()方法还有很多其他的用法，下面我们逐一介绍。

1. 枚举对象属性

const obj = {
  name: '张三',
  age: 18,
  sex: '男'
};
for (const [key, value] of Object.entries(obj)) {
  console.log(`'${key}': '${value}'`);
}
// 'name': '张三'
// 'age': 18
// 'sex': '男'

这里使用了for…of循环语句以及Object.entries()方法，将对象obj的所有属性和对应的值分别传给key和value，然后输出这两个变量。

2. 将参数转化为数组

const myMap = new Map();
myMap.set('0', 'foo');
myMap.set(1, 'bar');
myMap.set({}, 'baz');

const arr = Object.entries(myMap);
console.log(arr);
// [["0", "foo"], ["1", "bar"], ["[object Object]", "baz"]]

这段代码中，我们先创建了一个Map对象，然后使用Object.entries()将这个对象转化为一个数组。

3. 根据条件筛选属性

const obj1 = {
  employee: {
    name: '张三',
    age: 18,
    sex: '男'
  },
  employer: {
    name: '李四',
    age: 30,
    sex: '女'
  }
};
const filterByKey = (obj, predicate) =>
  Object.entries(obj)
    .filter(([key, value]) => predicate(key, value))
    .reduce((acc, [key, value]) => {
      acc[key] = value;
      return acc;
    }, {});

const filterByValue = (obj, predicate) =>
  Object.entries(obj)
    .reduce((acc, [key, value]) => {
      if (predicate(value)) {
        acc[key] = value;
      }
      return acc;
    }, {});

const result = filterByValue(obj1, val => val.age > 20); // 根据 age 大于 20 进行筛选
console.log(result);
// {"employer":{"name":"李四","age":30,"sex":"女"}}

这里使用了Object.entries()方法，在筛选属性的过程中，我们将key-value对作为一个数组元素进行处理，并去除不满足条件的元素，最后返回符合条件的元素。

八、object.entries 有什么用

综上所述，Object.entries()方法在枚举对象、转化为数组、筛选属性等方面有着很大的用处，可以极大地简化我们的代码。

不过在实际使用中，我们需要注意其兼容性问题，并进行异常捕获，确保程序的稳定和可靠性。

九、object.entries mdn

如果你对Object.entries()方法还不是很了解，可以前往MDN文档查看更多详细的描述和使用案例。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

MDN文档提供了很详细的API描述、语法说明、代码示例等内容，可以帮助我们更好地理解和运用Object.entries()方法。