ECMASriptIl s'agit d'un langage de programmation de script standardisé par Ecma International via ECMA-262. javaScript est également une implémentation de cette spécification.
Nouveau catalogue de fonctionnalités
Source des notes : station b
Tutoriel ES6 front-end Web de Shang Silicon Valley, couvrant ES6-ES11
M. Ruan Yifeng : Introduction à ECMAScript 6
ES6
laissez le mot-clé
Les caractéristiques des variables déclarées à l'aide du mot-clé let :
- Aucune répétition autorisée
- portée au niveau du bloc
- le levage variable n'existe pas
- n'affecte pas la chaîne de portée
mot-clé const
Le mot-clé const est utilisé pour déclarer des constantes. La déclaration const comprend les caractéristiques suivantes
- la déclaration doit attribuer une valeur initiale
- Les identifiants sont généralement en majuscules
- Déclaration en double non autorisée
- La valeur ne permet pas de modification
- portée du bloc
Mission Destructuration Variable
ES6 permet d'extraire des valeurs de tableaux et d'objets et d'attribuer des valeurs aux variables selon un certain modèle
//数组的解构赋值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr;
//对象的解构赋值
const lin = {
name: '林志颖',
tags: ['车手', '歌手', '小旋风', '演员']
};
let {
name, tags} = lin;
chaîne de modèle
La chaîne modèle (chaîne modèle) est une version améliorée de la chaîne, identifiée par des backticks (`), caractéristiques :
- Les caractères de nouvelle ligne peuvent apparaître dans la chaîne
- Les variables peuvent être sorties sous la forme de ${xxx}
// 定义字符串
let str = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`;
// 变量拼接
let star = '王宁';
let result = `${
star}在前几年离开了开心麻花`;
Écriture d'objet simplifiée
ES6 permet d'écrire des variables et des fonctions directement entre accolades en tant que propriétés et méthodes d'objets. Une telle
écriture est plus concise.
let name = '尚硅谷';
let slogon = '永远追求行业更高标准';
let improve = function () {
console.log('可以提高你的技能');
}
//属性和方法简写
let atguigu = {
name,// 属性名和变量名相同可以简写
slogon,// 属性名和变量名相同可以简写
improve,// 属性名和函数变量名相同可以简写
change() {
// change:function(){}的简写方式
console.log('可以改变你')
}
};
fonction flèche
ES6 permet l'utilisation de "flèches" (=>) pour définir des fonctions.
// 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();
}
};
La fonction flèche ne change pas le but, elle est donc très appropriée pour spécifier la fonction de rappel
paramètres de repos
ES6 introduit le paramètre rest, qui est utilisé pour obtenir les paramètres réels de la fonction et est utilisé à la place des arguments
// 类似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);
opérateur d'épandage
L'opérateur de spread (spread) est également trois points (…). C'est comme l'opération inverse du paramètre rest, convertissant un tableau en une séquence de paramètres séparés par des virgules et décompressant le tableau. Les objets peuvent également être étendus après 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};
Promesse
Les promesses sont une nouvelle solution à la programmation asynchrone introduite par ES6. Syntactiquement Promise est un constructeur
qui encapsule une opération asynchrone et peut obtenir son résultat de réussite ou d'échec.
//实例化 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);
});
Modulaire
La modularisation fait référence au fractionnement d'un gros fichier programme en plusieurs petits fichiers, puis à la combinaison de ces petits fichiers.
avantage:
- éviter les conflits de noms
- Améliorer la réutilisation du code
- Améliore la maintenabilité, il suffit d'ajuster le module correspondant en cas de problème
La fonction modulaire se compose principalement de deux commandes :
- La commande export permet de spécifier l'interface externe du module
- La commande import est utilisée pour importer des fonctionnalités fournies par d'autres modules
// 在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
asynchrone et attendre
Le but de async et wait est de simplifier l'utilisation de l'API dans Promesse. La combinaison des deux syntaxes peut rendre le code asynchrone identique au code synchrone.
Résoudre le problème de l'enfer des rappels
fonction asynchrone
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.
fonction d'attente
- wait doit être écrit dans une 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 par try...catch
async function main() {
try {
let result = await p;
console.log(result);
} catch (e) {
console.log(e);
}
}
ES9
Propriétés de repos/propagation
Les paramètres de repos et les opérateurs d'extension de propagation ont été introduits dans ES6, mais ES6 est uniquement destiné aux tableaux, et
ES9 fournit des paramètres de repos et des opérateurs d'extension de type tableau pour les objets.
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'
});