Hinweise zum dritten Tag der JavaScript-Grundlagen

Hinweise zum dritten Tag der JavaScript-Grundlagen

Der Unterschied zwischen if-Multi-Branch-Anweisung und Switch:

1. Gemeinsamkeit

   • Kann die Auswahl mehrerer Zweige realisieren, Multiple Choice 1
   • In den meisten Fällen austauschbar

2. der Unterschied:

   • Die switch...case-Anweisung behandelt normalerweise Situationen, in denen der Fall einen relativ bestimmten Wert hat, während die if...else...-Anweisung flexibler ist und normalerweise zur Bereichsbeurteilung verwendet wird (größer als, gleich einem bestimmten Bereich). ).
   • Die Switch-Anweisung führt eine Beurteilung durch und führt dann direkt die Anweisung des Programms aus, was effizienter ist. Die if...else-Anweisung hat mehrere Beurteilungsbedingungen und muss so oft wie möglich beurteilt werden.
   • Der Schalter muss === kongruent sein, auf den Datentyp achten und auf Pause achten, sonst kommt es zu Penetrationseffekten.
   • abschließend:
     • Wenn relativ wenige Verzweigungen vorhanden sind, werden if...else-Anweisungen effizient ausgeführt.
     • Bei vielen Verzweigungen weist die Switch-Anweisung eine hohe Ausführungseffizienz und eine klarere Struktur auf.

   ​

zur Aussage

Beherrschen Sie die for-Schleifenanweisung, damit das Programm wiederholt ausgeführt werden kann

forist eine weitere von JavaScript bereitgestellte Schleifenkontrollanweisung. Sie whileunterscheidet sich nur in der Syntax.

Grundlegende Verwendung der for-Anweisung

1. 3 Elemente, um die Durchblutung zu erreichen

<script>
  // 1. 语法格式
  // for(起始值; 终止条件; 变化量) {
      
      
  //   // 要重复执行的代码
  // }

  // 2. 示例：在网页中输入标题标签
  // 起始值为 1
  // 变化量 i++
  // 终止条件 i <= 6
  for(let i = 1; i <= 6; i++) {
      
      
    document.write(`<h${ 
        i}>循环控制，即重复执行<h${ 
        i}>`)
  }
</script>

2. Variationen sind dasselbe wie Endlosschleifen, und forSchleifen sind whiledasselbe. Wenn die Inkrementierungs- und Beendigungsbedingungen nicht richtig festgelegt sind, tritt eine Endlosschleife auf.

3. Schleifen aufbrechen und beenden

<script>
    // 1. continue 
    for (let i = 1; i <= 5; i++) {
      
      
        if (i === 3) {
      
      
            continue  // 结束本次循环，继续下一次循环
        }
        console.log(i)
    }
    // 2. break
    for (let i = 1; i <= 5; i++) {
      
      
        if (i === 3) {
      
      
            break  // 退出结束整个循环
        }
        console.log(i)
    }
</script>

abschließend:

• JavaScriptFür die Implementierung der Schleifensteuerung stehen verschiedene Anweisungen zur Verfügung, aber unabhängig davon, welche Anweisung verwendet wird, ist sie untrennbar mit den drei Merkmalen von Schleifen verbunden, nämlich dem Startwert, der Variation und der Beendigungsbedingung. Als Anfänger sollten Sie sich darauf konzentrieren, diese zu verstehen drei Merkmale. Es ist nicht notwendig, zu viel Verwirrung über den Unterschied zwischen den drei Aussagen zu machen.
• Der Startwert, der Änderungsbetrag und die Beendigungsbedingung werden vom Entwickler auf der Grundlage logischer Anforderungen entworfen, um das Auftreten von Endlosschleifen zu vermeiden.
• Wenn die Anzahl der Schleifen klar ist, wird die Verwendung von forSchleifen empfohlen. Wenn die Anzahl der Schleifen nicht klar ist, wird die Verwendung von whileSchleifen empfohlen.

Hinweis: forDie grammatikalische Struktur ist einfacher, daher forwerden Schleifen häufiger verwendet.

Verschachtelte Schleifen

Wenn wir das Wissen über Zyklen mit einfachem astronomischem Wissen vergleichen, wissen wir, dass sich die Erde zwar dreht, sich aber auch um die Sonne dreht. Wenn sowohl Rotation als auch Revolution als Zyklen betrachtet werden, entspricht dies einem anderen Zyklus, der in den Zyklus verschachtelt ist.

Tatsächlich unterstützt jede Schleifenanweisung in JavaScript verschachtelte Schleifen, wie im folgenden Code gezeigt:

// 1. 外面的循环 记录第n天 
for (let i = 1; i < 4; i++) {
    document.write(`第${i}天 <br>`)
    // 2. 里层的循环记录 几个单词
    for (let j = 1; j < 6; j++) {
        document.write(`记住第${j}个单词<br>`)
    }
}

Denken Sie daran, dass die äußere Schleife einmal und die innere Schleife alle Schleifen durchläuft

invertiertes Dreieck

 // 外层打印几行
for (let i = 1; i <= 5; i++) {
    
    
    // 里层打印几个星星
    for (let j = 1; j <= i; j++) {
    
    
        document.write('★')
    }
    document.write('<br>')
}

Multiplikationstabelle

CSS-Stil

span {
    
    
    display: inline-block;
    width: 100px;
    padding: 5px 10px;
    border: 1px solid pink;
    margin: 2px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
    background-color: rgba(255, 192, 203, .1);
    text-align: center;
    color: hotpink;
}

Javascript

 // 外层打印几行
