JS 简明表：比较 JS 原生与 ES6+ 的异同

2023-09-22 11:08:46





### JavaScript 简明表：比较 JS 原生与 ES6+ 的异同

随着 JavaScript 的不断发展，ES6（ECMAScript 2015）作为新一代的 JavaScript 标准，带来了许多新的特性和语法糖，让开发人员能够编写更加简洁、高效和可读性更强的代码。本文将从 JavaScript 原生写法与 ES6+ 的比较开始，深入浅出地讲解 ES6+ 的各种新特性，包括箭头函数、变量声明、字符串模板、解构、扩展运算符、剩余运算符、模块、类、Promise 和 Fetch API。这些知识点都是前端开发的必备技能，掌握它们可以大幅提高开发效率和代码质量。

### 一、箭头函数

箭头函数是 ES6 中引入的一种新的函数语法，它使用更简洁的语法来定义函数，并且可以自动绑定 `this` 。箭头函数的写法如下：

(parameters) => {
// function body
}


与传统函数相比，箭头函数具有以下特点：

* 更简洁的语法：箭头函数不需要使用 `function` 关键字，并且可以省略大括号和 `return` 关键字。
* 自动绑定 `this` 在箭头函数中，`this` 关键字始终指向定义它的对象，这使得在处理事件处理程序和回调函数时更加方便。

**示例** ：

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

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

// 更简洁的写法
const add = (a, b) => a + b;

二、变量声明

ES6 引入了 let 和 const 关键字来声明变量，取代了传统的 var 关键字。let 声明的变量是块级作用域，而 const 声明的变量是常量，不能被重新赋值。

// var 声明变量
var x = 10;

// let 声明变量
let y = 20;

// const 声明常量
const z = 30;

与 var 关键字相比，let 和 const 关键字具有以下特点：

块级作用域：let 和 const 声明的变量只在声明它们的块级作用域内有效，这可以防止变量污染和冲突。
暂时性死区：在使用 let 和 const 声明变量之前，这些变量都处于暂时性死区，这意味着在暂时性死区内无法访问这些变量。

示例：

// var 声明变量
var x = 10;

// 在块级作用域内声明 let 变量
{
  let y = 20;
  console.log(y); // 20
}

// 在块级作用域外访问 let 变量
console.log(y); // ReferenceError: y is not defined

// const 声明常量
const z = 30;

// 尝试重新赋值常量
z = 40; // TypeError: Assignment to constant variable.

三、字符串模板

ES6 引入了字符串模板，可以使用反引号（```）来定义字符串，并且可以在字符串模板中嵌入变量和表达式。字符串模板的写法如下：

const name = 'John Doe';
const age = 30;

// 使用字符串模板
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // Hello, my name is John Doe and I am 30 years old.

与传统字符串相比，字符串模板具有以下特点：

可以嵌入变量和表达式：字符串模板可以使用反引号（```）来定义字符串，并且可以在字符串模板中嵌入变量和表达式。
多行字符串：字符串模板可以跨越多行，这使得编写多行字符串更加方便。

示例：

// 传统字符串
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';

console.log(greeting); // Hello, my name is John Doe and I am 30 years old.

// 字符串模板
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting); // Hello, my name is John Doe and I am 30 years old.

四、解构

ES6 引入了解构，可以将数组或对象的元素分解为独立的变量。解构的写法如下：

// 数组解构
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

// 对象解构
const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

const { name, age } = person;

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

与传统方法相比，解构具有以下特点：

简化代码：解构可以简化代码，使代码更加简洁和易读。
提高性能：解构可以提高性能，因为可以减少内存分配和对象属性的访问次数。

示例：

// 传统方法
const numbers = [1, 2, 3, 4, 5];
const first = numbers[0];
const second = numbers[1];
const rest = numbers.slice(2);

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

// 解构
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

五、扩展运算符

ES6 引入了扩展运算符（...），可以将数组或对象展开为单独的元素。扩展运算符的写法如下：

// 数组展开
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const numbers = [...numbers1, ...numbers2];

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

// 对象展开
const person1 = {
  name: 'John Doe',
  age: 30
};

const person2 = {
  city: 'New York'
};

const person = { ...person1, ...person2 };

console.log(person); // { name: 'John Doe', age: 30, city: 'New York' }

与传统方法相比，扩展运算符具有以下特点：

简化代码：扩展运算符可以简化代码，使代码更加简洁和易读。
提高性能：扩展运算符可以提高性能，因为可以减少内存分配和对象属性的访问次数。

示例：

// 传统方法
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const numbers = numbers1.concat(numbers2);

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

// 扩展运算符
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const numbers = [...numbers1, ...numbers2];

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