ヒント：記事の長さが長くなる、より多くの知識を含む、収集した後に見ることをお勧めします。
ディレクトリ
そして、のconstましょう
constと機能してみましょう。
- 促進されません
- 繰り返し文のエラー
- いないバインドグローバルスコープ（ブロックレベルのスコープ）
一時的なデッドゾーン：変数（TDZ）宣言する前にこれらの変数がエラーにつながるアクセス場合、constの声明を聞かせてと範囲の最上部に上げられません。
var value = "global";
// 例子1
(function() {
console.log(value);
let value = 'local';
}());
// 例子2
{
console.log(value);
const value = 'local';
};
// 两个例子中，结果并不会打印 "global"，而是报错 Uncaught ReferenceError: value is not defined，就是因为 TDZ 的缘故。解体の割り当て
代入式の構文を非構造は、異なる変数の配列またはからデータオブジェクトを抽出することを可能にするジャバスクリプト、あります
const person = {
name: 'little bear',
age: 18,
sex: '男'
}
let { name,age,sex } = person
//数组
let nbaStars=['yaoming','kobe','james','paul']
let [chinaStar,...usaStar] = nbaStars
let [,,,myidol] = nbaStars
console.log(usaStar,chinaStar,myidol)
//["kobe", "james", "paul"] "yaoming" "paul"矢印関数を使用
// es5
var fn = function(a, b) {
return a + b;
}
// es6 箭头函数写法，当函数直接被return时，可以省略函数体的括号
const fn = (a, b) => a + b;
// es5
var foo = function() {
var a = 20；
var b = 30;
return a + b;
}
// es6
const foo = () => {
const a = 20;
const b = 30;
return a + b;
}＃矢印機能は以下の点に注意します
- アロー機能は、関数式を置き換えることができますが、関数の宣言を置き換えることはできません。
- 機能ではなく、この矢印。あなたは矢印でこの機能を使用する場合、これは確かに、この外側の層です。
- ES6、厳格なデフォルトモードでは、これは自動的にwindowオブジェクトを指しています。
- 関数自体ではなく、これを矢印。
- アロー機能は、引数のオブジェクトにアクセスすることはできません。
テンプレート文字列
使用 `文字列全体を包み、前記変数または式へのパッケージ$ {}。
// es6
const a = 20;
const b = 30;
const string = `${a}+${b}=${a+b}`;
// es5
var a = 20;
var b = 30;
var string = a + "+" + b + "=" + (a + b);デフォルトの関数の引数
function add(x = 20, y = 30) {
return x + y;
}
console.log(add());オペレータは展開します
ES6で表される...演算子を展開し、または拡張するオブジェクトメソッドのアレイであってもよいです。
数组展开：
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];
对象展开：
const obj1 = {
a: 1,
b: 2,
c: 3
}
const obj2 = {
...obj1,
d: 4,
e: 5,
f: 6
}
// 结果类似于 const obj2 = Object.assign({}, obj1, {d: 4})クラスとオブジェクトリテラル
- ときに、同じ名前の属性を持つ変数の値
const name = 'Jane'; const age = 20 // es6 const person = { name, age } // es5 var person = { name: name, age: age }; - 特性に加えて、メソッドオブジェクトリテラル表現はまた、方法と略記することができます。
// es6 const person = { name, age, getName() { // 只要不使用箭头函数，this就还是我们熟悉的this return this.name } } // es5 var person = { name: name, age: age, getName: function getName() { return this.name; } }; - また、プロパティ変数の名前である、プロパティとして、オブジェクトリテラルでブラケットを使用することができます。
const name = 'Jane'; const age = 20 const person = { [name]: true, [age]: true } - ES6は、クラスの構文である私たちは、オブジェクトを作成し、新たな糖衣構文を提供します。
// ES5 // 构造函数 function Person(name, age) { this.name = name; this.age = age; } // 原型方法 Person.prototype.getName = function() { return this.name } // ES6 class Person { constructor(name, age) { // 构造函数 this.name = name; this.age = age; } getName() { // 原型方法 return this.name } } babel会将ES6的写法编译成为利用Object.defineProperty实现的方式，包括get，set等。 - また、我々はまた、次の例のコメントは、実際の使用にはいくつかの異なる方法で文言に特別な注意を払う必要があり、私は彼らが対応するES5でいた意味を説明します。
class Person { constructor(name, age) { // 构造函数 this.name = name; this.age = age; } getName() { // 这种写法表示将方法添加到原型中 return this.name } static a = 20; // 等同于 Person.a = 20 c = 20; // 表示在构造函数中添加属性 在构造函数中等同于 this.c = 20 // 箭头函数的写法表示在构造函数中添加方法，在构造函数中等同于this.getAge = function() {} getAge = () => this.age } 继承 extends 相比ES5，ES6的继承就要简单很多： class Person { constructor(name, age) { this.name = name; this.age = age; } getName() { return this.name } } // Student类继承Person类 class Student extends Person { constructor(name, age, gender, classes) { super(name, age); this.gender = gender; this.classes = classes; } getGender() { return this.gender; } } - 私たちは一つだけで、あなたがいないES5のようなコンストラクタの継承とプロトタイプの継承など心配に、継承達成することができ、キーワード拡張する必要がある、加えて、我々はまた、スーパー呼ばれる方法に焦点を当てる必要があります。
/* 在继承的构造函数中，我们必须如上面的例子那么调用一次super方法， 它表示构造函数的继承，与ES5中利用call/apply继承构造函数是一样的功能。 */ // 构造函数中 // es6 super(name, age); // es5 Person.call(this);
約束する
ネイティブリアライズアヤックス、onreadystatechangeにイベントの使用、時にイベントトリガーおよび私たちが望むデータを取得するために、一定の条件を満たして、その後、我々はデータの処理を開始することができます。そうすることでトラブルに見えるが、この時間ならば、我々は、我々は次の方法を持っていたこの時間は、別のAJAXリクエスト、パラメータの一つのこの新しいAjaxのリクエストを行う必要があり、AJAXリクエストから取得する必要はありません。操作を行います。
var url = 'https://hq.tigerbrokers.com/fundamental/finance_calendar/getType/2017-02-26/2017-06-10';
var result;
var XHR = new XMLHttpRequest();
XHR.open('GET', url, true);
XHR.send();
XHR.onreadystatechange = function() {
if (XHR.readyState == 4 && XHR.status == 200) {
result = XHR.response;
console.log(result);
// 伪代码
var url2 = 'http:xxx.yyy.com/zzz?ddd=' + result.someParams;
var XHR2 = new XMLHttpRequest();
XHR2.open('GET', url, true);
XHR2.send();
XHR2.onreadystatechange = function() {
...
}
}
}第三アヤックスがある場合（またはそれ以上）まだ要求に依存している、我々のコードは、災害になります。災害は、多くの場合、コールバック地獄と呼ばれます。
だから我々は約束というものを必要とし、この問題を解決すること。
もちろん、コールバック地獄に加えて、非常に重要な要件があります：私たちのコードに読みやすく保守し、我々は明確に区別データ要求やデータに対処する必要があります。
プロミスオブジェクトは3つの状態があり、それらは：
- 保留中：待機中、またはのために、得られた結果は、そのノーを示し、
- 解決（成就）：完了している、彼らは私たちが望む結果を持っていると、私たちがダウンし続けることができます
- 拒否：また結果を得るために言ったが、結果として、我々が望むものではありません、したがって、実行することを拒否
new Promise(function(resolve, reject) {
if(true) { resolve() };
if(false) { reject() };
})Promise.all：
すべての状態プロミスオブジェクトのこの配列は解決になってきたとき、または拒否されたときにパラメータとしてオブジェクトの約束配列を受けPromise.all、それはその後、コールの方法に進みます。
var url = '...';
var url1 = '...';
function renderAll() {
return Promise.all([getJSON(url), getJSON(url1)]);
}
renderAll().then(function(value) {
console.log(value);
})Promise.race：
そしてPromise.allは同様に、Promise.raceプロミスパラメータとしてオブジェクトの配列であり、差はPromsieアレイとなる前記状態が解消または拒否するたびに、この方法は、.thenを呼び出すことができるということです。
function renderRace() {
return Promise.race([getJSON(url), getJSON(url1)]);
}
renderRace().then(function(value) {
console.log(value);
})新しいメソッドの配列
1. Array.prototype.includes
それはすぐに、配列は要素が含まれて見つけるための有益な配列の機能を含んでいます。（含むのNaNなどのindexOfは同じではありません）。
2. 字符串追加
二つの追加方法String.prototype.padStart文字列とString.prototype.padEndを提供し、我々は、文字列の先頭と最後に追加新しい文字列が容易になります。
'someString'.padStart(numberOfCharcters [,stringForPadding]);
'5'.padStart(10) // ' 5'
'5'.padStart(10, '=*') //'=*=*=*=*=5'
'5'.padEnd(10) // '5 '
'5'.padEnd(10, '=*') //'5=*=*=*=*='
Object.entries(cars).map(([name, count]) => {
console.log(`${name.padEnd(20, '-')} Count:${count.toString().padStart(3, '0')}`)
})
/*
?ambulance--------- Count:003
?car--------------- Count:007
?trucks------------ Count:004
*/3. Array.prototype.flat（）（ES9）
指定された深さまでArray.prototype.flat（）を再帰的にネストされた配列の分割。あなたは無限の全深さを使用したい場合は、デフォルト値は、1です。この方法では、元の配列を変更するが、新しい配列を作成しません。
const arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(2); // [1, 2, 3, 4, 5, 6]
const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]
flat() 方法会移除数组中的空项:
const arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]4. Array.prototype.flatMap（）（ES9）
flatMap（）メソッド最初のマッピング関数は、その結果を新たな配列に圧縮され、各要素をマッピングします。これは、ほぼ同じ深さとArray.prototype.map Array.prototype.flat 1であるが、flatMapは、通常、プロセスのわずかに高い効率に組み合わせます。
const arr1 = [1, 2, 3];
arr1.map(x => [x * 4]); // [[4], [8], [12]]
arr1.flatMap(x => [x * 4]); // [4, 8, 12]より良い例：
const sentence = ["This is a", "regular", "sentence"];
sentence.map(x => x.split(" "));
// [["This","is","a"],["regular"],["sentence"]]
sentence.map(item => item.split(' ')).flat(Infinity)
// ["This","is","a","regular", "sentence"]
sentence.flatMap(x => x.split(" "));
// ["This","is","a","regular", "sentence"]
// 可以使用 归纳（reduce） 与 合并（concat）实现相同的功能
sentence.reduce((acc, x) => acc.concat(x.split(" ")), []);オブジェクトの新しい方法
1.Object.values（）
Object.values（）関数とObject.keys（）は、それが自分自身のプロパティのすべての値のオブジェクト（プロトタイプチェーンを通じて継承ではない）を返し、非常に類似しています。
2. Object.entries（）
Object.entries（）および関連Object.keysが、エントリ（）関数は、戻りのアレイとしてキーと値となります。このように、リサイクルや地図に変換されますを使用することは非常に便利なオブジェクト。
let obj = { 'dsds': 2, 'fsdsg': 3, 'gththt': 4 }
console.log(Object.entries(obj))
/*
(3) [Array(2), Array(2), Array(2)]
0: (2) ["dsds", 2]
1: (2) ["fsdsg", 3]
2: (2) ["gththt", 4]
*/3.Object.fromEntries（ES9）
新しいメソッドオブジェクトにキーと値のペアのリスト。
オブジェクト自体与えられたキー値は、属性配列を挙げることが返し、配列オブジェクトを変換するときに使用される前Object.entries（）、Object.entries（）メソッドとは対照的です。
しかし、今、あなたは、配列Object.fromEntries操作によってオブジェクトに戻ることができます。
const obj = { prop1: 2, prop2: 10, prop3: 15 };
// 转化为键值对数组：
let array = Object.entries(obj);
// [["prop1", 2], ["prop2", 10], ["prop3", 15]]
// 将所有对象属性的值平方:
array = array.map(([key, value]) => [key, value ** 2]);
// [["prop1", 4], ["prop2", 100], ["prop3", 225]]我々は、パラメータObject.fromEntriesとしてアレイ配列を変換、オブジェクトの配列に変換されます。
const newObj = Object.fromEntries(array);
// {prop1: 4, prop2: 100, prop3: 225}これは、を意味する対数のコンジュゲート
追加/私たちは通常、直感的で分かりやすい形で装飾されているとの減算を。ECMAScript2016では、我々は、*代わりにMath.powを使用することができます。
あなたはここを参照してください、あなたに非常に少しの助けがあると感じた場合、私のコメントを賞賛または奨励してください。
