JavaScriptきほん

文字列からアクセルするときはバッククオートとドルマークを使う。${変数[配列番号]}

'use strict';

{
  const scores= [ 80, 90, 40,90000 ,478888892387];

  // console.log(`Score: ${scores[0]}`);
  // console.log(`Score: ${scores[1]}`);
  // console.log(`Score: ${scores[2]}`);

  for( let i = 0 ; i < scores.length ; i++){
    console.log(`Score: ${scores[i]}`);
  }
}

インデックスをつけたいとき「${i}」をつける

'use strict';

{
  const scores= [ 80, 90, 40,90000 ,478888892387];

  for( let i = 0 ; i < scores.length ; i++){
    console.log(`Score ${i}: ${scores[i]}`);
  }
}

配列追加と削除

'use strict';

{
  const scores = [80, 90, 40, 70];
//末尾に配列追加
  scores.push(60, 50);
//先頭を削除
  scores.shift();
  // 90, 40, 70, 60, 50

  for (let i = 0; i < scores.length; i++) {
    console.log(`Score ${i}: ${scores[i]}`);
  }
}

文字を削除したり、追加したりする

'use strict';

{
  const scores = [80, 90, 40, 70];
//変数.splice(変化が始まる位置, 削除数);
//変数.splice(変化が始まる位置, 削除数, 追加する要素);
  scores.splice(1, 1, 40, 50);

  for (let i = 0; i < scores.length; i++) {
    console.log(`Score ${i}: ${scores[i]}`);
  }
}

スプレッド構文

・そのまま配列を追加してもうまくいかない。 ・追加するにはスプレッド構文「...」を使うと良い。

'use strict';

{
  const otherScores = [10, 20];
// const scores = [80, 90, 40, 70, otherScores];→❌これだと配列が展開されず、Array[]が入るだけになる
  const scores = [80, 90, 40, 70, ...otherScores];
  // console.log(scores);

  function sum(a, b) {
    console.log(a + b);
  }

//スプレッド構文を引数として中で展開されるようにすることもできる。
  sum(...otherScores);
  // sum(10, 20);
}

分割代入、分割交換

'use strict';

{
  const scores = [80, 90, 40, 70];

  // const [a, b, c, d] = scores;
  // console.log(a);80
  // console.log(b);90
  // console.log(c);40
  // console.log(d);70

  // const [a, b, ...others] = scores;
  // console.log(a);80
  // console.log(b);90
  // console.log(others);40,70

  let x = 30;
  let y = 70;
  [x, y] = [y, x];
  console.log(x);
  console.log(y);
}

forEach(配列の要素をその名前でひとつずつ受け取って、このブロックの中で使うことができる)

'use strict';

{
  const scores = [80, 90, 40, 70];

  // scores.forEach((score) => {
  scores.forEach((score, index) => {
    console.log(`Score ${index}: ${score}`);
  });
}

Mapの使い方(20 円ずつ値上げした価格になっているようにする)

'use strict';

{
  const prices = [180, 190, 200];

  // const updatedPrices = prices.map((price) => {
  //   return price + 20;
  // });
//引数が 1 つの場合はこちらの () は省略して OK 
//return の 1 行の場合は、このあたりも省略して OK 
  const updatedPrices = prices.map(price => price + 20);
  console.log(updatedPrices);
}

条件にあうものだけを抽出して別の配列として取得することができる filter()

'use strict';

{
  const numbers = [1, 4, 7, 8, 10];

  // const evenNumbers = numbers.filter(number => {
  //   if (number % 2 === 0) {
  //     return true;
  //   } else {
  //     return false;
  //   }
  // });

  const evenNumbers = numbers.filter(number => number % 2 === 0);

  console.log(evenNumbers);
}