Skip to content

Instantly share code, notes, and snippets.

@pei0804
Last active April 16, 2019 06:32
Show Gist options
  • Save pei0804/018b9c415058562ea2271699978aaf24 to your computer and use it in GitHub Desktop.
Save pei0804/018b9c415058562ea2271699978aaf24 to your computer and use it in GitHub Desktop.
// 分割代入
// 従来
var numbers = [1, 2, 3];
var a = numbers[0];
var b = numbers[1];
var c = numbers[2];
a;
b;
c;
// ECMAScript
let [x, y, z] = numbers;
x;
y;
z;
// 使用例
function getConfig() {
return [true, 10, "hoge", "fuga"];
}
// 従来
const config = getConfig();
console.log(config[0]);
console.log(config[1]);
// ECMAScript
const [isOn, amount, ...hoge] = getConfig();
isOn;
amount;
hoge;
function setConfig([isOn, amount]) {
_isOn = isOn;
_amount = amount;
}
setConfig([true, 20]);
_isOn;
_amount;
// アロー関数
const array = [1, 2, 3, 4];
array;
const byTwo = array.map(function(number) {
return number * 2;
});
byTwo;
// 引数が一つの場合は()を省略できる
const byTwoArrow = array.map(number => {
return number * 2;
});
byTwoArrow;
// 引数が2つの場合は、()は必要です
const byTwoArrow2 = array.map((number, index) => {
console.log(index);
return number * 2;
});
byTwoArrow2;
// returnなしで返すこともできる
const byTwoArrow3 = array.map(number => number * 2);
byTwoArrow3;
import { resolve } from "dns";
import { isMainThread } from "worker_threads";
let myPromise = new Promise(resolve => {
resolve("tarou");
});
function main() {
let name = myPromise;
name; // then tarouが返ってくる
}
async function main2() {
let name = await myPromise;
name; //tarouというシンプルな値が取れる
}
main();
main2();
function getName() {
return Promise.resolve("name");
}
function getAge() {
return Promise.resolve(20);
}
async function main3() {
let name = await getName();
let age = await getAge();
name;
age;
}
main3();
function damedayo() {
return Promise.reject("Hogeeeeeeeee");
}
async function main4() {
try {
let name = await damedayo();
} catch (err) {
console.log(err);
}
}
main4();
// awaitをいい感じにする
async function main5() {
let [name, age] = await Promise.all([getName(), getAge()]);
name;
age;
}
main5();
let outputwords = async () => {
await Promise.all([
myPromise("four", 4000),
myPromise("three", 3000),
myPromise("two", 2000),
myPromise("one", 1000)
]);
};
outputwords();
// クラスの宣言
var Person = function(name, age) {
this.name = name;
this.age = age;
};
// メソッド生やす
Person.prototype.jump = function() {
console.log("jump!");
};
var person = new Person("tarou", 30);
// ECMAScript
class Person2 {
constructor(name, age) {
this.name = name;
this.age = age;
}
jump() {
console.log("jump!");
}
static setName(person, name) {
person.name = name;
}
}
let person2 = new Person2("tarou", 30);
person2;
person2.jump();
// newによるインスタンス呼び出しなしで呼べるo
Person2.setName(person2, "yamada");
person2;
// 継承
class Employee extends Person2 {
constructor(name, age, years) {
super(name, age);
this.years = years;
}
// オーバーライド
jump() {
super.jump();
console.log("jumpppppppppppppppp");
}
quit() {
console.log("おつ");
}
}
let employee = new Employee("tarou", 20, 15);
employee;
employee.jump();
employee.quit();
class Person {
constructor(name, age) {
this._name = name;
this._age = age;
}
get name() {
return `getname ${this._name}`;
}
set name(name) {
this._name = name;
}
}
let person = new Person("tarou", 20);
person;
const hoge = person.name;
hoge;
person.name = "yamada";
person;
function buy(item, amout) {
item;
amout;
}
buy("eggs", 2);
function buy2(item, amout) {
item;
amout; // undefinedになる
}
buy2("eggs");
function buy3(item, amount) {
if (amount == undefined) {
amout = 0;
}
item;
amout;
}
buy3("eggs");
// デフォルト引数で同じことが出来る
function buy4(item, amount = 0) {
item;
amount;
}
buy4("eggs");
// ジェネレーター yield
function* myGenerator() {
yield 1;
}
let iter = myGenerator();
iter;
console.log(iter.next());
console.log(iter.next());
function* myGenerator2() {
yield 1;
yield 2;
yield 3;
}
let iter2 = myGenerator2();
iter2;
console.log(iter2.next());
console.log(iter2.next());
// フィボナッチ数列
function* fib() {
let n1 = 0;
let n2 = 1;
while (true) {
let current = n1;
n1 = n2;
n2 = current + n1;
let reset = yield current;
if (reset) {
return;
}
}
}
let iter4 = fib();
console.log(iter4.next());
console.log(iter4.next());
console.log(iter4.next());
console.log(iter4.next());
console.log(iter4.next());
console.log(iter4.next());
console.log(iter4.next(true));
// 配列でやるといい感じになる
function* myGene() {
yield* [1, 2, 3];
}
let iter5 = myGene();
console.log(iter5.next());
console.log(iter5.next());
console.log(iter5.next());
console.log(iter5.next());
// シンボル
let symbol = Symbol();
symbol;
console.log(typeof symbol);
let symbolA = Symbol("symbol");
let symbolB = Symbol("symbol");
console.log(symbolA === symbolB);
// シンボルの利用用途は、どのプロパティとも競合しないようにするために、ライブラリ開発者向けのもの
// イテレーターの使用例
let message = "Hello";
let iterator = message[Symbol.iterator]();
let a = iterator.next();
a;
let b = iterator.next();
b;
// カスタムイテレーター
// 通常の配列の例
let arr = [10, 20, 30];
for (let i = 0; i < arr.length; i++) {
console.log(i);
}
let nums = {
[Symbol.iterator]() {
let data = [1, 2, 3, 4];
let num = 0;
return {
next() {
return {
value: data[num],
done: num++ < 4
};
}
};
}
};
let iter = nums[Symbol.iterator]();
console.log(iter.next());
// for of
let arr2 = [1, 2, 3];
for (n of arr) {
console.log(n);
}
for (n of arr.entries()) {
console.log(n);
}
// モジュール化
import { add, person } from "./module_add";
console.log(add(1, 2));
console.log(person);
// エイリアス
import { add as myAdd } from "./module_add";
console.log(myAdd(1, 2));
// ワイルドカード
import * as my from "./module_add";
my.add(1, 2);
// デフォルトはそれぞれのmoduleで一回まで
import myAll from "./module_default";
myAll.add;
export * from "./module_some";
// modulesomeにあるものを呼び出せるようになる
export function add(a, b) {
return a + b;
}
export let person = {
firstname: "hoge"
};
export default {
name: "Tom",
add(a, b) {
a + b;
}
};
export function mul(a, b) {
return a * b;
}
// 従来
function getConfig() {
return {
isOn: true,
amount: 10,
name: "tarou"
};
}
var config = getConfig();
var i = config.isOn;
var a = config.amount;
i;
a;
// ECMA
// 取得したいプロパティ名を指定する
let { isOn, name } = getConfig();
isOn;
name;
// 取得したいプロパティ名を指定しないとundefined
let { aa, bb } = getConfig();
aa;
bb;
// 引数を指定することも出来る
var configSample = {};
function setConfig({ hoge, fuga }) {
config = { hoge, fuga };
}
setConfig({ hoge: "test1", fuga: "test2" });
config;
// 任意の引数名に代入することも出来る
let { isOn: onOffInfo, amount: dataAmount } = getConfig();
onOffInfo;
dataAmount;
// デフォルト
const arr = [1];
let [t1, t2 = 2000] = arr;
t1;
t2;
const obj = {
isOn: true
};
var { isOn: serverOn, amount = 1000 } = obj;
serverOn;
amount;
// 従来のオブジェクトコピー
let obj1 = {};
let obj2 = { name: "tarou" };
Object.keys(obj2).forEach(function(key) {
obj1[key] = obj2[key];
});
obj1;
// ECMAScript
let obj3 = {};
let obj4 = { name: "tarou" };
let obj5 = { age: 20 };
Object.assign(obj3, obj4, obj5);
obj3;
obj6 = Object.assign(obj4, obj5);
obj6;
var func_one = function(callback) {
console.log("one");
if (callback) {
callback();
}
};
var func_two = function(callback) {
console.log("two");
if (callback) {
callback();
}
};
var func_three = function(callback) {
console.log("three");
if (callback) {
callback();
}
};
// これの次にこれみたいな感じを愚直にやるとこうなる
func_one(function() {
func_two(function() {
func_three();
});
});
function getName() {
setTimeout(() => {
console.log("hi!");
}, 2000);
}
getName();
// Promiseを使うと以下のようになる
function getNamePromise() {
return new Promise(resolve => {
setTimeout(() => {
resolve("Jone"); // 処理が終わったらこれを返す
}, 2000);
});
}
getNamePromise().then(name => {
console.log(name);
});
// メソッドチェーン
getNamePromise()
.then(name => {
console.log(name);
return 20;
})
.then(age => {
console.log(age);
});
function getAgePromise() {
return new Promise(resolve => {
setTimeout(() => {
resolve(20);
}, 4000);
});
}
// 以下のような感じで、チェーンさせれる
getNamePromise()
.then(name => {
console.log(name);
// return getAgePromise();
})
.then(getAgePromise) // こういうのもできる
.then(age => {
console.log(age);
});
// まとめてやることもできる
Promise.all([getNamePromise(), getAgePromise()]).then(([name, age]) => {
console.log(name);
console.log(age);
});
// エラーを扱う
function errorPromise() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject("error!");
// thrnow new Hogeでも同じことになる
}, 4000);
});
}
getNamePromise()
.then(name => {
console.log(name);
})
.then(errorPromise)
.catch(err => {
console.log(err);
return "yeah";
})
.then(value => {
console.log("finally");
console.log(value);
});
// resolveについてもうちょい
let myPromise = (word, sec) =>
new Promise(resolve => {
setTimeout(() => {
console.log(word);
}, sec);
// 何も渡すものがなかったとしても、resolveを終わりに必ず呼ぶ
resolve();
});
myPromise("hello", 1000)
.then(() => myPromise("world", 2000))
.then(() => myPromise("agin", 2000));
// 以下のようなこともできる
function getNameSimplePromise() {
return Promise.resolve("hoge");
}
getNameSimplePromise().then(name => {
console.log(name);
});
let person = {
firstname: "tarou",
lastname: "yamada"
};
let fn = "tarou";
let ln = "tarou";
let person2 = {
fn, // プロパティ名書かない場合はそのまま名前が使われる
ln: ln // こういうのしなくてよい
};
console.log(person2);
// computed property name
function getKey() {
return "place";
}
let key = "lastname";
let person3 = {
firstname: "hoge",
[getKey()]: "Tokyo" // こういうのも出来る プロパティ名を色々やれる
};
person3[key] = "YAMADA"; // lastnameのキーにYamadaが入るような感じになる
console.log(person3);
// メソッド定義
let person4 = {
firstname: "hoge",
getName() {
return this.firstname;
}
};
console.log(person4.getName());
// レスト演算子(...仮引数名)
function print() {
console.log(arguments); // Iterator[1, "a", 2]
}
print(1, "a", 2);
// Arrayに変換
function print2() {
console.log(Array.prototype.slice.call(arguments)); // Iterator[1, "a", 2]
}
print2(1, "a", 2);
// ...で引数で渡してあげると、簡単に配列に出来る
function print3(...ary) {
console.log(ary);
}
print3(1, "a", 2);
function print4(ele1, ele2, ...arr) {
ele1;
ele2;
console.log(arr);
}
print4(1, "a", 2);
// スプレッド演算子(...配列名)
var arr = ["Hello", ",", "world"];
arr = ["<br>"].concat(arr).concat(["<br>"]);
console.log(arr.join(""));
// 以下のように簡単にかける
var arr2 = ["Hello", ",", "world"];
arr2 = ["<br>", ...arr2, "<br>"];
console.log(arr2.join(""));
// 文字列を配列にすることもできる
const message = "Hello, world";
const chars = [...message];
console.log(chars);
// 引数にわたすことも出来る
function add(a, b) {
return a + b;
}
var arr3 = [1, 2];
console.log(add(...arr3));
const arr4 = [1, 2, 3];
const arr5 = [4, 5, 6];
arr4.push(...arr5);
console.log(arr4);
const arrsrc = [1, 2, 3];
const dist = [...arrsrc];
console.log(dist);
const arr6 = [1, 2, 3];
const arr7 = [4, 5, 6];
const arr8 = ["a", ...arr6, ...arr7, true];
console.log(arr8);
// templateリテラル
// `
let name = "太郎";
let age = 18;
let greet = "私の名前は" + name + "で年齢は" + age;
console.log(greet);
let greet2 = `私の名前は${name}で年齢は${age}`;
console.log(greet2);
// \nで改行しなくてよくなった
let greet3 = `私の名前は${name}
で年齢は${age}`;
console.log(greet3);
// 他にも色々
let greet4 = `私の名前は${"hoge" + name}で年齢は${age}`;
console.log(greet4);
let foods = ["a", "b", "c"];
let msg = `hoge, ${foods.join("")}`;
console.log(msg);
// tagged templateリテラル
function output() {
console.log(arguments);
}
output("a", "b");
// タグ付きテンプレートリテラル
output`"a", "b"`;
function output2(string, ...values) {
console.log(string);
console.log(values);
}
output2`"a", "b"`;
output2`私の名前は${"hoge" + name}で年齢は${age}`;
// エスケープしない例
console.log(String.raw`あいうえ\nお`);
// this
let obj = {
value: 0,
increment: function() {
setTimeout(function() {
this.value++;
console.log(this.value); // NaN
}, 1000);
}
};
let obj2 = {
value: 0,
increment: function() {
setTimeout(
function() {
this.value++;
console.log(this.value); // NaN
}.bind(this),
1000
);
}
};
obj2.increment();
let obj3 = {
value: 0,
increment: function() {
// アロー関数を使うのthisは親のスコープのthisを引き継ぐ
setTimeout(() => {
this.value++;
console.log(this.value); // 1
}, 1000);
}
};
obj3.increment();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment