ES6 与 ES5 之间的差异：你需要知道的所有内容-JavaScript中文网-JavaScript教程资源分享门户

ES6 和 ES5 都是 JavaScript 的版本。ES6 是 ECMAScript 6 的简称，也被称为 ECMAScript 2015。ES5 是 ECMAScript 5 的简称。两者有很多不同点。本文将对它们之间的差异进行详细介绍。

let 和 const （Var和let和const的区别）

ES5 只有两种声明变量的方式，即通过 var 或者直接声明全局变量。而 ES6 新增了两种声明变量的方式 let 和 const。

let 和 var 不同的地方在于，let 声明的变量只在代码块内有效，而 var 声明的变量则在全局作用域内有效。例如：

function test() {
    for(var i = 0;i < 10; i++) {
        let j = i;
        console.log(j);
    }
    console.log(i); //可以访问i
    console.log(j); //无法访问j
}

const 和 let 类似，也是用来声明变量的关键字，不同的是 const 声明的变量是一个常量，一旦赋值则不可更改。例如：

const PI = 3.14;
PI = 3; // 报错，无法修改一个常量

箭头函数

箭头函数是 ES6 中最常用的函数类型，特别适合写简短的匿名函数。箭头函数没有自己的 this，它继承自父作用域的 this。这使得在嵌套函数中使用 this 更加方便。例如：

function test() {
    this.value = 1;
    setTimeout(() => {
        console.log(this.value); //输出1
    }, 1000);
}

模板字符串

ES6 引入了模板字符串，使用反引号（`）括起来，可以更加方便地拼接字符串。例如：

const name = "Tom";
const age = 20;
console.log(`My name is ${name}, I am ${age} years old.`) //输出：My name is Tom, I am 20 years old.

扩展运算符

扩展运算符是 ES6 中引入的一个新功能，可以用于操作数组和对象。它能将一个数组或对象“拍平”，或者将多个数组或对象合并成一个数组或对象。例如：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr = [...arr1, ...arr2]; //合并数组，结果为 [1, 2, 3, 4, 5, 6]
const obj1 = { name: 'Tom', age: 20 };
const obj2 = { sex: 'male' };
const obj3 = { ...obj1, ...obj2 }; //合并对象，结果为 { name: 'Tom', age: 20, sex: 'male' }

解构赋值

解构赋值是 ES6 中增加的一种语法，可以快速方便地从对象或数组中提取值并赋给变量。例如：

// www.javascriptcn.com code example
//数组解构赋值
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); //输出：1 2 3

//对象解构赋值
const obj = { name: 'Tom', age: 20 };
const { name, age } = obj;
console.log(name, age); //输出：Tom 20

Promise

Promise 是 ES6 中新增的一种异步编程技术，可以更加简单、灵活地处理异步任务。Promise 可以看成是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。例如：

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("success");
    }, 1000);
});
p.then((result) => {
    console.log(result); //输出 success
});

Class

ES6 中引入了类的概念，使得 JavaScript 像面向对象编程语言一样编写程序。类可以看成是对象的模板，通过类可以创建多个对象。例如：

// www.javascriptcn.com code example
class Animal {
    constructor(name) {
        this.name = name;
    }
    say() {
        console.log(`I am a ${this.name}`);
    }
}
const cat = new Animal('Cat');
cat.say(); //输出 I am a Cat

模块化

ES6 中新增了对模块化的支持，使得 JavaScript 编写的程序更加规范、易于维护。ES6 的模块化规范与 Node.js 的模块化规范有些不同。例如：

// www.javascriptcn.com code example
//导出模块
export const PI = 3.14;
export function add(x, y) {
    return x + y;
}
//引入模块
import { PI, add } from './module.js';
console.log(PI); //输出：3.14
console.log(add(1, 2)); //输出：3

Conclusion

ES6 在语言特性和语法方面与 ES5 有很大的差异，上述介绍的内容是几个最常用的特性。了解这些更高级的特性可以帮助开发者写出更加规范、简单、易于维护的 JavaScript 代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67ca8a7ee46428fe9e2ce4c7

ES6 与 ES5 之间的差异：你需要知道的所有内容