第1006期ECMAScript 6 新特性
Posted 前端早读课
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第1006期ECMAScript 6 新特性相关的知识，希望对你有一定的参考价值。
前言
ES8 都提出来了，今天给我看 ES6 会不会呵呵呢？
今日早读文章由 @ 池盛星 翻译分享。
正文从这开始～
ECMAScript 6, 也就是ECMAScript 2015, 是最新版的ECMAScript标准. ES6是javascript语言的重要更新, 同时也是自2009年的ES5以来的第一次正式更新. 目前, 主要的JavaScript引擎正在实现这些功能.
要查看完整的ES6标准规范, 请点击ECMAScript 2015 Language Specification.
ES6包含以下新特性:
arrows
classes
enhanced object literals
template strings
destructuring
default + rest + spred
let + const
iterators + for..of
genetators
unicode
modules
module loaders
map + set + weakmap + weakset
proxies
symbols
subclassable built-ins
promises
math + number + string + array + object APIs
binary and octal literals
reflect api
tail calls
Arrows 箭头函数
Arrows是函数的一种缩写, 表现形式为=>. 它们在语法上, 类似于C#, Java 8以及CoffeeScript. 它们不仅支持块级函数体, 同时也支持带返回值的表达式函数体. 与普通函数的this作用域不同, 箭头函数内部与它周围代码共享this作用域. 即, this指向同一个东西 .
// Expression bodies 表达式函数体
let odds = evens.map(v => v + 1);
let nums = evens.map((v, i) => v + i);
let pairs = evens.map(v => ({even: v, odd: v + 1}));
// Statement bodies 块级函数体
nums.forEach(v => {
if (v % 5 === 0) {
fives.push(v);
}
});
// Lexical this: this 作用域
let bob = {
_name: "Bob",
_friends: [],
printFriends(){
this._friends.forEach(f => console.log(this._name + " knows " + f));
}
}
更多信息参考MDN: Arrow functions
Classes 类
ES6的类是基于prototype的OO模式的语法糖. 拥有简单方便的声明式格式, 使得类模式更易于使用, 并鼓励互操作性. 类支持基于prototype的继承, 超级调用(super calls), 实例(instance), 静态方法(static methods)以及构造函数 .
// Classes
class SkinnedMesh extends THREE.Mesh {
constructor(geometry, metrials) {
super(geometry, meterials);
this.idMatrix = SkinnedMesh.defaultMatrix();
this.bones = [];
this.boneMatrices = [];
// ...
}
update(camera) {
// ...
super.update();
}
get boneCount() {
return this.bones.length;
}
set matrixType(matrixType) {
this.idMatrix = SkinnedMesh[matrixType]();
}
static defaultMatrix() {
return new THREE.Matrix4();
}
}
更多信息参考MDN: Classes
Enhanced Object Literals 增强的对象字面量
对象字面量被扩展用于支持在构建时设置prototype, foo: foo的简写, 定义方法, 超级调用(super calls)以及使用表达式计算属性名称. 同时, 这些也将对象字面量和类声明更紧密的结合在一起, 并使基于对象的设计获得相同的便利 .
let obj = {
// __proto__
__proto__: theProtoObj,
// Shorthand for `handler: handler`
handler,
// Methods
toString() {
// super calls
return "d " + super.toString();
},
// Computed (dynamic) property names
['prop_' + (()=> 42)]: 42
}
更多信息请参考MDN: Grammar and types: Object literals
Template Strings 模板字符串
模板字符串(template strings)提供了一个构建字符串的语法糖. 这有点类似于Perl, Python以及其它类似语言的字符串插入功能. 作为一种选择, 可以添加标签(tag)以允许字符串在构建时被定制, 避免注入攻击或者从字符串内容构建更高级别的数据结构 .
// 简单字面量字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
// 字符串插值
let name = "Bob";
let time = "today";
`Hello ${name}, how are you ${time}?`
// 构造一个HTTP请求前缀, 用于演绎替换和构造
POST `http://foo.org/bar?a=${a}&b=${b}
Content-type: application/json
X-Credentials: ${credentials}
{"foo": ${foo},
"bar": ${bar}}`(myOnReadyStateChangeHandler);
更多信息请参考MDN: Template literals
Destructuring 解构
解构允许使用模式匹配进行绑定, 支持匹配数组和对象. 解构是故障弱化(指未匹配上时, 也不会出错, 而是产生一个undefined值), 类似于标准对象查找foo["bar"], 当未找到时, 产生一个undefined 值 .
// list匹配
let [a, , b] = [1, 2, 3];
// a=1; b=3
// object匹配
let {op: a, lhs: {op: b}, rhs: c} = getASTNode();
// object匹配简写
// 在scope内绑定`op`, `lhs`及`rhs`
let {op, lhs, rhs} = getASTNode();
// 可用于参数位置
function g({name: x}) {
console.log(x); // 5
}
g({name: 5});
// 故障弱化解构
let [a] = [];
a === undefined;
// 故障弱化解构, 带默认值
let [a = 1]=[];
a === 1;
更多信息请参考MDN: Destructuring assignment
Default + Rest + Spread 默认参数, 剩余参数(Rest Parameters), Spread语法
为函数的参数设置默认值. 将传入的参数的剩余参数绑定到数组. 使用...操作符, 将数组解构成参数列表 .
// 给参数设置默认值
function f(x, y = 12) {
// 如果没有传入y的值(或者传入的是undefined), 那么y就等于默认的值12
return x + y;
}
f(3) === 15
// 将传入的参数的剩余参数绑定到数组
function f(x, ...y) {
// y是一个数组Array
return x * y.length;
}
f(3, "hello", true) === 6;
// 使用...操作符, 将数组解构成参数列表
function f(x, y, z) {
return x + y + z;
}
// 传入一个数组作为参数
f(...[1, 2, 3]) === 6;
更多信息请参考MDN: Default parameters, Rest parameters, Spread syntax
Let + Const
用let和const代替var, 定义块级作用域的变量 .
function f() {
let x;
{
// 由于let定义的是块级作用域的变量, 所以这样是合法的
const x = "sneaky";
// 由于const定义的是常量, 所以不能再进行赋值操作
x = "foo";
}
// 由于在函数f()内, 前面已经有let x的定义, 所以不能再次定义
// 报错: Uncaught SyntaxError: Identifier 'x' has already been declared
let x = "inner";
}
更多信息请参考MDN: let, const
Iterators + for..of 迭代器 for..of
迭代器对象启用自定义迭代, 如CLR IEnumberable或Java Iterable. 通用于for..in基于自定义迭代器的迭代, for..of用法类似. 不需要是一个真正的数组, 像LINQ一样, 启用懒设计模式 .
let fibonacci = {
[Symbol.iterator](){
let pre = 0;
let cur = 1;
return {
next(){
[pre, cur] = [cur, pre + cur];
return {done: false, value: cur}
}
}
}
}
for (var n of fibonacci) {
// 在1000处截断序列
if (n > 1000) {
break;
}
console.log(n);
}
迭代器对象启用自定义迭代，如CLR IEnumerable或Java Iterable。 通用于...的自定义基于迭代器的迭代。 不需要实现阵列，实现LINQ等懒人设计模式。
更多信息请参考MDN: for...of
Generators
Generators使用function* 和yield简化iterator-autoring. 声明为function*的函数返回一个Generator实例. Generators是迭代器的子类型, 包括next和throw. 这些可能的值返回到generator, 因此yield是一个表达式, 它返回值或throws.
注意: 同时也可以用来启用"await"类似的异步编程, 请参阅ES7await 提案 .
let fibonacci = {
[Symbol.iterator]: function*() {
let pre = 0;
let cur = 1;
for (; ;) {
let temp = pre;
pre = cur;
cur += temp;
yield cur;
}
}
}
for (let p of fibonacci) {
// 在1000处截断序列
if (n > 1000) {
break;
}
console.log(n);
}
使用generator接口:(使用TypeScript 语法)
interface Generator extends Iterator {
next(value?: any): IteratorResult;
throw(exception: any);
}
更多信息请参考MDN: Iteration protocols
Unicode
// same as ES5.1
"以上是关于第1006期ECMAScript 6 新特性的主要内容，如果未能解决你的问题，请参考以下文章
奇舞周刊第 382 期：ECMAScript 2021 新特征