Cet article vous apprendra comment utiliser l'ES6 le plus couramment utilisé

Cet article vous parlera d'ES6 et vous aidera à maîtriser l'ES6 le plus couramment utilisé en 30 minutes. Attendez-vous d'être tué si vous ne l'apprenez pas encore ?

1. À propos d'ES6

La meilleure façon de comprendre une technologie ou un langage est de savoir ce qu'elle peut faire

ES6, qui est standardisé au niveau international par l'organisation ECMA, une spécification standardisée pour les langages de script ES6 ， 它是由 ECMA 国际标准化组织，制定的一项脚本语言的标准化规范

那么它为什么会出现呢？

每一次标准的诞生都意味着语言的完善，功能的加强；也就是说随着时代的发展，JavaScript 语言的某些弊端已经不满足企业和开发者的需求了。【相关推荐：javascript学习教程】

比如：

• 变量提升特性增加了程序运行时的不可预测性
• 语法过于松散

而 ES6 新标准的目的是：

使得JS可以用来开发大型的Web应用，成为企业级开发语言

而企业级开发语言就是：适合模块化开发，拥有良好的依赖管理

那么接下来，我们就来花少量时间，学习开发常用和面试热门的 ES6 吧 ?

二. ES6 模板字符串

在没有模板字符串前，我们拼接字符串变量一般会这样

let a = '小明'

let b = '?'

let c = a + '爱吃' + b    // 小明爱吃?

而现在我们多了 ES6 提供的 模板字符串的方法

let a = '小明'

let b = '?'

let c = ` ${a} 爱吃 ${b}`    // 小明爱吃?

三. ES6 判断字符串里是否包含某些值

开发中最常用的，就不做过多说明了，把常用的方法通通列举出来，同学们自取

1. indexOf()

方法可返回某个指定的字符串值在字符串中首次出现的位置

如果要检索的字符串值没有出现，则该方法返回 -1

let str = '?????'

console.log( str.indexOf('?') != -1 );   // false

2. includes()

返回布尔值，表示是否找到了参数字符串

let str = '?????'

str.includes('?') ? console.log( true ) : console.log( false )    // true

3. startsWith()

用来判断当前字符串是否是以另外一个给定的值开头的，根据判断结果返回 true 或 false

参数：

str.startsWith( searchString , [position])

searchString : 要搜索的值

position: 在 str 中搜索 searchString 的开始位置，默认值为 0


例子：

let str = "前端,熊猫开发团队"; 

console.log( str.startsWith("前端") );              // true 
console.log( str.startsWith("熊猫开发团队") );      // false 
console.log( str.startsWith("熊猫开发团队", 3) );   // true

4. endsWith()

用于判断字符串是否以给定的值结尾，根据判断结果返回 true 或 false

let str = "熊猫开发团队"; 

console.log( str.endsWith("队") );              // true

四. ES6 箭头函数

箭头函数的出现简化了函数的定义，让代码更简洁，省去关键字 function

但是也要注意箭头函数的局限性，以及箭头函数中自身没有 this，this 指向父级

弊端：

• 箭头函数没有原型 prototype，因此箭头函数没有 this 指向

• 箭头函数不会创建自己的 this，如果存在外层第一个普通函数，在定义的时候会继承它的 this

• 箭头函数外层没有函数，严格模式和非严格模式下它的 this 都会指向 window 全局对象

基本写法：

//没有参数，写空括号
let getTitle = () => {
    return '熊猫开发团队'
};

//只有一个参数，可以省去参数括号
let getTitle = title => {
    return title
};

//如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中
let getTitle = (val1, val2, val3, val4) => {
    return [val1, val2, val3, val4];
}

五. ES6 对象表达式

如果对象属性和值一样，那么复用时可以省略写值

let a = '?';
let b = '?';

const obj1 = {
    a: a,
    b: b,
}

const obj2 = {
    a,
    b,
}

六. ES6 is 判断两个值是否相等

