ES6复习笔记

JavaScript ES6 复习笔记

一、let 和 const 声明

1. let

• 特点：块级作用域，可防止变量提升，允许重新赋值。
• 实例：

{
  let x = 10;
  console.log(x); // 10
}
console.log(x); // ReferenceError: x is not defined

2. const

• 特点：块级作用域，常量声明，一旦赋值不能再被重新赋值。
• 实例：

const PI = 3.14;
console.log(PI); // 3.14
// PI = 3; // TypeError: Assignment to constant variable.

二、模板字符串

特点

使用反引号（`）包裹字符串，可以在字符串中插入变量和表达式，支持多行字符串。

实例

let name = 'Alice';
let age = 30;
console.log(`My name is ${name} and I am ${age} years old.`);

三、箭头函数

特点

简洁的函数表达式，自动绑定 this 值，没有自己的 arguments 对象。

实例

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

四、解构赋值

1. 数组解构

• 特点：从数组中提取值并赋值给变量。
• 实例：

let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

2. 对象解构

• 特点：从对象中提取属性值并赋值给变量。
• 实例：

let person = { name: 'Alice', age: 30 };
let { name, age } = person;
console.log(name); // Alice
console.log(age); // 30

五、默认参数

特点

函数参数可以设置默认值，当调用函数时如果没有传入该参数，则使用默认值。

实例

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

六、展开运算符

1. 数组展开

• 特点：可以将一个数组展开为另一个数组的元素。
• 实例：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combinedArr = [...arr1,...arr2];
console.log(combinedArr); // [1, 2, 3, 4, 5, 6]

2. 对象展开

• 特点：可以将一个对象展开为另一个对象的属性。
• 实例：

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3,...obj1 };
console.log(obj2); // { c: 3, a: 1, b: 2 }

七、类和继承

1. 类的定义

• 特点：使用 class 关键字定义类，包含构造函数和方法。
• 实例：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}
let person = new Person('Alice', 30);
person.sayHello(); // Hello, my name is Alice.

2. 继承

• 特点：使用 extends 关键字实现类的继承。
• 实例：

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
  study() {
    console.log(`${this.name} is studying.`);
  }
}
let student = new Student('Bob', 20, 'A');
student.sayHello(); // Hello, my name is Bob.
student.study(); // Bob is studying.

八、模块

1. 导出模块

• 特点：使用 export 关键字将函数、变量或类导出，供其他模块使用。
• 实例：

// math.js
export function add(a, b) {
  return a + b;
}
export const PI = 3.14;

2. 导入模块

• 特点：使用 import 关键字导入其他模块的函数、变量或类。
• 实例：

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

通过学习和掌握 JavaScript ES6 的这些特性，可以使代码更加简洁、高效和易于维护。