JavaScript上級クラス ES6→ES11 (9)

参考ビデオ: Shang Silicon Valley Web フロントエンド ES6 チュートリアル、ES6 ～ ES11
サポート コードをカバー: https://gitee.com/Augenstern-creator/kuang-study-es6

1.クラスクラス

• ES6 は、従来の言語に近い記述方法を提供し、オブジェクトのテンプレートとしてクラスの概念を導入します。
• クラスは class キーワードを通じて定義できます。
• 基本的に、ES6 クラスは単なる構文糖とみなされます。その機能のほとんどは ES5 で実現できます。新しいクラスの記述方法は、オブジェクト プロトタイプの記述をより明確にし、オブジェクト指向プログラミングの構文に近づけるだけです。

知識ポイント:

• classクラスを宣言する
• constructorコンストラクターの初期化を定義する
• extends親クラスから継承
• super親コンストラクターを呼び出す
• static静的メソッドとプロパティを定義する
• 親クラスのメソッドはオーバーライド可能

まず、次のようにオブジェクトをインスタンス化するための ES5 コンストラクターの構文を見てみましょう。

//手机
function Phone(brand, price){
    
    
    this.brand = brand;
    this.price = price;
}

//添加方法
Phone.prototype.call = function(){
    
    
    console.log("我可以打电话!!");
}

//实例化对象
let Huawei = new Phone('华为', 5999);
Huawei.call();		// 调用 call 方法
console.log(Huawei);

ES6 でインスタンス化されたオブジェクトの構文を次のように見てみましょう。

//class
class Shouji{
    
    
    //构造方法 名字不能修改
    constructor(brand, price){
    
    
        this.brand = brand;
        this.price = price;
    }

    //添加方法必须使用该语法, 不能使用 ES5 的对象完整形式
    call(){
    
    
        console.log("我可以打电话!!");
    }
}

let onePlus = new Shouji("小米", 1999);

console.log(onePlus);

1.1. クラスの静的メンバー

• static変更された属性はオブジェクトではなくクラスに属します

class Phone{
    
    
    //静态属性
    static name = '手机';
    //静态方法
    static change(){
    
    
        console.log("我可以改变世界");
    }
}

let xiaomi = new Phone();
console.log(xiaomi.name);		// undefined
console.log(Phone.name);		// 手机
console.log(Phone.change());    // 我可以改变世界

1.2. クラスの継承

• ES5 では、コンストラクターを使用して継承を実装します。コードは次のとおりです。

<script>
    //手机
    function Phone(brand, price){
      
      
        this.brand = brand;
        this.price = price;
    }

    Phone.prototype.call = function(){
      
      
        console.log("我可以打电话");
    }

    //智能手机
    function SmartPhone(brand, price, color, size){
      
      
        Phone.call(this, brand, price);
        this.color = color;
        this.size = size;
    }

    //设置子级构造函数的原型
    SmartPhone.prototype = new Phone;
    SmartPhone.prototype.constructor = SmartPhone;

    //声明子类的方法
    SmartPhone.prototype.photo = function(){
      
      
        console.log("我可以拍照")
    }

    SmartPhone.prototype.playGame = function(){
      
      
        console.log("我可以玩游戏");
    }

    const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');

    console.log(chuizi);

</script>

• ES6 では、 extends を使用して継承を実装します。コードは次のとおりです。

class Phone{
    
    
    //构造方法
    constructor(brand, price){
    
    
        this.brand = brand;
        this.price = price;
    }
    //父类的成员属性
    call(){
    
    
        console.log("我可以打电话!!");
    }
}

// 子类智能手机继承父类
class SmartPhone extends Phone {
    
    
    //构造方法
    constructor(brand, price, color, size){
    
    
        super(brand, price);// 相当于调用父类的构造方法:Phone.call(this, brand, price)
        this.color = color;
        this.size = size;
    }

    photo(){
    
    
        console.log("拍照");
    }

    playGame(){
    
    
        console.log("玩游戏");
    }

    // 子类重写父类方法
    call(){
    
    
        console.log('我可以进行视频通话');
    }
}

const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
// console.log(xiaomi);
xiaomi.call();				// 	我可以进行视频通话
xiaomi.photo();				//  拍照
xiaomi.playGame();			//  玩游戏

1.3. クラスのメソッドの取得と設定

// get 和 set
class Phone {
    
    
    // 当访问price属性时候调用 get 函数
    get price() {
    
    
        console.log("价格属性被读取了");
        return 'iloveyou';
    }

    // 当对 price 进行赋值时候会调用 set函数
    set price(newVal) {
    
    
        console.log('价格属性被修改了');
    }
}

