Contents

1 基本文法
- 1.1 ループ
  - 1.1.1 foreach
    - 1.1.1.1 順序配列
    - 1.1.1.2 連想配列
2 コレクション
- 2.1 Array
- 2.2 Set
3 正規表現
- 3.1 一致判定
- 3.2 一致内容取得
4 例外
- 4.1 throw
- 4.2 try-catch
5 時刻
6 Greasemonkey
- 6.1 RedmineのURLのリンク化
7 Tips
8 jQuery
- 8.1 チェックボックスのステータス取得

基本文法

ループ

foreach

順序配列

インデックス使用

for(var i=0;i<list.length;i++)
{
	console.log(list[i]);
}

for形式

for(const next of list)
{
	console.log(next);
}

関数形式

list.forEach(function(e){console.log(e);});

連想配列

for(const next in list)
{
	console.log(next+"="+list[next]);
}

コレクション

Array

通常の配列はArray型のインスタンスとして扱われる。

Array型間の参照コピーはシャロウコピーであり、コピー先で配列要素を書き換えると、コピー元も書き換わる。

追加

末尾に追加

list.push(obj);

途中に挿入

list.splice(index, 0, obj);

削除

i番目から1つ削除。返り値の代入は不要。

list.splice(i,1);

置換

list.splice(index, 1, obj);

※1の部分を大きくすることで、置換元を拡大できる

例：

var array = [1,2,3,4,5,6,7];
array.splice(3, 1, 0);
// array = [1,2,3,0,5,6,7]
array.splice(4, 3, 0);
// array = [1,2,3,0,0]

ソート

文字列

array.sort();

数値

array.sort(function(x,y){return x-y;});

Set

参考

var set = new Set();
set.add(1);
set.add(2);
set.add(1);
console.log(set); // Set [ 1, 2 ]
console.log(set.size); // 2 ※sizeは関数ではないので注意 
console.log(set.has(2)); // true

var iterator = set.values();
var list=[];
set.forEach(function(e){list.push(e);});
# set.values()メソッドは実装していない環境があるので使用を避けた方が無難

正規表現

参考

一致判定

固定の正規表現

var regexp = /abc/;
regexp.test("abcdefg"); // ture

変数利用の正規表現

var regexpStr = "12[0-9]+90";
var regexp = new RegExp(regexpStr);
regexp.test("1234567890"); // ture

大文字小文字無視

var regexpStr = "[a-z][a-z]";
var regexp = new RegExp(regexpStr);
regexp.test("AbCdE", "i"); // ture

一致内容取得

var str = "abCdefg";
str.match(/[a-e]/gi); // ["a", "b", "C", "d", "e"]

例外

throw

例外型以外に任意の型をスローできる。

例外型
```
throw new Error("error message");
```
数値
```
throw 1;
```
文字列
```
throw "error message";
```

try-catch

cacthは一律に行われるので、スローされた型によって条件分岐する場合は、cacthブロック内部で行う。

try
{
    
}
catch(e)
{ 
    
}
finally
{
    
}

時刻

現在のタイムゾーンで現在時刻を取得

var now = new Date(new Date().getTime()-new Date().getTimezoneOffset()*60000);

比較

var date1 =  new Date("2018/1/1 1:10:00");
var date2 =  new Date("2018/2/1 1:10:00");
date1 > date2; // false

加減算

加算

日

var addDat = 3;
var date = new Date(new Date().getTime()+addDat*24*60*60000);

文字列化

var now = new Date();
var year = now.getFullYear();
var month = ("0"+(now.getMonth()+1)).substr(-2);
var day = ("0"+now.getDate()).substr(-2);
var hour = ("0"+now.getHours()).substr(-2);
var minute = ("0"+now.getMinutes()).substr(-2);
var second = ("0"+now.getSeconds()).substr(-2);
var nowStr = year+"/"+month+"/"+day+" "+hour+":"+minute+":"+second;

Greasemonkey

RedmineのURLのリンク化

// ==UserScript==
// @name     URLLinker
// @version  1
// @grant    none
// @include  http://XXX.XXX/redmine/issues/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// ==/UserScript==

$(function() {
  rewriteHtml("#history");
  rewriteHtml("div.issue");
});

