94_111122114208_1

JS-Grundlagen für Anfänger

Schritte zum Schreiben von JS

  1. Zuerst das Layout implementieren
  2. Das Implementierungsprinzip herausfinden
  3. JS-Syntax verstehen

Implementierung zum Entfernen eines bestimmten Elements

  • display: none; wird als nichts angezeigt
  • visibility: hidden; ausblenden
  • width \ height
  • Transparenz
  • left \ top
  • Verwende ein div mit derselben Hintergrundfarbe, um das Element zu überdecken
  • Margin-Werte verwenden
  • ……

Element abrufen

  • getElementById() — statische Methode, kann nur document vorangestellt werden
  • document.body, document.title — Elemente, die nur einmal auf der Seite vorkommen
  • getElementsByTagName() — dynamische Methode, kann document oder anderen Elementen vorangestellt werden, gibt eine array-ähnliche Sammlung von Elementen zurück
    • Verfügt über eine array-ähnliche length
    • Hat eine array-ähnliche Verwendung, wie z. B. ali
    • Bei der Verwendung von TagName müssen eckige Klammern [] hinzugefügt werden
    • Die sogenannte dynamische Methode bedeutet, dass Elemente, die dynamisch über JS hinzugefügt werden, auch von getElementsByTagName() gefunden werden können, aber document.getElementById sie nicht finden kann.

Ereignisse

Ereignisse: Mausereignisse, Tastaturereignisse, Systemereignisse, Formularereignisse, benutzerdefinierte Ereignisse
  • onclick
  • onmouseover
  • onmousedown
  • onmouseout
  • onmouseup
  • onmousemove
  • ……

Wie man Ereignisse hinzufügt

  • element.onmouseover

Funktionen

Funktionen können als Befehle verstanden werden, etwas zu tun, z. B.: function abc() { // Sie wird mit Sicherheit nicht von selbst ausgeführt! ... }
  1. Direkter Aufruf: abc();
  2. Event-Aufruf: element.event = Funktionsname (oDiv.onclick = abc;)
  3. ……
function(){} anonyme Funktion element.event = function(){}

Testen

  • alert(1); Alert-Box mit OK-Schaltfläche; alert('ok'); 'ok' ist ein String
  • Für Anfänger: Am besten eignet man sich die Gewohnheit an, jederzeit zu schreiben und zu testen

Variablen

  • var li = document.getElementById('lis');
  • var num = 123;
  • var name = 'leo';

JS-Attributoperationen

HTML-Attributoperationen

  • Attributname
  • Attributwert
  • Ein Attribut lesen: abrufen, finden
    • element.attributeName
  • Ein Attribut schreiben: ersetzen, ändern
    • element.attributeName = neuer Wert
    • Zum Hinzufügen müssen Sie += verwenden
  • innerHTML liest den gesamten HTML-Code innerhalb eines Elements.
String-Verkettung: Pluszeichen.

Hinweise zum Lesen und Schreiben von Attributen

  • Bindestriche sind in JS-Eigenschaften nicht erlaubt; zum Beispiel wird font-size in fontSize geändert.
  • "class" ist ein reserviertes Wort in JS; um class in JS zu verwenden, verwende className.
  • Verwende keine relativen Pfade für Prüfungen (z. B. src von img und auch href).
  • Verwende keine Farbwerte für Prüfungen (weil es Formen wie red, #f00, rgb(250, 0, 0) usw. gibt).
  • Verwende auch keine relativen Pfade für Prüfungen.
  • Verwende den Wert von innerHTML nicht für Prüfungen.
  • In IE6, IE7, IE8 kann der Typ von Formularelementen nicht geändert werden; es wird nicht unterstützt und löst einen Fehler aus; alles andere kann geändert werden.
  • In einigen Browsern wird das direkte Ändern des float-Werts möglicherweise nicht unterstützt. In JS kann man IE (styleFloat) und Nicht-IE (cssFloat) unterschiedlich behandeln.
  • Für Dinge, die nicht für eine Prüfung verwendet werden können, kann man ein switch erstellen und einen booleschen Wert verwenden, um es umzusetzen.
Zur Kompatibilität:
  • Technisch: Du musst Kompatibilität meistern können (Lösungen für Kompatibilitätsprobleme).
  • Zu den Anforderungen: besprechen und ausarbeiten (die präziseste Rendering-Lösung bereitstellen).

Verwendung von eckigen Klammern []

  • Der Wert nach dem Punkt "." kann nicht geändert werden.
  • Der Wert in eckigen Klammern [] kann geändert werden; in JS kann "." durch "[]" ersetzt werden.

Bedingte Prüfung

  • if (condition) { ... };
  • if (condition) { ... } else { ... };
  • if (condition1) { ... } else if (condition2) { ... } else if (condition3) { ... } else { ... };

Arrays

  • "Lager für die Speicherung von Daten."
  • Eckige Klammern [], getrennt durch halbbreite Kommas; fügen Sie nach dem letzten Datenelement kein Komma hinzu.
  • Die length-Eigenschaft eines Arrays.
  • Verwende push(), um Elemente an das Ende eines Arrays anzuhängen.

Anwendung der for-Schleife

Anwendungsfälle für for-Schleifen:
  • Wenn Sie bestimmten Code wiederholt ausführen möchten.
  • Bei jeder Ausführung ändert sich eine Zahl.
Ausführungsreihenfolge einer for-Schleife: 1 → 234 → 234 ...
  1. var i = 0;
  2. i < 3; kritischer Schritt.
  3. Der gesamte Code innerhalb der Klammern.
  4. i++
Beachten Sie die folgende Schleife:
for (var i=0; i<aLi.length; i++) {
  aLi[i].onclick = function(){
    alert(i);
  }
}
Der obige Code gibt eine 3 aus, statt 0, 1, 2 nacheinander. Beachten Sie hier: Wenn eine Funktion in die for-Schleife eingebettet ist und die Funktion i verwendet, dann wird i aufgrund des Gültigkeitsbereichs nicht wie erwartet einzeln hochgezählt.

cssText-Textformatierung und Attributoperationen

  • oDiv.style.cssText = 'width: 200px; height: 200px;';
  • cssText rührt die Einstellungen im style-Tag im head nicht an; aber es ändert Inline-Styles (Hinweis: Es ersetzt Inline-Styles, es fügt keine neuen Inline-Styles hinzu).

Idee, die Funktion nach einem Button-Klick nicht zu wiederholen

  1. Manipulieren Sie den Button, z. B.: Setzen Sie nach einem Klick oBtn.disabled = true;
  2. Fahren Sie fort, mit dem Button herumzuspielen, z. B. blenden Sie den Button nach einem Klick aus: oBtn.style.display = 'none';
  3. Löschen Sie, was der Button hinzugefügt hat, und fügen Sie es dann erneut hinzu; erst löschen, dann generieren.
  4. Verwende eine Bedingung (conditional).

dieses Verweisen und diese Anwendung

window ist der "Boss" in JS.
function fn1(){
    alert(this);
}
fn1();
Im obigen Code ist das Ausführen der Funktion fn1() äquivalent zu window.fn1(); daher ist das per alert ausgegebene this innerhalb des Funktionskörpers immer noch window.
function fn1(){
    alert(this);
}
oBtn.onclick = fn1;
Im Obigen alertet die durch das Click-Event des Buttons aufgerufene Funktion fn1 schließlich den Button selbst, nicht window.
function fn1(){
    alert(this);
}
oBtn.onclick = function(){
    alert(this)
}
Im obigen Code ist beim Klicken auf den Button das per alert ausgegebene this immer noch der Button oBtn.
function fn1(){
    alert(this);
}
oBtn.onclick = function(){
    fn1();
}
Im obigen Code ist beim Klicken auf den Button oBtn das per alert Ausgegebene nicht mehr das Objekt oBtn, sondern window.
<input id="btn2" type="button" value="按钮2" onclick="alert(this)" />
Der obige Code ist ein Inline-Event, und das per alert ausgegebene this ist der Button btn2.
function fn1(){
    alert(this);
}
<input id="btn2" type="button" onclick="fn1();" value="按钮2” />
Im obigen Code ist das per alert ausgegebene this window.
  • this: das Objekt, das die aktuelle Methode (Funktion) aufruft.
function fn1(){
    this
}

fn1(); this ＝> window

oDiv.onclick = fn1; this => oDiv

oDiv.onclick = function(){
    this => oDiv
};

oDiv.onclick = function(){
    fn1(); fn1()里面的this => window
}

<div onclick="  this  "></div> this => div

<div onclick = "  fn1();  "></div>  fn1()里面的this => window

<script>

fn1(this);
function fn1(obj){
  obj => window
}

oDiv.onclick = function(){
  this
  fn1(this);
};
function fn1(obj){ obj => oDiv }

</script>

<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  for(var i=0; i<aBtn.length; i++) {
    aBtn[i].onclick = function(){
      this.style.background = 'yellow';
    }
  }
}
Die Wirkung des obigen Codes entspricht dem folgenden Code; beachte die Verwendung von that.
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  var that = null; 
  
  for(var i=0; i<aBtn.length; i++) {
    aBtn[i].onclick = function(){
      that = this;
      fn1();
    };
  }
  function fn1(){
    //this => window
    that.style.background = 'yellow';
  }
}
Der obige Code entspricht ebenfalls dem folgenden Code:
<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  
  for(var i=0; i<a.aBtn.length; i++) {
    aBtn[i].onclick = fn1; //注意不要在fn1后面加括号
  }
  
  function fn1(){
    this.style.background = 'yellow';
  }
}