//实例化对象
let s = new Phone();
s.price; // 价格属性被读取了
s.price = 'free'; // 价格属性被修改了

2. 数値展開

2.1、数値.EPSILON

• Number.EPSILON は JavaScript で表現される最小精度です。
• 浮動小数点数の計算は多くの場合不正確ですNumber.EPSILON。

// Number.EPSILON 进行浮点数的计算
function equal(a, b) {
    
    
    if (Math.abs(a - b) < Number.EPSILON) {
    
    
        return true;
    } else {
    
    
        return false;
    }
}
console.log(0.1 + 0.2 === 0.3);             // false
console.log(equal(0.1 + 0.2, 0.3))          // true

2.2. 2進数と8進数

0bES6 は、それぞれ接頭辞とで0o表される、バイナリ値と 8 進値を記述する新しい方法を提供します。

//1. 二进制和八进制
let b = 0b1010;
let o = 0o777;
let d = 100;				// 十进制
let x = 0xff;				// 十六进制
console.log(x);

2.3、数値は有限である

• Number.isFinite数値が有限数かどうかを確認する

console.log(Number.isFinite(100));			// true
console.log(Number.isFinite(100/0));		// false
console.log(Number.isFinite(Infinity));		// false

2.4、Number.isNaN

• Number.isNaN値が NaN かどうかを確認する

console.log(Number.isNaN(123));   // false

2.5、Number.parseInt、Number.parseFloat

• Number.parseInt、Number.parseFloat文字列を整数に変換

console.log(Number.parseInt('5211314love'));			// 5211314
console.log(Number.parseFloat('3.1415926神奇'));		   // 3.1415926

2.6、Number.isInteger

• Number.isInteger数値が整数かどうかを判断する

console.log(Number.isInteger(5));					// true
console.log(Number.isInteger(2.5));					// false

2.7、Math.trunc

• Math.trunc数値の小数部分を消去します

console.log(Math.trunc(3.5));				// 3

2.8、数学記号

• 数値が正、負、またはゼロであるかどうかを判断する

console.log(Math.sign(100));				// 1代表整数
console.log(Math.sign(0));					// 0代表零
console.log(Math.sign(-20000));				// -1代表负数

3. オブジェクトメソッドの拡張

3.1、Object.js

• Object.is は 2 つの値が厳密に等しいかどうかを判断します。これは===基本的に動作と一致します。

console.log(Object.is(120, 120));//true
console.log(Object.is(NaN, NaN));//true
console.log(NaN === NaN);//false 

3.2、オブジェクトの割り当て

• Object.assignオブジェクトの結合

const config1 = {
    
    
    host: 'localhost',
    port: 3306,
    name: 'root',
    pass: 'root',
    test: 'test'
};
const config2 = {
    
    
    host: 'http://atguigu.com',
    port: 33060,
    name: 'atguigu.com',
    pass: 'iloveyou',
    test2: 'test2'
}
// config2 对象覆盖 config1 对象,相同属性覆盖,不同属性合并
console.log(Object.assign(config1, config2));

3.3、Object.setPrototypeOf と Object.getPrototypeOf

• Object.setPrototypeOfプロトタイプオブジェクトの設定
• Object.getPrototypeOf プロトタイプオブジェクトを取得する

const school = {
    
    
    name: '尚硅谷'
}
const cities = {
    
    
    xiaoqu: ['北京','上海','深圳']
}
// 设置给 school 原型对象加上 cities
Object.setPrototypeOf(school, cities);
// 获取 school 的原型对象
console.log(Object.getPrototypeOf(school));
console.log(school);

4、ES7

4.1、Array.prototype.includes

• includesこのメソッドは、配列に要素が含まれているかどうかを検出し、ブール値を返すために使用されます。

// Array.prototype.includes: 检测数组中是否包含某个元素
const arr = [1,2,3,4,5];
console.log(arr.includes(1)); // true
console.log(arr.includes(6)); // false

4.2. 指数演算子

指数演算子は ES7 で導入され**、べき乗演算の実装に使用でき、関数はMath.pow結果と同じです。

console.log(2 ** 10); // 1024
console.log(Math.pow(2,10)); // 1024

5、ES8

5.1、非同期と待機

async 構文と await 構文を組み合わせると、非同期コードを同期コードのように動作させることができます

async：

• async関数の戻り値はpromiseオブジェクトです
• Promise オブジェクトの結果は、async 関数実行の戻り値によって決まります。

