javascriptの基礎からES6も勉強。
アロー関数とか「なにこれ？」状態だったので、
今回これを勉強できてかなりためになった。
無料というのがすごい。
function部分の省略
functionは省略できる
const myFunc = function() {
return myVar;
}
これをES6にすると
const myFunc = () => {
return myVar;
}
となる。さらにfuctionの中身がreturn xxx;だけの場合はさらに省略できる。
()部分に引数をいれて少し複雑なreturnも可能。
const myConcat = (arr, arr2) => arr.concat(arr2);
()部分の引数にはデフォルトを設定することが可能。
const increment = (num, val = 1) => num + val;
increment(1,4);
引数が固定でない場合でも対応できるargumentオブジェクト
()部分には...argsが使える。引数が固定でない場合に有効
const sum = (...args) => args.reduce((a,b) => a + b, 0);
...argsは配列を展開してくれる役目も持つ
const arr1 = [1,2,3,4,5];
const arr2 = [3,4,5];
const arr1args = [...arr1];
const arr2args = [...arr2];
console.log(arr1);
console.log(arr2);
同じオブジェクトで複数を定義する場合、このように省略できる
元データソース
const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};
省略記述
const {today ,tomorrow} = HIGH_TEMPERATURES;
別の名前に定義することもできる。
const {today: highToday, tomorrow: highTomorrow} = HIGH_TEMPERATURES;
入れ子になっている場合でも複数定義できる
const LOCAL_FORECAST = {
yesterday: { low: 61, high: 75 },
today: { low: 64, high: 77 },
tomorrow: { low: 68, high: 80 }
};
const {today: {low: lowToday2, high: highToday2 }} = LOCAL_FORECAST;
// lowToday2 = 64, highToday2 = 77 という２つの引数ができる
ES6ではテンプレートリテラルが使える
pythonでいうprint(f"{name} is {age}")みたいなもの
ES6の場合は``を使う。バックティック （クオート'',""ではない）
例
const result = {
failure: ["no-var", "var-on-top", "linebreak"],
};
function makeList(arr) {
// Only change code below this line
const failureItems = [];
for (let i = 0; i < arr.length; i++){
failureItems.push(`<li class="text-warning">${arr[i]}</li>`);
}
// Only change code above this line
return failureItems;
}
const failuresList = makeList(result.failure);
console.log(failuresList);
ファンクションの変数と引数が同じ場合は省略できる。
const createPerson = (name, age, gender) => {
// Only change code below this line
( return {
name: name,
age: age,
gender: gender
};)
// Only change code above this line
};この場合
const createPerson = (name, age, gender) =>
// Only change code below this line
({name, age, gender});
// Only change code above this line
のように省略できる。
オブジェクト内でのファンクションの省略
const person = {
name: "Taylor",
sayHello: function() {
return `Hello! My name is ${this.name}.`;
}
};
省略すると
const person2 = {
name: "Taylor",
sayHello() {
return `Hello! My name is ${this.name}.`;
}
};
class表記ができるように
class SpaceShuttle {
constructor(targetPlanet) {
this.targetPlanet = targetPlanet;
}
}
const zeus = new SpaceShuttle('Jupiter');
classを使う時は最初にconstructorを記述して初期値を設定する。
pythonでいうdef __init__みたいなもの
type="module"で外部jsをインポートができる
es6だと他のjsファイルからモジュールとして追加ができるようになる。
typeをmoduleにするだけでimportができるようになる?
<script type="module" src="filename.js"></script>
exportするjsには最後にexport{exportする変数・引数}を入れる
例
const uppercaseString = (string) => {
return string.toUpperCase();
}
const lowercaseString = (string) => {
return string.toLowerCase()
}
export { uppercaseString, lowercaseString};
１ファイルの一つの返しのみをインポートする場合は
export default をつける reactでもやってた
export default function (x, y) {
return x - y;
}
名前付きでもOK
export default function add(x, y) {
return x + y;
}
import add from "./sample.js";
promise文で処理を変えたり順序を変更できるようになる
最後に.then(result => {処理});を追加するとできる
Promiseでrejectになった時どうするかの処理は
.catch(error => {console.log("エラーが発生しました")})みたいな感じで追加できる
ES6は特に覚えたかった部分のjsなので、だいぶ勉強になりました。
