ES6(ES2015)有什么新特性?

2024年4月8日

💎 加入 E+ 成長計畫 與超過 350+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

在这篇文章你会知道

  • ES6(ES2015)的 9 个重要新特性

在之前的文章《什么是 ECMAScript?与 JavaScript 有什么关系?》中,我们讨论了 ECMAScript 的角色,它是用来制定 JavaScript 新功能和语法的标准。

除此之外,也带到了 ES6(也称为 ES2015)是一个里程碑式的版本,引入了许多期待已久的语法糖和新特性。这些新增功能大大提升了开发者的编程体验和效率。

在本文中,我们将重点摆在介绍 ES6(ES2015) 的一些重要新特性。

ES6(ES2015)的 9 个重要新特性

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 运算式,可以从数组或物件中提取值,并将其赋给变数,用法可以参考下方代码。(MDN)

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)则允许将多个参数收集为一个数组,可以参考下方代码。(展开运算符 MDN, 其余参数 MDN)

7. 类(Classes)

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

相关面试常考题

8. 模组化(Modules)

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

相关面试常考题

9. Promise

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

相关面试常考题


相关文章

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們