バックナンバー

ES6では一般的ではないが、将来的には役に立つと思うことを記録します。

トレジャーの新効果

指数演算子 **

** 指数演算子および + - * % は、Math.pow(...)関数と同じ性質を持つ算術演算子です。等価

// 指数演算子
console.log(2**8); // 256

Object.getOwnPropertyDescriptors( )

オブジェクトのすべての自己属性の記述子を取得するメソッドです。

指定されたオブジェクトのすべての自己属性のディスクリプタを取得します。

const obj = {
	name: ' ,
	age: ()=> { return '18' }
};
const result = Object.getOwnPropertyDescriptors(obj)
console.log(result)
// {
// name: { value: ' , writable: true, enumerable: true, configurable: true },
// age: {
// value: [Function: age],
// writable: true,
// enumerable: true,
// configurable: true
// }
// }

使用方法

オブジェクトの浅いコピー

Object.assign() メソッドは、ソース・オブジェクト自身の列挙可能プロパティのみをコピーし、アクセサ・プロパティはデータ・プロパティに変換されます。

getOwnPropertyDescriptors() 関数を使用すると、両方をコピーする場合、プロパティのプロパティだけでなく、ソース・オブジェクトのプロトタイプもコピーされます。

const obj = {
	name: ' ,
	age: ()=> { return '18' }
};
const obj2 = Object.create(
	Object.getPrototypeOf(obj),
	Object.getOwnPropertyDescriptors(obj)
);
console.log(obj2)
// { name: ' , age: [Function: age] }

サブクラスの作成

サブクラスを作成する一般的な方法は、サブクラスを定義し、そのプロトタイプをスーパークラスのインスタンスに設定し、そのインスタンスにプロパティを定義することです。

これは、特にゲッターとセッターの場合には不便です。

サブクラスは、Object.create() と Object.getOwnPropertyDescriptors() を組み合わせて作成できます。

function superclass() {} //  
superclass.prototype = {
	// メソッドとプロパティをここで定義する
};
function subclass() {} //  
subclass.prototype = Object.create(superclass.prototype, Object.getOwnPropertyDescriptors({
	// メソッドとプロパティをここで定義する
}));

flat( )

flat() メソッドは、配列を指定した深さまで再帰的に走査し、 走査した部分配列の要素を新しい配列にマージしてすべての要素を返します。

文法

var newArray = arr.flat([depth]) // reduceに相当する + concat

使用方法

フラットな入れ子配列

var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]
// 任意の深さの入れ子配列をInfinityで展開する。
// reduceに相当する + concat + isArray + recursivity
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

フラット化と配列の空項目

// forEachに相当する + isArray + push + recursivity
var arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

flatMap( )

flatMap()メソッドは、まずマッピング関数を使用して各要素をマッピングし、その結果を新しい配列に圧縮します。

文法

var new_array = arr1.flatMap(function callback(currentValue[, index[, array]]) {
	// return element for new_array
}[, thisArg])

パラメーター

callback

新しい配列の要素を生成する関数には、3つの引数を渡すことができます：

• currentValue

配列中の現在処理中の要素

• index

オプション。配列内で現在処理されている要素のインデックス。

• array

オプション。呼び出されるマップ配列

thisArg

オプション。コールバック関数の実行時に使用する this 値。

戻り値

各要素がコールバック関数の結果であり、構造体の深さ depth の値が 1 である新しい配列。

map flatMapとの比較

let arr1 = ["it's Sunny in", "", "California"];
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

trimStart( )

trimStart() メソッドは、文字列の先頭からスペースを削除します。

trimLeft() は、このメソッドのエイリアスです。

const greeting = ' Hello world! ';
console.log(greeting); // " Hello world! "
console.log(greeting.trimStart()); // "Hello world! ";

trimEnd( )

trimEnd() メソッドは、文字列の末尾から空白文字を削除します。

trimRight() は、このメソッドのエイリアスです。

const greeting = ' Hello world! ';
console.log(greeting); // " Hello world! ";
console.log(greeting.trimEnd()); // " Hello world!";

trim( )

trim() メソッドは、文字列の両端から空白文字を取り除きます。

ここでいう空白文字とは、すべての空白文字

およびすべての行終端文字です。

const greeting = ' Hello world! ';
console.log(greeting); // " Hello world! ";
console.log(greeting.trim()); // "Hello world!";

Object.fromEntries( )

Object.fromEntries() メソッドは、キーと値のペアのリストをオブジェクトに変換します。

Map オブジェクトに変換

Object.fromEntries を使用すると、Map を Object に変換できます。

const map = new Map([ ['name', ' ], ['age', 20] ]);
const obj = Object.fromEntries(map);
console.log(obj); // { name: ' , age: 20 }

Array オブジェクトに変換

配列は、Object.fromEntries を使用してオブジェクトに変換できます。

const arr = [ ['0', ' ], ['1', '20'], ['2', ' ] ];
const obj2= Object.fromEntries(arr);
console.log(obj2); // { '0': ' , '1': '20', '2': 'フロントエンド }

オブジェクトの変換

Object.fromEntriesは、Object.entries()の逆です。 配列ハンドラを使用する -> 以下のようにオブジェクトを変換できます：

const object1 = { a: 1, b: 2, c: 3 };
const object2 = Object.fromEntries(
 Object.entries(object1)
 .map(([ key, val ]) => [ key, val * 2 ])
);
console.log(object2);
// { a: 2, b: 4, c: 6 }

catch

try {} catch(e) {}

オリジナル

try {} catch {}

基本的なデータ型の開発

今すぐ

StringNumber」、「Boolean」、「Null」、「Undefined」、「未定義」。

ES6

StringNumber、Boolean、Null、Undefined、Symbolです。

ES6ES10のその後

StringNumber、Boolean、Null、Undefined、Symbol、BigIntです。

結論

結論として

• リビジョンの断片を記録
• この記事で変更すべき点、注意すべき点がありましたら、私までご連絡ください！編集部 謙虚なる修正