javascript es6 新特性与核心技巧
封面图
•
2026-04-09
•
JavaScript
17
0
0
0
JavaScript ES6(ECMAScript 2015)是 JavaScript 历史上一次重大更新,引入了许多新特性,使得代码更简洁、可读性更强、功能更强大。以下是 **ES6 的主要新特性和核心技巧**,帮助你快速掌握现代 JavaScript 编程。 --- ## 🧩 一、ES6 新特性概览 ### 1. **let 和 const 声明变量** - `let`:块级作用域变量 - `const`:常量(不可重新赋值) ```javascript let name = "Alice"; const age = 30; // 不可重新赋值 // age = 31; // 报错 ``` > ✅ 推荐使用 `let` 和 `const` 替代 `var`,避免变量提升和全局污染。 --- ### 2. **箭头函数(Arrow Functions)** 简化函数写法,自动绑定 `this`。 ```javascript const add = (a, b) => a + b; const sayHello = () => console.log("Hello"); // 简化回调函数 [1, 2, 3].forEach(num => console.log(num)); ``` > ⚠️ 注意:箭头函数不绑定自己的 `this`,适合用于闭包或事件处理。 --- ### 3. **模板字符串(Template Literals)** 用反引号(``)包裹字符串,支持多行和嵌入表达式。 ```javascript const name = "Alice"; const greeting = `Hello, ${name}!`; console.log(greeting); // Hello, Alice! const multiLine = `First line Second line`; console.log(multiLine); ``` --- ### 4. **解构赋值(Destructuring Assignment)** 从数组或对象中提取值。 ```javascript const [a, b] = [1, 2]; console.log(a, b); // 1 2 const { name, age } = { name: "Alice", age: 30 }; console.log(name, age); // Alice 30 ``` > 💡 适用于参数解构、对象/数组的赋值等。 --- ### 5. **默认参数(Default Parameters)** 函数参数可以设置默认值。 ```javascript function greet(name = "Guest") { console.log(`Hello, ${name}`); } greet(); // Hello, Guest greet("Alice"); // Hello, Alice ``` --- ### 6. **展开运算符(Spread Operator)** 将数组或对象展开为多个元素。 ```javascript const arr = [1, 2, 3]; const newArr = [...arr, 4, 5]; // [1, 2, 3, 4, 5] const obj = { a: 1 }; const newObj = { ...obj, b: 2 }; // { a: 1, b: 2 } ``` --- ### 7. **剩余参数(Rest Parameters)** 捕获函数中未命名的参数。 ```javascript function sum(...numbers) { return numbers.reduce((acc, num) => acc + num, 0); } console.log(sum(1, 2, 3)); // 6 ``` --- ### 8. **类(Class)** 提供面向对象编程的语法糖。 ```javascript class Person { constructor(name) { this.name = name; } greet() { console.log(`Hello, I'm ${this.name}`); } } const alice = new Person("Alice"); alice.greet(); // Hello, I'm Alice ``` --- ### 9. **模块(Modules)** 通过 `import` 和 `export` 实现模块化开发。 ```javascript // math.js export function add(a, b) { return a + b; } // app.js import { add } from './math.js'; console.log(add(2, 3)); // 5 ``` --- ### 10. **Promise** 异步操作的标准化解决方案,替代回调函数。 ```javascript fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` --- ## 🧠 二、ES6 核心技巧 ### 1. **使用 `const` 和 `let` 替代 `var`** - 避免变量提升和块级作用域问题。 - 使用 `const` 表示不可变数据,`let` 表示可变数据。 ### 2. **使用箭头函数简化回调** - 特别适合事件处理、数组方法(如 `map`, `filter`, `reduce`)。 - 自动绑定 `this`,避免手动绑定。 ### 3. **使用解构提升代码可读性** - 从对象或数组中提取所需字段。 - 适用于 API 返回数据、函数参数等。 ### 4. **使用展开运算符合并数组或对象** - 比 `concat` 或 `Object.assign` 更简洁。 ### 5. **使用类实现面向对象编程** - 更清晰地组织代码结构。 - 支持继承、静态方法、私有属性等。 ### 6. **使用模块管理代码** - 分离不同功能模块,提高可维护性。 - 与打包工具(如 Webpack、Vite)结合使用更高效。 --- ## 📌 三、常见 ES6 特性对比 | 特性 | 旧写法(ES5) | 新写法(ES6) | |-------------------|------------------------|-----------------------------| | 变量声明 | `var name = "Alice";` | `let name = "Alice";` | | 函数 | `function add(a, b)` | `const add = (a, b) => ...` | | 模板字符串 | `'Hello ' + name` | ``Hello ${name}`` | | 解构赋值 | `var a = arr[0];` | `const [a] = arr;` | | 默认参数 | `function add(a, b) { b = b || 0; }` | `function add(a, b = 0)` | --- ## 🧪 四、实战小例子 ### 示例 1:使用 `map` 和箭头函数 ```javascript const numbers = [1, 2, 3, 4]; const squared = numbers.map(num => num * num); console.log(squared); // [1, 4, 9, 16] ``` ### 示例 2:使用 `rest` 和 `spread` ```javascript function sumAll(...nums) { return nums.reduce((total, num) => total + num, 0); } const result = sumAll(1, 2, 3, 4); console.log(result); // 10 ``` ### 示例 3:使用类和模块 ```javascript // person.js export class Person { constructor(name) { this.name = name; } greet() { console.log(`Hello, ${this.name}`); } } // main.js import { Person } from './person.js'; const p = new Person("Bob"); p.greet(); // Hello, Bob ``` --- ## ✅ 五、总结 ES6 是现代 JavaScript 开发的基础,掌握这些特性能显著提升代码质量和开发效率。建议你在项目中优先使用 `let`、`const`、箭头函数、解构、展开/剩余参数等特性。 如果你需要进一步学习 ES7+ 的新特性(如 `async/await`、`Object.values`、`Array.from` 等),也可以继续问我 😊 是否需要我为你整理一份 ES6 快速参考表?
上一篇:
Vue 类与样式绑定
下一篇:
vue3新特性与核心技巧
标题录入,一次不能超过6条
留言
评论