たまにJavaScriptでタグ実装する人のためのJavaScriptメモ

2017年2月20日

Javascript固有の技術的事情。
Javascriptからちょっと離れていたり他の言語使っていたりすると忘れてしまうポイントをまとめておく。
まあ自分のための備忘録でもある。

変数の型

  • プリミティブ型
    • 数値型
    • 文字列型
    • 論理型
    • null型
    • undefined型
  • オブジェクト型
    • 配列
    • 連想配列
    • 日付
    • :

値渡しと参照渡し

プリミティブ型は値渡し、オブジェクト型は参照渡し

配列

走査

配列の走査はArray.prototype.lengthで。
長さをその都度参照するのではなく、一旦変数に値として渡してから

連想配列(オブジェクトのプロパティ)

オブジェクトのプロパティという使い方もするため、
連想配列のキーにはハイフンやドットは使わないほうがいい。

走査

順序の概念がない

ライブラリ

クラス

falseの扱い

以下の場合にfalse判定される

false判定のうまい使い道

false0という値に意味がある場合はうまく動作しなくなるので、そこは気をつけて。
変数の厳密な初期値判定

制御構造

if / else

switch

while

先に条件判定する

do ... while

後で条件判定する

for

  • continue→次のループの先頭に
  • break→抜ける

ループのうまい使い方

最速ループ

インクリメントは

と書くのが速い。

http://qiita.com/keroxp/items/67804391a8d65eb32cb8

文字列処理

文字列の一部取得

インデックスは文頭が0、文末がstr.length - 1

正規表現

  • マッチするかどうか → regexp.test('str')true / false
  • 正規表現置換 → str.replace(pattern, replacement)
  • マッチした部分を返す → str.match(pattern)(ただし/gで) → マッチした部分の配列

都度実行すると地味に遅くなるので繰り返し処理では避けたほうがいい処理

  • Array.prototype.length
  • document.getElementById('hoge')

→一旦別の変数に格納して

一見jQueryでやりたくなることでもネイティブのJavascriptでできる

非同期処理対策

Javascriptで最もハマるポイントである非同期処理

日付処理あれこれ

JavaScriptで日時を使ってランダムな文字列を作るワンライナー

セッションIDやユーザIDを生成する際などに使う。

  • 日時(マイクロ秒)→ユニーク
  • ランダムな数字列

の結合。前者と後者の結合はドット(.)を使う

DOM指定

  • IDのみで指定できる場合→document.getElementById()
  • XPathで指定→document.evaluate()
  • CSSPathで指定→document.querySelector()
  • 単純なものはXPathよりCSSPathのほうが速い

HTMLの一部書き換え(追記)

  • node.appendChild(newElement)
  • node.insertBefore(newElement,referenceElement)
  • element.innerHTML = '<div>something</div>'