ファランクス by ponta

JavaScript : 基礎

MDN: https://developer.mozilla.org/ja/docs/Web/JavaScript

fetch

fetchを使う際は「then」 or 「async + await」を使う

使わないとどうなるのか

const res = fetch ("http:")
console.log(res)
}

ログでは Promise {} という空のオブジェクトが返される。

なぜかというとfetchでデータを取ってくる前に log で res を返しているからである

つまり、then や async / await は”データを取ってくるのを待つ”という意味合いをもつ

await fetch が上手くいかない場合

fetch (”URL”) のURLが１行で収まっているか確認

slice()

  • () 引数を1つだけ取る場合 - 引数以降を抽出する
  • () 引数を2つ取る場合 - 2つの引数の間を抽出する

引数１つの例：

const images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];

images.slice(1)
//newImages: ["image2.jpg", "image3.jpg", "image4.jpg"]

replace()

  • 引数を2つ取る
  • replace(”ここを” , “こっちに置き換える”)
  • ** 新しい文字列を返す。更新するわけではない **

push() , unshift()

配列への追加

  • pushが末尾への追加
  • unshiftが先頭への追加

⇔

削除

  • pop() - 末尾から削除
  • shift() - 先頭から削除

if文

if(条件式)

  • 条件式の中身は (num> 5)のような、わかりやすいtrue/falseになる式よりも、定数や変数のみが入っているケースが多い
  • なぜなら条件式は、falseやundefined , null以外であればtrueになるので、慣れてきたら（条件式）は短くなるから

export const 

lib/lists.js
===

export const lists [
	{
	},
]
  • 同じ形式のデータはまとめて他のファイルで管理する
  • よく使われるのはlibフォルダ
  • export constで作った変数や定数はコンポーネントの様に補完機能でインポートできる

substring()

{pathName.substring(1)}
  • /exampleの場合は、先頭の / が取り除かれる

関数の順番

function test1() {
  console.log("test1");
  test2();
  function test2() {
    console.log("test2");
  }
}

test1();
  • test1 , 2 の順番で実行される
  • 別個に関数を書いていれば上にある方が先に実行 , 上記はそのルールに当てはまらない「非同期関数」という
  • setTimeout() などで関数に遅延を設けた場合は、待っている間に別のコードが実行される。「コールバック関数」という

ブラウザlogのPrototype

  • Prototype内には該当の要素が使用できる関数が一覧で表示される（a~z）

← Go home