Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

javascript メソッド関連

More than 1 year has passed since last update.

配列

const array = [10,20,30]

  • 要素の追加
    • unshift():先頭に追加
    • push():末尾に追加
  • 要素の削除(1つずつしか削除できない)
    • shift():先頭から削除
    • pop();末尾から削除
  • 配列の操作
    • splice(変化が開始する位置,削除数)
    • splice(変化が開始する位置,削除数,追加する要素)
  • 参照渡し
    • 配列とオブジェクトは参照渡しである。
    • スプレッド構文を使うと値渡しとなる。

スプレッド構文

配列を展開してくれる。

  const otherScores = [10, 11];
  const scores = [6, 7, 8, 9, ...otherScores];
  // console.log(scores);

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

  sum(...otherScores);
  // sum(10, 11);
と同じ意味

分割代入 レスト構文 値の交換

//分割代入
  const [a, b, c, d] = scores;
//レスト構文
  const [a, b, ...others] = scores;
//値の交換
  let x = 10;
  let y = 20;
  [x, y] = [y, x];

forEach

  • 配列の要素数を気にする必要が無い
  • オブジェクトには使えない
  • breakやcontinueは使えない
  • 3つの引数を与えられる。
    • 第一引数:配列データの値
    • 第二引数:配列のインデックス番号
    • 第三引数:現在処理している配列
  const scores = [10, 20, 30, 40];
  scores.forEach((score, index) => {
    console.log(`Score ${index}: ${score}`);
  });
  //Score 0: 10...
  //Score 1: 20...

map

  • 返り値:処理後の配列
  const prices = [180, 190, 200];

  const updatedPrices = prices.map((price) => {
     return price + 20;
   });

  console.log(updatedPrices); //[200,210,220]

filter

  • 返り値:フィルター後の配列
  • trueの値だけが残る
  const numbers = [1, 4, 7, 8, 10];

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

  console.log(evenNumbers); //[4,8,10]

オブジェクト

  • []ではなく{}を使う。
  • 最後のカンマはあってもなくてもエラーにならない。
  • 要素の削除にはdeleteを使う
  // const point = {x: 100, y: 180};
  const point = {
    x: 100,
    y: 180,
  };
  point.x = 120;
  console.log(point.x); //120
  console.log(point.['y']); //180

  point.z = 90;
  delete point.y;
  console.log(point); //{x :120,z:90}
  • スプレッド構文 分割代入 レスト構文も使用可
  • 分割代入ではオブジェクトのキーと同じ定数名を使えば、そのキーの値が代入される。
 const others = {
    r: 4,
    color: 'red',
  };

  const point = {
    x: 100, 
    y: 180,
    ...others,
  };

  const {x, r, ...others} = point;
  console.log(x); //100
  console.log(r); //4
  console.log(others); // {y:180,color:red}

文字列,配列の操作

  • length:長さ取得
  • substring(開始位置,終了位置):一部の文字列を取得
  • join(区切り文字):配列を区切り文字でつないで文字列として返す
  • split(区切り文字):文字列を区切り文字で分割して配列として返す

数値の操作

let score = 7.33333; 
Math.floor(score) // 7 小数点切り捨て
Math.ceil(score) // 8 小数点切り上げ
Math.round(score) // 7 四捨五入
score.toFixed(3) // 7.333 小数点3桁まで表示
Math.random() // 0以上1未満のランダムな数値を生成

日時

  • Dateクラスを使う
    • 引数を使う場合は、年と月は必須。
const d = new Date();

d.getFullYear(); //2020
d.getMonth; //0-11 (Jan:0,Feb:1)
d.getDate(); // 1-31
d.getDay(); //0-6 (Sun:0,Mon:1)
d.getHours(); //0-23
d.getMinutes(); //0-59
d.getSeconds(); //0-59
d.getMilliseconds(); 0-999 1000ミリ秒=1

const d = new Date(2019, 10); // 2019/11/01 00:00:00
d.setHours(10, 20, 30); // 2019/11/01 10:20:30
d.setDate(31); // 2019/12/01 10:20:30
d.setDate(d.getDate() + 3); // 2019/12/04 10:20:30

タイマー機能

  • setInterval(関数名,ミリ秒)
    • ミリ秒ごとに関数を実行する。
    • 関数を引数に設定するときは()は不要。setInterval(func)
    • 返り値はインターバルを一意に識別するインターバルID
  • clearInterval(インターバルID)
    • 処理を止める。
  • setTimeout(関数,ミリ秒)
    • ミリ秒後に一回だけ実行する
    • 返り値は一意に識別するタイムアウトID
let i = 0;

const id = setInterval(() => {
    const d = new Date();
    console.log(d);
    i++;
    if (i > 3) {
        clearInterval(id);
    }
}, 1000);

setIntervalとsetTimeoutの違い

  • 前者はインターバルの時間を超える処理であってもインターバルの時間間隔で実行されるため処理が重なることがあり、システムに負荷がかかる場合がある
  • 後者は処理が終わってからを起点に次の処理になるため、負荷がかからない。

クラス

  • 静的メソッド内でthisを使うことはできない
    • クラス内で使われるthisはそのクラスから作られるインスタンスである。
    • 静的メソッドはインスタンスを作らずに呼び出せるためthisを使うことができない。
  • 子クラスのconstructorでthisを使うにはsuper()を記述
  • 親クラスのメソッドを使うにはsuperを頭につける(super.関数名();)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away