ECMAScript2015+的功能

date

Mar 12, 2023

slug

js-es6

status

Published

用let替代var变量声明

到 ES5 为止，我们可以在代码中任意位置声明变量，甚至重写已声明的变量，代码如下。

var framework = 'Angular';
var framework = 'React';
console.log(framework);

ES2015引入 let 关键字

et language = 'JavaScript!'; // {1}
let language = 'Ruby!'; // {2} - 抛出错误
console.log(language);

ES2015 还引入了 const 关键字。它的行为和 let 关键字一样，唯一的区别在于，用 const 定义的变量是只读的，也就是常量。

函数的参数默认值

function sum(x = 1, y = 2, z = 3) {
 return x + y + z;
}
console.log(sum(4, 2)); // 输出 9

ES%之前，上面的函数只能写成如下：

function sum(x, y, z) {
 if (x === undefined) x = 1;
 if (y === undefined) y = 2;
 if (z === undefined) z = 3;
 return x + y + z;
}

声明展开和剩余参数

展开运算符：(...)

function sum(x = 1, y = 2, z = 3) {
 return x + y + z;
}

let params = [3,4,5];
console.log(sum(...params))
//等价于 console.log(sum.apply(undefined, params));

在函数中，展开运算符（...）也可以代替 arguments，当作剩余参数使用。考虑如下这个例子。

function restParamaterFunction (x, y, ...a) {
 console.log(a);//[ 'hello', true, 7 ]
 return (x + y) * a.length;
}
console.log(restParamaterFunction(1, 2, "hello", true, 7));

以上代码和下面代码的效果是相同的（同样输出 9）

function restParamaterFunction (x, y) {
 var a = Array.prototype.slice.call(arguments, 2);
 return (x + y) * a.length;
}
console.log(restParamaterFunction(1, 2, 'hello', true, 7));

注：call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。

增强对象属性

数组解构

ES2015 引入了数组解构的概念，可以用来一次初始化多个变量。

let [x,y] = ['a','b'];

//等价于
let x = 'a';
let y = 'b';

数组解构可以用来进行值交换，不需要创建临时变量

[x,y] = [y,x];

//等价于
var temp = x;
x = y;
y = temp;

属性简写

属性简写是对像解构的另一种方式

let [x,y] = ['a','b'];
let obj = {x, y};
console.log(obj); //{x:"a",y:"b"}

//等价于
var x = 'a';
var y = 'b';
var obj2 = {x:x, y:y};

使用类进行面向对象编程

声明一个 Book 类

function Book(title, pages, isbn) { // {1}
 this.title = title;
 this.pages = pages;
 this.isbn = isbn;
}
Book.prototype.printTitle = function() {
 console.log(this.title);
};

我们可以用 ES2015 把语法简化

class Book { // {2}
 constructor(title, pages, isbn) {
 this.title = title;
 this.pages = pages;
 this.isbn = isbn;
 }
 printIsbn() {
 console.log(this.isbn);
 }
}