ES6新特性入门及常用技巧

ES6(ECMAScript 2015)是JavaScript语言的重大更新，引入了许多新特性，使JavaScript更加强大和易用。以下是ES6的核心新特性及常用技巧：

1. 变量声明：let和const

// let 声明块级作用域变量
let x = 10;
if (true) {
  let x = 20; // 不同的变量
  console.log(x); // 20
}
console.log(x); // 10

// const 声明常量
const PI = 3.1415;
// PI = 3.14; // 报错，不能重新赋值

技巧：默认使用const，只有需要重新赋值时才使用let，避免使用var。

2. 箭头函数

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

// 单参数可省略括号
const square = x => x * x;

// 无参数
const greet = () => console.log('Hello!');

技巧：箭头函数自动绑定this，适合用作回调函数。

3. 模板字符串

const name = 'Alice';
const age = 25;

// 传统方式
console.log('My name is ' + name + ', I am ' + age + ' years old.');

// 模板字符串
console.log(`My name is ${name}, I am ${age} years old.`);

// 多行字符串
const message = `
  Hello ${name},
  Welcome to our website!
`;

4. 解构赋值

// 数组解构
const [first, second, , fourth] = [1, 2, 3, 4];
console.log(first); // 1
console.log(fourth); // 4

// 对象解构
const person = { name: 'Bob', age: 30 };
const { name, age } = person;
console.log(name); // 'Bob'

// 重命名
const { name: personName } = person;
console.log(personName); // 'Bob'

// 默认值
const { job = 'Developer' } = person;
console.log(job); // 'Developer'

技巧：函数参数解构可以简化参数处理。

5. 默认参数

function greet(name = 'Guest', greeting = 'Hello') {
  console.log(`${greeting}, ${name}!`);
}

greet(); // "Hello, Guest!"
greet('Alice'); // "Hello, Alice!"
greet('Bob', 'Hi'); // "Hi, Bob!"

6. 扩展运算符和剩余参数

// 扩展运算符（数组）
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// 扩展运算符（对象）
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// 剩余参数
function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

7. 对象字面量增强

const name = 'Alice';
const age = 25;

// 传统方式
const person = {
  name: name,
  age: age,
  greet: function() {
    console.log('Hello');
  }
};

// ES6简写
const person = {
  name,
  age,
  greet() {
    console.log('Hello');
  }
};

// 计算属性名
const prop = 'lastName';
const person = {
  firstName: 'John',
  [prop]: 'Doe'
};

8. Promise

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
      // 或 reject(new Error('Failed to fetch'));
    }, 1000);
  });
};

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

9. 模块系统

// math.js
export const add = (a, b) => a + b;
export const PI = 3.1415;

// 或
// export { add, PI };

// app.js
import { add, PI } from './math.js';
console.log(add(2, 3)); // 5

// 或导入全部
import * as math from './math.js';
console.log(math.add(2, 3));

10. 类(Class)

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
  
  // 静态方法
  static info() {
    console.log('This is a Person class');
  }
}

const alice = new Person('Alice', 25);
alice.greet(); // "Hello, my name is Alice"
Person.info(); // "This is a Person class"

// 继承
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
  
  study() {
    console.log(`${this.name} is studying`);
  }
}

实用技巧

数组去重：

const uniqueArray = [...new Set([1, 2, 2, 3, 3, 3])]; // [1, 2, 3]

对象合并：
```
const merged = { ...obj1, ...obj2 };
```
交换变量：
```
[a, b] = [b, a];
```

函数参数验证：

function requiredParam(param) {
  throw new Error(`Missing parameter: ${param}`);
}

function createUser({
  name = requiredParam('name'),
  age = 18
} = {}) {
  // ...
}

异步处理：

async function fetchData() {
  try {
    const response = await fetch('api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

ES6的这些特性大大提高了JavaScript的开发效率和代码可读性，是现代JavaScript开发的基础。

// 来源：https://www.nzw6.com