blog

ES6クイックスタート

JSON文字列を受け取り、オブジェクトに変換します。 オブジェクトを受け取り、JSON文字列に変換します。 for ... 配列の添え字キーf......

Aug 10, 2020 · 11 min. read
シェア

ES6どうしてこうなった？

  • ECMAScriptとJavaScript

    • ECMA が標準、JSが実装
    • ECMAScript ECMAまたは略してES

  • 更新履歴

    • 1996年、ES1.0 NetscapeがJSをECMA組織に提出し、ESが正式に発足。
    • , ES3.0 広くサポート
    • , ES5.1 ISO標準になります
    • , ES6.0 公式リリース

ES6

  • ES6(ES2015) 対応環境 IE10+、Chrome、FireFox、Mobile、NodeJS

  • 互換性のないソリューション、コンパイル、変換

    • オンライン変換
    • で使用することはできません。
    • Babel はJavaScriptコンパイラです。
    • 既存の環境で実行できるようにES6コードをES5コードに変換するトランスコーダ。
    • 既存の環境がES6に対応しているかどうかを気にすることなく、今すぐES6でプログラムを書くことができます！

変数 lets および const const

  • varの問題点

    • エラーや警告のない繰り返し可能な宣言
    • 変更を制限できません
    • ブロックレベルのスコープはありません。

  • letとconst

    • 繰り返し宣言できません。
    • はブロック・スコープで、 { } はブロックの外ではなく、ブロックの中で宣言されます。
    • letは変更可能な変数です。
    • const は定数で、変更できません。

  • ブロックレベルのスコープの例

    • あるいは、関数の中に変数をカプセル化してスコープを限定することもできますが、これは少し厄介です。
    • letを使う最も簡単な方法は、varをletに変更することで、スコープの問題を解決できます。
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script>
 window.onload = function () {
 // var aBtn = document.getElementsByTagName('input')
 // for (var i = 0; i < aBtn.length; i++) {
 // aBtn[i].onclick = function () {
 // alert(i)
 // }
 // }
 // var aBtn = document.getElementsByTagName('input')
 // for (let i = 0; i < aBtn.length; i++) {
 // aBtn[i].onclick = function () {
 // alert(i)
 // }
 // }
 // var aBtn = document.getElementsByTagName('input')
 // for (var i = 0; i < aBtn.length; i++) {
 // // スコープを制限するために関数でラップする
 // (function (i) {
 // aBtn[i].onclick = function () {
 // alert(i)
 // }
 // })(i)
 // }
 }
 </script>
</head>
<body>
<input type="button" value="ボタン1">
<input type="button" value="ボタン2">
<input type="button" value="ボタン3">
</body>
</html>

関数 - 矢印関数

  • 関数の省略形であるアロー関数
    • 引数が1つの場合、()は省略できます。
    • 戻り値が 1 つだけの場合は {} を省略できます。
// 通常の関数
function name() {
}
// arrow関数、remove関数、add関数=>
() => {
}

let show1 = function () {
 console.log('abc')
};
let show2 = () => {
 console.log('abc')
};
show1(); // 関数を呼び出す
show2();
let show4 = function (a) {
 return a * 2
};
let show5 = a => a * 2; // シンプルで、pythonのラムダ関数に似ている。
console.log(show4(10));
console.log(show5(10))

関数 - 引数

  • 引数の展開/拡張 ..args
    • 残りの引数を収集し、最後の引数の位置に持っていかなければなりません。
    • 配列を展開すると、配列の内容を直接ここに書き込むのと同じ効果があります。
  • デフォルトパラメータ
function show(a, b, ...args) {
 console.log(a);
 console.log(b);
 console.log(args)
}
console.log(show(1, 2, 3, 4, 5));
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3);
function show2(a, b = 5, c = 8) {
 console.log(a, b, c)
}
show2(88, 12)

代入の分解

let [a, b, c] = [1, 2, 3];
console.log(a, b, c);
let {x, y, z} = {x: 1, y: 2, z: 3};
console.log(x, y, z);
let [json, arr, num, str] = [{a: 1, b: 2}, [1, 2, 3], 8, 'str'];
console.log(json, arr, num, str);
  • 分解された課題
    • 左側と右側が同じ構造であること
    • 右辺はモノでなければなりません
    • 宣言と代入は分離できません。

