【Use the Spread Operator to Evaluate Arrays In-Place】フリーコードキャンプを日本語で解説!

フリーコードキャンプ

おいーす、もりたけです。

フリーコードキャンプを日本語で解説!の第119弾です。

JavaScript Algorithms and Data Structures Certification (300 hours)の中の、

Introduction to the ES6 Challengesの中の、

Use the Spread Operator to Evaluate Arrays In-Place

です。

さっそく見ていきましょう。

まずは本文から。

ES6 introduces the spread operator, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected.

The ES5 code below uses apply() to compute the maximum value in an array:

var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr); // returns 89

We had to use Math.max.apply(null, arr) because Math.max(arr) returns NaNMath.max() expects comma-separated arguments, but not an array. The spread operator makes this syntax much better to read and maintain.

const arr = [6, 89, 3, 45];
const maximus = Math.max(…arr); // returns 89

...arr returns an unpacked array. In other words, it spreads the array. However, the spread operator only works in-place, like in an argument to a function or in an array literal. The following code will not work:

const spreaded = …arr; // will throw a syntax error

Copy all contents of arr1 into another array arr2 using the spread operator.


 

 

解説していきます。

今回はスプレッド演算子(構文)についてです。

スプレッド演算子は複数のパラメータや要素が予想される場所で使う事ができます。

 

es5では配列の最大値を取得する場合、applu()を使ってこのように書けます。

var arr = [6, 89, 3, 45];
var maximus = Math.max.apply(null, arr); // returns 89
Math.max(arr)と書くとNaNを返すためapply()を使う必要がありました。
Math.max()はコンマ区切りのパラメータを想定していて、配列は引数として入れれないからです。
そこで、スプレッド演算子を使ってあげるとコードが読みやすくなり保守性があがります。
const arr = [6, 89, 3, 45];
const maximus = Math.max(…arr); // returns 89
とかいてあげるとうまくいきます。
スプレッド演算子を使うと配列を展開してくれるんですね。
ただ、スプレッド演算子は配列リテラルや関数の引数などにしか使えません。
次のような場合はエラーが出ます。
const spreaded = …arr; // will throw a syntax error
では課題を見てみましょう。
spread演算子を使用して、arr1のすべての内容を別の配列arr2にコピーろ。という課題です。
説明はいらないかと思います。
答えはこうです。
const arr1 = [‘JAN’, ‘FEB’, ‘MAR’, ‘APR’, ‘MAY’];
let arr2;
arr2 = […arr1];  // Change this line
console.log(arr2);
という事で今回はスプレッド演算子について学びました。
では次回!
タイトルとURLをコピーしました