ECMASriptこれは、Ecma International によって ECMA-262 を通じて標準化されたスクリプト プログラミング言語です。JavaScript もこの仕様の実装です。
新機能カタログ
メモの出典: ステーション b
Shang Silicon Valley Web フロントエンド ES6 チュートリアル (ES6 ～ ES11 をカバー)
Ruan Yifeng 氏: ECMAScript 6 の概要
ES6
キーワードを聞かせてください
let キーワードを使用して宣言された変数の特性は次のとおりです。
- 繰り返しは許可されません
- ブロックレベルのスコープ
- 変数ホイスティングは存在しません
- スコープチェーンには影響しません
const キーワード
const キーワードは定数を宣言するために使用されます。const 宣言は次の特性で構成されます。
- 宣言では初期値を割り当てる必要があります
- 識別子は通常大文字です
- 重複したステートメントは許可されません
- 値の変更は許可されていません
- ブロックスコープ
変数の構造化代入
ES6 では、配列やオブジェクトから値を抽出し、特定のパターンに従って変数に値を割り当てることができます
//数组的解构赋值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr;
//对象的解构赋值
const lin = {
name: '林志颖',
tags: ['车手', '歌手', '小旋风', '演员']
};
let {
name, tags} = lin;
テンプレート文字列
テンプレート文字列 (テンプレート文字列) は、バッククォート (`) で識別される文字列の拡張バージョンであり、次のような特徴があります。
- 文字列内に改行文字を含めることができます
- 変数は ${xxx} の形式で出力できます。
// 定义字符串
let str = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`;
// 变量拼接
let star = '王宁';
let result = `${
star}在前几年离开了开心麻花`;
簡素化されたオブジェクトの書き込み
ES6 では、変数や関数をオブジェクトのプロパティやメソッドとして中括弧内に直接記述することができます。このような
書き方はより簡潔です。
let name = '尚硅谷';
let slogon = '永远追求行业更高标准';
let improve = function () {
console.log('可以提高你的技能');
}
//属性和方法简写
let atguigu = {
name,// 属性名和变量名相同可以简写
slogon,// 属性名和变量名相同可以简写
improve,// 属性名和函数变量名相同可以简写
change() {
// change:function(){}的简写方式
console.log('可以改变你')
}
};
アロー関数
ES6 では、「矢印」(=>) を使用して関数を定義できます。
// 1. 通用写法
let fn = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
}
// 2. 省略小括号的情况,只有一个参数
let fn2 = num => {
return num * 10;
};
// 3. 省略花括号,省略花括号的同时要省略`return`
let fn3 = score => score * 20;
// 4. this指向2声明所在作用域中this的值
let fn4 = () => {
console.log(this);//Windows
}
let school = {
name: '尚硅谷',
getName(){
let fn5 = () => {
console.log(this);// this指向school
}
fn5();
}
};
アロー関数はこの点を変更しないため、コールバック関数の指定に非常に適しています。
残りのパラメータ
ES6 では、関数の実際のパラメータを取得するために使用され、引数の代わりに使用されるrestパラメータが導入されました。
// 类似java中的可变参数
function add(...args){
console.log(args);
}
add(1,2,3,4,5);
// rest参数必须是最后一个形参，在其他参数都确定之后才是rest参数
function minus(a,b,...args){
console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);
スプレッドスプレッド演算子
スプレッド演算子 (spread) も 3 つのドット (…) です。これは、残りのパラメータの逆演算に似ており、配列をカンマで区切られた一連のパラメータに変換し、配列を解凍します。オブジェクトは ES9 以降でも拡張できます
// 展开数组
let tfboys = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子'];
function fn(){
console.log(arguments);// 输出不是数组对象而是，'德玛西亚之力', '德玛西亚之翼', '德玛西亚皇子'
}
fn(...tfboys)
// 展开对象
/**
* 展开对象
*/
let skillOne = {
q: '致命打击',};
let skillTwo = {
w: '勇气'};
let skillThree = {
e: '审判'};
let skillFour = {
r: '德玛西亚正义'};
let gailun = {
...skillOne, ...skillTwo,...skillThree,...skillFour};
約束
Promise は、ES6 によって導入された非同期プログラミングの新しいソリューションです。
構文的に Promiseは、非同期操作をカプセル化し、その成功または失敗の結果を取得できるコンストラクターです。
//实例化 Promise 对象
const p = new Promise(function(resolve, reject){
resolve(data);// 成功时使用这个方法
reject(err);// 失败时使用这个方法
});
//调用 promise 对象的 then 方法
p.then(function(value){
// then后面的第一个函数是成功的回调，第二个函数是失败时的回调
console.log(value);
}, function(reason){
console.error(reason);
})
// 程序发生错误的时候调用
p.catch(function(reason){
console.warn(reason);
});
モジュラー
モジュール化とは、大きなプログラム ファイルを多数の小さなファイルに分割し、それらの小さなファイルを結合することを指します。
利点：
- 名前の競合を防ぐ
- コードの再利用を改善する
- メンテナンス性が向上し、問題が発生した場合に対応するモジュールを調整するだけで済みます。
モジュラー関数は主に 2 つのコマンドで構成されます。
- モジュールの外部インターフェイスを指定するには、export コマンドを使用します。
- import コマンドは、他のモジュールによって提供される機能をインポートするために使用されます。
// 在m1.js中导出
// 分别暴露
export let school = '尚硅谷';
export function teach() {
console.log("我们可以教给你开发技能");
}
// 统一暴露
export {
school, teach};
// 默认暴露
export default {
school: 'ATGUIGU',
change: function(){
console.log("我们可以改变你!!");
}
}
// 在app.js中使用
import {
school, teach} from "./src/js/m1.js";
// 针对默认暴露可以这样写
import m1 from "./src/js/m1.js";
ES8
非同期で待機する
async と await の目的は、Promise での API の使用を簡素化することであり、2 つの構文を組み合わせることで、非同期コードを同期コードと同じにすることができます。コールバック地獄の問題
を解決する
非同期関数
async 関数の戻り値は Promise オブジェクトであり、
Promise オブジェクトの結果は、async 関数実行の戻り値によって決まります。
待機関数
- await は非同期関数で記述する必要があります
- await の右側の式は通常、Promise オブジェクトです。
- await は Promise 成功の値を返します
- await の Promise が失敗した場合、例外がスローされます。この例外は try...catch でキャプチャして処理する必要があります。
async function main() {
try {
let result = await p;
console.log(result);
} catch (e) {
console.log(e);
}
}
ES9
レスト/スプレッドのプロパティ
残存パラメータとスプレッド拡張演算子は ES6 で導入されましたが、ES6 は配列専用であり、
ES9 ではオブジェクトに対して配列のような残存パラメータと拡張演算子が提供されます。
function connect({
host, port, ...user}) {
console.log(host);
console.log(port);
console.log(user);// 可以直接将后三个参数封装到user中
}
connect({
host: '127.0.0.1',
port: 3306,
username: 'root',
password: 'root',
type: 'master'
});