JavaScript ES6+ 语法速通

一、ES6 基础语法

1. letconst 声明变量

  • let:块级作用域,可以重新赋值。
  • const:块级作用域,声明常量,不能重新赋值。
javascript 复制代码
let name = 'Li Hua';
name = 'Li Ming'; // 可修改

const age = 21;
// age = 22; // 报错,const 不能重新赋值

2. 模板字符串

使用反引号 `````,支持 字符串插值多行字符串

javascript 复制代码
const name = 'Li Hua';
const age = 21;

const message = `Hello, my name is ${name}. I'm ${age} years old.`;
console.log(message);

const multiLine = `这是一行
这又是另一行`;
console.log(multiLine);

3. 解构赋值

  • 数组解构
javascript 复制代码
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1, 2, 3
  • 对象解构
javascript 复制代码
const person = { name: 'Li Hua', age: 21 };
const { name, age } = person;
console.log(name, age); // 'Li Hua', 21
  • 默认值
javascript 复制代码
const { city = 'Wuhan' } = {};
console.log(city); // 'Wuhan'

4. 箭头函数

箭头函数简化写法,并且不会绑定 this

javascript 复制代码
const sum = (a, b) => a + b;
console.log(sum(3, 4)); // 7

const square = n => n * n;
console.log(square(5)); // 25

5. 扩展运算符 ...

  • 数组展开
javascript 复制代码
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
  • 对象合并
javascript 复制代码
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }
  • 函数参数
javascript 复制代码
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

6. 默认参数

javascript 复制代码
function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}
greet(); // 'Hello, Guest!'
greet('Li Hua'); // 'Hello, Li Hua!'

7. for...of 遍历

javascript 复制代码
const arr = [1, 2, 3];
for (const num of arr) {
  console.log(num);
}

8. Promise 和异步操作

javascript 复制代码
const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve('数据加载成功'), 2000);
});

fetchData
  .then(data => console.log(data))
  .catch(err => console.log(err));

二、ES7+ 高级语法

1. ES7:includes 方法

javascript 复制代码
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(5)); // false

2. ES8:Async/Await

javascript 复制代码
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function loadData() {
  console.log('开始加载...');
  await delay(2000);
  console.log('数据加载成功');
}

loadData();

3. ES9:对象的 Rest 和 Spread

  • Rest 参数
javascript 复制代码
const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(rest); // { b: 2, c: 3 }
  • 对象展开
javascript 复制代码
const obj = { ...{ a: 1 }, b: 2 };
console.log(obj); // { a: 1, b: 2 }

4. ES10:Optional Catch Binding

javascript 复制代码
try {
  throw new Error('出错了');
} catch {
  console.log('捕获异常');
}

5. ES11:可选链操作符 ?.

javascript 复制代码
const user = { name: 'Li Hua', address: { city: 'Wuhan' } };
console.log(user.address?.city); // 'Wuhan'
console.log(user.contact?.phone); // undefined

6. ES12:逻辑赋值运算符

javascript 复制代码
let a = null;
a ??= 'default';
console.log(a); // 'default'

let b = 5;
b &&= 10;
console.log(b); // 10
相关推荐
im_AMBER1 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
苏打水com2 小时前
JavaScript 面试题标准答案模板(对应前文核心考点)
javascript·面试
Wx-bishekaifayuan3 小时前
基于微信小程序的社区图书共享平台设计与实现 计算机毕业设计源码44991
javascript·vue.js·windows·mysql·pycharm·tomcat·php
DoraBigHead3 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
苦夏木禾4 小时前
css实现表格中最后一列固定
前端·javascript·css
晚枫~5 小时前
零基础快速上手Playwright自动化测试
javascript·python·测试工具·c#·自动化
~无忧花开~5 小时前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js
云枫晖5 小时前
JS核心知识-Ajax
前端·javascript