在 ES6(ECMAScript 2015) 中,引入了许多新的特性和改进,旨在提升 JavaScript 的可读性和功能性。以下是一些重要的 ES6 特性,特别是你可能会在日常开发中使用到的:
1. let 和 const
let:用于声明一个块级作用域的变量(替代传统的 var)。它的作用域限制在当前代码块内(如 if、for 等)。
const:用于声明一个常量,一旦赋值后不能修改其值。常量也遵循块级作用域。
let a = 10;
if (true) {
let b = 20;
console.log(a, b); // 10 20
}
console.log(b); // ReferenceError: b is not defined
const c = 30;
c = 40; // TypeError: Assignment to constant variable.
2. 箭头函数(Arrow Functions)
箭头函数提供了更简洁的语法,并且不会绑定自己的 this,this 的值由外部作用域决定。
// 普通函数
var sum = function(a, b) {
return a + b;
};
// 箭头函数
const sumArrow = (a, b) => a + b;
3. 模板字面量(Template Literals)
模板字面量使字符串插值变得更简单,允许多行字符串和内嵌表达式。
let name = 'John';
let greeting = `Hello, ${name}!`; // 字符串插值
console.log(greeting); // Hello, John!
let multilineString = `This is
a multi-line
string.`;
console.log(multilineString);
4. 解构赋值(Destructuring Assignment)
解构赋值允许你从数组或对象中提取值,并将它们分配给变量。
// 数组解构
const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a, b); // 1 2
// 对象解构
const person = { name: 'Alice', age: 25 };
const { name, age } = person;
console.log(name, age); // Alice 25
5. 默认参数(Default Parameters)
可以为函数参数设置默认值,避免传入 undefined 时导致错误
function greet(name = 'Guest') {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet('Alice'); // Hello, Alice!