忘れがちで便利なJavascriptまとめ

空の配列を反復処理する

var arrayは長さが3の空の配列であり、Arrayメソッドで反復処理ができない。 var array1はundefinedに設定された値を3つ持つ配列。値を持つので反復処理可能。書き方を変えるならばArray(undefined, undefined, undefined)これと同じ。

var array = new Array(3);
// [undefined, undefined, undefined]

array.map((elem, index) => index);
// [undefined, undefined, undefined]

var array1 = Array.apply(null, new Array(3));
// [undefined, undefined, undefined]

array1.map((elem, index) => index);
// [0, 1, 2]

空のパラメーターをメソッドに渡す方法3つ

null, undefined, Restパラメータを使用する。

function Method(a,b,c){
	console.log(a + b + c)
}
Method('val1', , 'val3');
// Uncaught SyntaxError: Unexpected token

Method('val1', null, 'val3')
// val1nullval3

Method('val1', undefined, 'val3');
// val1undefinedval3

Method(...['va1', , 'val3']);
// val1undefinedval3

値が重複しない配列を作る方法

Setオブジェクトを使う。Setオブジェクトは各値が一意でなければならない。

var arr = [...new Set([1, 2, 3, 3])];
// [1, 2, 3]
Array.isArray(arr)
// true

`!!`でbooleanに変換する

!!(変数名)で変数に値が入っている時はtrueを返す。値が入っていない時はfalseを返す。

function Account(cash) {  
    this.cash = cash;
    this.hasMoney = !!cash;
}
var account = new Account(100.50);  
console.log(account.cash); 
// 100.50  
console.log(account.hasMoney); 
// true

var emptyAccount = new Account(0);  
console.log(emptyAccount.cash); 
// 0  
console.log(emptyAccount.hasMoney); 
// false

`+`でnumberに変換する

function toNumber(strNumber) {  
    return +strNumber;
}
console.log(toNumber("1234")); 
// 1234  
console.log(toNumber("ACB")); 
// NaN  
console.log(+new Date()) 
// 1461288164385

`&&`でif文を省略する

if (conected) {  
    login();
}

conected && login();

`||`でDefault valueを設定する

変数の値の指定がない場合のみ、Default valueが設定されるようになる。

function User(name, age) {  
    this.name = name || "Default User";
    this.age = age || "Default age 27";
}
var user1 = new User();  
console.log(user1.name); 
// Default User  
console.log(user1.age); 
// Default age 27

var user2 = new User("Barry Allen", 25);  
console.log(user2.name); 
// Barry Allen  
console.log(user2.age); 
// 25

array.lengthをキャッシュする

forで繰り返し処理を行う度にarray.lengthをしないようにする。

var array = new Array(5000)
var startTime = new Date()
for (var i = 0, length = array.length; i < length; i++) {  
    console.log(array[i]);
}
var endTime = new Date();
console.log(endTime - startTime + "ms");

HTML要素を取得する

if ('querySelector' in document) {  
    document.querySelector("#id");
} else {
    document.getElementById("id");
}

ちなみにquerySelector(".className")は最初の要素の値を返すので、複数の要素を取得したい場合はgetElementsByClassNameを使用する。

配列の最後を取得する

var array = [1, 2, 3, 4, 5, 6];  
console.log(array.slice(-1)); 
// [6]  
console.log(array.slice(-2)); 
// [5,6]  
console.log(array.slice(-3)); 
// [4,5,6]

配列を切捨てる

array.lengthの値を必要な長さに調整する。

var array = [1, 2, 3, 4, 5, 6];  
console.log(array.length); 
// 6  
array.length = 3;  
console.log(array); 
// [1,2,3]

ヒットしたものを全て入れ替える

var string = "john john";  
console.log(string.replace(/hn/g, "Replaced")); 
// "joReplaced joReplaced"

配列をマージする

var array1 = [1, 2, 3];  
var array2 = [4, 5, 6];  
console.log(array1.concat(array2)); 
// [1, 2, 3, 4, 5, 6]; 
console.log(array2.concat(array1)); 
// [4, 5, 6, 1, 2, 3]

NodeListをArrayに変換する

変換するとArrayのメソッドを使えるようになる。

NodeList Object

DOMノードの集合を表すオブジェクトであり、Node.childNodesやdocument.querySelectorAllの戻り値として用いられる。

Array.from()

配列型オブジェクトや反復可能(iterable)オブジェクトから新しいArrayインスタンスを生成

var elements = document.querySelectorAll("p"); 
Array.isArray(elements)
// false

var after1 = [].slice.call(elements); 
Array.isArray(after1)
// true

var after2 = Array.from(elements); 
Array.isArray(after2)
// true

配列をシャッフルする

Array.sort()

0未満の場合、a を b より小さい添字にソート
0を返す場合、a と b は互いに関して変えることなく、他のすべての要素に関してソート
0より大きい場合、b を a より小さい添字にソートMath.random()は0~1の値を返す。

Math.random()が0.5より小さい場合、returnされる値が0未満になるため配列の前に来る。 Math.random()が0.5より大きい場合、returnされる値が0以上になるため配列の後ろに来る。

var list = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");

function shuffle(array){
	console.log(array.sort(function() {  
    	return Math.random() - 0.5 
	}))
}

shuffle(list)

配列の中に特定の値があるかどうか確かめる

var months = ['January', 'March', 'July'];  
months.indexOf('March') !== -1; 
// true  
months.includes('July');
// true