ECMAScript 2015（ES6）是 JavaScript 的下一代标准，它引入了很多新功能和语法糖，让我们的代码更加简洁和易读。在本文中，我将介绍 ES6 的 10 个绝妙功能和技巧，帮助你更好地学习和使用它。
1. 块级作用域变量
在 ES6 之前，JavaScript 只有函数作用域和全局作用域，这意味着在函数内部定义的变量在函数外部也可以访问到。ES6 引入了块级作用域变量，可以让我们在块级作用域内部定义变量，避免了变量污染和命名冲突的问题。
-- -------------------- ---- ------- -- --- -------- ----- - --- - - -- -- ------ - --- - - -- - --------------- -- - - -- --- -------- ----- - --- - - -- -- ------ - --- - - -- - --------------- -- - -展开代码
在 ES5 中，if 语句内部的变量 x 覆盖了函数内部的变量 x，导致最终输出的结果为 2。在 ES6 中，使用 let 关键字定义的变量只在块级作用域内部有效，不会影响外部的变量。
2. 模板字符串
在 ES6 中，我们可以使用模板字符串来更方便地拼接字符串和变量，避免了使用加号连接字符串的繁琐。
// ES5 var name = 'Alice'; var greeting = 'Hello, ' + name + '!'; // ES6 let name = 'Alice'; let greeting = `Hello, ${name}!`;
在 ES6 中，使用反引号（`）括起来的字符串中可以使用 ${} 来引用变量，更加直观和简洁。
3. 解构赋值
ES6 引入了解构赋值，可以方便地从数组或对象中提取值并赋给变量，减少冗余代码。
// ES5 var arr = [1, 2, 3]; var x = arr[0]; var y = arr[1]; var z = arr[2]; // ES6 let [x, y, z] = [1, 2, 3];
在 ES6 中，使用中括号（[]）来定义一个数组，左侧的变量名对应数组中的元素，可以直接赋值给它们。
// ES5 var obj = { x: 1, y: 2 }; var x = obj.x; var y = obj.y; // ES6 let { x, y } = { x: 1, y: 2 };
在 ES6 中，使用花括号（{}）来定义一个对象，左侧的变量名对应对象中的属性，可以直接赋值给它们。
4. 箭头函数
ES6 引入了箭头函数，可以更简洁地定义函数，并且可以避免 this 指向问题。
// ES5 var add = function(x, y) { return x + y; }; // ES6 let add = (x, y) => x + y;
在 ES6 中，使用箭头（=>）来定义一个函数，如果只有一个参数和一条语句，可以省略小括号和大括号。
// ES5 var square = function(x) { return x * x; }; // ES6 let square = x => x * x;
在 ES6 中，如果只有一个参数，可以省略小括号。
// ES5 var sayHello = function() { console.log('Hello!'); }; // ES6 let sayHello = () => console.log('Hello!');
在 ES6 中，如果没有参数，需要保留小括号。
5. 默认参数
ES6 引入了默认参数，可以为函数的参数设置默认值，避免了参数缺失的问题。
-- -------------------- ---- ------- -- --- --- --- - ----------- -- - - - - -- -- - - - -- -- ------ - - -- -- -- --- --- --- - -- - -- - - -- -- - - --展开代码
在 ES6 中，使用等号（=）来定义默认值，如果没有传入参数或传入的参数为 undefined，则使用默认值。
6. 展开运算符
ES6 引入了展开运算符，可以将数组或对象展开成一个序列，方便地传递参数或合并数据。
-- -------------------- ---- ------- -- --- --- ---- - --- -- --- --- ---- - --- -- --- --- ---- - ------------------ -- --- --- ---- - --- -- --- --- ---- - --- -- --- --- ---- - --------- ---------展开代码
在 ES6 中，使用三个点（...）来展开一个数组，可以将它拆分成单个元素，方便地合并数组。
-- -------------------- ---- ------- -- --- --- ---- - - -- -- -- - -- --- ---- - - -- - -- --- ---- - ----------------- ----- ------ -- --- --- ---- - - -- -- -- - -- --- ---- - - -- - -- --- ---- - - -------- ------- --展开代码
在 ES6 中，使用三个点（...）来展开一个对象，可以将它展开成一个序列，方便地合并对象。
7. Promise
ES6 引入了 Promise，可以更好地处理异步操作，避免了回调地狱的问题。
-- -------------------- ---- ------- -- --- --- --------- - ------------------ - -------- ---- ------------ -------- -------------- - --------------- -- ------ ---------- - --------------- - --- -- ------------------------ - -- ------ - ----------------- ---------------- - -- -------- - --------------- - --- - --- -- --- --- --------- - ---------- - ------ --- ------------------------- ------- - -------- ---- ------------ -------- -------------- - -------------- -- ------ ---------- - ------------- - --- --- -- ----------- ------------------ ------------- ---------------------- - ------------------- ---展开代码
在 ES6 中，使用 Promise 可以更好地处理异步操作，避免了回调地狱的问题。可以通过 then 方法链式调用多个异步操作，如果有任何一个操作出错，则会跳转到 catch 方法中处理错误。
8. 类和继承
ES6 引入了类和继承，可以更好地封装和组织代码，避免了原型链的问题。
-- -------------------- ---- ------- -- --- --- ------ - -------------- ---- - --------- - ----- -------- - ---- -- ------------------------- - ---------- - ------------------- - - --------- - ----- -- --- ------- - -------------- ---- ------ - ----------------- ----- ----- ---------- - ------ -- ----------------- - -------------------------------- ----------------------------- - -------- -------------------------- - ---------- - -------------- -- -- ----- - - ---------- - ----- -- -- --- ----- ------ - ----------------- ---- - --------- - ----- -------- - ---- - ---------- - ------------------- ---------------- - - ----- ------- ------- ------ - ----------------- ---- ------ - ----------- ----- ---------- - ------ - ---------- - -------------- -- -- ----- ----------------- - -展开代码
在 ES6 中，使用 class 关键字可以定义一个类，使用 extends 关键字可以继承另一个类。可以使用 constructor 方法定义类的构造函数，使用 super 方法调用父类的构造函数。可以使用方法定义类的方法，避免了原型链的问题。
9. 模块化
ES6 引入了模块化，可以更好地组织和管理代码，避免了命名冲突的问题。
-- -------------------- ---- ------- -- --- --- --- - ---------- - ------------------- -- --- --- - ---------- - ------------------- -- -------------- - - ---- ---- ---- --- -- --- ------ - -------------------- ------------- ------------- -- --- ------ ----- --- - -- -- ------------------- ------ ----- --- - -- -- ------------------- ------ - ---- --- - ---- ----------- ------ ------展开代码
在 ES6 中，使用 export 关键字可以导出一个变量或函数，使用 import 关键字可以导入一个变量或函数。可以避免了命名冲突的问题，更好地组织和管理代码。
10. 数组方法
ES6 引入了一些新的数组方法，可以更方便地操作数组，避免了冗余代码。
-- -------------------- ---- ------- -- --- --- --- - --- -- --- --- --- - ------------------------- ----- - ------ ---- - ----- -- --- --- ---- - --- -- --- --- ---- - ----------------- -- --- --- --- - --- -- --- --- --- - ----------------- ----- -- ---- - ----- --- --- ---- - --- -- --- --- ---- - -------- ---------展开代码
在 ES6 中，使用 reduce 方法可以对数组进行累加操作，可以使用展开运算符来合并数组。
-- -------------------- ---- ------- -- --- --- --- - --- -- --- --- ---- - ------------------------- - ------ ---- - - --- -- --- --- ---- - --- -- --- --- ------ - ----------------------- - ------ ---- - ----- --- -- --- --- --- - --- -- --- --- ---- - --------------- -- ---- - - --- --- --- ---- - --- -- --- --- ------ - ------------- -- ---- - ------展开代码
在 ES6 中，使用 filter 方法可以筛选数组中符合条件的元素，使用 map 方法可以对数组中的每个元素进行操作。
以上是 ES6 的 10 个绝妙功能和技巧，它们可以让我们更好地学习和使用 ECMAScript 2015（ES6），编写更加简洁和易读的代码。希望本文对你有所帮助，让你更加熟练地掌握 ES6。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67886f76093070664741aca1
