JavaScriptの配列&オブジェクトの便利なメソッド達
Lodash/Underscoreにお世話になった人目線から見る、今は「ネイティブにサポートされた便利なメソッドが結構あるんだよ」な内容です。
お世話になったことがない人も、今後はバシバシ出てくると思うので軽く目を通しておく方がよいかも。
配列編
■.filter()
その名の通り。
配列の要素が特定の条件を満たしているかチェックし、新たに配列を作成。
const studentsAge = [17, 16, 18, 19, 21, 17];
const ableToDrink = studentsAge.filter( age => age > 18 );
console.log(ableToDrink);
// [19,20]
■.map()
配列の要素に対して、特定の処理を行い新しい配列を作成。
reactでよく見かける。
const numbers = [2, 3, 4, 5];
const dollars = numbers.map( number => '$' + number);
console.log(dollars);
// ['$2', '$3', '$4', '$5']
■.reduce()
隣り合う2つの配列の要素に対して関数を適用していき単一の値にする。
戻り値は、任意のタイプ（オブジェクト、配列、文字列、整数など）で指定可能。
const numbers = [5, 10, 15];
const total = numbers.reduce( (accumulator, currentValue) => accumulator + currentValue);
console.log(total);
// 30
■.forEach()
略
const emotions = ['happy', 'sad', 'angry'];
emotions.forEach( emotion => console.log(emotion) );
// 'happy'
// 'sad'
// 'angry'
■.some()
配列内の要素が条件を満たしているかチェック。
in_array的な利用方法。
const userPrivileges = ['user', 'user', 'user', 'admin'];
const containsAdmin = userPrivileges.some( element => element === 'admin');
console.log(containsAdmin);
// true
■.every()
.some()と同じじゃないかと思った貴方。違います。
配列内の要素全てに対して条件を満たすかチェック。
const ratings = [3, 5, 4, 3, 5];
const goodOverallRating = ratings.every( rating => rating >= 3 );
console.log(goodOverallRating);
// true
■.includes()
配列に特定の値が含まれているかチェック。
.some()とほぼ同じ動きをするけど、値を渡す形。
※条件式も渡せるが挙動が変わる
const names = ['sophie', 'george', 'waldo', 'stephen', 'henry'];
const includesWaldo = names.includes('waldo');
console.log(includesWaldo);
// true
■Array.from()
別の配列や文字列に基づいて配列を作成。
文字列から配列を作成するパターン
const newArray = Array.from('hello');
console.log(newArray);
// ['h', 'e', 'l', 'l', 'o']
ちなみにこんな使い方も。
.map()で同じことできるから特にイラナイ。
const doubledValues = Array.from([2, 4, 6], number => number * 2);
console.log(doubledValues);
■Array spread
配列の要素を連結するのに便利。
const spreadableOne = [1, 2, 3, 4];
const spreadableTwo = [5, 6, 7, 8];
const combined = [...spreadableOne, ...spreadableTwo];
console.log(combined);
// [1, 2, 3, 4, 5, 6, 7, 8]
元の配列を変更せずに配列の要素を削除。
若干ややこしいから使いにく気も。
const animals = ['squirrel', 'bear', 'deer', 'salmon', 'rat'];
const mammals = [...animals.slice(0,3), ...animals.slice(4)];
console.log(mammals);
// ['squirrel', 'bear', 'deer', 'rat']
オブジェクト編
■Object.values()
オブジェクトのvalue値を配列で返す
const icecreamColors = {
chocolate: 'brown',
vanilla: 'white',
strawberry: 'red',
}
const colors = Object.values(icecreamColors);
console.log(colors);
// ["brown", "white", "red"]
■Object.keys()
オブジェクトのkey値を配列d(略
const icecreamColors = {
chocolate: 'brown',
vanilla: 'white',
strawberry: 'red',
}
const types = Object.keys(icecreamColors);
console.log(types);
// ["chocolate", "vanilla", "strawberry"]
■Object.entries()
オブジェクトをkey/valueの連想配列を含む配列を作成して返す。
const weather = {
rain: 0,
temperature: 24,
humidity: 33,
}
const entries = Object.entries(weather);
console.log(entries);
// [['rain', 0], ['temperature', 24], ['humidity', 33]]
■Object spread
元のオブジェクトを変更を加えることをなく、新たなオブジェクトのプロパティと値を追加。
複数のオブジェクトの連結に便利。
const spreadableObject = {
name: 'Robert',
phone: 'iPhone'
};
const newObject = {
...spreadableObject,
carModel: 'Volkswagen'
}
console.log(newObject);
// { carModel: 'Volkswagen', name: 'Robert', phone: 'iPhone' }
■Object.freeze()
既存のオブジェクトのプロパティを変更したり、新しいプロパティや値をオブジェクトに追加したりするのを防ぐ。
constでいいじゃないか、と考えちゃいがちだがconstではオブジェクトの変更が可能。
これは使ったこと無かった。
const frozenObject = {
name: 'Robert'
}
Object.freeze(frozenObject);
frozenObject.name = 'Henry';
console.log(frozenObject);
// { name: 'Robert' }
■Object.seal()
新しいプロパティをオブジェクトに追加するのを防止するが、既存のプロパティを変更可能。
これも使ったこと無かった。
const sealedObject = {
name: 'Robert'
}
Object.seal(sealedObject);
sealedObject.name = 'Bob';
sealedObject.wearsWatch = true;
console.log(sealedObject);
// { name: 'Bob' }
■Object.assign()
過去によく見かけたもの。
combinedが追加されたので遺物化へ。まだ使える。
const firstObject = {
firstName: 'Robert'
}
const secondObject = {
lastName: 'Cooper'
}
const combinedObject = Object.assign(firstObject, secondObject);
console.log(combinedObject)
// { firstName: 'Robert', lastName: 'Cooper' }
番外編
■Function Rest
可変長引数というやつ。jsでも使える。
function displayArgumentsArray(...theArguments) {
console.log(theArguments);
}
displayArgumentsArray('hi', 'there', 'bud');
// ['hi', 'there', 'bud']
まとめ
見たことのない記法が出てくるとフリーズしがちなので、これを機に学ぶが吉。
JSはこれから数年は現役だろうし尚更ネ。