// async 使得异步操作更加方便,在方法前面加上 async 关键字
// async 会返回一个 Promise 对象
async function f1(){
    
    
    // 返回字符串,只要返回的不是 Promise 类型,则这个结果就是一个成功状态的 Promise 对象
    return  '林晓';
}

async function f2(){
    
    
    // 返回的若是成功状态的 Promise 类型,则 result2 就是一个成功状态的 Promise 对象
    return new Promise((resolve,reject) => {
    
    
        resolve('成功');
    })
}

// result1 是一个 Promise 对象
const result1 = f1();
const result2 = f2();

await:

• await は async 関数で記述する必要があります
• await の右側の式は通常、Promise オブジェクトです。
• await は Promise 成功の値を返します
• await の Promise が失敗した場合、例外がスローされます。例外は try...catch を通じてキャプチャして処理する必要があります。

// 一般 async 函数返回的都是 Promise 对象,所以我们这里创建Promise对象
const p = new Promise(((resolve, reject) => {
    
    
    resolve("成功状态");
}));
// await 要放在 async 函数中
async function  main(){
    
    
    // await返回的是 promise成功的值
    let result = await p;
    console.log(result); // 成功状态
}
// 调用函数
main();

5.2、Object.values と Object.entries

• Object.keys()メソッドはオブジェクトのすべてのキーを返します
• Object.values()メソッドはオブジェクトのすべての値を返します
• Object.entries()メソッドの戻り値

// 声明对象
const school = {
    
    
    name: "尚硅谷",
    cities: ['北京','上海','深圳'],
}

// 获取对象所有的键
console.log(Object.keys(school)); // [ 'name', 'cities' ]
// 获取对象所有的值
console.log(Object.values(school)); // [ '尚硅谷', [ '北京', '上海', '深圳' ] ]
// entries 获取对象所有的键和值,是一个数组
console.log(Object.entries(school)); // [ [ 'name', '尚硅谷' ], [ 'cities', [ '北京', '上海', '深圳' ] ] ]

// 创建Map,我们可以把 entries 获取的数组放入 Map 中
const m = new Map(Object.entries(school));
console.log(m.get('cities')); // [ '北京', '上海', '深圳' ]

5.3、Object.getOwnPropertyDescriptors

• Object.getOwnPropertyDescriptors: このメソッドは、指定されたオブジェクトのすべての独自のプロパティの説明オブジェクトを返します。

// Object.getOwnPropertyDescriptors 返回对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school));
/**
 *
 * {
      name: {
        value: '尚硅谷',
        writable: true,
        enumerable: true,
        configurable: true
      },
      cities: {
        value: [ '北京', '上海', '深圳' ],
        writable: true,
        enumerable: true,
        configurable: true
      }
    }
 */

6、ES9

6.1. レスト/スプレッド属性

ES6 では残存パラメータとスプレッド展開演算子が導入されましたが、ES6 では配列のみが対象でしたが、ES9 ではオブジェクトに対しても配列と同様に残存パラメータとスプレッド展開演算子が提供されます。

function connect({
     
     host,port,...user}){
    
    
    console.log(host); //127.0.0.1
    console.log(port); //3306
    console.log(user); //{ username: 'root', password: 'root', type: 'master' }
}

connect({
    
    
    host: '127.0.0.1',
    port: 3306,
    username: 'root',
    password: 'root',
    type: 'master'
});

7、ES10

7.1、Object.fromEntries

• Object.entries():オブジェクトを2次元配列に変換します

// 先回顾一下 ES8 的 `Object.entries` 可以将一个对象转化为二维数组
let people = {
    
    
    'name': '贺欣',
    'age': 20
}
// 将 people 对象转化为二维数组
const arr = Object.entries(people);
console.log(arr); // [ [ 'name', '贺欣' ], [ 'age', 20 ] ]

• Object.fromEntries(): 2次元配列をオブジェクトに変換します
  • パラメータは 2 次元配列またはマップ オブジェクトです

// Map
const m = new Map();
m.set('name','林晓');
m.set('age',20);
// ES10 中的 Object.fromEntries 可以将二维数组转化为对象
const result = Object.fromEntries(m);
console.log(result);
// { name: '林晓', age: 20 }

7.2、トリムスタートとトリムエンド

• trim: 両側の空白文字を消去します。

• trimStart: 左側の空白文字を消去します

• trimEnd：右側の空白文字を消去します。

let str = '    iloveyou   ';

console.log(str);
// 清除左侧空白
console.log(str.trimStart());
// 清除右侧空白
console.log(str.trimEnd());

7.3、フラットおよびフラットマップ

• flat(): 多次元配列を低次元配列に変換します
  • パラメータは深さです

