本文最后更新于 2024-09-23，文章内容可能已经过时。

ES6中有哪些新特性

块级作用域let 和 const

  • let: 声明一个块作用域的局部变量，不允许重复声明。

  • const: 声明一个块作用域的只读常量，必须在声明时初始化。

let 和 const 块儿级作用域，仅限制块儿级内声明后访问,在let 声明变量之前访问和赋值会报错!

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

解构赋值

允许从数组或对象中提取数据，并赋值给声明的变量。

const [a, b] = [1, 2]; // 数组解构
const { x, y } = { x: 1, y: 2 }; // 对象解构

模板字符串

使用反引号(```)定义的字符串，可以嵌入表达式。

const name = "World";
console.log(`Hello, ${name}!`);

箭头函数

const url = () => {
  return "arraw";
}

默认参数

如果参数不传值，或者是 undefind 时，则默认参数生效!

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

类(class)

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

模块（Modules）

允许使用import和export关键字导入和导出模块。

// 导出
export const myFunction = () => {};
export class MyClass {}

// 导入
import { myFunction, MyClass } from './module.js';

生成器（Generators）

生成器函数使用function*声明，并使用yield关键字来暂停和恢复执行。

function* generator(i) {
  yield i;
  yield i + 10;
}

Promise 对象

Promise 是一个代表了异步操作最终完成或失败的对象。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 成功条件 */) {
    resolve(value);
  } else {
    reject(error);
  }
});

Set 和 Map 数据结构

  • Set 是一个集合，一个唯一且无序的集合列表!

  • Map 是一个键值对集合，键可以是任何类型!

const mySet = new Set([1, 2, 3]);
const myMap = new Map([
  ["key1", "value1"],
  ["key2", "value2"]
]);

扩展运算符

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // arr2 为 [1, 2, 3, 4, 5]

对象子面量增强

允许对象key值可以动态计算以及添加方法!

const method = () => {};
const obj = {
  property: "value",
  method,
  ['key' + 'Name']: "value"
};

let 和 var 的区别

let 和 var 都是声明变量 的关键字!

  • let 是块级作用域，其在访问声明变量之前，或者块级内部声明变量之外访问的话都会报错! let

  • var 是函数作用域或全局作用域，其不存在在声明变量之前或块级内部声明变量访问之外 会报错的问题!

let之所以报错，是因为 es6标准规定了let一旦在块级内声明变量，其作用域便会绑定，并会生成暂时性死区，也就是在声明之前或者块级之外访问便会报错提示!

var 之所以可以访问且不会报错的问题， 是因为var存在变量提升，即使在块级内定义变量，在块级之外，依旧可以访问!

for (var index = 0; index < 3; index++) {

}
console.log(index) // 输出为 3
for (let index = 0; index < 3; index++) {

}
console.log(index) // 输出为 ReferenceError

let 变量不能重复声明， 而 var 变量可重复声明，并且会覆盖前有声明的值!

let a = 12;
let a = 123; // ReferenceError

var a = 12;
var a = 123; // a: 123

箭头函数和普通函数区别