ES6与ES5不同点

ES6对比ES5

Posted by HuberyYang on August 16, 2022

ES6是ECMAScript6的缩写,也称为ECMAScript2015,它是JavaScript语言的新一代标准,相对于ES5,它有以下几个方面的不同点:

块级作用域

ES5只有全局作用域和函数作用域,没有块级作用域。而在ES6中,引入了let和const关键字用来声明块级作用域。

示例代码:

ES5:

var a = 1;
if (true) {
  var a = 2;
}
console.log(a); // 输出2

ES6:

let a = 1;
if (true) {
  let a = 2;
}
console.log(a); // 输出1

箭头函数

ES6中引入了箭头函数,它可以更简洁地定义函数,并且它的this指向是词法作用域,而不是动态作用域。

示例代码:

ES5:

var test = function(a, b) {
  return a + b;
};

ES6:

let test = (a, b) => a + b;

模板字符串

ES6中引入了模板字符串,它可以让我们更方便地拼接字符串,并且支持换行和插值表达式。

示例代码:

ES5:

var name = "张三";
var age = 18;
console.log("我叫" + name + ",今年" + age + "岁。");

ES6:

let name = "张三";
let age = 18;
console.log(`我叫${name},今年${age}岁。`);

解构赋值

ES6中引入了解构赋值,它可以让我们更方便地从一个数组或对象中取出其中的值,并且支持默认值和嵌套解构。

示例代码:

ES5:

var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];
console.log(a, b, c); // 输出1, 2, 3

ES6:

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

类和对象

ES6中引入了class关键字,用来定义类,并且支持继承和静态方法。另外,ES6中的对象字面量也有了新的语法简写,可以更方便地使用。

示例代码:

ES5:

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log("My name is " + this.name);
};

var Cat = function(name) {
  Animal.call(this, name);
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.sayMeow = function() {
  console.log("Meow");
};

var cat = new Cat("Tom");
cat.sayName(); // 输出"My name is Tom"
cat.sayMeow(); // 输出"Meow"

ES6:

class Animal {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
  }
  sayMeow() {
    console.log("Meow");
  }
}

let cat = new Cat("Tom");
cat.sayName(); // 输出"My name is Tom"
cat.sayMeow(); // 输出"Meow"

以上是ES6相较于ES5的几个重要的不同点,它们都为我们提供了更方便、更强大的编程方式。