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的几个重要的不同点,它们都为我们提供了更方便、更强大的编程方式。