ES6基础之解构、数组与对象遍历汇总

一. 解构

解构是一种将数组或对象的元素分解成独立的变量的语法。它使得代码更加简洁易懂，并可以提高代码的可重用性。

1. 数组的解构

数组的解构语法如下：

let [a, b, c] = [1, 2, 3];

这行代码将数组[1, 2, 3]中的元素解构成三个变量a、b和c。变量a的值为1，变量b的值为2，变量c的值为3。

数组的解构也可以用于交换两个变量的值：

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

这行代码将变量a和b的值交换了。

2.对象的解构

对象的解构语法如下：

let {name, age} = {name: 'John Doe', age: 30};

这行代码将对象{name: 'John Doe', age: 30}中的属性name和age解构成两个变量name和age。变量name的值为'John Doe'，变量age的值为30。

对象的解构也可以用于交换两个属性的值：

let obj = {name: 'John Doe', age: 30};

({name, age} = {age: 30, name: 'John Doe'});

console.log(obj.name); // 'John Doe'
console.log(obj.age); // 30

这行代码将对象obj中的属性name和age的值交换了。

3.解构的原理是什么?

针对可以迭代对象的Iterator,通过遍历器按顺序获取对应的值进行赋值.

3.1 Interator是什么?

Interator 是 JavaScript 中的一个内置对象，它提供了一种遍历数据结构的方法。Iterator 对象包含一个 next() 方法，该方法返回一个包含值和 done 属性的对象。

二. 遍历

遍历是一种访问数组或对象中所有元素的方法。ES6提供了多种遍历方式，包括for...of循环、forEach方法和map方法。

1. 数组的遍历

数组的遍历可以使用for...of循环、forEach方法和map方法。

（1）for...of循环

for...of循环的语法如下：

for (let element of array) {
  // Do something with element
}

这行代码将数组array中的每个元素都赋值给变量element，然后执行循环体中的代码。

（2）forEach方法

forEach方法的语法如下：

array.forEach(function(element, index, array) {
  // Do something with element
});

这行代码将数组array中的每个元素都作为参数传递给函数function，然后执行函数function中的代码。

（3）map方法

map方法的语法如下：

let newArray = array.map(function(element, index, array) {
  // Do something with element
  return newValue;
});

这行代码将数组array中的每个元素都作为参数传递给函数function，然后执行函数function中的代码。函数function的返回值将被收集到数组newArray中。

2. 对象的遍历

对象的遍历可以使用for...in循环和Object.keys()方法。

（1）for...in循环

for...in循环的语法如下：

for (let property in object) {
  // Do something with property
}

这行代码将对象object中的每个属性都赋值给变量property，然后执行循环体中的代码。

（2）Object.keys()方法

Object.keys()方法的语法如下：

let properties = Object.keys(object);

这行代码将对象object中的所有属性都收集到数组properties中。然后就可以使用for循环或其他遍历方式来遍历数组properties。

三. 总结

解构和遍历是ES6中非常有用的语法，它们可以使代码更加简洁易懂，并可以提高代码的可重用性。希望这篇文章能够帮助你更好地理解和使用这些语法。