function rewriteHtml(target)
{
  var html=$(target).html();
  var htmlLength=html.length;
  console.log(htmlLength);
  var searchedIndex=0;
  while(true)
  {
    var startIndex = html.indexOf("http", searchedIndex);
    if(startIndex==-1)
      break;
    
    searchedIndex = startIndex+1;
    if(html[startIndex-1]=="\"")
      continue;
    
    var endIndex=0;
    for(var i=startIndex+7;i<htmlLength;i++)
    {
      if(!/[a-zA-Z0-9\/%#\.\-\[\]:]/.test(html[i]))
      {
        endIndex=i;
        break;
      }
    }
    
    if(endIndex==0)
      break;
    
    var url=html.substring(startIndex,endIndex);
    url='<a href="'+url+'" target="_blank">'+url+'</a>';
    html = html.slice(0, startIndex) + url + html.slice(endIndex);
    htmlLength=html.length;
    searchedIndex+=url.length;
    console.log(url);
  }
  $(target).html(html);
}

Tips

cookie

追加

既存のものは削除されない

document.cookie = "key1=value1";

生存期間を指定
一ヶ月を指定

document.cookie = "key1=value1; max-age=2592000";

関数

function addCookie(key, val)
{
	document.cookie = key+"="+val;
}

削除

document.cookie = "key1=; max-age=0";

関数

function removeCookie(key)
{
	document.cookie = key+"=; max-age=0";
}

参照

function getCookie(key)
{
	var splited = document.cookie.split(";");
	for(var i=0;i<splited.length;i++)
	{
		var keyval = splited[i].split("=");
		keyval[0] = keyval[0].trim();
		if(key==keyval[0])
		{
			return keyval[1];
		}
	}
	return null;
}

全取得

function loadCookie()
{
	var splited = document.cookie.split(";");
	var cookie = {};
	for(var i=0;i<splited.length;i++)
	{
		var keyval = splited[i].split("=");
		keyval[0] = keyval[0].trim();
		cookie[keyval[0]] = keyval[1];
	}
	return cookie;
}

テキストフィールド入力後に関数起動

半角・全角キーを押しただけでも起動するので注意。
これを避けるには、テキストフィールド内容をキャッシュして、変化があったか比較が必要。

var textFieldStack = [];
function textFieldInput()
{
	textFieldStack .push(1);
	setTimeout(function() {
		textFieldStack .pop();
		if(textFieldStack .length == 0)
		{
			
		}
	}, 300);
}
$(function() {
	$("#textField").keyup(searchTextInput);
});

数値フォーマット

3桁区切りでカンマをつける

const NumberFormatter = new Intl.NumberFormat('ja-JP');
NumberFormatter.format(<数値>);

JSON

JSONの文字列化

ミニファイ状態での出力

JSON.stringify(<オブジェクト>);

可読性の高い状態での出力

JSON.stringify(<オブジェクト>, null, ' ');

文字列のJSON化

JSON.parse(<文字列>)

JSONのディープコピー

let copiedObj = JSON.parse(JSON.stringify(<オブジェクト>));

その他

sleep

Promiseを使用

await new Promise(r => setTimeout(r, 3000));

setTimeoutを使用

setTimeout(<呼び出し関数>, <待機時間(ミリ秒)>);

ビジーウェイト

処理を待機させるにはsetTimeout関数に後続処理の関数を渡して実装するのが通常である。しかし、処理が分断されてしまうので、一時的に行うには面倒である。
以下の方法では、待機中にCPUに負荷がかかるが、簡単に実装できる。（ビジーウェイト）

この例では10秒間待機する。

const start = new Date();

while (new Date() – start < 10*1000);

typeof

与えた変数の型名を文字列で返す

typeof 1 // "number"
typeof "1" // "string"
typeof true // "boolean"
typeof abc // "undefined"
typeof {} // "object"
typeof [] // "object"

遅延・集約実行

一定期間で集約

テキストフィールドに入力した文字を補足し、リアルタイムで処理をしたいが、キー入力のたびに都度処理をするのは効率が悪い場合に使用する。

一定時間の遅延を挟んで実行し、その間にトリガーされた処理呼び出しのうち、１度のみ実行する。
このパターンでは処理が継続されていても、一定期間が過ぎると一度処理を行い、再度一定時間後に再度処理を行う。

var requireExec = false;
const DELAY = 1000;

function delayedAction()
{
	if(!requireExec)
		return;
	
	// 処理
	
	requireSend = false;
}

function keyup()
{
	requireExec = true;
	setTimeout(delayedAction, DELAY);
}

jQueryを使用してキー入力の都度トリガー起動するには以下のように行う。

$("#textA").keyup(keyup);

最後の一回のみ

テキストフィールドに入力した文字を補足し、リアルタイムで処理をしたいが、キー入力のたびに都度処理をするのは効率が悪い場合に使用する。

一定時間の遅延を挟んで実行し、その間にトリガーされた処理呼び出しのうち、１度のみ実行する。
このパターンでは処理が継続されると、実行を行わず、常に最後の一回のみを実行する。

var execTime;
const DELAY = 1000;
const DELAY_ADJUST = 100;

function delayedAction()
{
	if(!execTime || new Date()<new Date(execTime.getTime()+DELAY-DELAY_ADJUST))
		return;
	
	// 処理
	
	execTime = null;
}

function keyup()
{
	execTime = new Date();
	setTimeout(delayedAction, DELAY);
}

jQueryを使用してキー入力の都度トリガー起動するには以下のように行う。

$("#textA").keyup(keyup);

jQuery

チェックボックスのステータス取得

$("#aCheckBox")[0].checked