##記事を書こうと思った経緯
javascriptのスキルはwebのライブラリやフレームワークを扱う上で必須のスキルのため。
以前にjavascriptを学んだが、だいぶ時間がたってしまったので、最初から学びたいと思いました。
今回使用した教材
Udemy JavaScriptエンジニアのためのES6完全ガイド 講師 Ken Fukuyamaさん
##ES6とは
ECMAScript(標準規格)の6番目のバージョンのこと。次世代javascript。ES6とES2015は同じもの。
注意事項
EC6は全てのブラウザで動くわけではないので、そのままでは動かないブラウザも多い。エラーになる場合も多い。そのため、Babelというツールを使ってES5のコードに変換してあげる必要がある。
##配列メソッド
配列の便利メソッド一覧 |
---|
forEach |
map |
filter |
find |
every |
some |
reduce |
###forEach
//数字の配列
var numbers = [1, 2, 3, 4, 5];
//合計を保持する変数
var sum = 0;
//配列の数字を合計に一つずつ足していく
numbers.forEach(function(number){
sum += number;
});
sum;
//=> 15
###map (配列のある値を指定したい場合に使用する)
配列の値を2倍にする処理
var numbers = [1, 2, 3, 4, 5];
//新しい配列を用意する
var doubledNumbers = [];
//数字を2倍にした値を配列に戻す
var doubled = numbers.map(function(number) {
return bumber * 2;
});
doubled;
//=>[2,4,6,8,10]
//returnは必ずつける
###filter (データの一覧から必要な情報を選択して絞り込みたい場合に使用する)
var products = [
{ name: 'トマト', type: '野菜', quantity: 0, price: 6 },
{ name: 'りんご', type: 'フルーツ', quantity: 10, price: 16 },
{ name: 'なす', type: '野菜', quantity: 20, price: 6 },
{ name: 'レモン', type: 'フルーツ', quantity: 3, price: 6 }
];
//種類がフルーツ、量が1個より多く、値段が9より小さいものを配列から取り出す
products.filter(function(product){
return product.type === 'フルーツ'
&& product.quantity > 1
&& product.price < 9;
});
//=>[{"name":"レモン","type":"フルーツ","quantity":3,"price":6}]
###find(特定のデータを取り出す場合に使用する)
var users = [
{ name: '鈴木' },
{ name: '佐藤' },
{ name: '田中' }
];
var users;
//配列からuser.nameが田中を見つけて取り出す
users.find(function(user) {
return user.name === '田中';
});
//=>{"name":"田中"}
//findでは最初に見つけた要素を取り出す
###every(条件を全て検証し全て条件があてはまるとき。 論理積)
var computers = [
{ name: 'ASUS', ram: 25 },
{ name: 'TOSHIBA', ram: 14 },
{ name: 'mac', ram: 5 }
];
//全てのramが15以上であるか?
computers.every(function(computer) {
return computer.ram>= 15;
});
//=>False
###some(条件を全て検証して、どれか一つでも条件が当てはまる場合。 論理和)
var computers = [
{ name: 'ASUS', ram: 25 },
{ name: 'TOSHIBA', ram: 14 },
{ name: 'mac', ram: 5 }
];
//一つでもramが15以上であるか?
computers.some(function(computer) {
return computer.ram>= 15;
});
//=>True
###reduce(プロパティの集約)
var numbers = [ 3, 5, 4 ];
var sum = 0;
numbers.reduce(function(sum, number) {
return sum + number;
}, 0);
//0は初期値。
//=> 12