// 二维数组
const arr = [1,2,3,4,[5,6]];
// 将二维数组转化为一维数组
console.log(arr.flat(1)); //[ 1, 2, 3, 4, 5, 6 ]

// 三维数组
const arr1 = [1,2,3,4,[5,6,[7,8,9]]];
// 将三维数组转化为二维数组
console.log(arr1.flat(1)); // [ 1, 2, 3, 4, 5, 6, [ 7, 8, 9 ] ]
// 将三维数组转化为一维数组
console.log(arr1.flat(2)); // [1,2,3,4,5,6,7,8,9]

7.4、シンボル.プロトタイプ.説明

• シンボルの文字列説明を返します。

// 创建Symbol
let s = Symbol('小林');
console.log(s.description); // 小林

8、ES11

8.1. プライベート属性

• #： 私有財産

class Person{
    
    
  // 公有属性
  name;
  // 私有属性
  #age;
  #weight;
  // 构造方法
  constructor(name,age,weight) {
    
    
    this.name = name;
    this.#age = age;
    this.#weight = weight;
  }

  // 对外暴露私有属性
  introduce(){
    
    
    console.log(this.name);
    console.log(this.#age);
    console.log(this.#weight);
}
}

// 实例化
const girl = new Person("小红",18,"45Kg");
console.log(girl.name);
//console.log(girl.#age); // 报错,私有成员不可访问
//console.log(girl.#weight); // 报错,私有成员不可访问
girl.introduce(); // 私有属性只有在类内部写有方法来调用

8.2、Promise.allSettled()

Promise.allSettled()独立した非同期操作を並行して実行し、これらの非同期操作の結果を収集するために使用できます。この関数はpromiseパラメーターとして配列を受け入れます。

const p1 = new Promise((resolve,reject) => {
    
    
  setTimeout(() => {
    
    
    resolve('商品数据 - 1')
  },1000)
});

const p2 = new Promise((resolve,reject) => {
    
    
  setTimeout(() => {
    
    
    resolve('商品数据 - 2')
  },1000)
});

// 调用 allSettled() 方法
const result = Promise.allSettled([p1,p2]);
console.log(result);

Promise.allSettled が拒否されることはありません

Promise ステータスの 1 つを失敗に変更しても、allSettled呼び出し後は成功ステータスのままになります。

8.3. 動的インポート

動的インポートはJavaScript ES2019 の新しい構文機能であり、オンデマンドでコードをインポートすることでより効率的な読み込み方法を実現できます。動的インポートを使用すると、ユーザーは実行時にモジュールを動的にロードできますが、これは ES6 の静的インポートでは不可能です。

動的インポートを使用すると、すべてのモジュールを一度にロードするのではなく、コードの実行中にのみ必要なモジュールをロードできるため、ページが大きすぎることによって引き起こされるページのロードが遅いという問題を回避できます。実際のアプリケーションでは、次のように動的にインポートできます。

import(模块路径).then((模块) => {
    
    
    // 使用导入的模块
}).catch((error) => {
    
    
    // 捕获错误
});

8.4. BigInt型

//大整形
let n = 521n;
console.log(n,typeof(n)); // 521n bigint

// BigInt()函数:将普通整型转化为大整型
let n1 = 123;
console.log(BigInt(n));

// 主要用于大数值运算
let max = Number.MAX_SAFE_INTEGER;
console.log(BigInt(max) + BigInt(3)); // 9007199254740994n

8.5. 絶対グローバルオブジェクト globalThis

• JavaScript はさまざまな環境で実行できます。一般的な環境には、ブラウザ、Web ワーカー、Node、Deno などが含まれます。
• 環境が異なれば、グローバル変数にアクセスする方法も異なります。
• 例えばブラウザ上では、window、self、framesなどのメソッドがあります。

/* 浏览器环境 */
window === self       // true
window === frames     // true

// 最顶层的窗口
window === parent     // true
window === window.top // true

window.msg = 'hello,world' // ok
console.log(msg).          // hello,world

同じコードを Web Worker 環境または Node 環境で実行すると、エラーが報告されます。

/* Node */
window.msg = 'hello,world' // Uncaught ReferenceError: window is not defined
console.log(msg)           // Uncaught ReferenceError: msg is not defined

global.msg = 'hello,world' // ok
console.log(msg)           // hello,world

globalThisグローバル変数にアクセスするための統合ソリューションを提供します。たとえば、ブラウザ環境ではウィンドウを指し、ノード環境ではグローバルを指します。

/* 在绝大多数 JavaScript 运行环境下都能运行 */
globalThis.msg = 'hello,world'
console.log(msg);