导航菜单

Web前端开发/ES6+新特性
课程进度 42% · 第9/20章9/20章 · 标签 1/3
1

let/const声明

ES6引入了let和const替代var,提供块级作用域,消除了变量提升带来的问题。

javascript
1
// let/const vs var
2
if (true) {
3
let x = 1; // 块级作用域
4
const y = 2; // 常量
5
var z = 3; // 函数作用域
6
}
7
// console.log(x); // ReferenceError
8
console.log(z); // 3

箭头函数

箭头函数语法更简洁,且不绑定自己的this。

javascript
1
// 箭头函数
2
const add = (a, b) => a + b;
3
const square = x => x * x;
4
const getObj = () => ({ name: "ES6" });
5
// 不绑定this
6
const obj = {
7
name: "obj",
8
fn: () => { console.log(this.name); } // 指向外层this
9
};
2

解构赋值

解构赋值可以方便地从数组或对象中提取值。

javascript
1
// 数组解构
2
const [a, b, ...rest] = [1, 2, 3, 4];
3
// 对象解构
4
const { name, age = 18 } = { name: "Tom" };
5
// 交换变量
6
[x, y] = [y, x];

模板字符串

javascript
1
// 模板字符串
2
const name = "World";
3
console.log(`Hello, ${name}!`);
4
// 支持多行
5
const html = `
6
<div>
7
<h1>${title}</h1>
8
</div>`;
letconst箭头函数解构模板字符串