何番煎じだよ！と言われそうだけど、
ES2016とかES2017で実装される機能まとめ。
追加される機能
なんか色々ある。一個づつやったるで。
ES2016
- Array.prototype.includes
- Exponentiation Operator
ES2017
- Object.values/Object.entries
- String padding
- Object.getOwnPropertyDescriptors
- Trailing commas in function parameter lists and calls
- Async Functions
- Shared memory and atomics
Array.prototype.includes
要素が配列の中に含まれているかを判定する。
indexOf()とか使わなくていいし、boolean型で返ってくるのはすごく素敵。
// 構文
const boolean = array.includes(searchElement[, fromIndex]);
const arr = ['a', 'b', 'c'];
arr.includes('a'); // true
arr.includes('b'); // true
arr.includes('c'); // true
arr.includes('d'); // false
// 第二引数:fromIndexで何番目かを指定可能
arr.includes('a', 0); // true
arr.includes('a', 1); // false
// fromIndexは負の値の場合、配列の末尾から探す
arr.includes('c', -1); // true
// Indexは計算される
// 計算された値が0未満の場合、配列の全体を計算する
// arr.length = 3
// fromIndex = -100
// 3 - (-100) = -97
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
// 対象が配列じゃない？ callしちまえばええんや！
(function(){
[].includes.call(arguments, 'a'); // true
[].includes.call(arguments, 'd'); // false
})('a', 'b', 'c')
ちなみにindexOf()。これはキモかった。
const arr = ['a', 'b', 'c'];
arr.indexOf('a') >= -1 // true
Exponentiation Operator
n乗とか計算できるようになる。
プロジェクトによっては重宝するのかな？多分。
2 ** 2 // 4
2 ** 3 // 8
Object.values/Object.entries
Object.keysと立ち位置的には同じ印象。
対象のObjectを走査して、取得した値を配列で返す。
取得してくる値は下の表を参照。
| メソッド | 取得する値 |
|---|---|
| Object.keys | キー |
| Object.values | 値 |
| Object.entries | キーと値のセット |
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
const obj = {
name: 'pikotarou',
color: 'gold'
};
Object.values(obj); // ["pikotarou", "gold"]
Object.entries(obj); // [["name", "pikotarou"], ["color", "gold"]]
ここで列挙されるのはhasOwnProperty()とpropertyIsEnumerable()がtrueになる値が対象になっている。
String padding
文字埋めのための機能が追加される。
日付などで0を埋めるときとかに使うのかな。
記事を書いている現在（2017/3/5）ではfirefoxしかサポートされていない模様。
// 構文
str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])
'abc'.padStart(10); // " abc"
'abc'.padStart(10, "foo"); // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padEnd(10); // "abc "
'abc'.padEnd(10, "foo"); // "abcfoofoof"
'abc'.padEnd(6,"123465"); // "abc123"
Object.getOwnPropertyDescriptors
javascriptのオブジェクトにおけるプロパティには属性というものが設定されている。
この属性値はそれぞれ以下の6種類が存在している。
|属性|意味|型|
|:-----------|:------------||:------------|
|Writable|値を書き込み可能か|boolean|
|Enumerable|列挙可能か（for-inとかで対象にするか）|boolean|
|Configurable|Descriptorを変更可能か|boolean|
|Value|値|any|
|Get|Getter|function|
|Set|Setter|function|
ES5で実装されたObject.defineProperty()はこれらを設定することができるメソッドだった。
Object.getOwnPropertyDescriptor()で対象の値がどのような状態だったのか確認することができた。
Object.defineProperty(document, 'myProperty', {
writable: true,
enumerable: true,
});
Object.getOwnPropertyDescriptor(document, 'myProperty');
// {
// value: undefined,
// writable: true,
// enumerable: true,
// configurable: false
// }
前置きが長くなったけど、
今回追加されるのはObject.getOwnPropertyDescriptor()を複数要素に対応したverという感じ。
名前も複数形でsがついただけ。Object.getOwnPropertyDescriptors()。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
const obj = {
name: 'pikotarou',
color: 'gold'
};
Object.getOwnPropertyDescriptor(obj, "name");
// {
// configurable: true ,
// enumerable: true,
// value: "pikotarou",
// writable: true
// }
Object.getOwnPropertyDescriptors(obj);
// {
// "name": {
// configurable: true ,
// enumerable: true,
// value: "pikotarou",
// writable: true
// },
// "color": {
// configurable: true,
// enumerable: true,
// value: "gold",
// writable: true
// }
// }
Trailing commas in function parameter lists and calls
引数の最後にカンマをつけたとしてもエラーにならなくなる。
私のようなコピペおじさんには優しい。
function myFunc(
param1,
param2, // これもOK
) { /* ... */ };
myFunc(
'foo',
'bar', // これもOK
);
Async Functions
これは注目されていたからみんな知ってそう。
いわゆる非同期処理を同期的に書くことができるようになる。
node.jsはv7.6.0でasync/awaitをサポートするようになった。
非同期処理に関してはこのあたりの記事とか分かりやすかった。
https://sbfl.net/blog/2016/07/13/simplifying-async-code-with-promise-and-async-await/
http://qiita.com/gaogao_9/items/5417d01b4641357900c7
async / await
覚えるのはこの2つ。
awaitはPromiseの完了を待ち、その結果を展開する。
awaitがつけられたPromiseは終了するまでコードの実行は先に進まなくなる。
つまり、非同期処理を同期的に実行できる。
そしてawaitはasyncがつけられた関数の中でしか使用できない。
さらにasyncがついた関数はPromiseを返すため、then()やcatch()もそのままチェーンできる。
実際にコードを書くと以下のようになる。
(async () => {
console.log('async start');
await new Promise((resolve) => {
setTimeout(resolve, 3000);
});
console.log('async end'); // 3000ms後に実行される
})().catch((error) => {
console.log(error);
});
実際これで非同期処理を書いたところ、可読性が著しく上がるため非常に有用性があると感じた。
Shared memory and atomics
うーん、知識不足で全く追えていない。
何をするための機能かすらまだ理解できていないので追って勉強したい。
このへんとかかな。
http://www.2ality.com/2017/01/shared-array-buffer.html
2018.04.12 追記
@yosuke_furukawa さんの記事が大変参考になりました
SharedMemory と Atomic API について
https://qiita.com/yosuke_furukawa/items/923f8d40c451713dfbd3
まとめ
いくつか追加される機能をざっくり紹介してみた。
個人的に好きなのはArray.prototype.includesとAsync Functions。
記事の中で間違っている部分などありましたらご指摘いただけると助かります。