这些ES6语法你一定不知道：带你深入探究ES6常被忽视的细节和技巧

前端老赵前端开发培训 562 0

ES6是JavaScript的一种标准，它引入了许多新的语言特性和语法糖，使得JavaScript更加强大和易于使用。本文将深入探究ES6常被忽视的细节和技巧，包括默认参数、展开运算符、解构赋值、箭头函数、模板字符串、Symbol、Promise等。我们将介绍这些新特性的语法和用法，并举例说明如何在实际开发中应用它们。

引言

ES6是JavaScript的第六个版本，它在语言层面上引入了许多新特性和语法糖，使得JavaScript更加强大和易于使用。虽然很多人已经开始使用ES6，但是一些特性和技巧却常常被忽视。在本文中，我们将深入探究ES6常被忽视的细节和技巧，以帮助读者更好地了解和应用ES6。

默认参数

ES6引入了默认参数的概念，使得函数的定义更加简洁和灵活。在函数定义中，我们可以给参数指定默认值，如下所示：

function foo(a = 1, b = 2) {
  console.log(a, b);
}
foo(); // 输出: 1 2
foo(3); // 输出: 3 2
foo(undefined, 4); // 输出: 1 4

在上面的代码中，我们定义了一个函数foo，它有两个参数a和b。当调用foo函数时，如果没有传递参数，a和b的值将分别为1和2。如果只传递了一个参数，a的值为传递的参数，b的值为默认值2。如果传递了两个参数，a和b的值将分别为传递的参数。需要注意的是，只有当参数的值为undefined时，才会使用默认值。

展开运算符

ES6还引入了展开运算符，使得操作数组和对象更加方便和灵活。展开运算符可以将一个数组或对象“展开”，并将其元素或属性作为函数参数或对象属性传递，如下所示：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // 输出: [1, 2, 3, 4, 5, 6]
let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // 输出: { a: 1, b: 2, c: 3, d: 4 }

在上面的代码中，我们定义了两个数组arr1和arr2，分别包含三个元素。我们使用展开运算符...将两个数组合并为一个新数组arr3，并将其输出。同样的，我们也可以使用展开运算符将两个对象合并为一个新对象obj3，并将其输出。

解构赋值

ES6引入了解构赋值的概念，使得我们可以方便地从数组或对象中提取元素或属性，并将其赋值给变量。解构赋值可以使代码更加简洁和易于阅读，如下所示：

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

在上面的代码中，我们定义了一个数组arr和一个对象obj。我们使用解构赋值将数组arr中的元素分别赋值给变量a、b和c，并将其输出。同样的，我们也可以使用解构赋值将对象obj中的属性分别赋值给变量x、y和z，并将其输出。

需要注意的是，解构赋值可以嵌套使用，并且可以给变量指定默认值，如下所示：

let arr = [1, [2, 3], 4];
let [a, [b, c], d = 5] = arr;
console.log(a, b, c, d); // 输出: 1 2 3 4
let obj = { x: 1, y: { z: 2 } };
let { x, y: { z } = {} } = obj;
console.log(x, z); // 输出: 1 2

在上面的代码中，我们定义了一个嵌套数组arr和一个嵌套对象obj。我们使用解构赋值将数组arr中的元素分别赋值给变量a、b、c和d，并将其输出。同样的，我们也可以使用解构赋值将对象obj中的属性分别赋值给变量x和z，并将其输出。

箭头函数

ES6引入了箭头函数的概念，使得函数的定义更加简洁和易于阅读。箭头函数使用=>符号定义，没有自己的this，并且无法使用arguments对象，如下所示：

let add = (a, b) => a + b;
console.log(add(1, 2)); // 输出: 3
let foo = () => console.log('Hello, world!');
foo(); // 输出: Hello, world!

在上面的代码中，我们定义了两个箭头函数add和foo。箭头函数add用于计算两个数的和，箭头函数foo用于输出字符串Hello, world!。

需要注意的是，箭头函数有以下几个特点：

如果函数只有一个参数，可以省略括号；如果函数没有参数，必须使用空括号；

如果函数体只有一条语句，可以省略大括号；如果函数体有多条语句，必须使用大括号；

如果函数需要返回一个对象字面量，必须使用圆括号将其括起来，否则会被解析为一个代码块。

模板字符串