Benutzerdefinierte Attribute, Indexwerte

Lesen und Schreiben benutzerdefinierter Attribute

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  
  aBtn[0].abc = 123; //自定义属性
  
  // alert(aBtn[0].abc); 自定义属性的读
  // aBtn[0].abc = 456; 自定义属性的写
}
JS kann jedem HTML-Element beliebig viele benutzerdefinierte Attribute hinzufügen.

Anwendung benutzerdefinierter Attribute

Mithilfe benutzerdefinierter Attribute können Sie einem Element eine Schaltereigenschaft hinzufügen, die als Steuerschalter dient. Zum Beispiel das Folgende:
window.onload = function(){
  var aLi = document.getElementsByTagName('li');
  // var onOff = true; 一个onOff只能控制一个开关。要为多个元素设置各自的开关，就要给每个元素加个onOff开关。
  
  for(var i=0; i<aLi.length; i++) {
    aLi[i].onOff = true;
    aLi[i].onclick = function(){
      if (this.onOff){
        this.style.background = 'url(img/active.png)';
        this.onOff = false;
      } else {
        this.style.background = 'url(img/normal.png)';
        this.onOff = true;
      }
    }
  }
}

Eigene inkrementierende Nummer abrufen und Array-Inhalt abgleichen

Legen Sie drei Schaltflächen auf der Seite mit einem Standardwert von 0 an; bei jedem Klick auf eine Schaltfläche wechseln die Buchstaben nacheinander durch A, B, C, D.
<input type="button" value="0" />
<input type="button" value="0" />
<input type="button" value="0" />

  var aBtn = document.getElementsByTagName('input');
  var arr = ['A', 'B', 'C', 'D'];
  
  for(var i=0; i<aBtn.length; i++){
    aBtn[i].num = 0;
    aBtn[i].onclick = function(){
      this.value = arr[this.num]
      this.num++;
      if(this.num === arr.length){
        this.num = 0;
      };
    };
  };

Indexwert hinzufügen, Array abgleichen, HTML-Element

Gleichen Sie die Werte der drei Schaltflächen der Reihe nach mit den Werten im Array ab.
<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />

window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
  var arr = ['莫涛','张森','杜鹏'];
  
  for(var i=0; i<aBtn.length; i++){
    aBtn[i].index = i; //自定义属性index，添加索引值
    aBtn[i].onclick = function(){
      //alert(i); //不会弹出1、2，直接弹出3，也就是aBtn的长度。也就是说，在基础阶段，在for循环所包的函数里面再用i是不靠谱的。
      this.value = arr[this.index];
    };
  };
}
Das Obige gleicht Array-Werte anhand des Indexwerts ab; das Abgleichen von HTML-Elementen funktioniert genauso. Wenn Sie eine "übereinstimmende" oder "entsprechende" Beziehung herstellen möchten, verwenden Sie Indexwerte.

Datentypen, Typkonvertierung

ECMAScript：Standard, Kern.

Datentypen

  • HTML-Tag-Typen.
    • block
    • inline
    • inline-block
    • table
    • ……
  • Datentypen in JS:
    • Number (NaN gehört zum Number-Typ).
    • String.
    • Boolean.
    • Funktionstyp.
    • Objekt.
      • obj
      • []
      • {}
      • null (zu null/leer können keine benutzerdefinierten Eigenschaften hinzugefügt werden).
    • Undefined.
typeof wird verwendet, um Datentypen zu bestimmen. String-Methode charAt(): ruft anhand des Index des Strings einen Teilstring ab. Objekten können benutzerdefinierte Eigenschaften hinzugefügt werden. Wenn Sie einem Objekt eine Funktion zuweisen, haben Sie diesem Objekt eine Methode hinzugefügt.

JS-Datentypkonvertierung

