In diesem Artikel erfahren Sie, wie Sie den am häufigsten verwendeten ES6 verwenden

In diesem Artikel können Sie über ES6 sprechen und in 30 Minuten das am häufigsten verwendete ES6 beherrschen. Wenn Sie es nicht lernen, warten Sie dann darauf, getötet zu werden?

1. Über ES6 eine standardisierte Spezifikation für Skriptsprachen

Warum ist sie also erschienen?

Die Geburt jedes Standards bedeutet eine Verbesserung der Sprache und eine Erweiterung der Funktionen. Mit der Entwicklung der Zeit entsprechen einige Nachteile der JavaScript-Sprache nicht mehr den Anforderungen von Unternehmen und Entwicklern. [Verwandte Empfehlungen: Javascript-Lerntutorial]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 的 全局作用域 和 函数作用域

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

Zum Beispiel:

Die Variable-Promotion-Funktion erhöht die Unvorhersehbarkeit der Programmlaufzeit
• Die Syntax ist zu locker

Und der Zweck des neuen Standards von ES6 lautet:

ermöglicht die Verwendung von JS zur Entwicklung umfangreicher Webanwendungen und wird zu einer Entwicklungssprache auf Unternehmensebene

Die Entwicklungssprache auf Unternehmensebene ist: für die modulare Entwicklung geeignet und verfügt über ein gutes Abhängigkeitsmanagement

Also Lassen Sie uns als Nächstes ein wenig Zeit damit verbringen, zu lernen, wie man ES6 entwickelt, der in Interviews häufig verwendet und beliebt ist, oder?

2. Bevor es eine Vorlagenzeichenfolge gab, Normalerweise haben wir String-Variablen wie folgt zusammengefügt

{
  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️⃣'

Jetzt haben wir mehr Vorlagen-String-Methoden, die von

ES6

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

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


let [a, b, c] = arr;

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

3 bereitgestellt werden. ES6 bestimmt, ob ein String bestimmte Werte enthält

Die in der Entwicklung am häufigsten verwendete Methode Ich werde es nicht zu sehr erklären. Listen Sie alle häufig verwendeten Methoden auf. Die Schüler können selbst auswählen Wenn Sie die Zeichenfolge abrufen möchten, gibt die Methode -1 zurück ()🎜🎜🎜 wird verwendet, um das aktuelle Zeichen zu bestimmen. Ob die Zeichenfolge mit einem anderen gegebenen Wert beginnt, gibt je nach Beurteilungsergebnis wahr oder falsch zurück. 🎜

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

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

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

🎜🎜4 endetWith()🎜🎜🎜 wird verwendet, um zu beurteilen, ob die Zeichenfolge endet Geben Sie mit einem bestimmten Wert entsprechend dem Beurteilungsergebnis true zurück. Oder false 🎜Funktion🎜🎜🎜Aber wir müssen auch auf die Einschränkungen von Pfeilfunktionen achten. Und die Pfeilfunktion selbst hat 🎜dies🎜 nicht, 🎜dies🎜 zeigt auf das übergeordnete Element 🎜🎜Nachteile: 🎜

• 🎜Die Pfeilfunktion hat keinen Prototyp🎜Prototyp🎜, daher zeigt die Pfeilfunktion nicht 🎜dieses🎜 auf 🎜
• 🎜Die Pfeilfunktion erstellt keinen Prototyp besitzen 🎜dies🎜. Wenn es eine äußere erste gewöhnliche Funktion gibt, erbt sie deren 🎜dies🎜🎜 li>
• 🎜Es gibt keine Funktion in der äußeren Ebene der Pfeilfunktion Im strengen Modus und nicht streng Modus zeigt sein 🎜dieses🎜 auf das globale 🎜Fenster🎜-Objekt🎜

🎜Grundlegende Schreibmethode: 🎜

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

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


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

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

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

🎜🎜🎜 5. ES6-Objektausdruck🎜🎜🎜🎜Wenn die Objektattribute und -werte ​​sind gleich, Sie können das Schreiben des Werts bei der Wiederverwendung weglassen🎜rrreee🎜🎜🎜6 ES6 dient dazu, festzustellen, ob zwei Werte gleich sind🎜🎜🎜🎜Mit Ausnahme des am häufigsten verwendeten === und == werden verwendet, um die Ergebnisse von zwei Werten zu vergleichen 8. ES6-Bereich auf Blockebene 🎜🎜🎜🎜Zunächst müssen wir verstehen, was Umfang ist. 🎜

🎜Scope ist der Bereich, den eine Variable verwenden kann🎜🎜Bevor es kein 🎜let🎜 von 🎜ES6🎜 gab, gab es nur den globalen Bereich und den Funktionsumfang von 🎜var🎜🎜🎜Und die Bedeutung von Blockebene Umfang ist eigentlich A {} (Codeblock), Variablen sind nur in {} gültig🎜🎜rrreee🎜Das Schlüsselwort 🎜var🎜 wird oben verwendet, um Variable b in zu definieren Block, global Auf alle kann zugegriffen werden🎜🎜Aber in tatsächlichen Anwendungsszenarien machen wir uns Sorgen über Variablenlecks oder doppelte Namen usw. Wir möchten nur, dass auf diese Variable im aktuellen Block zugegriffen werden kann, dann müssen wir 🎜let🎜 verwenden Schlüsselwort🎜🎜🎜 🎜9. ES6-Destrukturierungsoperator🎜🎜🎜🎜Beim Definieren eines Arrays 🎜arr🎜 könnten wir vor 🎜ES6🎜 der Destrukturierung des Arrays 🎜arr[0]🎜 verwenden, um auf das Innere des Arrays zuzugreifen🎜 🎜 Aber jetzt gibt es noch mehr Möglichkeiten 🎜

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前端开发、编程基础视频）

Das obige ist der detaillierte Inhalt vonIn diesem Artikel erfahren Sie, wie Sie den am häufigsten verwendeten ES6 verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!