除了最常用的 === 和 ==  用来比较两个值的结果， ES6 又出了新的啦

Object.is(val1,val2)

console.log( Object.is(88, 88) )                // true
console.log( Object.is('熊猫', '?') )         // false

七. ES6 Object.assign() 复制对象

let obj = {};

Object.assign( obj, { name: '熊猫' } );

console.log( obj )    // { name: '熊猫' }

八. ES6 块级作用域

首先要搞清楚什么是作用域？

作用域就是一个变量可以使用的范围

在没有 ES6 的 let 之前 ，只有 var 的 全局作用域 和 函数作用域

而块级作用域的意思其实就是一个 {} (代码块)，变量只在 {}

Alors pourquoi est-elle apparue ?

La naissance de tout standard signifie l'amélioration du langage et l'enrichissement des fonctionnalités ; c'est-à-dire qu'avec l'évolution des temps, certains inconvénients du langage JavaScript ne répondent plus aux besoins des entreprises et des développeurs. [Recommandations associées : tutoriel d'apprentissage Javascript]

Par exemple :

La fonctionnalité de promotion des variables augmente l'imprévisibilité de l'exécution du programme
• La syntaxe est trop lâche

Et le but du nouveau standard de ES6 est :

Permet à JS d'être utilisé pour développer des applications Web à grande échelle et devient un langage de développement au niveau de l'entrepriseLe langage de développement au niveau de l'entreprise est : adapté au développement modulaire et a une bonne gestion des dépendances

Donc Ensuite, passons quelques temps, apprenons à développer ES6 qui est couramment utilisé et populaire dans les interviews, n'est-ce pas ?

2 Chaîne de modèle ES6

Avant, il y avait une chaîne de modèle, nous avons habituellement épissé des variables de chaîne comme celle-ci

{
  let a = '?️?️';
  var b = '1️⃣2️⃣';
  
  console.log( a )   a // '?️?️'
}

console.log( a )   a // ReferenceError: a is not defined.
console.log( b )   b // '1️⃣2️⃣'

Nous avons maintenant plus de méthodes de chaîne de modèle fournies par 🎜ES6🎜🎜

let arr = ['?','?','?']

console.log( arr[0], arr[1], arr[2] );   // '?','?','?'


let [a, b, c] = arr;

console.log( a, b, c );    // '?','?','?'

🎜🎜🎜3 ES6 détermine si une chaîne contient certaines valeurs🎜🎜🎜🎜La méthode la plus couramment utilisée en développement. , Je ne vais pas trop l'expliquer, énumérer toutes les méthodes couramment utilisées, les étudiants peuvent choisir eux-mêmes🎜🎜🎜1 La méthode indexOf()🎜🎜🎜 peut renvoyer la position où une valeur de chaîne spécifiée apparaît pour la première fois dans la chaîne🎜🎜. Si vous souhaitez récupérer la chaîne. Si la valeur n'apparaît pas, la méthode renvoie -1🎜

let obj = { a: '?', b: '?', c: '?' }

let { a: a,  b: b,  c: c } = obj;

console.log( a, b, c );  // '?', '?', '?'

🎜🎜2. include()🎜🎜🎜 renvoie une valeur booléenne, indiquant si la chaîne de paramètre est trouvée🎜

let arr = ['☠️', '?', '?'];

console.log(...arr)    // ☠️ ? ?


let obj1 = { name:'熊猫' , job:'前端'}

let obj2 = { hobby:'掘金', ...obj1 }

console.log( ...obj2 )    // { hobby:'掘金', name:'熊猫' , job:'前端'}

