ES6 中的新特性

90 阅读2分钟

1. let 和 const 关键字

ES6 引入了 letconst,提供了更好的变量声明方式。 let 允许声明块级作用域变量,而 const 用于声明常数。

2. 箭头函数(Arrow Functions)

箭头函数提供了一种更简洁的函数写法,并自动绑定 this 关键字。

3. 模板字面值(Template Literals)

模板字面值是被反引号 `` 所封闭,这种方式可以让字符串的拼接更加方便,用法可以参考下方代码。

const name = "ExplainThis";
// 不用模板字面值(Template Literals)
console.log("Hello " + name + "!");
// 使用模板字面值(Template Literals)
console.log(`Hello ${name}!`);

4. 解构赋值(Destructuring Assignment)

解构赋值(Destructuring Assignment)语法是一种 JavaScript 运算式,可以从数组或对象中提取值,并将其赋给变量,用法可以参考下方代码。

const obj = { product: "iphone", price: 20000 };
const { product, price } = obj;

console.log(product); // iphone
console.log(price); // 20000
const arr = ["iphone", 20000];
const [product, price] = arr;
console.log(product); // iphone
console.log(price); // 20000

5. 默认参数(Default Parameters)

默认参数(Default Parameters)也是现在在使用 JavaScript 上,很常使用到的方法。此语法可以为函数参数指定默认值,可以参考下方代码。

function add(a, b) {
  return a + b;
}

// 在没有默认值的情况下
// 当参数没有传入值且函数内部没有其他判断
// 容易导致预期外的返回结果
console.log(add(1)); // NaN
// 通过默认参数,确保 a 和 b 有默认值
function add(a = 0, b = 0) {
  return a + b;
}

console.log(add(1)); // 1

6. 展开运算符(Spread Operator)和其余参数(Rest Parameters)

展开运算符(Spread Operator)可以将数组或对象展开为个别元素; 而其余参数(Rest Parameters)则允许将多个参数收集为一个数组,可以参考下方代码。

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// Expected output: 6

console.log(sum.apply(null, numbers));
// Expected output: 6
function f(a, b, ...theArgs) {
  // ...
}

7. 类(Classes)

ES6 时引入了类(class)的概念,JavaScript 类(class)使用的语法,类似于其他 OOP 程序语言中的 class,但是本质上是一种语法糖,与其他程序语言的 class 实践方式并不一样,只是通过此语法糖可以用来模拟 class 的行为。

8. 模块化(Modules)

ES6 提供了官方的模块化支持,通过 importexport 关键字实现模块的导入和导出。

9. Promise

Promise 是一种处理异步操作的机制,可以避免回调地狱(callback hell),用来优化过去回调函数 callback 的写法。