最近、es6を学んだのでメモしておきます。
Ruby似たメソッドが使えるのでわりと覚えやすいです。
そもそもes6とはなんなのか
es6の正式名称はECMAScript。読み方はエクマスクリプト。
6というだけあって、es6はECMAScriptのバージョン6のこと。
ECMAScriptは標準規格。
JavaScriptはその実装。
es6を簡単にいうと次世代JavaScriptというらしい。
たまに聞く、es2015とかes2016はes6とes7のこと。
これからは策定年号も入れようとのことで、こんな呼び方になった。
es6は2015年にできたので、es2015。
es7は2016年にできたので、es2016。
実にややこしい。
es6のコードは全てのブラウザで動く訳ではないので、Babelなどを使って変換してes5にする。es5は、ほとんど全てのブラウザで動くから。
forEach
まず最初に昔ながらのFor Loopを書いてみます。
1
2
3
4
5
| var numbers = ['1', '2', '3'];
for (var i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
|
ん〜。実にごちゃごちゃしてますね。Rubyをやってる尚更そう感じます。初期化して、numbersの長さを測って、自己代入してエトセトラ。
これをforEachで書き直すと。
1
2
3
4
5
| var numbers = ['1', '2', '3'];
numbers.forEach(function(number) {
console.log(number);
});
|
先ほどより、かなりスッキリしました。
よくある合計をだす場合は、
1
2
3
4
5
6
7
8
9
| var numbers = [1, 2, 3];
var sum = 0;
numbers.forEach(function(number) {
sum += number;
});
sum;
=>6
|
map
まず最初に昔ながらのFor Loopを書いてみます。
1
2
3
4
5
6
7
8
9
10
| var numbers = ['1', '2', '3'];
var doubledNumbers = [];
for (var i = 0; i < numbers.length; i++) {
doubledNumbers.push(numbers[i] * 2);
}
doubledNumbers;
=>
[2,4,6]
|
次はmapを使って書いてみます。mapのいいところは、新しい配列をわざわざ用意しなくてもmapが勝手に用意してくれること。rubyでは当たり前ですが、jsでこの辺までやってくれるのは便利。
1
2
3
4
5
6
7
8
| var numbers = ['1', '2', '3'];
var doubled = numbers.map(function(number) {
return number * 2;
});
doubled;
=>[2,4,6]
|
あるオブジェクトからある要素を取ってくる方法。
1
2
3
4
5
6
7
8
9
10
11
12
| var users = [
{ name: 'nobita', test: 0},
{ name: 'takeshi', test: 40},
{ name: 'dekisugi', test: 100}
];
var tests = users.map(function(user) {
return user.test;
});
tests;
=> [0,40,100]
|
filter
まず最初に昔ながらのFor Loopを書いてみます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| var products = [
{ name: 'キュウリ', type: '野菜' },
{ name: 'バナナ', type: 'フルーツ' },
{ name: 'セロリ', type: '野菜' },
{ name: 'オレンジ', type: 'フルーツ' },
];
var filteredProducts = [];
for (var i = 0; i < products.length; i++) {
if (products[i].type === 'フルーツ') {
filteredProducts.push(products[i]);
}
}
filteredProducts
=>
[{"name":"バナナ","type":"フルーツ"},{"name":"オレンジ","type":"フルーツ"}]
|
次にfilterを使って書きます。
1
2
3
4
5
6
7
8
9
10
11
12
13
| var products = [
{ name: 'キュウリ', type: '野菜' },
{ name: 'バナナ', type: 'フルーツ' },
{ name: 'セロリ', type: '野菜' },
{ name: 'オレンジ', type: 'フルーツ' },
];
products.filter(function(product){
return product.type === 'フルーツ';
});
=>
[{"name":"バナナ","type":"フルーツ"},{"name":"オレンジ","type":"フルーツ"}]
|
ちょっと複雑な条件。種類が野菜で、量が0個より多くて、値段が10より小さいもの
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var products = [
{ name: 'キュウリ', type: '野菜', quantity: 0, price: 1 },
{ name: 'バナナ', type: 'フルーツ', quantity: 10, price: 15 },
{ name: 'セロリ', type: '野菜', quantity: 30, price: 9 },
{ name: 'オレンジ', type: 'フルーツ', quantity: 3, price: 5 },
];
products.filter(function(product){
return product.type === '野菜'
&& product.quantity > 0
&& product.price < 10;
});
=>
[{"name":"セロリ","type":"野菜","quantity":30,"price":9}]
|
find
まず最初に昔ながらのFor Loopを書いてみます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| var users = [
{ name: 'nobita' },
{ name: 'takeshi' },
{ name: 'dekisugi' },
];
var user;
for (var i = 0; i < users.length; i++) {
if (users[i].name === 'nobita') {
user = users[i];
}
}
user;
=>
{"name":"nobita"}
|
findを使う場合。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var users = [
{ name: 'nobita' },
{ name: 'takeshi' },
{ name: 'dekisugi' },
];
var user;
users.find(function(user){
return user.name === 'nobita';
});
user;
=>
{"name":"nobita"}
|
コメントに関連したpostをfindする。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| var posts = [
{ id: 1, title: '楽しかった夏' },
{ id: 2, title: '悲しかった冬' }
];
var comment = { postId: 2, content: '元気出して'};
// コメントに関連したpostをfindする関数を作る
function postForComment(posts, comment) {
return posts.find(function(post) {
return post.id === comment.postId;
});
}
postForComment(posts, comment);
=>
{"id":2,"title":"悲しかった冬"}
|
every
まず最初に昔ながらのFor Loopを書いてみます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| var computers = [
{ name: 'Apple', ram: 24 },
{ name: 'Dell', ram: 4 },
{ name: 'HP', ram: 32 },
];
// 16gb ramが必要なソフトを探す
// すべてで動かせるフラグ
var allComputersCanRun = true;
// どれかでは動かせるフラグ
var someComputersCanRun = false;
for (var i = 0; i < computers.length; i++) {
var computer = computers[i];
if (computer.ram < 16) {
allComputersCanRun = false;
} else {
someComputersCanRun = true;
}
}
'---'
allComputersCanRun
someComputersCanRun
=>
True
---
False
True
|
everyを使う場合。
everyは論理積を求める。1つでもfalseがあったら結果はfalse。
1
2
3
4
5
6
7
8
9
10
11
12
13
| var computers = [
{ name: 'Apple', ram: 24 },
{ name: 'Dell', ram: 4 },
{ name: 'HP', ram: 32 },
];
// 16gb ramが必要なソフトを探す
computers.every(function(computer) {
return computer.ram >= 16;
});
=>
False
|
some
someは論理和を求める。１つでもtrueがあれば結果はtrue。
1
2
3
4
5
6
7
8
9
10
11
12
13
| var computers = [
{ name: 'Apple', ram: 24 },
{ name: 'Dell', ram: 4 },
{ name: 'HP', ram: 32 },
];
// 16gb ramが必要なソフトを探す
computers.some(function(computer) {
return computer.ram >= 16;
});
=>
True
|
reduce
まず最初に昔ながらのFor Loopを書いてみます。
合計値を出します。
1
2
3
4
5
6
7
8
| var numbers = [10, 20, 30];
var sum = 0;
for (var i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
=>
60
|
次にreduceを使って書いていきます。
1
2
3
4
5
6
7
8
| var numbers = [10, 20, 30];
var sum = 0;
numbers.reduce(function(sum, number) {
return sum + number;
}, 0);
=>
60
|
0は初期値。
コールバック関数は足し算をしているだけなので、0+10が行われて10が返ってくる。
次に10がコールバック関数に渡されて、10+20で30
最後に30がコールバック関数にわたsれて、30+30で60。
数字じゃない合計をreduceを使って求める。
1
2
3
4
5
6
7
8
9
10
11
12
13
| var primaryColors = [
{ color: 'red' },
{ color: 'yellow' },
{ color: 'blue' }
];
primaryColors.reduce(function(previous, primaryColor) {
previous.push(primaryColor.color)
return previous;
}, []);
=>
["red","yellow","blue"]
|
(((())))の(が左右両方同じ数なのかをreduceを使って調べる。
均衡が取れている場合を0とする。
1
2
3
4
5
6
7
8
9
10
11
12
| function balancedParens(string) {
return !string.split('').reduce(function(previous, char){
if (previous < 0) { return previous;}
if (char ==='(') { return previous +1; }
if (char ===')') { return previous -1; }
}, 0);
}
balancedParens(')(')
=>
false
|
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
See Also
Mon Dec 31, 2018