値は、jsonでは使用できません。

  • 新たに4つのメソッドが追加されました。
  • 4つの新しいメソッド
let arr = [12, 5, 8];
let result = arr.map(function (item) {
 return item * 2
});
let result2 = arr.map(item => item * 2);//  
console.log(result);
console.log(result2);
let score = [18, 86, 88, 24];
let result3 = score.map(item => item >= 60 ? 'を渡す。: '失敗');
console.log(result3);
//  
[ 24, 10, 16 ]
[ 24, 10, 16 ]
[ '失敗'、'合格'、'合格'、'失敗']
  • map 1対1のマッピング
let arr = [1, 3, 5, 7];
let result = arr.reduce(function (tmp, item, index) {
 // tmp 結果、現在の項目数、インデックスカウントは1から始まる。
 console.log(tmp, item, index);
 return tmp + item
});
console.log(result);
let arr2 = [1, 3, 5, 7];
let result2 = arr.reduce(function (tmp, item, index) {
 if (index != arr2.length - 1) { // 最後ではない
 return tmp + item
 } else {
 return (tmp + item) / arr.length
 }
});
console.log(result2); //
  • filter 真として保持
let arr = [12, 4, 8, 9];
let result = arr.filter(item => (item % 3 === 0) ? true : false);
console.log(result);
let result2 = arr.filter(item => item % 3 === 0);
console.log(result2);
let arr2 = [
 {title: ' , price: 10},
 {title: ' , price: 20},
];
let result3 = arr2.filter(json => json.price >= 20);
console.log(result3);
  • filter フィルタ true を保持
let arr = [12, 4, 8, 9];
let result = arr.forEach(item => console.log(item));
let result2 = arr.forEach((item, index) => console.log(item, index));

文字列

  • forEach ループ反復
let url = 'https://..io';
console.log(url.startsWith('http'));
console.log(url.endsWith('com'));
// value、jsonでは使用できない
  • endsWith
let a = 12;
let str1 = `age ${a}`;
console.log(str1);
let title = ' ;
let content = ' ;
let str =
 `<div>
 <h1>${title}</h1>
 <p>${content}</p>
 console.log(str)
 <div>
 <h1> </h1>
 <p> </p>`;

オブジェクト指向の基本

  • 本来の書き方
    • クラスとコンストラクタは同じ
    • プロパティとメソッドは別々に記述
// ES5 
function User(name, pass) {
 this.name = name;
 this.pass = pass
}
User.prototype.showName = function () {
 console.log(this.name)
};
User.prototype.showPass = function () {
 console.log(this.pass)
};
let u1 = new User('garvey', 'admin');
u1.showName();
u1.showPass();
// 古いバージョンは
function VipUser(name, pass, level) {
 User.call(this, name, pass);
 this.level = level
}
VipUser.prototype = new User();
VipUser.prototype.constructor = VipUser;
VipUser.prototype.showLevel = function () {
 console.log(this.level)
};
let v1 = new VipUser('garvey', 'admin', 3);
v1.showName();
v1.showLevel();
  • オブジェクト指向の新バージョン
    • クラス・キーワードで、コンストラクタ
    • クラスに直接メソッドを追加
    • class valueは、jsonでは使用できません。
class User {
 constructor(name, pass) {
 this.name = name;
 this.pass = pass
 }
 showName() {
 console.log(this.name)
 }
 showPass() {
 console.log(this.pass)
 }
}
let u1 = new User('garvey', 'admin');
u1.showName();
u1.showPass();
// 継承
class VipUser extends User {
 constructor(name, pass, level) {
 super(name, pass);
 this.level = level
 }
 showLevel() {
 console.log(this.level)
 }
}
v1 = new VipUser('garvey', 'admin', 3);
v1.showLevel();

オブジェクト指向アプリケーション

    • ユーザーインターフェイス構築用JavaScriptライブラリ
    • コンポーネント化は、コンポーネントがクラス
    • JSX == bable == browser.js

json

  • JSON形式

    • JavaScript Object Notation の略で、データ交換用のテキスト形式。
    • JSONはJSオブジェクトの厳密なサブセットです。
    • JSONの標準的な書き方
    • JSON 標準的な書き方は
    • には使用できません。

  • JSONオブジェクト

    • JSON オブジェクトは、JSON フォーマットのデータを扱うために使用される JavaScript ネイティブオブジェクトで、次の 2 つの静的メソッドを持っています。
let json = {name: "Garvey", age: 20};
let str = 'hi,' + JSON.stringify(json);
let url = 'https://..io/' + encodeURIComponent(JSON.stringify(json));
console.log(str);
console.log(url);
let str2 = '{"a": 12, "b": 4, "c": "abc"}';
let json2 = JSON.parse(str2);
console.log(json2);
//  
// hi,{"name":"Garvey","age":20}
// https://..io/%7B%22name%22%3A%22Garvey%22%2C%22age%22%3A20%7D
// {a: 12, b: 4, c: "abc"}

  • ボーイフレンド

    • はJavaScript言語の中核概念であり、最も重要なデータ型です。
    • オブジェクトは「キーと値のペア」の集まりで、順序のない複合データセットです。
    • オブジェクトのキーはすべて文字列なので、引用符の有無にかかわらず使用できます。
    • キー名が数値の場合、自動的に文字列に変換されます。
    • オブジェクトの各キー名は「属性」とも呼ばれ、その「キー値」はどのようなデータ型でもかまいません。
    • プロパティの値が関数である場合、それはしばしば「メソッド」と呼ばれ、関数のように呼び出すことができます。
    • in 演算子は、オブジェクトにプロパティが含まれているかどうかをチェックするために使用します（チェックされるのはキー名であり、キーの値ではないことに注意してください）。
    • for....in ループは、オブジェクトのすべてのプロパティを繰り返し処理するために使用されます。

  • オブジェクトの略称

    • キーと値が同じ場合は、次のように省略できます。
    • 関数は
let a = 12, b = 5;
console.log({a: a, b: b});
console.log({a, b});
console.log({a, b, c: "c"});
console.log({
 a, b, show() {
 console.log('a')
 }
});
//  
// { a: 12, b: 5 }
// { a: 12, b: 5 }
// { a: 12, b: 5, c: 'c' }
// { a: 12, b: 5, show: f }

Promise

  • 非同期と同期

    • 非同期、操作間の関係がない、複数の操作を同時に行う、複雑なコード
    • 同期、一度に一つのことしかできない、シンプルなコード

  • 約束オブジェクト

    • 非同期コードを同期的に書く
    • Promiseを使うと、コールバック関数を1レイヤーずつネストすることなく、非同期操作を同期操作のように書くことができます。
    • 可読性が向上し、多層ネストされたコールバック関数に便利です。
    • 非同期操作とコールバック関数の仲介役となり、非同期操作に同期操作へのインターフェイスを持たせます。

  • プロミスはコンストラクタ

    • 引数としてコールバック関数f1を受け取り、f1の内部には非同期処理のコードがあります。
    • 返される p1 は Promise のインスタンスです。
    • すべての非同期タスクは Promise インスタンスを返します。
    • Promiseインスタンスには、次のステップのコールバック関数を指定するthenメソッドがあります。
function f1(resolve, reject) {
 // 非同期コード...
}
let p1 = new Promise(f1);
p1.then(f2); // f1f2は、非同期処理の実行が完了したときに実行される。
  • Promiseは、非同期プロセスを同期プロセスとして記述することを可能にします。
// 従来の書き方は
step1(function (value1) {
 step2(value1, function (value2) {
 step3(value2, function (value3) {
 step4(value3, function (value4) {
 // ...
 });
 });
 });
});
// Promise  
(new Promise(step1))
 .then(step2)
 .then(step3)
 .then(step4);
  • Promise.all(promiseArray)メソッド
    • Promiseオブジェクトの複数のインスタンスをラップし、新しいPromiseインスタンスを生成して返します。
    • このメソッドは、Promise配列内のすべてのPromiseインスタンスが解決されたときに返されます。
    • そしてすべての結果を結果配列に渡します。
    • Promise配列内のいずれかのPromiseが拒否された場合、Promise.all呼び出し全体は直ちに終了し、拒否された新しいPromiseオブジェクトを返します。
let p1 = Promise.resolve(1),
 p2 = Promise.resolve(2),
 p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
 console.log(results); // [1, 2, 3]
});
  • Promise.race([p1, p2, p3])
    • Promise.raceはレースを意味します。
    • Promse.raceこれは「レース」を意味します。
    • 結果そのものが成功状態か失敗状態かに関係なく

generator-ジェネレータ関数を知る

  • ジェネレーター ジェネレーターの機能
    • 通常の機能、最後まで。
    • ジェネレータ機能、あなたは途中で停止することができます、どこで停止するには、yield withで、電源の実行を引き渡すと
    • yieldは、あきらめる、降伏する、放棄するという意味。
    • 実行を開始するnext()メソッドを呼び出す必要があります、降伏停止に遭遇する必要があります、一歩を踏み出すために足を蹴る
    • の前にジェネレータ関数は、両側、または関数や関数の近くにスペースを持つことができます。
    • 小さな関数の数の実際の生成の背後にある、ウォークとストップを達成するために
function show() {
 console.log('a')
 console.log('b')
}
show() // 通常の関数
function* show2() {
 console.log('1')
 yield
 console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最後に、結果はない。

generator-yield

  • 歩留まり

    • どちらもパラメータを渡し
    • 最初のnext()パスは無効で、next()を開始するためだけに使用されます。

  • 関数の前に * がない場合

    • 普通の機能です。
    • 普通の関数です。
    • フィールドがある場合、エラーを報告します。， ReferenceError: yield is not defined
function* show() {
 console.log('1');
 let a = yield;
 console.log('2');
 console.log(a)
}
// yield  
let gen = show();
gen.next(); // 1
gen.next(); // 2 パラメータがなく、yieldに戻り値がないため、未定義である。
let gen2 = show();
gen2.next(10); // 1 yieldを最初に実行するときは、代入を実行しない。
gen2.next(20); // 2 と20
function* show2() {
 console.log('1');
 yield 10;
 console.log('2')
}
// yield  
let gen3 = show2();
let res1 = gen3.next();
console.log(res1); // { value: 10, done: false }
let res2 = gen3.next();
console.log(res2);
// { value: undefined, done: true } 最後の値を返す必要がある。

generator-

  • プロミスは1グループずつ読むのに適しています。
  • Promise 一度にグループを読み込むのに適しています。
// ロジックジェネレーターを使う
runner(function* () {
 let userData = yield $.ajax({url: 'getUserData'})
 if (userData.type == 'VIP') {
 let items = yield $.ajax({url: 'getVIPItems'})
 } else {
 let items = yield $.ajax({url: 'getItems'})
 }
});

// yield インスタンス、非同期を同期的に書く
server.use(function* () {
 let data = yield db.query(`select * from user_table`)
 this.body = data
})

ES7

  • 配列
    • arr.includes() 配列が何かを含むか否か
    • arr.keys()、arr,entries()の配列。
    • 値は、json 配列では使用できません。.keys(), arr,entries()
    • for ... in 配列の添え字キーを走査
Read next

Javaスレッド割り込みの秘密

また、兄弟WHYから学び、各記事に不条理の段落を追加します。つまり、何気ない会話は、彼らの最近の生活の状態や感情、いくつかのアイデアや思考であってもよい、また、この記事などを書くの本来の意図であってもよい、あるいは単にさりげなく自慢話。 最近、おそらく仕事のプレッシャーのために少し大きいので、常に非常に幸せではない感じ、数日前にも友人の輪の中で少し吐き、友人の励ましの多くを参照してください、非常に感動しました。 その...

Aug 10, 2020 · 12 min read

連鎖表形式での2つの数値の加算

Aug 10, 2020 · 1 min read

ClangでOCオブジェクトの性質を見る

Aug 10, 2020 · 4 min read

EventBusソースコード解析

Aug 10, 2020 · 17 min read

Vuexの使用経験

Aug 10, 2020 · 7 min read

リフローと再描画

Aug 10, 2020 · 2 min read