0

下記のサイトで読んだコード内に記された。

分からない事

this.products.push(...Array(amount).fill(product)); この部分がよくわかりません。

配列にオブジェクトを代入しているのは何となく見てわかるのですが、 0: Product {name: "bread", price: 1} 1: Product {name: "bread", price: 1}このようなオブジェクトが配列に格納されています。

知りたい事

この ...Array()に数値を引数で取るとfill()に渡した引数のコピーをその数だけしてくれるのでしょうか?
...の付いたもの初めて見るので困惑しています。

JavaScriptとオブジェクト指向プログラミング

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}
 
class Book extends Product {
  constructor(name, price, author) {
    super(name, price);
    this.author = author;
  }
}
 
class Basket {
  constructor() {
    this.products = [];
  }
 
  addProduct(amount, product) {
    this.products.push(...Array(amount).fill(product));
    console.log(this.products)
  }
 
  calcTotal() {
    return this.products
      .map(product => product.price)
      .reduce((a, b) => a + b, 0);
  }
 
  printShoppingInfo() {
    console.log('one has to pay in total: ' + this.calcTotal());
  }
}
 
const bread = new Product('bread', 1);
const water = new Product('water', 0.25);
const faust = new Book('faust', 12.5, 'Goethe');
 
const basket = new Basket();
basket.addProduct(2, bread);
basket.addProduct(3, water);
basket.addProduct(1, faust);
basket.printShoppingInfo();

1 件の回答 1

1

this.products.push(...Array(amount).fill(product));

について、Array(amount), fill(product), ...と、3つに分けて説明させていただきます。

1. Array(amount)

Array() コンストラクターは Array オブジェクトを生成するために使用します。 Ref

表示されているスクリプトから、amountは整数値であることがわかります。これと上記の説明から、Array(amount)を実行すると、amountの数の要素を持った1次元配列が作成されます。ただし、この場合、各要素は初期化されていないため、JSON.stringify(Array(amount))を見ると、[null,null,,,]となります。

2. fill(product)

fill() メソッドは、開始インデックス(デフォルトは 0)から終了インデックス(デフォルトは array.length)までのすべての要素を、静的な値に変更した配列を返します。 Ref

表示されているスクリプトから、例えばconst bread = new Product('bread', 1)を実行すると、breadの値が、fill(product)productに渡されます。例えば、Array(3).fill("sample")を実行すると、[ 'sample', 'sample', 'sample' ]のような配列が返されます。

3. ...

Arrayの左側にある...は、スプレッド構文です。スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。 Ref

上記の1,2の説明から、Array(amount).fill(product)は、amountの要素数を持つproductの値で初期化された配列であることがわかりました。そのため、例えば、amount, productがそれぞれ3, sampleとすると、Array(amount).fill(product)は、[ 'sample', 'sample', 'sample' ]です。これを配列this.products = []へプッシュすると、this.products = [[ 'sample', 'sample', 'sample' ]]のように2次元配列になります。

ここで、...を使用すると、...Array(amount).fill(product)は、sample sample sampleとなり、これを配列this.products = []へプッシュすると、this.products = [ 'sample', 'sample', 'sample' ]のように1次元配列になります。この場合、this.products.push('sample', 'sample', 'sample')のようにプッシュする配列が展開されてプッシュされます。

追記として、表示されているスクリプトでは、3つの値bread, water, faustが初期化されたconst basket = new Basket()のメソッドaddProductへ渡されて、それぞれの値が順にプッシュされます。このとき、...を使用しない場合、basket.addProduct(2, bread), basket.addProduct(3, water), basket.addProduct(1, faust)のそれぞれが配列としてプッシュされるため、結果は2次元配列になります。そこで、...を使用することで、1次元配列として出力されます。

ちなみに、this.products.push(...Array(amount).fill(product))は、this.products = this.products.concat(Array(amount).fill(product))this.products = [...this.products, ...Array(amount).fill(product)]などと同じ動作です。

References:

1
  • とても分かりやすく丁寧にありがとうございます。
    – wataru
    Commented 2021年1月17日 10:47

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。