Classe avancée JavaScript ES6 → ES11
Vidéo de référence : Tutoriel ES6 front-end Web de Shang Silicon Valley, couvrant
le code de prise en charge ES6-ES11 : https://gitee.com/Augenstern-creator/kuang-study-es6
1. classe classe
- ES6 propose une méthode d'écriture plus proche des langages traditionnels et introduit le concept de classe comme modèle pour les objets.
- Les classes peuvent être définies via le mot-clé class.
- Fondamentalement, la classe ES6 peut être considérée comme un simple sucre syntaxique. La plupart de ses fonctions peuvent être réalisées par ES5. La nouvelle méthode d'écriture de classe ne fait que rendre l'écriture du prototype d'objet plus claire et plus similaire à la syntaxe de la programmation orientée objet.
Points de connaissances :
classdéclarer la classeconstructorDéfinir l'initialisation du constructeurextendsHériter de la classe parentsuperAppeler le constructeur parentstaticDéfinir des méthodes et des propriétés statiques- Les méthodes de la classe parent peuvent être remplacées
Regardons d'abord la syntaxe du constructeur ES5 pour instancier un objet comme suit :
//手机
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);
Examinons la syntaxe des objets instanciés ES6 comme suit :
//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. Membres statiques de la classe
staticL'attribut modifié appartient à la classe, pas à l'objet
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. Héritage de classe
- Dans ES5, les constructeurs sont utilisés pour implémenter l'héritage. Le code est le suivant
<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>
- Dans ES6, extends est utilisé pour implémenter l'héritage.Le Code est le suivant
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. Obtenir et définir les méthodes des classes
// 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. Développement numérique
2.1、Numéro.EPSILON
- Number.EPSILON est la précision minimale exprimée en JavaScript
Number.EPSILONLe calcul des nombres à virgule flottante est souvent imprécis.
// 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. Binaire et octal
ES6 propose de nouvelles façons d'écrire des valeurs binaires et octales, représentées respectivement par les préfixes 0bet .0o
//1. 二进制和八进制
let b = 0b1010;
let o = 0o777;
let d = 100; // 十进制
let x = 0xff; // 十六进制
console.log(x);
2.3、Number.isFinite
Number.isFiniteVérifier si un nombre est un nombre fini
console.log(Number.isFinite(100)); // true
console.log(Number.isFinite(100/0)); // false
console.log(Number.isFinite(Infinity)); // false
2.4、Number.isNaN
Number.isNaNVérifiez si une valeur est NaN
console.log(Number.isNaN(123)); // false
2.5、Number.parseInt、Number.parseFloat
Number.parseInt,Number.parseFloatchaîne en entier
console.log(Number.parseInt('5211314love')); // 5211314
console.log(Number.parseFloat('3.1415926神奇')); // 3.1415926
2.6、Number.isInteger
Number.isIntegerDéterminer si un nombre est un entier
console.log(Number.isInteger(5)); // true
console.log(Number.isInteger(2.5)); // false
2.7、Math.trunc
Math.truncEffacer la partie décimale du nombre
console.log(Math.trunc(3.5)); // 3
2.8、Math.sign
- Déterminer si un nombre est positif, négatif ou nul
console.log(Math.sign(100)); // 1代表整数
console.log(Math.sign(0)); // 0代表零
console.log(Math.sign(-20000)); // -1代表负数
3. Extension de la méthode objet
3.1、Object.js
- Object.is détermine si deux valeurs sont strictement égales, ce qui est
===fondamentalement cohérent avec le comportement
console.log(Object.is(120, 120));//true
console.log(Object.is(NaN, NaN));//true
console.log(NaN === NaN);//false
3.2、Object.assign
Object.assignFusion d'objets
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 etObject.getPrototypeOf
Object.setPrototypeOfDéfinir un objet prototypeObject.getPrototypeOfRécupérer l'objet prototype
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
includesLa méthode est utilisée pour détecter si un tableau contient un élément et renvoie une valeur booléenne.
// Array.prototype.includes: 检测数组中是否包含某个元素
const arr = [1,2,3,4,5];
console.log(arr.includes(1)); // true
console.log(arr.includes(6)); // false
4.2. Opérateur exponentiel
L'opérateur exponentiel a été introduit dans ES7 **, qui peut être utilisé pour implémenter des opérations d'exponentiation. La fonction est Math.powla même que le résultat.
console.log(2 ** 10); // 1024
console.log(Math.pow(2,10)); // 1024
5、ES8
5.1, asynchrone et attente
La combinaison de la syntaxe async et wait peut faire en sorte que le code asynchrone se comporte comme du code synchrone
async：
- La valeur de retour de la fonction asynchrone est un objet de promesse
- Le résultat de l'objet de promesse est déterminé par la valeur de retour de l'exécution de la fonction asynchrone
// 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:
- wait doit être écrit en fonction asynchrone
- L'expression à droite de wait est généralement un objet de promesse
- wait renvoie la valeur du succès de la promesse
- Si la promesse de wait échoue, une exception sera levée, qui devra être capturée et traitée via 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 et Object.entries
Object.keys()La méthode renvoie toutes les clés de l'objetObject.values()La méthode renvoie toutes les valeurs de l'objetObject.entries()la méthode renvoie
// 声明对象
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: Cette méthode renvoie un objet de description de toutes ses propres propriétés de l'objet spécifié.
// 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. Attributs Rest/Spread
Les paramètres de repos et les opérateurs d'expansion Spread ont été introduits dans ES6, mais ES6 ne cible que les tableaux. Dans ES9, les paramètres de repos et les opérateurs de propagation comme les tableaux sont fournis pour les objets.
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():Convertir un objet en tableau bidimensionnel
// 先回顾一下 ES8 的 `Object.entries` 可以将一个对象转化为二维数组
let people = {
'name': '贺欣',
'age': 20
}
// 将 people 对象转化为二维数组
const arr = Object.entries(people);
console.log(arr); // [ [ 'name', '贺欣' ], [ 'age', 20 ] ]
Object.fromEntries(): Convertir un tableau bidimensionnel en objet- Le paramètre est un tableau à deux dimensions ou un objet cartographique
// 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, trimStart et trimEnd
-
trim: Effacer les caractères d'espacement des deux côtés -
trimStart: Effacer les caractères vides laissés -
trimEnd: Efface les caractères vides à droite
let str = ' iloveyou ';
console.log(str);
// 清除左侧空白
console.log(str.trimStart());
// 清除右侧空白
console.log(str.trimEnd());
7.3, plat et flatMap
flat(): Convertir un tableau multidimensionnel en un tableau de faible dimension- Le paramètre est la profondeur
// 二维数组
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.prototype.description
- Renvoie la description de chaîne du symbole
// 创建Symbol
let s = Symbol('小林');
console.log(s.description); // 小林
8、ES11
8.1. Attributs privés
#: propriété privée
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()Peut être utilisé pour exécuter des opérations asynchrones indépendantes en parallèle et collecter les résultats de ces opérations asynchrones.La fonction accepte un promisetableau comme paramètre.
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 ne sera jamais rejeté
Même si nous changeons l'un des statuts de la promesse en échec, il allSettledsera toujours dans un statut réussi après l'appel.
8.3. Importation dynamique
L'importation dynamique est une nouvelle fonctionnalité de syntaxe de JavaScript ES2019, qui permet d'obtenir une méthode de chargement plus efficace en important du code à la demande . L'importation dynamique permet aux utilisateurs de charger dynamiquement des modules au moment de l'exécution, ce qui n'est pas possible avec l'importation statique dans ES6.
Grâce à l'importation dynamique, nous pouvons charger les modules requis uniquement lorsque le code est en cours d'exécution , au lieu de charger tous les modules en même temps. De cette façon, nous pouvons éviter le problème de chargement lent des pages causé par une page trop volumineuse. Dans les applications pratiques, nous pouvons importer dynamiquement comme suit :
import(模块路径).then((模块) => {
// 使用导入的模块
}).catch((error) => {
// 捕获错误
});
8.4.Type 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. Objet global absolu globalThis
- JavaScript peut être exécuté dans différents environnements, les plus courants incluent les navigateurs, Web Workers, Node, Deno, etc.
- Dans différents environnements, les méthodes d'accès aux variables globales sont différentes.
- Par exemple, sur le navigateur, il existe des méthodes telles que window, self, frames, etc.
/* 浏览器环境 */
window === self // true
window === frames // true
// 最顶层的窗口
window === parent // true
window === window.top // true
window.msg = 'hello,world' // ok
console.log(msg). // hello,world
Le même code signalera une erreur lors de son exécution dans un environnement Web Worker ou un environnement 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
globalThisFournit une solution unifiée pour accéder aux variables globales. Par exemple, dans un environnement de navigateur, il pointera vers window et dans un environnement Node, il pointera vers global.
/* 在绝大多数 JavaScript 运行环境下都能运行 */
globalThis.msg = 'hello,world'
console.log(msg);