Methoden zum Konvertieren von Strings in Zahlen:

JS-Methode: Number();

var a = '100';
alert(a + 100); //'100100'

var b = '00100';
alert(Number(b)); //100

var c = '+100';
alert(Number(c)); //100

var d = '';
alert(Number(d)); //0

var e = '   ';
alert(Number(e)); //0

var f = true;
alert(Number(f)); //1

var g = false;
alert(Number(g)); //0

var i = [];
alert(Number(i)); //0 空数组用Number转出来是0

var j = [''];
alert(Number(j)); //0

var k = [123];
alert(Number(k)); //123

var l = ['123'];
alert(Number(l)); //123

var o = null;
alert(Number(o)); //0

----------------------------
var m = [1,2,3];
alert(Number(m)); //NaN

var json = {abc:123};
alert(Number(json)); //NaN

var json2 = {};
alert(Number(json2)); //NaN 即使是空json，Number方法也转不了

var h = function(){};
alert(Number(h)); //NaN

var p;
alert(Number(p)); //undefined 

var q = '100px';
alert(Number(q)); // NaN

parseInt und parseFloat

var a = '100px';
alert(parseInt(a)); //100

var b = '100px123456789';
alert(parseInt(b)); //100

var d = '-100px';
alert(parseInt(d)); //-100 parseInt还是认加减号的

var e = '   100px';
alert(parseInt(e)); //100 parseInt也是认空格的

var f = '000000100px';
alert(parseInt(f)); //100

var g = '12.34元';
alert(parseInt(g)); //12 parseInt只能转出整数
------------------------------
var c = true;
alert(parseInt(c)); //NaN

//parseInt也不能用于转函数等
Die Methode parseInt() hat außerdem einen Parameter, und zwar die Basis, nach der konvertiert wird; zum Beispiel bedeutet parseInt(a, 10), im Dezimalsystem zu konvertieren; parseInt(b, 2) bedeutet, im Binärsystem zu konvertieren.
var a = '12.34元';
alert(parseFloat(a)); //12.34

var b = '12.3.4元';
alert(parseFloat(b)); //12.3 parseFloat只认第一个小数点
Die kombinierte Verwendung von parseInt und parseFloat.kann verwendet werden, um zu bestimmen, ob ein Wert eine Ganzzahl oder eine Dezimalzahl ist, wie folgt:
var num = '200.345';
if(parseInt(num) == parseFloat(num)) {
  alert(num + '是整数');
} else {
  alert(num + '是小数');
}

Seltsame implizite Typkonvertierungen in JS

Explizite Typkonvertierung (erzwungene Typkonvertierung):
  • Number();
  • parseInt();
  • parseFloat();
Implizite Typkonvertierung:
  • - * / % Subtraktion, Multiplikation, Division, Modulo können Strings in Zahlen umwandeln.
  • Das Pluszeichen + kann Zahlen in Strings umwandeln.
  • ++ -- Inkrement- und Dekrement-Operatoren können Strings in Zahlen umwandeln.
  • < > Größer-als- und Kleiner-als-Zeichen können Strings in Zahlen umwandeln; achte darauf, ob der Vergleich numerisch oder ein String-Vergleich ist.
  • ! Die Negation wandelt den Datentyp rechts in einen booleschen Wert um.
  • ==
alert('200' - 3); //197
alert(200 + '3'); //2003

var a = '10';
a++;
alert(a); //11

alert('10'>9); //true
alert('1000000'>'9'); //false
//注意：数字的比较和字符串的比较不同；字符串的比较是一位一位的比较。

alert(!'ok'); //false
alert(!100); //false

alert('2' == 2); //true
alert('2' === 2); //false 三个等号不仅判断值，还会先判断两者的类型
Wenn die implizite Typumwandlung nicht umwandeln kann, gibt sie ebenfalls NaN zurück; zum Beispiel gibt alert('...' - 9); NaN aus.

isNaN-Anwendungsbeispiel

NaN: (keine Zahl). NaN ist ein Zahlentyp, der keine Zahl ist. Alle Zahlen sind vom Typ number, aber nicht alle Werte vom Typ number sind Zahlen.
  • NaN ist ein Zahlentyp, aber es ist keine Zahl.
  • Sobald NaN in einem Programm auftaucht, weist es eindeutig darauf hin, dass eine unzulässige Operation durchgeführt wurde.
  • NaN ist ein falscher Wert (falsy value).
  • NaN ist nicht einmal mit sich selbst gleich.
var a = Number('abc');
//alert(a); //NaN
//alert(typeof(a)); //number

if(a) { //会弹出‘假’，说明NaN是false
  alert('真');
} else {
  alert('假');
}

//alert(a === a); //false NaN比较，比出false
isNaN：„ist keine Zahl“ bedeutet die Frage „ist es keine Zahl?“ (keine Zahl). isNaN(); ist eine Methode, die diese Arbeit erledigt.
  • Hilft festzustellen, ob ein bestimmter Wert eine Zahl ist.
  • Es mag keine Zahlen, hasst Zahlen (es hasst nicht den Zahlentyp; isNaN mag NaN sehr und gibt true zurück, aber NaN ist ein Zahlentyp). Es wird verwendet, um Zahlen zu beurteilen. Zum Beispiel gibt alert(isNaN(2)); false zurück. alert(isNaN('I love you')); gibt true zurück. alert(isNaN(function(){})); gibt true zurück.
Der Beurteilungsprozess von isNaN: Es übergibt den Inhalt der Klammern an Number. Wenn Number ihn in eine Zahl umwandelt, gibt es false zurück; wenn es nicht umwandeln kann, gibt es true zurück.
alert(isNaN('250'));
//Number() '250' => 250 => false

alert(isNaN(true));
//Number() true => 1 => false

alert(isNaN([]));
//Number() [] => 0 => false
Nachfolgend eine kleine Anwendung von isNaN:
<input type="text" />
<input type="button" value="判断输入值是不是数字" />

window.onload = function(){
  var aInp = document.getElementsByTagName('input');
  var str = '';
  
  aInp[1].onclick = function(){
    str = aInp[0].value
    //alert(type of str); //总是返回string 从HTML中拿到的内容，类型都是字符串
    
    if(isNaN(str)){
      alert(str + '不是数字');
    } else {
      alert(str + '是数字');
    }
  }
}

Übergabe von Funktionsparametern

Parameter = JS-Datentypen:
  • Number.
  • String.
  • Boolean.
  • Function.
  • Objekt.
  • Undefined.

Überprüfung von Parametertypen

fn1(100);
fn1('miaov');
fn1(function(){alert(1);});

function fn1(a){
  if(typeof a === 'number' &amp;&amp; a === a) {
    alert(a+20);
  } else if (typeof a === 'string'){
    alert(a.charAt(2));
  } else if (typeof a === 'function'){
    a();
  }
}

