ES6對象轉數組指南

在Javascript編程過程中，經常需要進行數組和對象之間的轉換。ES6以及後續版本提供了許多便捷的方法幫助開發者實現這樣的轉換。本文將圍繞ES6對象轉數組展開講解，介紹常用的方法及其使用場景。

一、ES6合併數組對象

當我們需要將多個數組對象合併為一個時，通常使用concat()方法實現。在ES6中，可以使用擴展運算符(…)將多個數組對象合併為一個新數組，如下：

  const arr1 = [1, 2, 3];
  const arr2 = [4, 5, 6];
  const arr3 = [...arr1, ...arr2];
  console.log(arr3);

使用擴展運算符可以方便地合併多個數組對象，還可以在新數組中插入其他元素。示例代碼的輸出為[1, 2, 3, 4, 5, 6]。

二、ES6對象數組去重的方法

在ES6中，可以使用Set數據結構去除數組中的重複元素。將數組轉為Set後再將其轉回為數組即可實現去重，如下：

  const arr = [1, 1, 2, 3, 3, 4, 5, 5];
  const uniqueArr = [...new Set(arr)];
  console.log(uniqueArr);

在上述代碼中，我們使用Set去除了arr中的重複元素，再使用擴展運算符將其轉為數組。輸出結果為[1, 2, 3, 4, 5]。

三、JS數組轉對象ES6

在需要將數組轉換為對象的場景下，可以使用ES6中提供的對象字面量的形式，如下：

  const arr = ["apple", "banana", "orange"];
  const obj = { ...arr };
  console.log(obj);

在上述示例中，我們將數組[“apple”, “banana”, “orange”]轉換成了對象{0: “apple”, 1: “banana”, 2: “orange”}，可以方便地進行對象操作。轉換後的對象中的鍵即為數組元素的下標。

四、ES6解構賦值數組對象

在ES6中，可以使用解構賦值來分解數組元素或對象屬性值，並賦值給變數。解構賦值可以快速方便地獲取數組或對象中的所需值，如下：

  const arr = [1, 2, 3];
  const [a, b, c] = arr;
  console.log(a, b, c);
  
  const obj = { x: 1, y: 2, z: 3 };
  const { x, y, z } = obj;
  console.log(x, y, z);

在上述示例中，我們使用解構賦值從數組arr中獲取了a、b、c三個變數，從對象obj中獲取了x、y、z三個變數，輸出的結果分別為1 2 3和1 2 3。

五、ES6對象數組聲明

在ES6中，可以使用對象數組的形式來聲明和定義多個對象。對象數組可以簡潔地定義多個對象，並方便進行數據操作，如下：

  const students = [
    { name: "Tom", age: 18, score: 90 },
    { name: "Jerry", age: 19, score: 80 },
    { name: "Mickey", age: 20, score: 70 },
  ];
  console.log(students[0].name, students[1].age, students[2].score);

在上述示例中，我們使用對象數組的形式定義了三個學生的信息，並可以方便地進行訪問和操作。輸出的結果為”Tom 19 70″。

六、ES6數組和對象的方法

在ES6中，數組和對象擁有許多新的方法，方便開發者進行數據處理和操作。常用的方法包括：Array.from()、Object.keys()、Object.values()、Object.entries()等等。下面介紹兩個最常用的方法：

1、Array.from()

Array.from()方法可以將類似數組的對象（包括DOM節點等）和可迭代對象轉為真正的數組：

  const divs = document.querySelectorAll('div');
  const divArr = Array.from(divs);
  console.log(divArr);

在上述示例中，我們使用Array.from()方法將獲取到的DOM節點集合轉換成了真正的數組。

2、Object.keys()

Object.keys()方法可以返回一個對象的所有鍵名組成的數組：

  const obj = { x: 1, y: 2, z: 3 };
  const keys = Object.keys(obj);
  console.log(keys);

在上述示例中，我們使用Object.keys()方法獲取了對象obj的所有鍵名，輸出的結果為[“x”, “y”, “z”]。

七、對象數組去重ES6

在需要對對象數組進行去重操作時，可以使用ES6提供的Set和Map數據結構。下面的示例演示了如何使用Set去除對象數組中的重複元素：

  const arr = [{ x: 1, y: 2 }, { x: 1, y: 3 }, { x: 2, y: 3 }];
  const uniqueArr = [...new Set(arr.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
  console.log(uniqueArr);

在上述示例中，我們使用map()方法將對象數組中的每個元素轉換成字元串，並將結果作為Set的參數進行去重。再使用map()方法將數組中的字元串還原成對象。輸出的結果為[{x: 1, y: 2}, {x: 1, y: 3}, {x: 2, y: 3}]。

八、ES6修改數組對象屬性值

在ES6中，可以使用map()方法修改數組對象中的屬性值。示例：

  const arr = [{ name: "Tom", age: 20, score: 90 }, { name: "Jerry", age: 21, score: 80 }, { name: "Mickey", age: 22, score: 70 }];
  const newArr = arr.map(item => {
    if (item.name === "Tom") {
      item.score = 99;
    }
    return item;
  });
  console.log(newArr);

在上述示例中，我們使用map()方法修改了數組對象中Tom的分數，輸出的結果為[{name: “Tom”, age: 20, score: 99}, {name: “Jerry”, age: 21, score: 80}, {name: “Mickey”, age: 22, score: 70}]。

九、ES6數組對象去重合併

合併數組對象並去重可以使用上述的方法組合使用。示例：

  const arr1 = [{ x: 1, y: 2, z: 3 }];
  const arr2 = [{ x: 1, y: 2, z: 4 }];
  const uniqueArr = [
    ...new Map([...arr1, ...arr2].map(item => [JSON.stringify(item), item])).values(),
  ];
  console.log(uniqueArr);

在上述示例中，我們使用…運算符合併arr1和arr2兩個對象數組，然後使用map()方法將數組中的對象轉換成元素和字元串的映射，再將結果作為Map的參數進行去重。最後使用Map的values()方法獲取去重後的所有值，再使用擴展運算符將其轉為數組。輸出的結果為[{x: 1, y: 2, z: 3}, {x: 1, y: 2, z: 4}]。

十、ES6數組對象按欄位排序

在需要按照特定欄位對數組對象進行排序時，可以使用ES6中提供的sort()方法。示例：

  const arr = [{ name: "Tom", age: 20, score: 90 }, { name: "Jerry", age: 21, score: 80 }, { name: "Mickey", age: 22, score: 70 }];
  arr.sort((a, b) => b.score - a.score);
  console.log(arr);

在上述示例中，我們使用sort()方法按照分數對數組對象進行降序排序，輸出的結果為[{name: “Tom”, age: 20, score: 90}, {name: “Jerry”, age: 21, score: 80}, {name: “Mickey”, age: 22, score: 70}]。

總結

本文講解了多個關於ES6對象轉數組的知識點，包括對象數組的聲明、解構賦值數組對象、數組和對象的方法、對象數組去重、修改數組對象屬性、數組對象去重合併和按欄位排序等。這些方法可以為Javascript開發者提供便捷和高效的工具，提高開發效率。