In recent Blogs I resumed the most important new ES6 features. What I left out was
- Template Literals (coming next),
import
andexport
(the ES6 module concept, coming soon),- Promises (see Blog of Sep 2016),
- some new built-in classes (to be instantiated via the
new
operator), - and some new built-in methods of existing classes.
In this article I will make up some other smaller ES6 topics I didn't mention yet.
ES6 Miscellaneous Tests
Click onto one of the buttons to get an example script into the text area. Below the script you find an explanation.
Resume
All new ES6 features shown in this article, except proxying, have been missing in JavaScript. They are useful and valuable. Future will show whether the proxying features will make our source maintenance easier or harder. Code that is hard to read will always require more time.
As we talk about new features, there are also new Number
functionalities you should look at.
Did you know that is false
in JavaScript, and ES6 doesn't change that?
Default parameters are assigned by simply adding an = value
to the parameter declaration in function head.
In this example, the function assignDefaultsToParameters()
assigns
"John" as default for parameter firstName
, and "Doe" for lastName
.
The assertions in function assignDefaultsToParameters()
use the global JS variable
arguments
to check how many parameters have been passed to the function.
That way it can ensure that mixing-in defaults has been executed correctly.
The get
and set
functions
actually define a property that you can read from and write to.
If no set
is present, a write to that property will be simply ignored (no exception is thrown!).
The ES6 syntax is
get propertyName() { /* body */ }
and
set propertyName(singleValue) { /* body */ }
The body can contain any implementation you need.
This example defines an test-object with a property myName
,
and a getter/setter tuple that declares a property name
(which actually doesn't exist).
The getter returns the current value of myName
property, with a prefix.
The setter denies any new name
by throwing an exception.
Mind that the underlying property myName
still is publicly visible and writable,
so this example does not demonstrate a safe write-protection mechanism!
get
and set
have become kind of keywords in ES6.
You couldn't call testObject.name
(without parentheses!) when the ES6-interpreter wouldn't treat them specially.
The new ES6 Proxy class
facilitates to intercept certain operations on an object, like reading a property's value, writing to a property,
or finding out whether a property exists (and some more).
This example shows a proxyDelegate
wrapping a testObject
.
The proxy intercepts read- and write-access to any property, and the in
operator.
When reading a property, it would throw an exception in case the property does not exist in the wrapped origin
object.
When writing a property, it would do the same, but with a different message.
When testing whether a property is contained in wrapped object,
it returns false
for "name", but forwards to the in
-operator of origin
in any other case.
A Set
is a collection that contains no duplicates.
A Map
is a key-value container that contains no duplicate keys.
This example sets up a Set
and tries out if duplicates are recognized.
Then it sets up a Map
and does the same.
(Mind that a map.set()
call will overwrite any preceding of the same key.)
In a for-of loop it checks that no key has been stringified.
Finally it ensures that also symbols and functions can be keys in maps.
Try that out for Set
!
The difference between a Map
and an Object
is
that Object
can not contain a key that is not a string (exceptions are ES6 symbol
properties).
That means, if some added key is not a string, it is stringified by the JS interpreter itself.
Only the new Map
provides us left-side keys that can be of any data type.
Consider also using WeakMap and WeakSet.
I didn't give them an example here because garbage collection can not be triggered explicitly,
and they are neither Iterable
nor do they have a size
property,
thus they are not testable.
The new built-in class
Intl.DateTimeFormat
allows locale-specific date formattings.
Intl
most likely stands for "internationalization". (What a horrible long word!-)
You need to pass a string describing the locale to the constructor. (Do we have symbols for these?)
The example demonstrates this for American, English and German locales.
Mind that they are all different!
There is also a new built-in class
Intl.NumberFormat
for locale-specific number formattings.
Mind how fraction digits can be restricted via options-parameter.
There are lots more options.
Keine Kommentare:
Kommentar veröffentlichen