Schritte zur Wiederverwendung von Code

  1. Versuchen Sie, die HTML-Code-Struktur konsistent zu halten; Sie können untergeordnete Elemente über das übergeordnete Element auswählen.
  2. Implementieren Sie das zentrale Hauptprogramm und verpacken Sie es in eine Funktion.
  3. Finden Sie die unterschiedlichen Werte in jeder Gruppe und implementieren Sie sie über Parameterübergabe.

JS-Geltungsbereich

Was ist Scope.
  • Domäne: Raum, Bereich, Gebiet.
  • Funktion: lesen, schreiben.

Der "JS-Parser" des Browsers

"JS-Parser": ein Programm im Browser, das speziell zum Lesen von JS verwendet wird. Es erledigt mindestens die folgenden zwei Dinge (natürlich gibt es auch andere Dinge):
  1. Vorbereitung ("Dinge suchen"): Dinge anhand von var, function und Parametern suchen —JS-Vorab-Parsinga = undefined. Allen Variablen wird, bevor der Code tatsächlich ausgeführt wird, im Voraus ein Wert zugewiesen: undefined. fn1 = function fn1(){alert(2);} Alle Funktionen sind, bevor der Code tatsächlich ausgeführt wird, der gesamte Funktionsblock. Bei doppelten Namen wird nur einer beibehalten.
  2. Interpretiere den Code Zeile für Zeile. Jedes Mal, wenn eine Zeile gelesen wird, geht er zurück zur vorab geparsten Bibliothek, um einen Blick hineinzuwerfen. Wenn ein Ausdruck angetroffen wird (mit = + - * / % ++ – ! Parametern ... alles sind Ausdrücke), der einen Wert ändern kann, handelt es sich um einen Ausdruck. Wenn ein Ausdruck angetroffen wird, geht er zur Bibliothek und ändert den Wert.
alert(a); //未定义
var a=1; //在库里面a的值由未定义换成1
function fn1(){alert(2);}

alert(a); //弹出：function a(){alert(4);}
var a=1; //预解析中的a改为了1
alert(a);  //弹出1
function a(){alert(2);}//函数声明，没有改变a的值。什么也没发生。
alert(a); //继续弹出1，因为a在预处理库里面的值没有被改过。
var a=3; //预处理中a的值变为3
alert(a); //弹出3
function a(){alert(4);} //函数声明，什么也没有发生
alert(a); //继续弹出3
a(); //报错 a is not a function
Der Ablauf des obigen Codes beim Pre-Parsing ist wie folgt: 1) Pre-Parsing: var function Parameter ... lies var a = 1 => a ist undefined; lies function a(){alert(2);} => a = function a(){alert(2);}. Wenn eine Variable und eine Funktion denselben Namen haben, wird nur die Funktion beibehalten: a = function(){alert(2);}. Lies var a = 3 => a ist undefined; hier hat es denselben Namen wie die Funktion a oben, also wird weiterhin a = function(){alert(2);} beibehalten. Lies function a(){alert(4);} => a = function a(){alert(4);}. Es hat denselben Namen wie das vorherige a = function(){alert(2);}. Dem Kontext entsprechend überschreibt die spätere Funktion die frühere, daher behält das Pre-Parsing nur a = function(){alert(4);}. 2) Interpretiere den Code Zeile für Zeile. Wenn ein Ausdruck gelesen wird, kann der Ausdruck den vorab geparsten Wert ändern. Parameter können den vorab geparsten Wert ebenfalls ändern. Wenn ein Funktionsaufruf angetroffen wird, müssen zwei Dinge getan werden: Pre-Parsing und das Zeile-für-Zeile-Parsen des Codes. Eine Funktionsdeklaration ist kein Ausdruck und ändert den Wert beim Pre-Parsing nicht.

Geltungsbereich

  • Funktionen und Variablen, die innerhalb des <script>-Tags deklariert werden, sind globale Funktionen und globale Variablen (aber der JS-Parser muss zuerst einen Block fertig verarbeiten und dann den anderen Block verarbeiten).Von oben nach unten
  • Funktion: Eine Funktion ist auch ein Scope. Sie sucht ebenfalls zuerst und führt dann aus.Von innen nach außen
  • Objekt {}
Scope-Kette: der Prozess des Springens von einem untergeordneten Scope zu einem übergeordneten Scope
<script>
alert(a); //报错：a is not defined。因为在预解析里面压根就没有a这个东西
</script>

...

<script>
var a = 1;
</script>

<script>
alert(a); //不报错，会弹出undefined。因为预解析里面有a这个东西，但是由于执行的时候，还没有改变a的值，因此a的值为undefined
var a = 1;
</script>

...

<script>
</script>

<script>
var a = 1; //预解析里面存了a，并且a的值存为1
</script>

...

<script>
alert(a); //弹出1
</script>

var a = 1; //预处理中的全局变量a的值改为1
function fn1(){
    alert(a);
    var a = 2;
} //函数声明，什么也不做
fn1(); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，先预解析出一个局部的 a 是未定义（局部的a与全局的a一点关系都没有）；然后读代码，alert(a)弹出的是undefined；然后继续执行，遇到表达式，将局部的变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为1
Die Simulation des obigen Codes im JS-Parser ist wie folgt: 1) Vor-Parsing: var Funktionsparameter... a = ... fn1 = function fn1(){ alert(a); var a=2; } 2) Den Code Zeile für Zeile parsen. Ein weiteres Codebeispiel:
var a = 1; //预处理中的全局变量a的值改为1
function fn1(){
    alert(a);
    a = 2;
} //函数声明，什么也不做
fn1(); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，没有任何函数和变量声明，因此预解析里面没东西；然后读代码，alert(a)，在局部没有找到预解析的a，于是从子级作用域跳到父级作用域去找，找到了全局的a，所以弹出的是全局变量a的值1；然后继续执行，遇到表达式，将全局变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为2

var a = 1; //预处理中的全局变量a的值改为1
function fn1(a){ //参数本质上就是一个局部变量
    alert(a);
    a = 2;
} //函数声明，什么也不做
fn1(); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，找到参数a，因此预处理里面有个局部的a是未定义。；然后读代码，alert(a)，弹出的是局部的a为undefined；然后继续执行，遇到表达式，将局部变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为1

