ES6でよく使いそうなもの
@omatoro
自己紹介
- name:omatoro
- Twitter: @omatoro
- Blog: TEST CORDING
Agenda
- ES6ってなに?
- 楽にかけるよ編
- 覚えると楽できる編
- おまけ
ES6ってなに?
JavaScriptのもとに
なってるもの
ActionScriptとかもECMAScript
ECMAScript 6th
のこと
ES6になって
新しい書き方増えるよ
楽にかけるよ編
- デフォルト引数
- メソッド
- オブジェクトリテラル
- 文字列内で変数を展開
// これが
var func1 = function (x, y) {
x = x || 100;
y = y || 10;
};
// こうなる
var func2 = function (x=100, y=10) {
};
デフォルト引数
たてぼう
かかなくていい
var object = {
// 今まで
func1: function () {
console.log("func1");
},
// これから
func2 () {
console.log("func2");
},
};
メソッド
function
書かなくていい
var func = function () {
var x = 100;
var y = 10;
return {x, y}; // いつもだったら{x: x, y: y}
};
オブジェクトリテラル
コロン
かかなくていい
var value = 530000;
// いままで
var text1 = "私の戦闘力は"+value+"です";
// これから
var text2 = `私の戦闘力は${value}です `;
// 改行いれてもok(ただし\n扱い)
var text3 = `私の
戦闘力は${value}です `;
文字列内で変数を展開
+
かかなくていい
覚えると楽できる編
- 2進数とか直接書く
- Objectのkeyで演算子使う
- アローファンクション
- アローファンクション注意点
- 可変長引数と展開
- 分割代入(デストラクチャリング)
- デストラクチャリング応用例
2進数とか直接書く
console.log(0b0011); // 3
bit 直接書ける
Objectのkeyに演算子つかえる
var interval = 5;
var object = {
[5]: 0,
[5+interval]: 1,
[5+interval*2]: 2,
};
オブジェクトリテラルで
演算子使える
アローファンクション
var square1 = function (x) {
return (x * x);
};
var square2 = (x) => { // function省略
return (x * x);
};
var square3 = x => { // 引数括弧の省略
return (x * x);
};
var square4 = x => (x * x); // return の省略まで
function書かなくていい
アローファンクション注意点
var test = {
func1: function () {
return (function () { return this; })();
},
func2: function () {
return (function () { return this; }.bind(this))();
},
func3: function () {
return (() => this)(); // これ関数です 無名関数実行してます
},
};
console.log(test === test.func1()); // -> false
console.log(test === test.func2()); // -> true
console.log(test === test.func3()); // -> true!?
thisのあつかい変わるよ
可変長引数と展開
var print1 = function () {
console.dir(arguments);
};
print1(1,2,3,4);
// 可変長の引数を明示的に受け取れる
var print2 = function (...args) {
console.dir(args);
};
print2(1,2,3,4);
// ちなみに展開にも使える
var array = [1,2,3];
array.push(...[4,5,6]); // [1,2,3,4,5,6]
リスト化、展開が
簡単にできるよ
分割代入(デストラクチャリング)
var [a, b, c] = [1,2,3];
// 以下と同等
var a = 1;
var b = 2;
var c = 3;
分割して代入できる
デストラクチャリング応用例
var a = 1;
var b = 2;
// 値のスワップが一行で書ける
var [a, b] = [b, a];
// オブジェクトにも応用
var vector = {
x: 100,
y: 200,
};
var {x: newX, y: newY} = vector;
// 同名だったら短縮して書ける
var {x, y} = vector;
おまけ
- let
let
for (let i=0; i<3; ++i) {}
// console.log(i); -> error
if (1) {
let temp = 100;
}
// console.log(temp); -> error
変数のスコープがかわる
let
if (1) {
let temp = 100;
let temp = 100; // -> type error
}
(() => {
let temp = 100;
let temp = 100; // -> type error
})();