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开发者提供便捷和高效的工具，提高开发效率。