var a = 1; //预处理中的全局变量a的值改为1
function fn1(a){ //参数本质上就是一个局部变量
    alert(a);
    a = 2;
} //函数声明，什么也不做
fn1(a); //遇到函数调用，开始进行预解析和逐行解读代码。在函数内，找到局部参数a，因此预处理里面有个局部的a是未定义。；然后读代码，读到第一行function fn1(a)，这时有参数进来，把全局的a的值1赋给了局部变量a，这时局部变量a的值变为1，alert(a)，弹出的是局部的a为1；然后继续执行，遇到表达式，将局部变量a的值改为2。这时fn1的函数执行已经完成了。
alert(a); //弹出全局变量a为1

Den Wert innerhalb einer Funktion erhalten wollen

  • Methode 1: Verwende eine globale Variable innerhalb der Funktion. Weil Funktionen globale Variablen lesen und schreiben können. Siehe den Code unten:
var str = '';
function fn1(){
    var a = '大鸡腿~';
    str = a;
}
fn1();
  • Methode 2: Rufe eine globale Funktion innerhalb der Funktion auf und implementiere sie, indem Parameter übergeben werden. Siehe den Code unten:
function fn2(){
    var a = '99999999克拉钻石';
    fn3(a);
}
fn2();
function fn3(a){ //注意这个a是fn3里面的，与fn2里面的a毫无关系
    alert(a);
}
HinweiseDie geschweiften Klammern einer Funktion bilden einen Scope; if(){} ist kein Scope; for(){} ist ebenfalls kein Scope. Nur Scopes werden zuerst vorab geparst und dann ausgeführt. Die geschweiften Klammern von if und for haben keinen Vor-Parsing-Prozess.
alert(a); //弹出undefined。这说明if大括号中的a已经在全局就被预解析了，因此if的大括号并不是作用域
if(true){
    var a=1;
}
Beachte jedoch:
alert(fn1); //在火狐浏览器里面会报错说fn1 is not defined。但是在chrome浏览器里可以正常弹出fun1函数。

if(true){
    var a = 1;
    function fn1(){
        alert(123);
    }
}
Nur Firefox kann beim Vor-Parsing Funktionen, die in den Klammern von if oder for eingeschlossen sind, nicht vor-parsen. Daher gibt es Kompatibilitätsprobleme. Wenn du also globale Funktionen oder globale Variablen definieren möchtest, versuche, sie nicht in die geschweiften Klammern von if und for zu setzen; setze sie außerhalb der geschweiften Klammern.
for(var i=0; i<aBtn.length; i++){
    aBtn[i].onclick = function(){
        alert(i); //弹出3。因为必须for循环全部执行完成之后，aBtn才能够点击。但是for循环执行完了，外面的i已经变成3；但是在function里面又没有i，自然找到了外面的i，也就是3.
    }
}

for(var i=0; i<aBtn.length; i++){
    aBtn[i].onclick = function(){
        alert(i); //这时候弹出的就不是3了，是undefined
        
        for(var i=0; i<aBtn.legnth; i++){
            aBtn[i].style.background = 'yellow';
        }
    }
}

for(var i=0; i<aBtn.length; i++){
    aBtn[i].onclick = function(){
        alert(i); //下面for循环的括号中的var删去了，function里面又找不到i了，所以到父级找到了i，又是个3。因此，此处会弹出3.
        
        for (i = 0; i<aBtn.length; i++){
            aBtn[i].style.background = 'yellow';
        }
    }
}

Operatoren

Arithmetik

  • + Addition
  • - Subtraktion
  • * Multiplikation
  • / Division
  • % Modulo (Rest)

Zuweisung

  • =
  • +=
  • -=
  • *=
  • /=
  • %=

Relational

  • <
  • >
  • <=
  • >=
  • ==
  • !=
  • ===
  • !===

Logisch

  • && UND
  • || ODER
  • ! NICHT

Operatorrangfolge

  • Runde Klammern

Programmflusssteuerung

Bedingungen

  • if
  • switch (case break default)
  • ?:

Schleife

  • while
  • for

Break, Skip

  • break
  • continue

Was ist wahr, was ist falsch

  • Wahr: Nicht-Null-Zahlen, Strings, true, Funktionen, Objekte: [] {} Elemente, die gefunden werden können
  • Falsch: Null, NaN, leerer String, false, null, undefined, Elemente, die nicht gefunden werden können

Rückgabewert einer Funktion - return erklärt und angewendet

  • return-Rückgabewert: Funktionsname + Klammern (z. B. fn1()) entspricht dem Abrufen des Werts nach return innerhalb dieser Funktion
  • Alle Funktionen haben einen Standard-Rückgabewert: undefined
  • Kann zurückgeben: Zahlen, Strings, Booleans, Funktionen, Objekte (Elemente, [], {}, null), undefined
  • Jeglicher Code nach return wird nicht mehr ausgeführt
alert fn1();
function fn1(){
    return function(){
        alert(1);
    }
}
Was an dieser Stelle erscheint, ist: function(){alert(1);}
alert fn1()();
function fn1(){
    return function(){
        alert(1);
    }
}
Was an dieser Stelle erscheint, ist 1, was das Ergebnis der Ausführung der von return zurückgegebenen anonymen Funktion ist.
alert fn1()(10);
function fn1(){
    return function(a){
        alert(a);
    }
}
Was an dieser Stelle erscheint, ist 10.
alert fn1(20)(10);
function fn1(a){
    return function(b){
        alert(a + b);
    }
}
Was an dieser Stelle erscheint, ist 30.

Argumente

fn1(1, 2, 3); //tatsächliche Parameter — die tatsächlich übergebenen Parameter function fn1(a, b, c) //formale Parameter — formal repräsentieren die Namen a, b, c die Werte 1, 2, 3 Wenn du keine formalen Parameter schreibst, können 1, 2, 3 trotzdem übergeben werden, alle in arguments gespeichert. function fn1(){ //arguments => [1, 2, 3] — die Sammlung der tatsächlichen Parameter (kein Array, aber array-ähnlich, hat length und kann auch Indizes verwenden, um an die Daten zu gelangen) } Wenn die Anzahl der Funktionsparameter nicht bestimmt werden kann, verwende arguments:
alert(sum(1,2,3));
function sum(){
    var n=0;
    for(var i=0; i<arguments.length; i++){
        n += arguments[i];
    }
    return n;
}

var a=1;
function fn2(a){ //arguments的某个数值就相当于某个形参
    arguments[0]=3;
    alert(a); //弹出3
    var a=2;
    alert(arguments[0]); //弹出2
}
fn2(a);
alert(a); //弹出1

Anwendung von currentStyle und getComputedStyle

  • getComputedStyle ermittelt den vom Computer (Browser) berechneten Stil, ist aber nicht mit IE6, 7, 8 kompatibel
  • Die Methode currentStyle ist mit IE6, 7, 8 kompatibel, aber nicht mit Standardbrowsern