ES6引入了模板字符串的概念，使得字符串的拼接更加方便和易于阅读。模板字符串使用反引号`定义，可以使用${}将变量或表达式嵌入到字符串中，如下所示：

let name = 'Tom';
let age = 18;
console.log(`My name is ${name}, and I am ${age} years old.`); // 输出: My name is Tom, and I am 18 years old.

在上面的代码中，我们定义了两个变量name和age，并使用模板字符串将它们嵌入到字符串中，然后将字符串输出。

需要注意的是，模板字符串可以在任意位置换行，且可以包含其他变量或表达式，如下所示：

let a = 1, b = 2;
console.log(`${a} + ${b} = ${a + b}`);

在上面的代码中，我们使用模板字符串将变量a和b的值和它们的和嵌入到字符串中，然后将字符串输出。

for...of循环

ES6引入了for...of循环的概念，使得遍历数组和其他可迭代对象更加方便和易于阅读。for...of循环可以遍历数组、字符串、Set、Map等可迭代对象，如下所示：

let arr = [1, 2, 3];
for (let item of arr) {
  console.log(item);
} // 输出: 1 2 3
let str = 'hello';
for (let char of str) {
  console.log(char);
} // 输出: h e l l o
let set = new Set(['a', 'b', 'c']);
for (let item of set) {
  console.log(item);
} // 输出: a b c
let map = new Map([['x', 1], ['y', 2], ['z', 3]]);
for (let [key, value] of map) {
  console.log(key, value);
} // 输出: x 1 y 2 z 3

在上面的代码中，我们定义了一个数组arr、一个字符串str、一个Setset和一个Mapmap，并使用for...of循环遍历它们的元素或属性，并将其输出。

需要注意的是，for...of循环不能遍历普通对象，因为普通对象不是可迭代对象。如果要遍历普通对象，可以使用for...in循环，如下所示：

let obj = {x: 1, y: 2, z: 3};
for (let key in obj) {
  console.log(key, obj[key]);
} // 输出: x 1 y 2 z 3

在上面的代码中，我们定义了一个普通对象obj，并使用for...in循环遍历它的属性，并将属性名和属性值输出。

Symbol类型

ES6引入了Symbol类型的概念，可以用于创建唯一的标识符。Symbol类型的值可以用于对象的属性名，可以用于防止属性名冲突，如下所示：

let s1 = Symbol();
let s2 = Symbol();
console.log(s1 === s2); // 输出: false
let obj = {};
obj[s1] = 'foo';
obj[s2] = 'bar';
console.log(obj); // 输出: { [Symbol()]: 'foo', [Symbol()]: 'bar' }

在上面的代码中，我们定义了两个Symbol类型的值s1和s2，并使用它们作为对象obj的属性名，然后输出了obj的值。

需要注意的是，Symbol类型的值是唯一的，即使是创建相同描述的Symbol类型的值，它们的值也是不同的。

Promise对象

ES6引入了Promise对象的概念，用于处理异步操作。Promise对象代表一个异步操作的最终完成（或失败）及其结果值。Promise对象有三种状态：pending（等待态）、fulfilled（完成态）和rejected（拒绝态），分别表示异步操作正在进行、已经完成并成功返回结果、已经完成但失败返回原因。Promise对象可以使用then()方法处理异步操作的结果，也可以使用catch()方法处理异步操作的错误，如下所示：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // 输出: [1, 2, 3, 4, 5, 6]
let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // 输出: { a: 1, b: 2, c: 3, d: 4 }0

在上面的代码中，我们定义了一个返回Promise对象的异步函数asyncFunction()，并使用then()方法和catch()方法处理异步操作的结果和错误。

需要注意的是，Promise对象可以串联使用，即一个Promise对象的结果可以作为另一个Promise对象的输入，从而实现复杂的异步操作。

async/await语法

ES8引入了async/await语法的概念，可以更加方便地处理异步操作。async函数是异步函数的一种声明方式，它返回一个Promise对象，await关键字可以在async函数中暂停代码的执行，直到异步操作完成并返回结果，如下所示：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // 输出: [1, 2, 3, 4, 5, 6]
let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // 输出: { a: 1, b: 2, c: 3, d: 4 }1

在上面的代码中，我们定义了一个异步函数`asyncFunction()`，并在另一个async函数`main()`中使用await关键字处理异步操作的结果。需要注意的是，在使用await关键字时需要将其放在异步函数中，否则会报错。

类

ES6引入了类的概念，可以更加方便地实现面向对象编程。类可以看做是对象的模板，通过类创建的对象称为实例。类可以包含属性和方法，可以使用extends关键字实现继承，如下所示：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // 输出: [1, 2, 3, 4, 5, 6]
let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // 输出: { a: 1, b: 2, c: 3, d: 4 }2

在上面的代码中，我们定义了一个Animal类和一个继承自Animal类的Dog类，然后创建了一个Dog类的实例，并调用了其speak()方法。

需要注意的是，类只是一种语法糖，本质上仍然是基于原型的面向对象编程。

结论

本文介绍了ES6中一些常被忽视的细节和技巧，包括let和const关键字、箭头函数、模板字面量、解构赋值、可迭代对象、for...of循环、Symbol类型、Promise对象、async/await语法和类。这些特性可以使JavaScript代码更加简洁、易读、易维护，同时也可以提高代码的可靠性和性能。在使用这些特性时，需要了解其语法和用法，避免出现错误和性能问题。