ES6部分常用知识详解，助你轻松掌握

2024-01-05 23:02:13

ES6变量声明

ES6中，可以使用let和const来声明变量。let声明的变量是块级作用域，const声明的变量是常量，不能被重新赋值。

let

let声明的变量是块级作用域，这意味着它们只在声明它们的块中有效。例如：

if (true) {
  let x = 10;
}

console.log(x); // ReferenceError: x is not defined

在上面的例子中，变量x在if块中声明，因此它只在if块中有效。当if块执行完后，变量x就被销毁了。

const

const声明的变量是常量，这意味着它们不能被重新赋值。例如：

const PI = 3.14;

PI = 42; // TypeError: Assignment to constant variable.

在上面的例子中，变量PI被声明为常量，因此它不能被重新赋值。当我们尝试重新赋值时，会抛出一个TypeError异常。

ES6箭头函数

箭头函数是ES6中引入的新语法，它可以简化函数的写法。箭头函数的语法如下：

(parameters) => expression

例如：

const sum = (a, b) => a + b;

const result = sum(1, 2);

在上面的例子中，sum是一个箭头函数，它接收两个参数a和b，并返回它们的和。result变量的值为3。

ES6解构赋值

解构赋值是一种将对象或数组的元素分解为单个变量的语法。例如：

const person = {
  name: 'John',
  age: 30
};

const { name, age } = person;

console.log(name); // John
console.log(age); // 30

在上面的例子中，我们使用解构赋值将person对象中的name和age属性分解为name和age变量。

ES6展开运算符

展开运算符是一种将数组或对象的元素展开为单个元素的语法。例如：

const numbers = [1, 2, 3, 4, 5];

const newNumbers = [...numbers, 6, 7, 8];

console.log(newNumbers); // [1, 2, 3, 4, 5, 6, 7, 8]

在上面的例子中，我们使用展开运算符将numbers数组展开为单个元素，并将其与6、7、8合并为一个新的数组newNumbers。

ES6模块

模块是将代码组织成独立单元的一种方式。ES6中，可以使用export和import来创建和使用模块。例如：

// module.js
export const PI = 3.14;

export function sum(a, b) {
  return a + b;
}

// main.js
import { PI, sum } from './module.js';

console.log(PI); // 3.14
console.log(sum(1, 2)); // 3

在上面的例子中，我们使用export关键字将PI常量和sum函数导出到module.js模块中。然后，我们使用import关键字从module.js模块中导入PI常量和sum函数。

ES6类

类是创建对象的模板。ES6中，可以使用class关键字来创建类。例如：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person = new Person('John', 30);

person.greet(); // Hello, my name is John and I am 30 years old.