🎜🎜3. ()🎜🎜🎜 est utilisé pour déterminer le caractère actuel. Si la chaîne commence par une autre valeur donnée, renvoie vrai ou faux selon le résultat du jugement🎜rrreee🎜🎜4 endWith()🎜🎜🎜 est utilisé pour juger si la chaîne se termine. avec une valeur donnée, renvoie vrai en fonction du résultat du jugement ou faux🎜rrreee🎜🎜🎜4 Fonction de flèche ES6🎜🎜🎜🎜L'émergence des fonctions de flèche simplifie la définition des fonctions, rendant le code plus concis, éliminant le besoin de mots-clés. 🎜fonction🎜🎜🎜Mais il faut aussi faire attention aux limitations des fonctions fléchées, Et la fonction flèche elle-même n'a pas 🎜this🎜, 🎜this🎜 pointe vers le parent 🎜🎜Inconvénients : 🎜

• 🎜La fonction flèche n'a pas de prototype🎜prototype🎜, donc la flèche La fonction n'a pas 🎜this🎜 pointant vers 🎜
• 🎜La fonction flèche ne créera pas son posséder 🎜this🎜. S'il y a la première fonction ordinaire dans la couche externe, elle héritera de son 🎜this🎜🎜 li>
• 🎜Il n'y a pas de fonction dans la couche externe de la fonction flèche en mode strict et. mode non strict, son 🎜this🎜 pointera vers l'objet global 🎜window🎜🎜

🎜Méthode d'écriture de base : 🎜rrreee🎜🎜🎜 5. Expression d'objet ES6🎜🎜🎜🎜Si les attributs de l'objet et les valeurs sont les mêmes, vous pouvez omettre d'écrire la valeur lors de la réutilisation🎜rrreee🎜🎜🎜6 ES6 consiste à déterminer si deux valeurs sont égales🎜🎜🎜🎜Sauf pour le === le plus couramment utilisé. et == sont utilisés pour comparer les résultats de deux valeurs 🎜ES6🎜 en a une nouvelle🎜rrreee🎜🎜🎜7 ES6 Object.assign() copy Object 🎜🎜🎜rrreee. 🎜🎜🎜 8. Portée au niveau du bloc ES6 🎜🎜🎜🎜Tout d'abord, nous devons comprendre ce qu'est la portée ? 🎜

🎜Scope est la portée qu'une variable peut utiliser🎜🎜Avant qu'il n'y ait pas de 🎜let🎜 de 🎜ES6🎜, il n'y avait que la portée globale et la portée de la fonction de 🎜var🎜🎜🎜Et la signification du niveau bloc la portée est en fait A {} (bloc de code), les variables ne sont valides que dans {}🎜🎜rrreee🎜Le mot-clé 🎜var🎜 est utilisé ci-dessus pour définir la variable b dans le bloc, globalement, tout est accessible🎜🎜Mais dans les scénarios d'application réels, nous nous soucierons des fuites de variables, ou des noms en double, etc. Nous voulons uniquement que cette variable soit accessible dans le bloc actuel, nous devons alors utiliser le 🎜let🎜 mot-clé🎜🎜🎜 🎜9. Opérateur de déstructuration ES6🎜🎜🎜🎜Par exemple, si nous définissons un tableau 🎜arr🎜, avant que 🎜ES6🎜 déstructure le tableau, nous pourrions utiliser 🎜arr[0]🎜 pour accéder à l'intérieur du tableau. 🎜🎜 Mais maintenant, nous avons d'autres moyens 🎜

let arr = ['?','?','?']

console.log( arr[0], arr[1], arr[2] );   // '?','?','?'


let [a, b, c] = arr;

console.log( a, b, c );    // '?','?','?'

可能有的同学会问了，既然 ES6 有解构数组，那有解构对象吗 ?

那你往下看

let obj = { a: '?', b: '?', c: '?' }

let { a: a,  b: b,  c: c } = obj;

console.log( a, b, c );  // '?', '?', '?'

十. ES6 展开操作符

直接看代码啦

let arr = ['☠️', '?', '?'];

console.log(...arr)    // ☠️ ? ?


let obj1 = { name:'熊猫' , job:'前端'}

let obj2 = { hobby:'掘金', ...obj1 }

console.log( ...obj2 )    // { hobby:'掘金', name:'熊猫' , job:'前端'}

（学习视频分享：web前端开发、编程基础视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!