1: Was ist ES6 und warum sollte ich es lernen?
ES6 (ECMAScript) ist die Syntaxspezifikation in JavaScript und ein wichtiger Bestandteil von JavaScript. Es legt fest, wie wir JS schreiben.
Gründe, ES6 zu lernen:
(1) Die ES6-Version weist die meisten Änderungen auf und ist ein Meilenstein.
(2) ES6 hat viele neue grammatikalische Funktionen hinzugefügt, die das Programmieren einfacher und effizienter machen.
(3) ES6 ist ein Front-End-Entwicklungstrend und eine notwendige Fähigkeit für die Beschäftigung.
2: Der Unterschied zwischen let, var und const.
(1) Mit var deklarierte Variablen haben einen globalen oder Funktionsbereich, können vor der Deklaration verwendet werden, können wiederholt definiert und mehrfach zugewiesen werden und es gibt ein Phänomen der Variablenheraufstufung.
(2) Mit deklarierte Variablen haben einen Gültigkeitsbereich auf Blockebene. Sie werden zuerst deklariert und dann verwendet. Sie können nicht wiederholt definiert, aber mehrfach zugewiesen werden. Es gibt keine Variablenförderung.
(3) Was mit const deklariert wird, ist eine Konstante, und der Wert der Konstante kann im später erscheinenden Code nicht geändert werden. Der Bereich ist ein Bereich auf Blockebene, der zuerst deklariert und dann verwendet wird. Er kann nicht wiederholt definiert werden. Grundlegende Datentypen können nicht mehrfach zugewiesen werden und es gibt keine Variablenheraufstufung.
(4) Mit let und const deklarierte Variablen gehören nicht zum Objekt der obersten Ebene und geben undefiniert zurück.
3: Wie man das Objekt dekonstruiert, geben Sie bitte ein Beispiel!
Die grundlegendste Verwendung der Objektdestrukturierung besteht darin, den Wert eines Eigenschaftsschlüssels von einem Objekt abzurufen. Suchen Sie zunächst das gleichnamige Attribut und weisen Sie es dann der entsprechenden Variablen zu.
Definieren Sie beispielsweise ein Objekt „Person“. Es verfügt über zwei Attribute: richtiger Name und Alter
let Person = {realname:"Zhang San",age:20};
let {realname:myrealname,age,height=180} = Person;
console.log(myrealname,age,height); // Zhang San 20 180
Die Eigenschaften des Objekts sind nicht in der richtigen Reihenfolge und die Variable muss denselben Namen wie die Eigenschaft haben, um den richtigen Wert zu erhalten. Andernfalls ist sie undefiniert, wenn die Destrukturierung fehlschlägt.
4: Was ist der Unterschied zwischen for...in und for...of?
for in durchläuft den Index (durchläuft aufzählbare Typen)
for of durchläuft den Wert des Arrays (traversable iterable hat eine Iteratorschnittstelle)
5: Was ist der Unterschied zwischen einer Pfeilfunktion und einer normalen Funktion?
der Unterschied:
(1) Der Punkt dieser gewöhnlichen Funktion ist der Aufrufer, und der Punkt dieser Funktion der Pfeilfunktion ist ihre übergeordnete Funktion.
(2) Die Funktion „this“ in der Pfeilfunktion wird in der Deklaration definiert, während die Funktion „this“ in der normalen Funktion beim Aufruf definiert wird.
(3) Pfeilfunktionen können die Richtung nicht ändern, und nur normale Funktionsfunktionen können die Richtung ändern.
6: Bitte geben Sie ein Beispiel für die Verwendung von Vorlagenzeichenfolgen in ES6.
Funktionsdemo(){
return „Ende“;
}
let es6 = "es6!";
let str = `hello,${es6},${demo()}`;
console.log(str); // hallo,es6!,ende
7: Die Erweiterungsmethodenkarte und der Array-Filter weisen dieselben Punkte und Unterschiede auf.
Ähnlichkeiten: Keine Prüfung auf ein leeres Array; keine Änderung des ursprünglichen Arrays.
Unterschied: Die Methode map () gibt ein neues Array zurück, und die Elemente im Array sind die Werte, die von den ursprünglichen Array-Elementen nach dem Aufruf der Funktion verarbeitet werden.
Die Methode filter() erstellt ein neues Array, dessen Elemente überprüft werden, indem alle Elemente im angegebenen Array überprüft werden, die die Kriterien erfüllen.
8: Was ist das Ergebnis der folgenden Abbildung und warum?
Das Ausgabeergebnis ist 10.
Die Variable i wird von var deklariert und ist eine globale Variable. Der Geltungsbereich ist die gesamte for-Schleife. Wenn sich i in jeder Schleife ändert, wird auch der Wert jedes i in a synchron geändert. Wenn die Schleife endet, beträgt der Wert von i 10.
9: Was ist das Ausgabeergebnis in der Abbildung unten und warum?
Die Ausgabe beträgt 20.
Rufen Sie zuerst die Fn-Funktion über obj auf, und dieser Punkt innerhalb der Fn-Funktion ist obj. Die Pfeilfunktion in setTimeout ändert die Richtung davon nicht, daher ist hier this.a === obj.a das Druckergebnis der Wert eines inneren Objekts.
10: Was ist das Ergebnis der folgenden Abbildung zum Restparameter? Warum?
Das Ergebnis ist ein Fehler, da der Restparameter der letzte formale Parameter sein muss, andernfalls wird ein Fehler gemeldet.
Zweitens: Fragen zur Bedienung
1: Verwenden Sie ein Array, um eine Gruppe von Schülern zu speichern. Zu den Attributen jedes Schülers gehören Name, Punktzahl, Name und Punktzahl aus dem Eingabefeld auf der Seite. Klicken Sie auf die Abfrageschaltfläche, um alle Schüler mit einer Punktzahl von mehr als 60 auszuwählen. Der Effekt ist wie in der Abbildung dargestellt: (30 Punkte)
Code wie folgt anzeigen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 1：用数组保存一组学生，每个学生的属性包含，姓名，分数，姓名和分数从页面input框获取，点击查询按钮，刷选出分数大于60的所有同学。效果如图：(30分) -->
<div>
姓名: <input placeholder="输入学生姓名" type="text" id="uname" value="" />
分数: <input placeholder="输入学生分数" type="text" id="score" value="" />
<button>添加</button>
</div>
<p>学生信息:</p>
<ul class="persons"></ul>
<input type="button" value="查找及格的学生" id="search" />
<p>及格学生如下:</p>
<ul class="pass"></ul>
<script>
let sName = document.querySelector('#uname');
let sScore = document.querySelector('#score');
let btn = document.querySelector('button');
let ul1 = document.querySelector('.persons');
let search = document.querySelector('#search');
let ul2 = document.querySelector('.pass');
let arr = [];
btn.addEventListener('click', function () {
let obj = { uname: sName.value, score: sScore.value };
arr.push(obj);
sName.value = '';
sScore.value = '';
let str = '';
arr.forEach(item => {
const { uname, score } = item;
str = str + `<li>姓名：${uname} 分数：${score}</li>`;
})
ul1.innerHTML = str;
})
search.addEventListener('click', function () {
let newArr = arr.filter(item => {
return item.score >= 60;
})
let str = '';
newArr.forEach(item => {
const { uname, score } = item;
str = str + `<li>姓名：${uname} 分数：${score}</li>`;
})
ul2.innerHTML = str;
})
</script>
</body>
</html>Wirkung:
2: Berechnen Sie den Mindestwert in einer Reihe von Arrays. Zum Beispiel: const arr = [3,4,10,1,9]; (20 Punkte)