Methode zur Eigenschaftserkennung und Methode zur Versionserkennung zur Lösung von Kompatibilitätsproblemen zwischen Browsern ~~~ js function getStyle( obj, attr) { return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle( obj )[attr]; } ~~~Hinweise:
  • Wenn Sie die obige Methode verwenden, um einen zusammengesetzten Stil eines Elements abzurufen, z. B. background, dann verwenden Sie die obige Methode nicht, um ihn abzurufen, da es browserübergreifende Kompatibilitätsprobleme gibt. Verwenden Sie die obige Methode, um einen einzelnen Stil abzurufen, und verwenden Sie sie nicht, um zusammengesetzte Stile abzurufen.
  • Achten Sie bei der Verwendung der obigen Methoden darauf, keine zusätzlichen Leerzeichen einzugeben
  • Rufen Sie bei der Verwendung der obigen Methoden keine Stile ab, die nicht festgelegt wurden, da sie browserübergreifend inkompatibel sind
  • Vor Firefox 4.0 gab es einen Bug: Wenn auf getComputedStyle kein Parameter folgt, treten Probleme auf. Deshalb schreiben manche Leute getComputedStyle(obj, false); dieses false dient zur Behebung dieses Bugs. Dieser Bug kann auch als 0 oder als beliebiger anderer Parameter geschrieben werden. Aktuelle Firefox-Browser sind jedoch relativ neu, daher ist dieses Problem heute nicht mehr sehr verbreitet.

Timer

setInterval

setInterval(function, milliseconds); wird wiederholt ausgeführt (Engine)
var i=0;
function fn1(){
    document.title = i;
    i++;
}
setInterval(fn1, 1000);
Methoden des Ereignisaufrufs
  • fn1(); direkter Aufruf
  • document.onclick = fn1; Ereignisaufruf
  • setInterval(fn1, 1000); Funktionsaufruf
clearInterval 
var timer = setInterval(函数, 毫秒); //重复执行
clearInterval(timer); //清除定时器

var i=0,
    timer = null;
function fn1(){
    i++;    
    document.title = i;
    
    if(i===10){
        clearInterval(timer);
    }
}
timer = setInterval(fn1, 1000);
HinweisWenn der Timer durch ein Ereignis gesteuert wird, wie z. B. das onclick eines Buttons, dann müssen Sie einem Prinzip folgen: erst schließen, dann öffnen. Dadurch lässt sich vermeiden, dass durch mehrfaches Klicken auf den Button hintereinander Timer wiederholt gesetzt werden. Außerdem kann clearInterval() problemlos ausgeführt werden, unabhängig davon, ob als Argument ein Timer, null oder undefined übergeben wird.

setTimeout

var timer = setTimeout(function, milliseconds); wird einmal ausgeführt (Bombe) clearTimeout(timer);

Kleine Timer-Anwendung (Funktionskapselung und Callback-Funktion)

Funktionskapselung von doMove

<input id="btn1" type="button" value="走" />
<div id="div1"></div>

var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1');

oBtn1.onclick = function () {
    
    doMove ( oDiv, 'left', 12, 900, function () {
        doMove ( oDiv, 'top', 34, 500 );
    });

};

//doMove函数封装

function doMove ( obj, attr, dir, target, endFn ) {
    
    dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
    
    clearInterval( obj.timer );
    
    obj.timer = setInterval(function () {
        
        var speed = parseInt(getStyle( obj, attr )) + dir;          // 步长
        
        if ( speed > target &amp;&amp; dir > 0 ||  speed < target &amp;&amp; dir < 0  ) {
            speed = target;
        }
        
        obj.style[attr] = speed + 'px';
        
        if ( speed == target ) {
            clearInterval( obj.timer );
            
            /*
            if ( endFn ) {
                endFn();
            }
            */
            endFn &amp;&amp; endFn();
        }
        
    }, 30);
}

function getStyle ( obj, attr ) { 
    return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; 
}

Funktionskapselung von Shake

<img id="img1" src="img/4.jpg.html" />
<img id="img2" src="img/5.jpg.html" />

window.onload = function () {
    var oImg1 = document.getElementById('img1');
    var oImg2 = document.getElementById('img2');
    
    oImg1.onclick = fnShake;
    oImg2.onclick = fnShake;
    
    function fnShake() {
        var _this = this;
        shake( _this, 'left', function(){
            shake( _this, 'top' );
        });
    }

};

function shake ( obj, attr, endFn ) {
    var pos = parseInt( getStyle(obj, attr) ); //有隐患 需要解决
    var arr = [];           // 20, -20, 18, -18 ..... 0
    var num = 0;
    var timer = null;
        
    for ( var i=20; i>0; i-=2 ) {
        arr.push( i, -i );
    }
    arr.push(0);
        
    clearInterval( obj.shake );
    obj.shake = setInterval(function (){
        obj.style[attr] = pos + arr[num] + 'px';
        num++;
        if ( num === arr.length ) {
            clearInterval( obj.shake );
            endFn &amp;&amp; endFn();
        }
    }, 50);
}

Systemzeit-Objekt

new Date(); //aktuelles Systemzeit-Objekt
var myTime = new Date(); //myTime的类型是object
var iYear = myTime.getFullYear(); //获得年份
Verwandte Methoden (die folgenden geben alle numerische Typen zurück):
  • getFullYear()
  • getMonth()
  • getDate()
  • getDay()
  • getHours()
  • getMinutes()
  • getSeconds()
Notizen:
  • Bei dem mit getMonth() ermittelten Monat beginnt der Januar bei 0. Wenn der aktuelle Monat beispielsweise Mai ist, gibt getMonth() daher 4 zurück.
  • Der mit getDay() ermittelte Wochentag ist ein numerischer Wert. Wenn die aktuelle Zeit Sonntag ist, gibt er die Zahl 0 zurück.

Parameter des Date-Objekts

  • Numerische Form: new Date(2013, 4, 1, 9, 48, 12); //Jahr Monat Tag Stunde Minute Sekunde, beachten Sie, dass der Monat bei 0 beginnt.
var iNow = new Date();
var iNew = new Date(2014, 10, 26, 21, 56, 0);
var t = Math.floor((iNew - iNow)/1000); 
var str = Math.floor(t/86400) + '天' +  Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' +  t%60 + '秒';
  • Tage: Math.floor(t/86400)
  • Stunden: Math.floor(t%86400/3600)
  • Minuten: Math.floor(t%86400%3600/60)
  • Sekunden: t%60
  • Zeichenkettenform: new Date('June 10, 2013 12:12:12');
var iNow = new Date();
var iNew = new Date('November 10, 2013 21:56:0');
var t = Math.floor((iNew - iNow)/1000); 
var str = Math.floor(t/86400) + '天' +  Math.floor(t%86400/3600) + '时' + Math.floor(t%86400%3600/60) + '分' +  t%60 + '秒';

