ES6 の使い方のヒントのまとめ

今回はES6の使い方スキルをまとめてお届けします。ES6を使用する際の注意点を実際の事例を交えて見ていきましょう。

他にヒントをご存知の場合は、メッセージを残してください。喜んで追加させていただきます。

1. 必須パラメータ

ES6 はデフォルトのパラメータ値メカニズムを提供し、関数の呼び出し時にこれらのパラメータが渡されないようにパラメータのデフォルト値を設定できます。

以下の例では、パラメーター a と b のデフォルト値として required() 関数を作成しました。これは、a または b のパラメータのいずれかに呼び出し時に値が渡されない場合、required() 関数がデフォルト設定され、エラーがスローされることを意味します。

const required = () => {throw new Error('Missing parameter')};
const add = (a = required(), b = required()) => a + b;
add(1, 2) //3
add(1) // Error: Missing parameter.

2. 強力なreduce

配列のreduceメソッドは非常に多用途です。これは通常、配列内の各項目を単一の値に減らすために使用されます。しかし、それ以上のことができます。

2.1 reduce を使用してマップとフィルターを同時に実装します

シーケンスがあり、その各項目を更新し (マップ関数)、その一部をフィルターで除外したいとします (フィルター関数)。最初にマップを使用してからフィルターを使用する場合は、配列を 2 回繰り返す必要があります。

以下のコードでは、配列内の値を 2 倍にして、50 より大きい数値を取り出します。マップ メソッドとフィルター メソッドの両方を完了するために、reduce を非常に効率的に使用していることに注目してください。

const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num) => {
 num = num * 2; 
 if (num > 50) {
  finalList.push(num);
 }
 return finalList;
}, []);
doubledOver50; // [60, 80]

2.2 reduce を使用してマップとフィルターを置き換えます

上記のコードを注意深く読むと、reduce でマップとフィルターを置き換えることができることが理解できるはずです。

2.3 reduce を使用して括弧を一致させる

reduce のもう 1 つの用途は、指定された string 内の括弧を一致させることができることです。括弧を含む文字列の場合、(and) の数が一致しているかどうか、および (が前に出現する) かどうかを知る必要があります。

以下のコードでは、reduce を使用してこの問題を簡単に解決します。最初にカウンタ変数を宣言するだけでよく、初期値は 0 です。エンカウントするとカウンターが1増加します（エンカウントするとカウンターが1減少します）。左右の括弧の数が一致する場合、最終結果は 0 になります。

//Returns 0 if balanced.
const isParensBalanced = (str) => {
 return str.split('').reduce((counter, char) => {
  if(counter < 0) { //matched ")" before "("
   return counter;
  } else if(char === &#39;(&#39;) {
   return ++counter;
  } else if(char === &#39;)&#39;) {
   return --counter;
  } else { //matched some other char
   return counter;
  }
  
 }, 0); //<-- starting value of the counter
}
isParensBalanced(&#39;(())&#39;) // 0 <-- balanced
isParensBalanced(&#39;(asdfds)&#39;) //0 <-- balanced
isParensBalanced(&#39;(()&#39;) // 1 <-- not balanced
isParensBalanced(&#39;)(&#39;) // -1 <-- not balanced

2.4 配列内の同一項目の数を数える

配列内の繰り返し項目の数を数えて、それをオブジェクトで表現したいことがよくあります。次に、reduce メソッドを使用してこの配列を処理できます。

次のコードは、各タイプの車の台数をカウントし、合計台数をオブジェクトとして表します。

var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) { 
  obj[name] = obj[name] ? ++obj[name] : 1;
 return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

reduce には他にもたくさんの用途があるので、MDN で関連するコード例を読むことをお勧めします。

3. オブジェクトの分解

3.1 不要な属性を削除する

場合によっては、機密情報が含まれているか、単に大きすぎるため、特定のオブジェクト属性を保持したくないことがあります。オブジェクト全体を列挙して削除することもできるかもしれませんが、実際には、不要なプロパティを変数に割り当て、保持したい有用な部分を残りのパラメータとして渡すだけです。

以下のコードでは、_internal パラメーターと tooBig パラメーターを削除します。それらを内部変数と tooBig 変数に割り当て、残りのプロパティを cleanObject に保存して後で使用できます。

let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};
console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}

3.2 関数パラメータのネストされたオブジェクトの分解

以下のコードでは、engine はオブジェクト car にネストされたオブジェクトです。エンジンの vin 属性に興味がある場合は、構造化代入を使用して簡単に取得できます。

var car = {
 model: 'bmw 2018',
 engine: {
  v6: true,
  turbo: true,
  vin: 12345
 }
}
const modelAndVIN = ({model, engine: {vin}}) => {
 console.log(`model: ${model} vin: ${vin}`);
}
modelAndVIN(car); // => model: bmw 2018 vin: 12345

3.3 オブジェクトのマージ

ES6 には拡張機能 operator(...) が導入されています。通常、配列を構造解除するために使用されますが、オブジェクトにも使用できます。

次に、スプ​​レッド演算子を使用して新しいオブジェクトを展開します。2 番目のオブジェクトの属性値は、最初のオブジェクトの属性値を上書きします。たとえば、object2 の b と c は、object1 の同じ名前の属性を上書きします。

let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {…object1, …object2} //spread and re-add into merged
console.log(merged) // {a:1, b:30, c:40, d:50}

4. Sets

4.1 Set を使用して配列の重複排除を実装します

ES6 では、Set は一意の値のみを保存するため、Set を使用して重複を削除できます。

let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...new Set(arr)] // [1, 2, 3]

4.2 对Set使用数组方法

使用扩展运算符就可以简单的将Set转换为数组。所以你可以对Set使用Array的所有原生方法。

比如我们想要对下面的Set进行filter操作，获取大于3的项。

let mySet = new Set([1,2, 3, 4, 5]);
var filtered = [...mySet].filter((x) => x > 3) // [4, 5]

5. 数组解构

有时候你会将函数返回的多个值放在一个数组里。我们可以使用数组解构来获取其中每一个值。

5.1 数值交换

let param1 = 1;
let param2 = 2;
//swap and assign param1 & param2 each others values
[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1

5.2 接收函数返回的多个结果

在下面的代码中，我们从/post中获取一个帖子，然后在/comments中获取相关评论。由于我们使用的是async/await，函数把返回值放在一个数组中。而我们使用数组解构后就可以把返回值直接赋给相应的变量。

async function getFullPost(){
 return await Promise.all([
  fetch('/post'),
  fetch('/comments')
 ]);
}
const [post, comments] = getFullPost();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue实现移动端微信公众号步骤详解

JS设计模式中链式调用使用解析

以上がES6 の使い方のヒントのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。