深入解析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()方法。