Zeitstempel

getTime(); gibt die Anzahl der Millisekunden vom 1. Januar 1970, 00:00:00.000 bis zur Gegenwart zurück

String-Operationen

String-Abrufklasse, Kapselung einer Methode zum Erkennen von Zahlen

  • .lengthAuch Leerzeichen zählen zur Länge
  • .charAt()Findet einen Teilstring. Wenn nichts in die Klammern geschrieben wird, wird standardmäßig das nullte Zeichen gesucht. Wenn er die Stringlänge minus 1 überschreitet, wird ein leerer String zurückgegeben
  • .charCodeAt()Ruft die Unicode-Kodierung des angegebenen Zeichens ab. Wenn nichts in die Klammern geschrieben wird, wird standardmäßig der Unicode-Wert des nullten Zeichens abgerufen. Das Minimum in den Klammern ist 0, und das Maximum ist die Stringlänge minus 1
  • String.fromCharCode();Gibt ein Zeichen basierend auf seiner Zeichenkodierung zurück. Zum Beispiel gibt String.fromCharCode(22937); das Zeichen "妙" zurück. Um mehrere Zeichen zu erhalten, trennen Sie verschiedene Zeichenkodierungen durch Kommas, zum Beispiel: String.fromCharCode(22937, 21916); gibt die beiden Zeichen "妙味" zurück. 0～9 => 48～57; a~z => 97~122; A~Z => 65~90
alert(detectNum(' 1a23d456'));
function detectNum(str){
    var n = 0;
    for(var i=0; i<str.length; i++){
        n = str.charAt(i);
        if( n < 48 || n > 57 ) {
            return false;
        }
    }
    return true;
}

indexOf、lastIndexOf

  • .indexOf()Gibt die Position eines Zeichens oder Strings innerhalb des gesamten Strings zurück. str.indexOf('m', 5) bedeutet, ab Position 5 im String str vorwärts nach der Position des Zeichens m zu suchen. Wenn indexOf() zum Suchen verwendet wird und es nicht gefunden werden kann, wird -1 zurückgegeben. Es sucht von links nach rechts. Wenn der zweite Parameter negativ ist, wird er standardmäßig als 0 behandelt.
var str = 'Example - 学的不仅是技术，更是梦想！'；
var s = 'Example';
var i = 0;

for ( ; str.indexOf(s, i) != -1; ){
    alert(str.indexOf(s, i));
    i = str.indexOf(s, i) + s.length;
}

oder 

while(str.indexOf(s, i) != -1) {
    alert(str.indexOf(s, i));
    i = str.indexOf(s, i) + s.length;
}
  • .lastIndexOf()Sucht von rechts nach links. Sie kann auch einen numerischen Parameter annehmen, der angibt, von wo aus rückwärts gesucht werden soll.

Vergleichsklasse, Slicing-Klasse

  • Beim Größenvergleich von Strings wird die Unicode-Kodierung des Zeichens an Position 0 der Strings verglichen.
  • .substring(n, m)Extrahiert Zeichen von der n-ten Position bis zur m-ten Position. Wenn kein m vorhanden ist, wird standardmäßig bis zur letzten Position extrahiert. str.substring(2, 0); und str.substring(0, 2); haben dasselbe Ergebnis. substring kann die Größe der beiden Parameter innerhalb der Klammern prüfen. Wenn der spätere Parameter kleiner als der frühere Parameter ist, werden die beiden Parameter automatisch vertauscht. Wenn überhaupt keine Parameter in den Klammern stehen, entspricht es dem Extrahieren von Position 0 bis zur letzten Position, also der gesamten Zeichenkette. Wenn ein Parameter negativ ist, wird er als 0 behandelt.
  • .slice(n, m)str.slice(0, 2) und str.slide(2, 0) haben unterschiedliche Ergebnisse. Letzteres kann kein Ergebnis finden, weil die Methode .slice() die Größe der darin enthaltenen Parameter nicht prüft und ihre Positionen nicht vertauscht. str.slice(-2); extrahiert von der letzten Position bis zur vorletzten Position. -1 repräsentiert das letzte Zeichen der Zeichenkette. str.slice(-4, -2); extrahiert die Zeichenkette von der viertletzten Position bis zur vorletzten Position.

