最近我在一段 JavaScript 代码中遇到了多个令人困惑的 ES6 特性，这些特性在以前的 JavaScript 版本中并不存在，但是在使用 ES6 之后，这些特性变得非常常见。在本文中，我将分享我遇到的这些特性以及如何使用它们。
let 和 const 声明
在 ES6 中，我们可以使用 let 和 const 来声明变量。这两个关键字与 var 不同，它们可以在块级作用域中使用。这意味着如果我们在一个 if 语句中声明一个变量，那么这个变量只在 if 语句中可用。
if (true) {
let x = 10;
console.log(x); // 10
}
console.log(x); // ReferenceError: x is not defined另外，const 声明的变量是不可变的，一旦声明就不能再修改。这对于声明常量非常有用。
const PI = 3.14159; PI = 3; // TypeError: Assignment to constant variable.
箭头函数
ES6 中引入了箭头函数，它是一种更简洁的函数定义方式。箭头函数可以让我们更容易地编写匿名函数，并且它们的 this 值会指向定义它们的上下文。
// ES5
var add = function(x, y) {
return x + y;
};
// ES6
const add = (x, y) => x + y;模板字符串
ES6 中的模板字符串允许我们在字符串中使用变量和表达式。这使得字符串的拼接变得更加容易和直观。
const name = 'John';
console.log(`Hello, ${name}!`); // Hello, John!解构赋值
解构赋值是一种从数组或对象中提取值并赋值给变量的语法。这可以使我们更方便地获取数组和对象中的值。
// www.javascriptcn.com code example
// 解构数组
const [x, y] = [1, 2];
console.log(x); // 1
console.log(y); // 2
// 解构对象
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // John
console.log(age); // 30扩展运算符
扩展运算符是一种将数组或对象展开成一系列值的语法。这使得我们可以更方便地将数组或对象中的值传递给函数。
// www.javascriptcn.com code example
// 展开数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]
// 展开对象
const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { x: 1, y: 2, z: 3 }类
ES6 中引入了类，它是一种更简洁和易于理解的面向对象编程的语法。类可以让我们更方便地创建对象，并且它们支持继承和多态。
// www.javascriptcn.com code example
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Rufus');
dog.speak(); // Rufus barks.结论
ES6 中引入了许多新的特性，这些特性使得 JavaScript 的语法更加现代化和易于理解。在学习和使用这些特性时，我们可以更加轻松地编写高质量的 JavaScript 代码。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67669bbc76af2b9a20f9583d