【Vue.js入门到实战教程】15-ES 2015 新特性一览
来源 | https://xueyuanjun.com/post/22051
技术栈选择
JavaScript 与 ECMAScript
ES 2015 新特性
箭头函数
let languages = ['php', 'javascript', 'golang'];
languages.forEach((language) => {
console.log(language);
});
对于函数体只包含单条语句,可以进一步简化:
languages.forEach((language) => console.log(language));
可变参数
ES 2015 支持在函数定义中使用可变参数:
let languages = ['php', 'javascript', 'golang'];
function print_items(...items) {
items.forEach((item) => console.log(item));
}
print_items(languages);
字符串函数
ECMAScript 提供了一些字符串函数方便我们对字符串进行处理,比如,要判断一个字符串中是否包含指定内容,可以使用 includes 或者 indexOf 函数:
let name = '学院君';
let message = `
恭喜你,${name},注册成功!
`;
console.log(message.includes(name)); // true
console.log(message.indexOf(name) > -1); // 返回出现位置
还可以使用 startsWith 和 endsWith 判断给定字符串是否以指定内容开头或结尾:
console.log(name.startsWith('学院')); // true
console.log(name.endsWith('君')); // true
更多字符串函数,请参考 MDN JavaScript 文档。
数组函数
除了字符串之外,另一种日常经常打交道的数据结构就是数组了,ECMAScript 也提供了很多内置的数组函数方便我们对数组进行处理,和字符串函数一样,判断数组中是否包含给定值也可以使用 includes 和 indexOf 函数:
console.log(languages.includes('java')); // false
console.log(languages.indexOf('javascript')); // 1
和 PHP 类似,还支持编写自定义的查找函数:
languages.find((language) => {
return language === 'php';
});
更多数组函数,请参考 MDN JavaScript 文档。
面向对象增强
在 ES 5 中,类的继承和扩展是基于原型实现的,与我们日常熟悉的面向对象编程语法差别很大,在 ES 6 中对此进行了调整和增强,我们可以通过熟悉的类定义方式编写面向对象编程代码了:
class Car {
constructor(brand, logo) {
this._brand = brand;
this._logo = logo;
}
// Getter/Setter
get brand() {
return this._brand;
}
set brand(value) {
this._brand = value;
}
get logo() {
return this._logo;
}
set logo(value) {
this._logo = value;
}
// 静态方法
static drive() {
console.log('开车了...');
}
}
let car = new Car('奔驰', '三叉星');
console.log(car.brand); // 调用对应 getter 方法
console.log(car.logo); // 调用对应 getter 方法
car.brand = '宝马'; // 调用对应 setter 方法
car.logo = '蓝天白云'; // 调用对应 setter 方法
Car.drive(); // 调用静态方法,输出开车了...
对应代码很简单,这里就不详细解释了,我们可以编写一个继承自该类的子类:
class Audi extends Car {
constructor() {
super('奥迪', '四个圈');
}
get brand() {
return super.brand;
}
set brand(brand) {
throw '不支持该操作';
}
get logo() {
return super.logo;
}
set logo(logo) {
throw '不支持该操作';
}
}
let audi = new Audi();
console.log(audi.brand);
Audi.drive();
audi.logo = '别摸我';
最后一行代码会抛出异常:
你可以通过 try...catch... 对其进行处理:
try {
audi.logo = '别摸我';
} catch (e) {
console.log('运行时报错: ' + e);
}
模块化
在 ES 2015 中,可以通过 export 或者 export default 导出模块:
...
export default Audi;
然后在另一个模块中通过 import 语法引入:
import Audi from './demo'
let audi = new Audi();
console.log(audi.logo);
这其实就是 JavaScript 的包管理机制,由于没有命名空间的概念,所以只能通过这种方式实现,就像 PHP 在没有命名空间之前也是通过 require/include 函数导入其它文件和类一样。
Promise
ES 2015 支持通过 Promise 对象实现优雅的异步编程,Promise 本质上是一个代理对象,被代理的值在 Promise 对象创建时是未知的(比如一个网络请求),然后我们可以在这个代理对象上绑定异步处理成功或失败后的回调函数作为异步处理器,从而完成异步调用的完整回路:
let promise = new Promise(function (resolve, reject) {
console.log('初始化 Promise...');
// 3s 后执行,模拟异步处理的耗时任务
setTimeout(function () {
console.log('执行完成');
resolve(); // 调用该方法表示异步处理成功,失败则调用 reject() 方法
}, 3000);
});
promise.then(function () {
// 成功的回调
console.log('异步任务处理完毕');
}).catch(function () {
// 失败的回调
console.log('异步任务处理失败');
});
编译和打包工具
由于不同版本、不同厂商的浏览器对 ES 标准的实现和支持并不是同步的,所以对于使用高版本语法编写的代码,需要通过编译工具将其编译为向后兼容的 JavaScript 代码,以便可以在新老版本浏览器中都可以正常运行,Babel 就是这样的一个编译工具。
Babel 这样的编译工具让我们可以使用最新版本的 ES 特性编写代码,而不必担心浏览器的兼容问题。
除此之外,对于现代模块化、组件化开发的 JavaScript 项目,还需要 Webpack 这样的打包工具将不同脚本和样式代码进行打包,方便依赖管理和部署,我们可以在 Webpack 中引入 Babel 插件,将编译打包处理流程化、自动化。
看起来很复杂,不过在 Laravel 项目中,可以使用 Mix 这样的上层封装工具简化编译打包流程。Mix 封装了 Webpack 80% 以上的操作,对于后端开发人员而言,已经足够满足日常使用场景了。
注意:如无特别声明,接下来的教程默认都是基于最新版 Laravel 8 作为底层框架进行项目开发。
本文完~