Umwandlung der Groß-/Kleinschreibung, split zum Aufteilen von Strings

  • .toUpperCase()In Großbuchstaben umwandeln
  • .toLowerCase()In Kleinbuchstaben umwandeln
  • .split()Eine Zeichenkette in ein Array aufteilen. var str = 'www.miaov.com'; str.split('.'); => ["www", "miaov", "com"]; var str1 = 'leo'; str1.split(); => ['leo']; str2 = 'leo'; str2.split(''); => ["l", "e", "o"]; var str3 = '/www.miaov.com/'; str3.split('/'); => ["", "www.miaov.com", ""]; var str4 = '2013-11-29-23-07'; str4.split('-', 3); => ["2013", "11", "29"]
  • .join()Methode, mit der die Elemente eines Arrays zusammengefügt werden. var arr = ['aa', 'bb', 'cc]; arr.join(); => 'aa,bb,cc'. Wenn nichts in die Klammern von .join() geschrieben wird, werden standardmäßig Kommas zum Trennen verwendet. arr.join(''); => 'aabbcc'; arr.join('-'); => 'aa-bb-cc'

Zusammenfassung der String-Operationen

var str = 'Example-www.example.com';

str.charAt(1); // 3
str.charCodeAt(1); // 51
String.fromCharCode(119, 51); // w3

str.indexOf('c', 3); // 4
str.lastIndexOf('o'); // 25

'1000' < '2' // true
'1000' > 2 // true

str.substring(0, 4); // Example
str.slice(-3); // .cc

str.toUpperCase(); // Example-WWW.example.com
str.toLowerCase(); // Example-www.example.com

str.split('.', 2); // ["Example-www", "example"]

var arr = ['www', 'example', 'com'];
arr.join('.'); // www.example.com

Array-Operationen

JSON-Datenformat und Syntax

var json = { name: 'leo', age: 32};
alert(json.name);

var imgData = { 
    url: ['img/1.png', 'img/2.png'],
    text: ['图片一', '图片二']
};
alert(imgData.url[1]);

var json2 = { 'name': 'miaov' }; //推荐的安全格式的写法
alert(json2.name);
alert(json2['name']);
json2.name = 'abc';
json2['name'] = '妙味'; //注意中括号里面要用引号

var arr = [{'name': 'TM', 'age': 23}, {'name': 'leo', 'age': 32}];
alert(arr[0].name);

for-in-Schleife, JSON durchlaufen

var json4 = { 'name': 'miaov', 'age': 3, 'fun': '前端开发'};
for(var attr in json4){
    alert(attr);
    alert(json4[attr]);
}

var json5 = { 
    url: ['img/1.png', 'img/2.png'],
    text: ['图片一', '图片二']
};

for(var attr in json5) {
    for(var i=0; i<json5[attr].length; i++){
        alert(json5[attr][i]);
    }
}
for-in kann auch über Objekteigenschaften iterieren:
var str = '';
var num = 0;
for(var attr in window){
    str += num + '. ' + attr + ' : ' + window[attr] + '<br/>';
    num ++;
}
document.body.innerHTML = str;
Arrays können auch mit for-in durchlaufen werden:
var arr = ['a', 'b', 'c'];
for(var i in arr){
    alert(arr[i]);
}

Arrays leeren und Effizienz des Leerens von Arrays

// var arr = [1, 2, 3];
// var arr = new Array(1, 2, 3);

var arr = new Array(4);
alert(arr.length); // 4 在new Array()里面写了一个数字，就是定义了arr的长度

var arr = [1, 2, 3];
arr.length = 1; //数组的length属性是可写的
alert(arr);

var arr = [1, 2, 3];
arr.length = 0; //快速清空数组arr
oder 
arr = []; //通过重新赋值来清空数组，效率更高

var str = 'aaaaa';
str.length = 1;
alert(str); // 'aaaaa'
//字符串的length属性不可写，但是数组的length属性可写

Array-Operationen

Hinzufügen
  • push-Methode: arr.push(); fügt Inhalt an der letzten Position des Arrays hinzu. Die Methode .push() hat einen Rückgabewert, der die neue Länge des Arrays ist.
  • unshift-Methode: arr.unshift(); fügt Inhalt ganz am Anfang des Arrays hinzu. Der Rückgabewert ist die neue Länge des Arrays (IE6 und IE7 unterstützen den Rückgabewert von unshift nicht).
Löschen
  • pop-Methode: arr.pop(); löscht das letzte Element des Arrays. Der Rückgabewert ist der verworfene Wert.
  • shift-Methode: arr.shift(); löscht das erste Element des Arrays. Der Rückgabewert ist das entfernte Element.
Tipps 
var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
arr.unshift(arr.pop()); //数组变为：['Leo', '钟毅', '张森', '杜鹏', 'TM']
oder 
arr.push(arr.shift()); //数组变为：['钟毅', '张森', '杜鹏', 'Leo', 'TM']
splice-Methode
  • Die splice-Methode hat drei Funktionen: Löschen, Ersetzen und Hinzufügen.
var arr = ['TM', '钟毅', '张森', '杜鹏', 'Leo'];
//删除
//arr.splice(0, 1); //删掉第0位，删1个。两个参数第一个是从第几位开始，第二个是删掉几个。splice删除的时候有返回值，返回的是被删除的内容
//替换
//arr.splice(0, 1, '莫涛'); //替换第0位，替换1个，替换为'莫涛'。返回的还是删除的东西
//添加
arr.splice(1, 0, '李贤'); //在第1位那里，删除0个，添加了一个'李贤'到了第1位，'钟毅'就变成了arr[2]了。后面也可以添加多个。如果splice删除了0个，那么就没有返回值。

Array-Deduplizierung

var arr = [1, 2, 2, 4, 2];
for ( var i=0; i<arr.length; i++ ) {
    for ( var j = i+1; j<arr.length; j++) {
        if( arr[i]==arr[j] ){
            arr.splice( j, 1 );
            j--;
        }
    }
}
sort-Sortierung 
var arr = ['c', 'd', 'a', 'e'];
arr.sort(); // 'a', 'c', 'd', 'e' 按照unicode编码排序

var arr2 = [4, 3, 5, 76, 2, 0, 8];
// arr2.sort(); // 0, 2, 3, 4, 5, 76, 8 sort默认是将数组中的每一个按照字符串来排序的，因此出现了76排在8前面的情况

// arr2. sort(function( a, b ){
    return a - b; //如果a-b返回正数，就a、b两个数字换个序。如果a-b是负数，就不换序
}) //返回数字从小到大 0, 2, 3, 4, 5, 8, 76

// arr2. sort(function( a, b ){
    return b - a;
}) //返回数字从大到小 76,, 8, 5, 4, 3, 2, 0
Weitere Sortiermethoden:
  • Quicksort
  • Shellsort
  • Bubblesort
  • Mergesort
  • Selectionsort
  • Insertionsort
var arrWidth = ['345px', '23px', '10px', '1000px'];
arrWidth.sort(function(a, b){
    return parseInt(a) - parseInt(b);
}); // ['10px', '23px', '345px', '1000px']
Zufällige Sortierung 
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.sort(function(a, b){
    return Math.random(); - 0.5;
});

Zufallszahlen und der Denkprozess der Zufallsformel

Math.random(); gibt eine Zufallszahl zwischen 0 und 1 zurück Wenn Sie zufällig eine Ganzzahl zwischen 0 und 1 zurückgeben möchten, können Sie die Rundungsmethode verwenden: Math.round(Math.random()); // Hinweis: Math.floor darf hier nicht verwendet werden Wenn Sie eine Zufallszahl zwischen 0 und 10 zurückgeben möchten: Math.round(Math.random() * 10); // Gibt eine zufällige Ganzzahl zwischen 0 und 10 zurück Gibt eine Zufallszahl zwischen 20 und 100 zurück: Math.round( Math.random()*80 + 20 ); // Gibt eine zufällige Ganzzahl zwischen 5 und 10 zurück Wenn Sie eine zufällige Ganzzahl zwischen x und y zurückgeben möchten, können Sie schreiben: Math.round( Math.random() * (y - x) + x ); Um eine Ganzzahl von 0 bis x zurückzugeben, können Sie schreiben: Math.round( Math.random() * x ); Um eine Ganzzahl von 1 bis x zurückzugeben, können Sie schreiben: Math.ceil( Math.random() * x ); // Math.ceil() rundet aufconcat-MethodeDie concat-Methode wird zum Verketten von Arrays verwendet.
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [7, 8, 9];

arr1.concat(arr2); //[1, 2, 3, 4, 5, 6] 新数组与原来数组没什么关系。
arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
reverse-MethodeDie reverse-Methode kehrt die Positionen in einem Array um und verändert das ursprüngliche Array.
var arr1 = [1, 2, 3];
arr1.reverse();
alert(arr1); // [3, 2, 1]

var str = 'abcdef';
alert(str.split('').reverse().join('')); //'fedcba'

Referenzen

Weitere Tutorials finden Sie in unserem:JavaScript-Tutorial。