1. À propos de la valeur
const obj = {
a:1,
b:2,
c:3,
d:4,
e:5,
}
const a = obj.a;
const b = obj.b;
const c = obj.c;
const d = obj.d;
const e = obj.e;
Mission de déstructuration es6 :
const {a,b,c,d,e} = obj;
Vous pouvez également utiliser : pour renommer
const {a:a1} = obj;
console.log(a1)
Deuxièmement, la combinaison d'un tableau et d'un objet
const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]
const obj1 = {
a:1,
}
const obj2 = {
b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}
L'opérateur d'expansion d'es6, la combinaison et la déduplication des tableaux
const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]
const obj1 = {
a:1,
}
const obj2 = {
b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}
3. Épissage des cordes
const name = '小明';
const score = 59;
let result = '';
if(score > 60){
result = `${name}的考试成绩及格`;
}else{
result = `${name}的考试成绩不及格`;
}
chaîne de modèle es6
${}
Des expressions JavaScript arbitraires peuvent y être placées, des opérations peuvent être effectuées et les propriétés des objets peuvent être référencées .
const name = '小明';
const score = 59;
const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;
Quatrièmement, il existe de nombreuses conditions si
if(
type == 1 ||
type == 2 ||
type == 3 ||
type == 4 ||
){
//...
}
La méthode du tableau es6 comprend
const condition = [1,2,3,4];
if( condition.includes(type) ){
//...
}
5. Recherche précise
const a = [1,2,3,4,5];
const result = a.filter(
item =>{
return item === 3
}
)
La méthode de recherche de tableau es6 est optimisée pour les performances. Si find
un élément répondant aux conditions est trouvé dans la méthode, il ne continuera pas à parcourir le tableau.
const a = [1,2,3,4,5];
const result = a.find(
item =>{
return item === 3
}
)
Sixièmement, obtenez la valeur de l'attribut de l'objet
const name = obj && obj.name;
chaînage es6 en option ?
const name = obj?.name;
Chaînage optionnel ? Remplir:
Il déterminera que obj n'est ni nul ni indéfini avant d'essayer d'accéder à obj.name. Si obj est nul ou indéfini, l'expression effectuera un calcul de court-circuit et renverra directement undéfini.
Sept, la zone de saisie n'est pas un jugement vide
if(value !== null && value !== undefined && value !== ''){
//...
}
opérateur de coalescence vide es6 ??
if((value??'') !== ''){
//...
}
Opérateur de fusion de postes vacants es6 ? Supplément :
Lorsque la première valeur est nulle ou indéfinie, l'expression renvoie la dernière valeur
const a = 0 ?? '默认值a';
cosnt b = null ?? '默认值b';
console.log(a); // "0" 0是假值,但不是 null 或者 undefined
console.log(b); // "默认值b"
développer:
Pour attribuer une valeur par défaut à une variable, l'opérateur logique OU || est généralement utilisé. Mais comme ||
il s'agit d'un opérateur logique booléen, l'opérande de gauche sera contraint à une valeur booléenne pour évaluation. Toutes les fausses valeurs ( 0
, ''
, NaN
, null
, undefined
) ne seront pas renvoyées. Cela conduit à des résultats imprévisibles si vous utilisez 0
, ''
ou comme valeur valide. NaN
C'est aussi l'opérateur ?? qui peut résoudre ce problème
const a = 0;
const b = a || 5
//当0作为有效值,与我们期望的 b 的值不一致
console.log(b); // 5
8. Rappel de fonction asynchrone
const fn1 = () =>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
}, 300);
});
}
const fn2 = () =>{
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2);
}, 600);
});
}
const fn = () =>{
fn1().then(res1 =>{
console.log(res1);// 1
fn2().then(res2 =>{
console.log(res2)
})
})
}
asynchrone et attente d'es6
const fn = async () =>{
const res1 = await fn1();
const res2 = await fn2();
console.log(res1);// 1
console.log(res2);// 2
}
Neuf paramètres par défaut de la fonction
function fn (name, age) {
let name = name || 'hsq'
let age = age || 22
console.log(name, age)
}
fn() // hsq 22
paramètres par défaut de la fonction es6
function fn (name = 'hsq', age = 22) {
console.log(name, age)
}
fn() // hsq 22
fn('test', 23) // test 23
10. Paramètres restants
Pour une fonction, le nombre de paramètres entrants est incertain, les paramètres restants de ES6 peuvent donc être utilisés
function fn (name, ...params) {
console.log(name)
console.log(params)
}
fn ('hsq', 1, 2) // hsq [ 1, 2 ]
fn ('hsq', 1, 2, 3, 4, 5) // hsq [ 1, 2, 3, 4, 5 ]
11. Fonctions fléchées
Fonction ordinaire
function fn () {}
const fn = function () {}
fonction de flèche es6
const fn = () => {}
// 如果只有一个参数,可以省略括号
const fn = name => {}
// 如果函数体里只有一句return
const fn = name => {
return 2 * name
}
// 可简写为
const fn = name => 2 * name
// 如果返回的是对象
const fn = name => ({ name: name })
La différence entre les fonctions ordinaires et les fonctions fléchées :
- 1. Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs et new ne peut pas être utilisé
- 2. La fonction flèche n'a pas d'objet prototype
- 3. Les fonctions fléchées n'ont pas leur propre ceci
- 4. La fonction flèche n'a pas d'objet arguments
12. Obtenez la valeur clé de l'objet
Objet.clés
Une collection de clés qui peuvent être utilisées pour obtenir des objets
const obj = {
name: 'hsq',
age: 22,
gender: '男'
}
const values = Object.keys(obj)
console.log(values) // [ 'hsq', 22, '男' ]
Objet.valeurs
Une collection de valeurs qui peuvent être utilisées pour obtenir des objets
const obj = {
name: 'hsq',
age: 22,
gender: '男'
}
const values = Object.values(obj)
console.log(values) // [ 'hsq', 22, '男' ]
Objet.entrées
Une collection de paires clé-valeur qui peuvent être utilisées pour obtenir un objet
const obj = {
name: 'hsq',
age: 22,
gender: '男'
}
const entries = Object.entries(obj)
console.log(entries)
// [ [ 'name', 'hsq' ], [ 'age', 22 ], [ 'gender', '男' ] ]
13. Aplatissement du tableau
Tableau.plat
J'ai un tableau à deux dimensions et je souhaite le convertir en un tableau à une dimension :
const arr = [1, 2, 3, [4, 5, 6]]
console.log(arr.flat()) // [ 1, 2, 3, 4, 5, 6 ]
Vous pouvez également passer des paramètres, le paramètre est le nombre de réduction de dimensionnalité
const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]]]
console.log(arr.flat(2))
[
1, 2, 3, 4, 5,
6, 7, 8, 9
]
Si un nombre infini est transmis, alors le tableau multidimensionnel (quel que soit le nombre de dimensions) est réduit à un tableau unidimensionnel.
const arr = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]]
console.log(arr.flat(Infinity))
[
1, 2, 3, 4, 5,
6, 7, 8, 9, 10,
11, 12
]