for (let i = 1; i <= 9; i++) {
    
    
    // 里层打印几个星星
    for (let j = 1; j <= i; j++) {
    
    
        // 只需要吧 ★ 换成  1 x 1 = 1   
        document.write(`
		<div> ${
      
      j} x ${
      
      i} = ${
      
      j * i} </div>
     `)
    }
    document.write('<br>')
}

Array

Wissen Sie, was ein Array ist und welche Anwendungsszenarien es gibt, und beherrschen Sie die Syntax der Array-Deklaration und des Array-Zugriffs.

Was ist ein Array?

Array: (Array) ist ein Datentyp, der Daten der Reihe nach speichern kann

**Verwendungsszenario:** Wenn mehrere Daten vorhanden sind, können diese in einem Array gespeichert und dann in einer Variablen platziert werden. Die Verwaltung ist sehr praktisch.

Grundlegende Verwendung von Arrays

Definieren Sie Arrays und Array-Zellen

<script>
  // 1. 语法，使用 [] 来定义一个空数组
  // 定义一个空数组，然后赋值给变量 classes
  // let classes = [];

  // 2. 定义非空数组
  let classes = ['小明', '小刚', '小红', '小丽', '小米']
</script>

Durch []die Definition eines Arrays können reale Daten in den Daten gespeichert werden, z. B. Xiao Ming, Xiao Gang, Xiao Hong usw. Dies sind alles Daten im Array. Diese Daten werden Array-Einheiten genannt, und die Array-Einheiten werden durch Englisch getrennt Kommas.

Greifen Sie auf Arrays und Array-Indizes zu

Die Verwendung eines Arrays zum Speichern von Daten stellt nicht das ultimative Ziel dar. Der Schlüssel besteht darin, jederzeit auf die Daten (Einheiten) im Array zugreifen zu können. Tatsächlich nummeriert JavaScript jede Dateneinheit im Array, und Sie können über die Nummer der Dateneinheit im Array leicht auf die Dateneinheiten im Array zugreifen.

Wir nennen die Nummer der Dateneinheit im Array den Indexwert, manche nennen sie auch den Index.

Die Indexwerte sind tatsächlich entsprechend der Position der Dateneinheiten im Array angeordnet. Beachten Sie, dass sie 0bei beginnen, wie in der folgenden Abbildung dargestellt:

Beachten Sie die obige Abbildung. Der Indexwert, der der Dateneinheit [Xiao Ming] entspricht, ist [0], und der Indexwert, der der Dateneinheit [Xiao Hong] entspricht, ist [2].

<script>
  let classes = ['小明', '小刚', '小红', '小丽', '小米']
  
  // 1. 访问数组，语法格式为：变量名[索引值]
  document.write(classes[0]) // 结果为：小明
  document.write(classes[1]) // 结果为：小刚
  document.write(classes[4]) // 结果为：小米
  
  // 2. 通过索引值还可以为数组单重新赋值
  document.write(classes[3]) // 结果为：小丽
  // 重新为索引值为 3 的单元赋值
  classes[3] = '小小丽'
  document.wirte(classes[3]); // 结果为： 小小丽
</script>

Werttyp der Dateneinheit

Ein Array ist eine Sammlung von Daten und seine Einheitswerte können von jedem Datentyp sein.

<script>
  // 6. 数组单值类型可以是任意数据类型

  // a) 数组单元值的类型为字符类型
  let list = ['HTML', 'CSS', 'JavaScript']
  // b) 数组单元值的类型为数值类型
  let scores = [78, 84, 70, 62, 75]
  // c) 混合多种类型
  let mixin = [true, 1, false, 'hello']
</script>

Array-Längenattribut

Auch hier sind Arrays kein neuer Datentyp in JavaScript, sondern Objekttypen.

<script>
  // 定义一个数组
  let arr = ['html', 'css', 'javascript']
  // 数组对应着一个 length 属性，它的含义是获取数组的长度
  console.log(arr.length) // 3
</script>

Array betreiben

Als Objektdatentyp verfügen Arrays nicht nur über lengthnutzbare Eigenschaften, sondern stellen auch viele Methoden bereit:

1. push fügt dynamisch eine Zelle am Ende des Arrays hinzu
2. unshit fügt dynamisch eine Zelle zum Kopf des Arrays hinzu
3. pop löscht die letzte Zelle
4. Shift löscht die erste Zelle
5. splice löscht dynamisch jede Einheit

Bei Verwendung der oben genannten vier Methoden werden Operationen direkt am ursprünglichen Array ausgeführt. Das heißt, wenn eine Methode erfolgreich aufgerufen wird, wird das ursprüngliche Array entsprechend geändert. lengthUnd es gibt keine Verwirrung beim Hinzufügen oder Entfernen von Zellen .

<script>
  // 定义一个数组
  let arr = ['html', 'css', 'javascript']

  // 1. push 动态向数组的尾部添加一个单元
  arr.push('Nodejs')
  console.log(arr)
  arr.push('Vue')

  // 2. unshit 动态向数组头部添加一个单元
  arr.unshift('VS Code')
  console.log(arr)

  // 3. splice 动态删除任意单元
  arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
  console.log(arr)

  // 4. pop 删除最后一个单元
  arr.pop()
  console.log(arr)

  // 5. shift 删除第一个单元
  arr.shift()
  console.log(arr)
</script>

Fügen Sie dem Kopf des Arrays zustandsmäßig eine Zelle hinzu
arr.unshift('VS Code')
console.log(arr)

// 3. splice löscht dynamisch jede Einheit
arr.splice(2, 1) // Lösche 1 Einheit beginnend an der Position mit Indexwert 2 console.log
(arr)

// 4. pop löscht die letzte Einheit
arr.pop()
console.log(arr)

// 5. Shift löscht die erste Einheit
arr.shift()
console.log(arr)