Heim  >  Artikel  >  Web-Frontend  >  Fähigkeiten, die Sie in JavaScript beherrschen müssen

Fähigkeiten, die Sie in JavaScript beherrschen müssen

零下一度
零下一度Original
2017-07-19 17:42:271024Durchsuche

Wenn Sie neu bei JavaScript sind oder erst kürzlich bei Ihrer Entwicklungsarbeit darauf gestoßen sind, sind Sie möglicherweise frustriert. Alle Sprachen haben ihre Eigenheiten – aber Entwickler, die von einer serverseitigen Sprache auf Basis starker Typisierung wechseln, können verwirrt sein. So ging es mir vor ein paar Jahren, als man mich dazu drängte, Vollzeit-JavaScript-Entwickler zu werden, und es gab viele Dinge, die ich am Anfang gerne gewusst hätte. In diesem Artikel werde ich einige meiner Macken teilen und hoffentlich kann ich einige der Erfahrungen, die mir viel Kopfzerbrechen bereitet haben, mit Ihnen teilen. Dies ist keine vollständige Liste – nur eine unvollständige Liste – aber hoffentlich öffnet sie Ihnen die Augen für die Macht dieser Sprache und für Dinge, die Sie vielleicht einmal als Hindernis angesehen haben.

1. Null (null, undefiniert) Überprüfung

Wenn wir eine neue Variable erstellen, überprüfen wir normalerweise, ob der Wert der Variablen null (null) oder anderweitig undefiniert ist. Dies ist eine Überprüfung, die bei der JavaScript-Programmierung häufig berücksichtigt werden muss.

Wenn man es direkt schreibt, dann sieht es so aus:

tbody>Wir können eine prägnantere Version verwenden:

if (variable1 !== null || variable1 !== undefiniert || variable1 !== '') { let variable2 = variable1; }
if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1; }

let variable2 = variable1  || '';

let variable2 = variable1 ||. '';
//值为null的例子
let variable1 = null;
let variable2 = variable1  || '';
console.log(variable2);
//输出: ''
//值为undefined的例子
let variable1 = undefined;
let variable2 = variable1  || '';
console.log(variable2);
//输出: ''
//正常情况
let variable1 = 'hi there';
let variable2 = variable1  || '';
console.log(variable2);
//输出: 'hi there'

Wenn Sie es nicht glauben, probieren Sie es in der Konsole des Google Chrome-Entwicklerpanels aus!

tbody>
//Beispiel für einen Nullwert

let variable1 = null;
let variable2 = variable1 ||. '';
let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";

console.log(variable2);
//Ausgabe: ''

//Beispiel für undefinierten Wert
let variable1 = undefiniert;
let a = ["myString1", "myString2", "myString3"];

let variable2 = variable1 || '';

console.log(variable2);
//Ausgabe: ''
let big;
if (x > 10) {
big = true;
}
else {
big = false;
}
//Normale Situation

let variable1 = 'hi there';
let big = x > 10 ? true : false;
let variable2 = variable1 ||. '';
console.log(variable2 );
//Ausgabe: 'Hallo'
2. ArrayDas scheint relativ einfach zu sein! Nicht optimierter Code:
let a = new Array(); a[0] = "myString1"; 1] = "myString2"; a[2] = "myString3";
Code optimieren:
let a = ["myString1", "myString2", "myString3"];
3. Optimierung von if true .. else Vereinfacht:
let big;
if (x > 10) {
big = true ;
}
else {
big = false;
}
let big = x > 10 ? true : false;

Vereinfacht die Codemenge erheblich!

let big = (x > 10);
let x = 3,
big = (x > 10) ? "greater 10" : (x < 5) ? "less 5" : "between 5 and 10";
console.log(big); //"less 5"
let x = 20,
big = {true: x>10, false : x< =10};
console.log(big); //"Object {true=true, false=false}"

4. Variablendeklaration

Obwohl JavaScript automatisch Variablen hochhebt, kann diese Methode verwendet werden, um alle Variablen in einer Zeile am Kopf der Funktion zu deklarieren.

Vor der Optimierung:

let x;
let y;
let z = 3;

Nach der Optimierung:

let x, y, z=3;

5. Vereinfachung von Zuweisungsanweisungen

Vor der Vereinfachung:

x=x+1;
minusCount = minusCount - 1;
y=y*10;

Nach der Vereinfachung:

x++;
minusCount --;
y*=10;

Angenommen x=10, y=5, dann Grundlegende arithmetische Operationen können die folgenden Abkürzungen verwenden:

x += y // x=15
x -= y // x=5
x *= y // x=50
x /= y // x=2
x %= y // x=0

6. Vermeiden Sie die Verwendung von RegExp-Objekten

vor der Vereinfachung:

var re = new RegExp("d+(.)+d+","igm"),
result = re.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"

Vereinfacht:

var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"

7. Wenn die Zustandsoptimierung

Obwohl es sehr einfach ist, ist es dennoch erwähnenswert.

Vor der Vereinfachung:

if (likeJavaScript === true)

Nach der Vereinfachung:

if (likeJavaScript)

Lassen Sie uns einen weiteren Satz bilden, um zu beurteilen, ob dies der Fall ist wahr ist oder nicht. Beispiel:

let c;
if ( c!= true ) {
// do something...
}

Vereinfacht:

let c;
if ( !c ) {
// do something...
}

9. Funktionsparameteroptimierung

Ich persönlich tendiere dazu, die Methode zum Abrufen von Objektelementen für den Zugriff zu verwenden Funktionsparameter, das ist natürlich Ansichtssache!

Normalerweise verwendete Version:

function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
// do something...
}
myFunction( "String", 1, [], {}, true );

Meine Lieblingsversion:

function myFunction() {
/* 注释部分
console.log( arguments.length ); // 返回 5
for ( i = 0; i < arguments.length; i++ ) {
console.log( typeof arguments[i] ); // 返回 string, number, object, object, boolean
}
*/
}
myFunction( "String", 1, [], {}, true );

Anmerkung des Übersetzers: Es gibt Kommentare Unten im Originalartikel heißt es, dass die Verwendung der Methode des Originalposters nicht empfohlen wird. Die Reihenfolge der Funktionsparameter kann mit der ersten Methode geändert werden, bei der zweiten Methode sollten Sie jedoch vorsichtig sein.

10. Alternativen zu charAt()

Vor der Vereinfachung:

"myString".charAt(0);

Nach der Vereinfachung:

"myString"[0]; // 返回 'm'

Anmerkung des Übersetzers: Ich glaube, dass es nicht mehr viele Menschen gibt, die die erste Methode anwenden!

11. Funktionsaufrufe können kürzer sein

Vor der Vereinfachung:

function x() {console.log('x')};function y() {console.log('y')};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}

Nach der Vereinfachung:

function x() {console.log('x')};function y() {console.log('y')};let z = 3;
(z==3?x:y)();


Sie sagten, Si Bu Si sei kurz?

12. Wie man große Zahlen elegant ausdrückt

In JavaScript gibt es eine Möglichkeit, Zahlen abzukürzen, vielleicht haben Sie sie ignoriert. 1e7 bedeutet 10000000.

Vor der Vereinfachung:

for (let i = 0; i < 10000; i++) {


Nach der Vereinfachung:

for (let i = 0; i < 1e7; i++) {

Das obige ist der detaillierte Inhalt vonFähigkeiten, die Sie in JavaScript beherrschen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn