https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
class StaticMethodCall {
static staticMethod() {
return 'Static method has been called';
}
static anotherStaticMethod() {
return this.staticMethod() + ' from another static method';
}
}
StaticMethodCall.staticMethod();
// 静态方法已被调用
StaticMethodCall.anotherStaticMethod();
// 另一个静态方法已被调用
// 类声明是定义类的一种方式,就像下面这样,使用 class 关键字后跟一个类名(这里是 Polygon),就可以定义一个类。
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
// 提升 : 函数声明和类声明之间的一个重要区别是函数声明是hoisted,类声明不会。
// 你首先需要声明你的类,然后访问它,否则像下面的代码会抛出一个ReferenceError:
let p = new Polygon();
// ReferenceError
class Polygon {}
//注意: 类表达式也存在与类声明相同的提升问题。
/* 匿名类 */
let Polygon = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
/* 命名的类 */
let Polygon = class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
es6-summary
https://github.com/zsolt-nagy/es6-summary
http://www.zsoltnagy.eu/category/es6/
es6-summary
A short summary of ES6 features and their ES5 equivalents.
Access in-depth ES6 articles here.
Table of contents
Arrow Functions
2
,3
, and4
)Functions
Name property
new.target
Scope
var
: function scopeAfter hoisting:
let
,const
: block scopelet
andconst
declarations are hoisted just like vars. However, their values are not accessible before their first assignment.Default argument values
ES6:
ES5:
Warning: default arguments does not affect the
arguments
arrayClasses
Basics
ES6:
ES5:
Inheritance
Rectangle
is the child class,Shape
is the parent classsuper
has to be called in the constructor in the child classsuper
call is implicitly assumedES6:
ES5:
Getters and Setters
Static methods
Object property shorthand notation
ES6:
ES5:
Destructuring
null
orundefined
on the right hand side of a destructuring expression yields a JavaScript errorArrays
ES6:
ES5:
Objects
ES6:
ES5:
Return value of a destructuring expression
LEFT = RIGHT
returnsRIGHT
Destructuring function arguments
executes
Rest parameters
ES6:
ES5:
arguments
is not an array in JavaScript, it has to be converted to an array withArray.from
to be able toslice
itSpread operator
call
/apply
function for calling functions with a variable number of argumentsObjects
Object.assign
ES6:
sourceList
totarget
, mutatingtarget
Example:
ES5:
Computed object keys
[
and]
becomes
Shorthand method notation for objects
Object prototype extensions
Tail call optimization
Regular recursion:
Tail call optimization with accumulator variables:
Symbols
Symbol()
creates a unique symbolJSON.stringify
excludes Symbol keysObject.assign
copies Symbol keys over totarget
Global Symbol Registry
Sets
Maps
Alternative map constructor
Weak sets
Weak maps
for...of
loopIterable interface
Properties of iterables and iterators
[Symbol.iterator]
method returning an iterator objectnext()
method returning{ done: <Boolean>, value: <NextValue> }
of the iterationdone
is truthy, the iteration endsdone
is falsy,value
is the upcoming element of the iterationConsumer constructs
for...of
loop consumes iterables...
(spread) operator consumes iterablesBuilt-in iterables:
Example:
Generators functions
function*
keyword creates a generator functionyield
keyword yields the next value returned by the iterator, withdone: false
return v
exits the generator with{ done: true, value: v }
.v
is not consumed by data consumersCombining generators
Passing parameters to iterables
Strings
Template literals
${
and}
Tag functions for template literals
Example:
Promises
Promise states
pending
: may transition tofulfilled
orrejected
fulfilled
: must have a valuerejected
: must have a reason for rejectionCreating promises
Then is chainable: it returns a promise
s2( s1( v1 ) )
in casepromise
is resolved withv1
promise
is resolved with return valuev1
, ands1( v1 )
returns a value, then the promise callings2
will be fulfilled with values1( v1 )
Errors can be caught with
promise.catch()
Creating automatically resolved promises
Example
Promise.all
onFulfilled
is called once all promises in the iterable are resolvedonRejected
is called once any promise in the iterable is rejectedModules
./moduleName.js
and./folder/moduleName2.js
./moduleName.js
:Reflect API
The Reflect API is far too complex to be summarized in a couple of paragraphs. It is also an advanced topic, requiring in-depth understanding. For this reason, I highly recommend the below article.
Reflect API
Proxies
Proxies are not only complex, but they heavily build on the Reflect API. Check out this article to learn them.
Proxies in Practice
59 Exercises
Check out ES6 in Practice, and put theory into practice by solving 59 exercises, and checking out their reference solutions.