Dieser Artikel gibt Ihnen hauptsächlich einige JS-Tipps. Der Artikel ist etwas lang, ich hoffe, er kann Ihnen helfen.
1. JavaScript-Fehlertoleranzcode (Abschirmung von JS-Fehlern)
<span style="font-size: 14px;"><script language="javascript"><br> <!-- /*屏蔽所有的js错误*/<br/> function killerrors() {<br/> return true;<br/> }<br/> window.onerror = killerrors; //--></script><br></span>kann Ihnen diese kurzen und praktischen JavaScript-Kenntnisse vermitteln, um Ihre Programmierfähigkeiten zu verbessern eine sehr erfreuliche Sache für mich. In weniger als 2 Minuten pro Tag können Sie die Funktionen durchlesen, die uns diese schreckliche JavaScript-Sprache bietet: Leistung (Leistung), Konventionen (Protokoll), Hacks (Code-Hacks), Interviewfragen (Interviewfragen). ) und alle anderen Artikel.
== (oder !=). wird sein Oder in denselben Typ konvertieren und erneut vergleichen. === (oder !==) vergleicht die Typen und Werte der beiden verglichen mit ==, der Vergleich von === wird strenger sein.
[10] == 10 // wahr
[10] === 10 // falsch
“10” == 10 // wahr
“10” === 10 // falsch
[] == 0 // wahr
[] === 0 // falsch
"" == falsch // wahr, aber wahr == "a" ist falsch
"" == = false // false
Das Konvertieren von Zeichenfolgen in Zahlen ist sehr verbreitet. Der einfachste und schnellste (jspref) Weg, dies zu tun, wäre die Verwendung des + (Plus)-Algorithmus.
var one = '1';
var numberOne = +one; // Nummer 1
Sie können auch -( Minuszeichen) des Konvertierungstyps des Algorithmus und wird zu einem negativen Wert.
var one = '1';
var negativeNumberOne = -one; // Number -1
Sie definieren ein Array und möchten dessen Inhalt löschen. Normalerweise würden Sie Folgendes tun:
var list = [1, 2, 3, 4];
function empty() {
//清空数组
list = [];
}
empty();
但是还有一种更高性能的方法。
你可以使用这些代码：
var list = [1, 2, 3, 4];
function empty() {
//清空数组
list.length = 0;
}
empty();
· list =[] 将一个变量指定个引用到那个数组，而其他引用都不受影响。这意味着，对于先前数组的内容的引用仍然保留在内存中，从而导致内存泄漏。
· list.length = 0 删除数组内的所有东西，这不需要引用任何其他的东西
然而，如果你有一个copy的数组（A和copy-A），如果你使用list.length = 0 删除其内容，副本也会失去它的内容。
var foo = [1,2,3];
var bar = [1,2,3];
var foo2 = foo;
var bar2 = bar;
foo = [];
bar.length = 0;
console.log(foo, bar, foo2, bar2);
//[] [] [1, 2, 3] []Weitere Details zu StackOverflow: Differenz-zwischen-Array-Länge-0-und-Array
Dieser Code verwendet hier den Fisher-Yates-Mischalgorithmus, um ein angegebenes Array (zufällig geordnet) zu mischen.
function shuffle(arr) {
var i,
j,
temp;
for (i = arr.length - 1; i > 0; i–) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
};Fall:
?
1
2
3
4
var a = [1, 2, 3, 4, 5, 6, 7, 8];
var b = shuffle(a); 🎜>console.log(b);
// [2, 7, 8, 6, 5, 3, 1, 4]
Beim Erstellen von Funktionen für objektorientierte JavaScript-Objekte ermöglicht die Rückgabe eines Objekts von der Funktion, dass die Funktionen zur Ausführung miteinander verkettet werden.
function Person(name) {
this.name = name;
this.sayName = function() {
console.log(“Hello my name is: “, this.name);
return this;
};
this.changeName = function(name) {
this.name = name;
return this;
};
}
var person = new Person(“John”);
person.sayName().changeName(“Timmy”).sayName();
//Hello my name is: John
//Hello my name is: TimmyGehen Sie davon aus, dass Sie da sind sind einige Variablen unbekannten Typs und Sie möchten sie verketten. Natürlich werden bei der Kaskadierung keine algorithmischen Operationen angewendet:
var one = 1; var three = '3'; var result = .concat(one, two, three); //“123“
Eine solche Verkettung ist nicht genau das, was Sie erwarten. Stattdessen kann es zu einer Verkettung und Phase kommen zu unerwarteten Ergebnissen:
var eins = 1;
var drei = '3';var Ergebnis = eins + zwei + drei ; //"33" statt "123"
Apropos Leistung: Vergleichen Sie Join und Concat. Erfahren Sie mehr über Concat 🎜>
8 - Schnelleres Runden
Obwohl die Leistung möglicherweise besser ist, verwenden Sie Math.floor() >
在node里，你可以根据代是运行了require(‘./something.js’)还是node something.js，来告诉你的程序去做两件不同的事情。如果你想与你的一个独立的模块进行交互，这是很有用的。
if (!module.parent) {
// 运行
node something.js
app.listen(8088, function() {
console.log(‘app listening on port 8088’);
})
} else {
// 使用
require('/.something.js')
module.exports = app;
}更多信息，请看the documentation for modules
在默认情况下，你无法将参数传给回调函数，如下：
function callback() {
console.log(‘Hi human’);
}
document.getElementById(‘someelem’).addEventListener(‘click’, callback);
你可以采取JavaScript闭包的优点来给回调函数传参，案例如下：
function callback(a, b) {
return function() {
console.log(‘sum = ‘, (a+b));
}
}
var x = 1, y = 2;
document.getElementById(‘someelem’).addEventListener(‘click’, callback(x, y));什么是闭包呢？闭包是指一个针对独立的(自由)变量的函数。换句话说，闭包中定义的函数会记住它被创建的环境。了解更多请参阅MDN所以这种方式当被调用的时候，参数X/Y存在于回调函数的作用域内。
另一种方法是使用绑定方法。例如：
var alertText = function(text) {
alert(text);
};
document.getElementById(‘someelem’).addEventListener(‘click’, alertText.bind(this, ‘hello’));两种方法在性能上有一些略微区别，详情参阅jsperf
原生的JavaScript没有contains方法。对检查字符串或字符串数组项中是否存在某值，你可以这样做：
var someText = ‘JavaScript rules’;
if (someText.indexOf(‘JavaScript’) !== -1) {
}
// 或者
if (someText.indexOf(‘JavaScript’) >= 0) {
}但是我们再看看这些ExpressJs代码片段。
// examples/mvc/lib/boot.js
for (var key in obj) {
// “reserved” exports
if (~[‘name’, ‘prefix’, ‘engine’, ‘before’].indexOf(key)) continue;
// examples/lib/utils.js
exports.normalizeType = function(type){
return ~type.indexOf(‘/’)
? acceptParams(type)
{ value: mime.lookup(type), params: {} };
};
// examples/web-service/index.js
// key is invalid
if (!~apiKeys.indexOf(key)) return next(error(401, ‘invalid api key’));问题是~位运算符。”运算符执行操作这样的二进制表达式，但他们返回标准的JavaScript的数值.”
他们将-1转换为0，而0在JavaScript中又是false。
var someText = ‘text’; !!~someText.indexOf(‘tex’); // someText 包含 “tex” - true !~someText.indexOf(‘tex’); // someText 不包含 “tex” - false ~someText.indexOf(‘asd’); // someText 不包含 “asd” - false ~someText.indexOf(‘ext’); // someText 包含 “ext” - true String.prototype.includes()
在ES6(ES 2015)中介绍了includes()方法可以用来确定是否一个字符串包含另一个字符串：
‘something’.includes(‘thing’); // true
在ECMAScript 2016 (ES7)中，甚至数组都可以这样操作，如indexOf：
!!~[1, 2, 3].indexOf(1); // true
[1, 2, 3].includes(1); // true
不幸的是，这只是在Chrome，Firefox，Safari 9或以上的浏览器中被支持。
介绍下ES6里的新功能，arrow函数可能会是个很方便的工具，用更少行数写更多代码。他的名字来源于他的语法，=>和小箭头->比就像一个“胖胖的箭头”。可能有些人知道，这种函数类型和其他静态语言如lambda表达式的匿名函数。它被称为匿名，因为这些箭头函数没有一个描述性的函数名。
那么这样有什么好处呢？
语法：更少的LOC，不用一次次的键入函数关键字。
语义：从上下文中捕捉关键字this。
简单语法案例：
看看下面的两段代码片段，他们做的是一样的工作。你能很快的理解arrow函数的功能。
// arrow函数的日常语法 param => expression // 可能也会写在括号中 // 括号是多参数要求 (param1 [, param2]) => expression
// 使用日常函数 var arr = [5,3,2,9,1]; var arrFunc = arr.map(function(x) { return x * x; }); console.log(arr)
// 使用arrow函数 var arr = [5,3,2,9,1]; var arrFunc = arr.map((x) => x*x); console.log(arr)正如你所看到的，这个例子中的arrow函数可以节省你输入括号内参数和返回关键字的时间。建议把圆括号内的参数输入，如 (x,y) => x+y 。在不同的使用情况下，它只是
用来应对遗忘的一种方式。但是上面的代码也会这样执行：x => x*x.目前看来，这些仅仅是导致更少的LOC和更好的可读性的句法改进。
this 绑定
还有一个更好的理由使用arrow函数。那就是在会出现this问题的背景下。使用arrow函数，你就不用担心.bind(this)和 that=this 了。因为arrow函数会从上下文中找到this。
看下面的例子：
// 全局定义this.i
this.i = 100;
var counterA = new CounterA();
var counterB = new CounterB();
var counterC = new CounterC();
var counterD = new CounterD();
// 不好的示例
function CounterA() {
// CounterA’s this 实例 (!! 忽略这里)
this.i = 0;
setInterval(function () {
// this 指全局对象，而不是 CounterA’s this
// 因此，开始计数与100，而不是0 (本地的 this.i)
this.i++;
document.getElementById(“counterA”).innerHTML = this.i;
}, 500);
}
// 手动绑定 that = this
function CounterB() {
this.i = 0;
var that = this;
setInterval(function() {
that.i++;
document.getElementById(“counterB”).innerHTML = that.i;
}, 500);
}
// 使用 .bind(this)
function CounterC() {
this.i = 0;
setInterval(function() {
this.i++;
document.getElementById(“counterC”).innerHTML = this.i;
}.bind(this), 500);
}
// 使用 arrow函数
function CounterD() {
this.i = 0;
setInterval(() => {
this.i++;
document.getElementById(“counterD”).innerHTML = this.i;
}, 500);
}关于arrow函数的进一步信息可以看这里 。查看不同的语法选请访问该站点。
快速测量一个JavaScript块的性能，我们可以使用控制台的功能像console.time(label)和console.timeEnd(label)
console.time(“Array initialize”);
var arr = new Array(100),
len = arr.length,
i;
for (i = 0; i < len; i++) {
arr[i] = new Object();
};
console.timeEnd(“Array initialize”); // 输出: Array initialize: 0.711ms更多信息Console object, JavaScript benchmarking
demo：jsfiddle-codepen (在浏览器控制台输出)
在许多编程语言中，函数的参数是默认的，而开发人员必须显式定义一个参数是可选的。在JavaScript中的每个参数是可选的，但我们可以这一行为而不让一个函数利用ES6的默认值作为参数。
const _err = function( message ){ _err是立即抛出一个错误的函数。如果没有一个参数作为值，默认值是会被使用，_err将被调用，将抛出错误。你可以在Mozilla开发者网络看到的更多默认参数的例子。 理解提升将帮助你组织你的function。只需要记住，变量声明和定义函数会被提升到顶部。变量的定义是不会的，即使你在同一行中声明和定义一个变量。此外，变量声明让系统知道变量存在，而定义是将其赋值给它。 为了使事情更容易阅读，在函数作用域内提升变量的声明将会让你明确该变量的声明是来自哪个作用域。在你需要使用变量之前定义它们。在作用域底部定义函数，确保代码清晰规范。 当你要检查一个对象是否存在某个属性时，你可能会这样做 ： var myObject = { 这是可以的，但你必须知道这个还有两原生的方式，in operator 和 object.hasownproperty，每个对象是对象，既可用方法。每个object都继承自Object，这两个方法都可用。 两个方法的一些不同点： var myObject = { 他们之间的不同在于检查的性质，换句话说，当该对象本身有查找的属性时hasOwnProperty返回yrue，然而，in operator不区分属性创建的对象和属性继承的原型链。 var myFunc = function() { <br>this.name = ‘@tips_js’; 点击看例子。同时，建议在检查对象的属性存在时，阅读这些有关的常见错误。 截至ES6，JS已经有模板字符串作为替代经典的结束引用的字符串。 var firstName = ‘Jake’; 在模板字符串中${}中，你可以写不用写/n或者简单逻辑来实现多行字符串。 Die Methode querySelectorAll gibt ein Knotenlistenobjekt ähnlich einem Array zurück. Diese Datenstrukturen ähneln Arrays, da sie häufig in Form von Arrays angezeigt werden, Array-Methoden wie Map und Foreach jedoch nicht verwendet werden können. Hier ist eine schnelle, sichere und wiederverwendbare Möglichkeit, eine Knotenliste in ein Array von DOM-Elementen zu konvertieren: const nodelist = document.querySelectorAll('p'); .apply(null, nodelist); Wenn Sie es2015 verwenden, können Sie...(Spread-Operator) verwenden const nodelist = […document.querySelectorAll('p ') ]; // Gibt ein echtes Array zurück nodelist.forEach(…); nodelist.slice(…); 🎜>//etc… Programmierer lassen den Computer gerne langweilige Dinge für uns erledigen und überprüfen einige Fehler in unserer Arbeit. „use strict“ weist uns an, dies zu tun und unsere Fehler in JavaScript-Fehler umzuwandeln. Wir können diese Direktive am Anfang einer js-Datei hinzufügen: // Die gesamte Skriptdatei wird eine strikte Modussyntax haben„use strict“; var v = „Hallo! Ich bin ein Strict-Mode-Skript!“ function f() // Strict Modussyntax im Funktionsbereich · Reservierte Zeichen oder zukünftige reservierte Zeichen schützen von der Verwendung als Variablennamen Der strikte Modus ist in neuen Projekten von Vorteil, aber es kann sehr schwierig sein, ihn in älteren Projekten zu verwenden, in denen er an den meisten Stellen nicht verwendet wird. Es stellt auch ein Problem dar, wenn Sie mehrere Dateien zu einer zusammenführen, da dies dazu führen kann, dass die gesamte Datei im strikten Modus ausgeführt wird. Es ist keine Deklaration, sondern nur ein Literal und wird von früheren Browserversionen ignoriert. Unterstützung des strengen Modus: · Opera 12+ Sie müssen einfach zuerst alles in ein Array einfügen. Array.concat akzeptiert ein Array oder ein einzelnes Objekt: } printUpperCase kann jetzt entweder ein einzelnes Element als Parameter oder ein Array empfangen: . JavaScript definiert undefinierte Variablen standardmäßig als undefiniert · JavaScript setzt keinen Nullwert auf nicht zugewiesene Variablen. Er wird von Programmierern verwendet, um einen wertlosen Wert darzustellen ['Shanghai', 'New York', 'Mumbai', 'Buenos Aires'].sort(); Sehen Sie sich ein einfaches Beispiel an: // Spanisch // ["cosas", "fútbol", "árbol", "único"] // Falsche Sortierung// Deutsch ['único','árbol', 'cosas', 'fútbol'].sort(function ( a, b) { }// [„árbol“, „cosas“, „fútbol“, „único“] ['Woche ', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) { ['único','árbol ', 'cosas', 'fútbol'].sort(Intl.Collator().compare); // ["árbol", "cosas", "fútbol", "único"] ['Woche ', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare); · Im FF-Browser ist intl.collator() schneller, wenn der Vergleich große Zahlen oder Zeichenfolgen umfasst Denken Sie daher daran, diese Methode zu verwenden, wenn Sie einem String-Array in einer anderen Sprache als Englisch zuweisen, um eine versehentliche Sortierung zu vermeiden. 23 – Verschachtelte Bedingungen verbessern if (color) { if (color === 'black') { printBlackBackground(); printRedBackground(); } else if (color === 'blue') { Eine Verbesserung besteht darin, switch-Anweisungen anstelle verschachtelter if-Anweisungen zu verwenden. Obwohl es übersichtlicher und besser organisiert ist, wird es nicht empfohlen, da es schwierig zu debuggen ist. Hier erfahren Sie, warum. switch(color) { switch(true) { case (typeof color === 'string' && color === 'black'): printBlackBackground(); case (typeof color === 'string' && color === 'red'): printRedBackground(); Schlüssel ist einer, der alle Komponenten darstellt, die Sie an den übergeben müssen dynamische Array-Eigenschaft. Dies ist eine eindeutige und spezifische ID, die React verwendet, um jede DOM-Komponente zu identifizieren und festzustellen, ob es sich um eine andere Komponente oder um dieselbe Komponente handelt. Verwenden Sie Schlüssel, um sicherzustellen, dass untergeordnete Komponenten gespeichert und nicht neu erstellt werden, und um zu verhindern, dass seltsame Dinge passieren. / /Bad {{item.name}} } · Die Verwendung von Arrays ist keine gute Vorgehensweise· random() wird nie ausgeführt · Das können Sie Erstellen Sie Ihre eindeutige ID, stellen Sie sicher, dass die Methode schnell ist und an das Objekt angehängt wurde · Wenn die Anzahl der untergeordneten Elemente sehr groß ist oder komplexe Komponenten enthält, verwenden Sie Schlüssel, um die Leistung zu verbessern starten digest(); ausgeführt wurden $digest 在这种情况下，$digest方法在当前作用域和它的子作用域执行，你应该注意到，父级的作用域将不被检查，并没有受到影响。 · 只在浏览器DOM事件在Angular之外被触发的时候使用 digest
apply(() => { · 如果你仅仅想更新当前作用域或者他的子作用域，用 digest。性能不言而喻咯。 evalAsync。这是一个在当前循环或下一次循环的期间或对表达式做出评估的核心方法，这可以提高你的应用程序的性能。 将一个项插入到现有数组中，是一个日常常见的任务，你可以使用push在数组的末尾添加元素，使用unshift在开始的位置，或者在中间使用splice。 这些都是已知的方法，但这并不意味着没有一个更高性能的途径。我们来看一看。 这两种方法都修改了数组，不相信我？看这个jsperf var arr = [1,2,3,4,5]; 这里更详细一点：unshift编辑原有的数组，concat返回一个新数组。jsperf var items = [‘one’, ‘two’, ‘three’, ‘four’]; 我试着在不同的浏览器和操作系统中运行这些测试，结果是相似的。我希望这些建议对你有用，鼓励你自己做测试！ 能够为大家提供这些简短而实用的JavaScript技巧来提高大家编程能力，这对于我来说是件很开心的事。每天仅花上不到2分钟的时间中，你将可以读遍JavaScript这门可怕的语言所呈现给我们的特性：performance(性能), conventions(协议), hacks(代码hack), interview questions(面试问题)及所有其他的项。 ==（或者!=）做对比的时候会将进行对比的两者转换到同一类型再比较。===（或者!==）则不会，他会将进行对比的两者做类型对比和值对比，相对于 == ，=== 的对比会更加严谨。 将字符串转换为数字是非常常见的。最简单和最快的（jspref）的方式来实现，将使用+（加）算法。 var one = ‘1’; Sie können auch den Konvertierungstyp - (Minuszeichen) des Algorithmus verwenden und ihn in einen negativen Wert umwandeln. var one = '1'; Sie definieren ein Array und möchten dessen Inhalt löschen. Normalerweise würden Sie Folgendes tun: var list = [1, 2, 3, 4]; Aber es gibt einen leistungsfähigeren Weg. Sie können diese Codes verwenden: · list =[] weist diesem Array eine Referenz auf eine Variable zu, während andere Referenzen sind nicht betroffen. Dies bedeutet, dass Verweise auf den Inhalt des vorherigen Arrays weiterhin im Speicher verbleiben, was zu einem Speicherverlust führt. Weitere Details zu StackOverflow: Differenz-zwischen-Array-Länge-0-und-Array Dieser Code verwendet den Fisher-Yates-Mischalgorithmus, um ein bestimmtes Array zu mischen (zufällig zu sortieren). function shuffle(arr) { var a = [1, 2, 3, 4, 5, 6, 7, 8]; }; this.changeName = function(name) { this.name = name; } ; } var eins = 1; var drei = '3'; var Ergebnis = eins + zwei + drei ; //"33" statt "123" 8 - Schnelleres Runden Der Doppel-Tilde-Operator „~~“ wird manchmal auch als Double-NOT-Operator bezeichnet. Sie können es als schnelleren Ersatz für Math.floor() verwenden. Warum wird die Eingabe durch eine doppelte Verschiebung in -(-(Eingabe+1)) umgewandelt? Ein großartiges Tool, um zu 0 zu gelangen. Bei Eingabezahlen ahmt es Math.ceil() nach. Nimmt einen negativen Wert an und Math.floor() gibt 0 zurück, wenn es fehlschlägt. Dies kann nützlich sein, anstatt ein NaN zurückzugeben, wenn Math.floor () schlägt fehl. // Einheitenverschiebung 9 - Node.js: Lassen Sie das Modul laufen, wenn es nicht benötigt wird if (!module.parent) { // Führen Sie Mehr Weitere Informationen finden Sie in der Dokumentation zu Modulen Standardmäßig können Sie keine Parameter übergeben, die den Rückruf ermöglichen Funktion wie folgt: function callback() { console.log('Hi human' Sie können JavaScript-Abschlüsse nutzen, um Parameter an die Callback-Funktion zu übergeben. Das Beispiel lautet wie folgt: function callback(a, b) { return function() { Eine andere Möglichkeit ist die Bindungsmethode. Zum Beispiel: var alarmText = function(text) { alert(text); document.getElementById('someelem').addEventListener( ' click', warningText.bind(this, 'hello')); 11 – Verwenden Sie eine einfachere Eindämmungsmethode ähnlich indexOf var someText = 'JavaScript Rules'; } // oder // examples/mvc/lib/boot.js // „reserved“ exports if (~[ 'name', 'prefix', 'engine', 'before'].indexOf(key)) continue; var someText = 'text'; Die in ES6 (ES 2015) eingeführte Methode Includes() kann verwendet werden, um zu bestimmen, ob a Zeichenfolge enthält eine weitere Zeichenfolge: 'something'.includes('thing'); // true in ECMAScript 2016 (ES7) , sogar Arrays können auf diese Weise bedient werden, wie zum Beispiel indexOf: !!~[1, 2, 3].indexOf(1); // true Leider wird dies nur in Chrome, Firefox, Safari 9 oder höher unterstützt. Mit der Einführung der neuen Funktionen in ES6 kann die Pfeilfunktion ein sehr praktisches Werkzeug sein mehr Code in weniger Zeilen. Sein Name kommt von seiner Syntax, wobei => im Vergleich zum kleinen Pfeil -> wie ein „fetter Pfeil“ aussieht. Einige von Ihnen wissen möglicherweise, dass dieser Funktionstyp anonymen Funktionen in anderen statischen Sprachen wie Lambda-Ausdrücken ähnelt. Sie wird anonym genannt, da diese Pfeilfunktionen keinen beschreibenden Funktionsnamen haben. Syntax: Weniger LOC, keine Notwendigkeit, immer wieder Funktionsschlüsselwörter einzugeben. Semantik: Erfassen Sie das Schlüsselwort this aus dem Kontext. Einfaches Syntaxbeispiel: Sehen Sie sich die beiden Codeausschnitte unten an, sie erfüllen die gleiche Aufgabe. Sie können die Funktion der Pfeilfunktion schnell verstehen. // Tägliche Syntax der Pfeilfunktion / Tägliche Funktionen verwenden // Verwendung Pfeilfunktion var arr = [5,3,2,9,1]; , je nach Anwendungsfall mit dem Vergessen umzugehen. Aber der obige Code wird auch so ausgeführt: x => x*x Im Moment scheint es, dass es sich lediglich um syntaktische Verbesserungen handelt, die zu weniger LOC und besserer Lesbarkeit führen. diese Bindung Es gibt einen besseren Grund, die Pfeilfunktion zu verwenden. Das ist der Kontext, in dem dieses Problem auftritt. Wenn Sie die Pfeilfunktion verwenden, müssen Sie sich keine Gedanken über .bind(this) und that=this machen. Weil die Pfeilfunktion dies aus dem Kontext findet. Sehen Sie sich das folgende Beispiel an: // Globally define this.i this.i = 100; var counterA = new CounterA(); // CounterA's Weitere Informationen zur Pfeilfunktion finden Sie hier. Um die verschiedenen Syntaxoptionen zu sehen, besuchen Sie diese Website. Um die Leistung eines JavaScript-Blocks schnell zu messen, können wir die Konsole verwenden Funktionen wie console.time(label) und console.timeEnd(label) console.time(“Array initialize”); 🎜> len = arr.length, Demo: jsfiddle-codepen (Ausgabe in der Browserkonsole) 14 - Parameterbehandlung in ES6 const _err = function( message ){ } const getSum = (a = _err('a ist nicht definiert '), b = _err('b ist nicht definiert')) => a + b 15 – Boosting function doTheThing() { console.log(notDeclared); // Ausgabe: undefiniert var myObject = { Dies ist möglich, aber Sie müssen wissen, dass es zwei native Methoden gibt: „Operator“ und „Object.hasownproperty“. Jedes Objekt ist ein Objekt und verfügt über verfügbare Methoden. Jedes Objekt erbt von Object und beide Methoden sind verfügbar. Einige Unterschiede zwischen den beiden Methoden: } myObject.hasOwnProperty('name'); // true 'name' in myObject; // true 'valueOf' in myObject; // true Der Unterschied zwischen ihnen liegt in der Art der Prüfung. Mit anderen Worten, wenn das Objekt selbst die nachgeschlagene Eigenschaft hat , hasOwnProperty gibt yrue zurück, der in-Operator unterscheidet jedoch nicht zwischen dem von der Eigenschaft erstellten Objekt und der Prototypenkette, von der die Eigenschaft geerbt wird. Hier ist ein weiteres Beispiel: user.hasOwnProperty('age'); Alter ist 点击看例子。同时，建议在检查对象的属性存在时，阅读这些有关的常见错误。 截至ES6，JS已经有模板字符串作为替代经典的结束引用的字符串。 var firstName = ‘Jake’; 在模板字符串中${}中，你可以写不用写/n或者简单逻辑来实现多行字符串。 Die Methode querySelectorAll gibt ein Knotenlistenobjekt ähnlich einem Array zurück. Diese Datenstrukturen ähneln Arrays, da sie häufig in Form von Arrays angezeigt werden, Array-Methoden wie Map und Foreach jedoch nicht verwendet werden können. Hier ist eine schnelle, sichere und wiederverwendbare Möglichkeit, eine Knotenliste in ein Array von DOM-Elementen zu konvertieren: const nodelist = document.querySelectorAll('p'); .apply(null, nodelist); Wenn Sie es2015 verwenden, können Sie...(Spread-Operator) verwenden const nodelist = […document.querySelectorAll('p ') ]; // Gibt ein echtes Array zurück nodelist.forEach(…); nodelist.slice(…); 🎜>//etc… Programmierer lassen den Computer gerne langweilige Dinge für uns erledigen und überprüfen einige Fehler in unserer Arbeit. „use strict“ weist uns an, dies zu tun und unsere Fehler in JavaScript-Fehler umzuwandeln. Wir können diese Direktive am Anfang einer js-Datei hinzufügen: // Die gesamte Skriptdatei wird eine strikte Modussyntax haben„use strict“; var v = „Hallo! Ich bin ein Strict-Mode-Skript!“ function f() // Strict Modussyntax im Funktionsbereich · Reservierte Zeichen oder zukünftige reservierte Zeichen schützen von der Verwendung als Variablennamen Der strikte Modus ist in neuen Projekten von Vorteil, aber es kann sehr schwierig sein, ihn in älteren Projekten zu verwenden, in denen er an den meisten Stellen nicht verwendet wird. Es stellt auch ein Problem dar, wenn Sie mehrere Dateien zu einer zusammenführen, da dies dazu führen kann, dass die gesamte Datei im strikten Modus ausgeführt wird. Es ist keine Deklaration, sondern nur ein Literal und wird von früheren Browserversionen ignoriert. Unterstützung des strengen Modus: · Opera 12+ Sie müssen einfach zuerst alles in ein Array einfügen. Array.concat akzeptiert ein Array oder ein einzelnes Objekt: } printUpperCase kann jetzt entweder ein einzelnes Element als Parameter oder ein Array empfangen: . JavaScript definiert undefinierte Variablen standardmäßig als undefiniert · JavaScript setzt keinen Nullwert auf nicht zugewiesene Variablen. Er wird von Programmierern verwendet, um einen wertlosen Wert darzustellen ['Shanghai', 'New York', 'Mumbai', 'Buenos Aires'].sort(); Sehen Sie sich ein einfaches Beispiel an: // Spanisch // ["cosas", "fútbol", "árbol", "único"] // Falsche Sortierung// Deutsch ['único','árbol', 'cosas', 'fútbol'].sort(function ( a, b) { }// [„árbol“, „cosas“, „fútbol“, „único“] ['Woche ', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) { ['único','árbol ', 'cosas', 'fútbol'].sort(Intl.Collator().compare); // ["árbol", "cosas", "fútbol", "único"] ['Woche ', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare); · Im FF-Browser ist intl.collator() schneller, wenn der Vergleich große Zahlen oder Zeichenfolgen umfasst Denken Sie daher daran, diese Methode zu verwenden, wenn Sie einem String-Array in einer anderen Sprache als Englisch zuweisen, um eine versehentliche Sortierung zu vermeiden. 23 – Verschachtelte Bedingungen verbessern if (color) { if (color === 'black') { printBlackBackground(); printRedBackground(); } else if (color === 'blue') { Eine Verbesserung besteht darin, switch-Anweisungen anstelle verschachtelter if-Anweisungen zu verwenden. Obwohl es übersichtlicher und besser organisiert ist, wird es nicht empfohlen, da es schwierig zu debuggen ist. Hier erfahren Sie, warum. switch(color) { switch(true) { case (typeof color === 'string' && color === 'black'): printBlackBackground(); case (typeof color === 'string' && color === 'red'): printRedBackground(); Schlüssel ist einer, der alle Komponenten darstellt, die Sie an den übergeben müssen dynamische Array-Eigenschaft. Dies ist eine eindeutige und spezifische ID, die React verwendet, um jede DOM-Komponente zu identifizieren und festzustellen, ob es sich um eine andere Komponente oder um dieselbe Komponente handelt. Verwenden Sie Schlüssel, um sicherzustellen, dass untergeordnete Komponenten gespeichert und nicht neu erstellt werden, und um zu verhindern, dass seltsame Dinge passieren. / /Bad {{item.name}} } · Die Verwendung von Arrays ist keine gute Vorgehensweise· random() wird nie ausgeführt · Das können Sie Erstellen Sie Ihre eindeutige ID, stellen Sie sicher, dass die Methode schnell ist und an das Objekt angehängt wurde · Wenn die Anzahl der untergeordneten Elemente sehr groß ist oder komplexe Komponenten enthält, verwenden Sie Schlüssel, um die Leistung zu verbessern starten digest(); ausgeführt wurden $digest 在这种情况下，$digest方法在当前作用域和它的子作用域执行，你应该注意到，父级的作用域将不被检查，并没有受到影响。 · 只在浏览器DOM事件在Angular之外被触发的时候使用 digest
apply(() => { · 如果你仅仅想更新当前作用域或者他的子作用域，用 digest。性能不言而喻咯。 evalAsync。这是一个在当前循环或下一次循环的期间或对表达式做出评估的核心方法，这可以提高你的应用程序的性能。 将一个项插入到现有数组中，是一个日常常见的任务，你可以使用push在数组的末尾添加元素，使用unshift在开始的位置，或者在中间使用splice。 这些都是已知的方法，但这并不意味着没有一个更高性能的途径。我们来看一看。 这两种方法都修改了数组，不相信我？看这个jsperf var arr = [1,2,3,4,5]; 这里更详细一点：unshift编辑原有的数组，concat返回一个新数组。jsperf var items = [‘one’, ‘two’, ‘three’, ‘four’]; 我试着在不同的浏览器和操作系统中运行这些测试，结果是相似的。我希望这些建议对你有用，鼓励你自己做测试！ Das obige ist der detaillierte Inhalt vonWir teilen einige JS-Tipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
throw new Error( message );
}
const getSum = (a = _err(‘a is not defined’), b = _err(‘b is not defined’)) => a + b
getSum( 10 ) // throws Error, b is not defined
getSum( undefined, 10 ) // throws Error, a is not defined15 - 提升
function doTheThing() {
// 错误: notDeclared is not defined
console.log(notDeclared);
// 输出: undefined
console.log(definedLater);
var definedLater;
definedLater = ‘I am defined!’
// 输出: ‘I am defined!’
console.log(definedLater)
// Outputs: undefined
console.log(definedSimulateneously);
var definedSimulateneously = ‘I am defined!’
// 输出: ‘I am defined!’
console.log(definedSimulateneously)
// 输出: ‘I did it!’
doSomethingElse();
function doSomethingElse(){
console.log(‘I did it!’);
}
// 错误: undefined is not a function
functionVar();
var functionVar = function(){
console.log(‘I did it!’);
}
}16 - 检查一个对象是否有属性
name: ‘@tips_js’
};
if (myObject.name) { … }
name: ‘@tips_js’
};
myObject.hasOwnProperty(‘name’); // true
‘name’ in myObject; // true
myObject.hasOwnProperty(‘valueOf’); // false, valueOf 是从原型链继承的
‘valueOf’ in myObject; // true
这里有另外一个例子：
};
myFunc.prototype.age = ‘10 days’;
var user = new myFunc();
user.hasOwnProperty(‘name’); // true
user.hasOwnProperty(‘age’); // false, 因为age是原型链上的17 - 模板字符串
案例：普通字符串
var lastName = ‘Rawr’;
console.log(‘My name is ’ + firstName + ’ ’ + lastName);
// My name is Jake Rawr
模板字符串：
var firstName = ‘Jake’;
var lastName = ‘Rawr’;
console.log(<span style="font-size: 14px;">My name is ${firstName} ${lastName}</span>);
// My name is Jake Rawr
您还可以使用函数来修改模板字符串的输出，它们被称为模板字符串的标记。你可能还想读到更多的理解模板字符串相关信息。18- Konvertieren Sie die Knotenliste in ein Array
//später ..
nodelistToArray.forEach(…);
nodelistToArray.slice(…); //etc…
Die Methode apply besteht darin, eine Reihe von Parametern im Array-Format an eine gegebene Funktion zu übergeben. MDN weist darauf hin, dass apply ein Array-ähnliches Objekt aufruft, das von querySelectorAll zurückgegeben wird. Da wir dies nicht im Kontext der Funktion angeben müssen, übergeben wir null oder 0. Das zurückgegebene Ergebnis ist ein Array von DOM-Elementen, die mithilfe von Array-Methoden verwendet werden können.
19 – „Verwende streng“ und FaulheitDer strikte Modus von JavaScript ermöglicht es Entwicklern, JavaScript sicherer zu schreiben. Standardmäßig erlaubt JavaScript Entwicklern, beim ersten Deklarieren einer Variablen nicht zu faulenzen. Obwohl dies wie ein unerfahrener Entwickler aussieht, ist dies auch die Quelle vieler Variablen Der Name ist falsch geschrieben oder wurde versehentlich in einem äußeren Bereich erwähnt.
'use strict';
function nested() { return „Und ich auch!“ }
return „Hi! );
}
function f2() { return „I'm not strict.“; Fehlverhalten in einigen größeren JavaScript-Projekten direkt in der Ausführung der JavaScript-Engine deaktiviert. Unter anderem ändert der strikte Modus das folgende Verhalten:
· Variablen können nur verwendet werden, wenn sie vorher mit var deklariert wurden
· Fehler, die durch den Versuch verursacht werden, schreibgeschützt zu schreiben Eigenschaften
· Der Konstruktor muss mit dem Schlüsselwort new aufgerufen werden · Dies zeigt standardmäßig nicht auf das globale Objekt
· IE 10+
· FF 4+ · Chrome 13+
20 - Methoden, die ein Array oder ein einzelnes Element als Parameter behandelnfunction printUpperCase(words) { var elements = [] .concat(words); for (var i = 0; i < elements.length; i++) {
console.log(elements[i].toUpperCase()}
printUpperCase("cactus"); " Bär", "Kartoffel"]);
// => KAKTUS
// BÄR
21 - Der Unterschied zwischen undefiniert und null
· undefiniert bedeutet, dass eine Variable nicht deklariert wurde oder eine Variable deklariert wurde, aber kein Wert zugewiesen wurde
· null bedeutet einen bestimmten Wert, das heißt „nein“. Wert"
· undefinierte Daten im JSON-Format sind ungültig, while null ist gültig
· undefiniert Der Typ ist undefiniert
· null ähnelt Objekt Warum?
· Beide sind primitive Werte
· Beide gelten als falsch (Boolean(undefiniert) // falsch, Boolean(null) // falsch).
· Überprüfen Sie, ob die Variable undefiniert ist
Variablentyp === „undefiniert“
Variable === „null“
null == undefiniert // wahr
22 – Zeichenfolgen in Nicht-ASCII-Zeichen sortieren
JavaScript hat Eine native Methode zum Sortieren eines Arrays im String-Format. Durch Ausführen eines einfachen array.sort() werden die Strings in alphabetischer Reihenfolge sortiert. Natürlich sind auch benutzerdefinierte Sortierfunktionen verfügbar.
Wenn Sie versuchen, Nicht-ASCII-Zeichen wie ['é', 'a', 'ú', 'c' zu verwenden ] Wenn Sie die Sortierung durchführen, erhalten Sie ein seltsames Ergebnis ['c', 'e', 'á', 'ú']. Dies liegt daran, dass die Sortierung nur auf Englisch möglich ist.
['Woche', ' wöchentlich ', 'wäre', 'Wann'].sort();
// ["Wann", "Woche", "wäre", "wöchentlich"] // Falsche Sortierung
Glücklicherweise gibt es zwei Möglichkeiten, dieses Verhalten zu vermeiden. Die ECMAScript-Internationalisierungs-API bietet localecompare und Intl.Collator.
Verwenden Sie localeCompare()
return a.localeCompare(b);
}); , "wäre", "Woche", "wöchentlich"]
Use intl.collator()
· Jede Methode kann die Position anpassen Wie können wir die Verschachtelung von if-Anweisungen in JavaScript verbessern und effizienter gestalten?
printBlueBackground();
} else if (color === 'green') {
printGreenBackground();
} else {
printYellowBackground();
}
case 'black':
printBlackBackground();
break
case 'red':
printRedBackground( );
break;
printBlueBackground();
break; Standard:
printYellowBackground();
}
Aber was ist, wenn wir mehrere Beurteilungsbedingungen haben? Wenn wir es in diesem Fall prägnanter und geordneter gestalten möchten, können wir switch verwenden. Wenn wir true als Parameter an die switch-Anweisung übergeben, können wir jeweils eine Bedingung stellen.
case (typeof color === 'string' && color === 'blue'):
printBlueBackground();
break (typeof color === 'string' && color === 'green'):
printGreenBackground( ); 🎜>
Aber wir müssen mehrere Prüfungen unter jeder Bedingung vermeiden und versuchen, die Verwendung von Schaltern zu vermeiden. Wir müssen auch bedenken, dass die effizienteste Methode die Verwendung eines Objekts ist.
var colorObj = {
'schwarz': printBlackBackground,
'rot': printRedBackground,
'blau': printBlueBackground,
'grün': printGreenBackground,
'gelb': printYellowBackground
};
if (color in colorObj) {
Hier sind relevanter Information.
24 – Die Schlüssel der untergeordneten Konstruktion von ReactJs sind sehr wichtig
· Verwenden Sie einen vorhandenen unabhängigen Objektwert … render() {
… //Gut
//Schlecht
25 - AngularJs:
gelten
The Das bewundernswerteste Merkmal von AngularJs ist die bidirektionale Datenbindung. Damit es funktioniert, wertet AngularJs Modelländerungen aus und zeigt Schleifen an (
Digest-Schleife). Bei der neuen Schleife müssen Sie die richtige Wahl treffen, denn diese Phase zeigt die größte Auswirkung auf die Leistung. Mit der Kernmethode können Sie einen
建议：
· 给$apply传递函数表达式，这有一个错误处理机制，允许在消化周期中整合变化。
$scope.tip = ‘Javascript Tip’;
});
· 当25 - 在数组插入一个项
在数组的末尾添加一个元素很容易与push()，但还有一个更高性能的途径。
var arr = [1,2,3,4,5];
arr.push(6);
arr[arr.length] = 6; //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 43% 的速度
现在，如果我们正在尝试将一个项目添加到数组的开头：
arr.unshift(0);
[0].concat(arr); //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 98% 的速度
添加在阵列中的物品很容易使用splice，它是做它的最高效的方式。
?
1
2
items.splice(items.length / 2, 0, ‘hello’);1、javascript 容错处理代码(屏蔽js错误)
<span style="font-size: 14px;"><script language="javascript"><br> <!-- /*屏蔽所有的js错误*/<br/> function killerrors() {<br/> return true;<br/> }<br/> window.onerror = killerrors; //--></script><br></span>2、 使用 === 代替 ==
[10] == 10 // true
[10] === 10 // false
“10” == 10 // true
“10” === 10 // false
[] == 0 // true
[] === 0 // false
“” == false // true 但是 true == “a” 是false
“” === false // false3、转换数值的更加的方法
var numberOne = +one; // Number 1
var negativeNumberOne = -one; // Number -14 - Ein Array löschen
function empty() {
//Empty the array
list = [];
}
empty();
var list = [1, 2, 3, 4];
function empty() {
//Leeren Sie das Array
list.length = 0;
}
empty();
· list.length = 0 löscht alles innerhalb des Arrays, hierfür ist kein Verweis auf etwas anderes erforderlich.
Wenn Sie jedoch ein kopiertes Array (A und copy-A) haben, verwenden Sie list.length = 0 löscht seinen Inhalt, die Kopie verliert auch ihren Inhalt.
var foo = [1,2,3];
var bar = [1,2,3];
var foo2 = foo;
foo = [ ];
bar.length = 0;
console.log(foo, bar, foo2, bar2);
//[] [] [1, 2, 3] []5 - „Shuffle“ die Array-Sortierung (Zufällige Sortierung)
var i,
j,
temp;for (i = arr.length - 1; i > 0; i–) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j]; temp;
}
return arr;
Fall:
var b = shuffle(a);
log(b); 8, 6, 5, 3, 1, 4]
6 – Funktionen, die Objekte zurückgeben, können verkettet werden. Operationen
Beim Erstellen von Funktionen für Bei objektorientierten JavaScript-Objekten ermöglicht die Rückgabe eines Objekts von der Funktion die Verkettung von Funktionen zur Ausführung. this.name = name; this.sayName = function() { console.log(„Hallo, mein Name ist : ", this.name);
dieses zurückgeben;
var person = new Person(“John”);
person.sayName().changeName(“Timmy”).sayName();
//Hallo, mein Name ist: Timmy
7 - String-sichere Verbindung
Angenommen, Sie haben einige Variablen unbekannten Typs, Sie möchte sie verbinden. Natürlich werden bei der Kaskadierung keine algorithmischen Operationen angewendet:
var one = 1; Eine solche Verkettung ist nicht genau das, was Sie erwarten. Stattdessen kann es zu einer Verkettung und Phase kommen zu unerwarteten Ergebnissen:
Apropos Leistung: Vergleichen Sie Join und Concat. Erfahren Sie mehr über Concat 🎜>
console.log(~1337) // -1338
// Doppelschicht
console.log(47.11) // -> 🎜>console.log(
-12.88) // -> -12 console.log(
1.9999) // -> 1 console.log(~~3) // -> 3
//Fehlersituation
console.log(
[]) // -> 0 console.log(
NaN) // -> >console.log(~~null) // -> 0 //Fehlgeschlagen, wenn es größer als eine 32-Bit-Ganzzahl ist
console.log(
(2147483647 + 1) === (2147483647 + 1) ) // -> 0In Node können Sie es gemäß dem Code ausführen require('./something.js') oder node Something.js, um Ihrem Programm mitzuteilen, dass es zwei verschiedene Dinge tun soll. Dies ist nützlich, wenn Sie mit einem Ihrer eigenständigen Module interagieren möchten.
<br>node Something.js <span style="font-size: 14px;">node something.js</span>app.listen(8088, function() {
console.log('app listen on port 8088'); })
} else {
// <br>require('/.something.js') <span style="font-size: 14px;">require('/.something.js')</span>
module.exports = app }10 – Übergabe von Parametern an Rückruffunktionen
}
document.getElementById('someelem' ). addEventListener('click', callback);
console.log('sum = ', (a+b)}
}
var x = 1, y = 2;
document.getElementById('someelem').addEventListener('click', callback(x, y));
Es gibt einige geringfügige Leistungsunterschiede zwischen den beiden Methoden. Weitere Informationen finden Sie unter jsperf
Natives JavaScript verfügt nicht über eine Includes-Methode. Um zu überprüfen, ob ein Wert in einem String- oder String-Array-Element vorhanden ist, können Sie Folgendes tun:
if (someText.indexOf('JavaScript') >= 0) {
}
Aber schauen wir uns diese ExpressJs-Codeschnipsel noch einmal an. // examples/lib/utils. js
if (!~apiKeys.indexOf(key)) return next(error(401, 'invalid api key'));
Das Problem ist~ Bitoperator. „Operatoren führen solche Operationen an binären Ausdrücken durch, geben aber standardmäßige numerische JavaScript-Werte zurück.“ Sie konvertieren -1 in 0, was in JavaScript falsch ist.
!!~someText.indexOf('tex'); // someText enthält "tex" - true
!~someText.indexOf('tex') ; // someText enthält nicht „tex“ - false
~someText.indexOf('asd'); // someText enthält nicht "asd" - false
~someText.indexOf('ext'); / someText Includes "ext" - true
String.prototype.includes()
[1, 2, 3].includes(1); // true12 - Pfeilfunktion (ES6)
Was sind also die Vorteile davon?
param => Ausdruck
// Kann auch in Klammern geschrieben werden
// Klammern sind Multiparameter-Anforderungen
(param1 [, param2]) => Ausdruck
var arr = [5,3,2,9,1]; var arrFunc = arr.map(function(x) {
return x * x;
});
console.log(arr)
var arrFunc = arr.map((x) => x*x);
var counterB = new CounterB();
var counterC = new CounterC();
// Schlechtes Beispiel<br>diese<br> Instanz (!! ignoriere dies) <span style="font-size: 14px;">this</span> this.i = 0; setInterval(function () {
// <br>this<span style="font-size: 14px;">this</span> bezieht sich auf das globale Objekt, nicht auf CounterAs this<span style="font-size: 14px;">this</span>
// Beginnen Sie also mit 100 statt 0 (local this.i) <br>this.i++; getElementById(“counterA”).innerHTML = this.i;
}, 500);
}
// Manuelle Bindung that = this
function CounterB() { <br>this .i = 0;
var that = this;
setInterval(function() {
that.i++;
document.getElementById(“counterB”).innerHTML = that.i;
}, 500 );
}
// Use .bind(this)
function CounterC() { <br>this.i = 0;
setInterval(function() { <br>this .i++;
document.getElementById(“counterC”).innerHTML = this.i;
}.bind(this), 500);
// Pfeilfunktion verwenden
function CounterD() { <br>this.i = 0;
setInterval(() => { <br>this.i++;
document.getElementById(“counterD”).innerHTML = this.i;
} , 500);
}13 - Tipps zum Messen der Leistung eines JavaScript-Blocks
i;
for (i = 0; i < len; i++) {
arr[i] = new Object();
console .timeEnd(“Array initialize”); // Ausgabe: Array initialize: 0,711 ms
Weitere InformationenKonsolenobjekt, JavaScript-BenchmarkingIn vielen Programmiersprachen sind Funktionen Die Parameter Standardwert, während der Entwickler einen Parameter explizit als optional definieren muss. Jeder Parameter in JavaScript ist optional, aber wir können dies tun, ohne dass eine Funktion ES6-Standardwerte als Parameter übernimmt.
getSum( 10 ) // löst einen Fehler aus, b ist nicht definiert
getSum( undefiniert, 10 ) // löst einen Fehler aus , a ist nicht definiert
_err ist eine Funktion, die sofort einen Fehler auslöst. Wenn kein Argument als Wert vorhanden ist, wird der Standardwert verwendet, _err aufgerufen und ein Fehler ausgegeben. Weitere Beispiele für Standardparameter finden Sie im Mozilla Developer Network.
Das Verständnis von Boosting wird Ihnen bei der Organisation Ihrer Funktionen helfen. Denken Sie daran, dass Variablendeklarationen und Definitionsfunktionen ganz oben stehen. Variablendefinitionen funktionieren nicht, selbst wenn Sie eine Variable in derselben Zeile deklarieren und definieren. Darüber hinaus teilt eine Variablendeklaration dem System mit, dass eine Variable existiert, während eine Definition ihr einen Wert zuweist.
console .log(definiertLater);
definiertLater = 'Ich bin definiert!' Ausgaben: undefiniert
console.log(definiertSimulateeously);
var definierteSimulateously = 'Ich bin definiert!'
// Ausgaben: 'Ich bin definiert!' // Ausgabe: 'Ich habe es geschafft!'
doSomethingElse();
function doSomethingElse(){
console.log('Ich habe es geschafft!'}
// Fehler : undefiniert ist keine Funktion
functionVar();
var functionVar = function(){
console.log('I did it!'}
}
Um die Lesbarkeit zu erleichtern, wird durch das Hochziehen einer Variablendeklaration innerhalb eines Funktionsbereichs deutlich, aus welchem Bereich die Variable deklariert wird. Definieren Sie Variablen, bevor Sie sie verwenden müssen. Definieren Sie Funktionen am unteren Rand des Bereichs, um einen klaren und standardisierten Code sicherzustellen.
16 – Überprüfen Sie, ob ein Objekt eine Eigenschaft hat
Wenn Sie überprüfen möchten, ob ein Objekt eine bestimmte Eigenschaft hat, können Sie dies tun :}; if (myObject.name) { … }
var myObject = {
var myFunc = function() { <br>this.name = '@tips_js';
myFunc. prototyp. age = '10 Tage'; var user = new myFunc();
in der Prototypenkette17 - 模板字符串
案例：普通字符串
var lastName = ‘Rawr’;
console.log(‘My name is ’ + firstName + ’ ’ + lastName);
// My name is Jake Rawr
模板字符串：
var firstName = ‘Jake’;
var lastName = ‘Rawr’;
console.log(<span style="font-size: 14px;">My name is ${firstName} ${lastName}</span>);
// My name is Jake Rawr
您还可以使用函数来修改模板字符串的输出，它们被称为模板字符串的标记。你可能还想读到更多的理解模板字符串相关信息。18- Konvertieren Sie die Knotenliste in ein Array
//später ..
nodelistToArray.forEach(…);
nodelistToArray.slice(…); //etc…
Die Methode apply besteht darin, eine Reihe von Parametern im Array-Format an eine gegebene Funktion zu übergeben. MDN weist darauf hin, dass apply ein Array-ähnliches Objekt aufruft, das von querySelectorAll zurückgegeben wird. Da wir dies nicht im Kontext der Funktion angeben müssen, übergeben wir null oder 0. Das zurückgegebene Ergebnis ist ein Array von DOM-Elementen, die mithilfe von Array-Methoden verwendet werden können.
19 – „Verwende streng“ und FaulheitDer strikte Modus von JavaScript ermöglicht es Entwicklern, JavaScript sicherer zu schreiben. Standardmäßig erlaubt JavaScript Entwicklern, beim ersten Deklarieren einer Variablen nicht zu faulenzen. Obwohl dies wie ein unerfahrener Entwickler aussieht, ist dies auch die Quelle vieler Variablen Der Name ist falsch geschrieben oder wurde versehentlich in einem äußeren Bereich erwähnt.
'use strict';
function nested() { return „Und ich auch!“ }
return „Hi! );
}
function f2() { return „I'm not strict.“; Fehlverhalten in einigen größeren JavaScript-Projekten direkt in der Ausführung der JavaScript-Engine deaktiviert. Unter anderem ändert der strikte Modus das folgende Verhalten:
· Variablen können nur verwendet werden, wenn sie vorher mit var deklariert wurden
· Fehler, die durch den Versuch verursacht werden, schreibgeschützt zu schreiben Eigenschaften
· Der Konstruktor muss mit dem Schlüsselwort new aufgerufen werden · Dies zeigt standardmäßig nicht auf das globale Objekt
· IE 10+
· FF 4+ · Chrome 13+
20 - Methoden, die ein Array oder ein einzelnes Element als Parameter behandelnfunction printUpperCase(words) { var elements = [] .concat(words); for (var i = 0; i < elements.length; i++) {
console.log(elements[i].toUpperCase()}
printUpperCase("cactus"); " Bär", "Kartoffel"]);
// => KAKTUS
// BÄR
21 - Der Unterschied zwischen undefiniert und null
· undefiniert bedeutet, dass eine Variable nicht deklariert wurde oder eine Variable deklariert wurde, aber kein Wert zugewiesen wurde
· null bedeutet einen bestimmten Wert, das heißt „nein“. Wert"
· undefinierte Daten im JSON-Format sind ungültig, while null ist gültig
· undefiniert Der Typ ist undefiniert
· null ähnelt Objekt Warum?
· Beide sind primitive Werte
· Beide gelten als falsch (Boolean(undefiniert) // falsch, Boolean(null) // falsch).
· Überprüfen Sie, ob die Variable undefiniert ist
Variablentyp === „undefiniert“
Variable === „null“
null == undefiniert // wahr
22 – Zeichenfolgen in Nicht-ASCII-Zeichen sortieren
JavaScript hat Eine native Methode zum Sortieren eines Arrays im String-Format. Durch Ausführen eines einfachen array.sort() werden die Strings in alphabetischer Reihenfolge sortiert. Natürlich sind auch benutzerdefinierte Sortierfunktionen verfügbar.
Wenn Sie versuchen, Nicht-ASCII-Zeichen wie ['é', 'a', 'ú', 'c' zu verwenden ] Wenn Sie die Sortierung durchführen, erhalten Sie ein seltsames Ergebnis ['c', 'e', 'á', 'ú']. Dies liegt daran, dass die Sortierung nur auf Englisch möglich ist.
['Woche', ' wöchentlich ', 'wäre', 'Wann'].sort();
// ["Wann", "Woche", "wäre", "wöchentlich"] // Falsche Sortierung
Glücklicherweise gibt es zwei Möglichkeiten, dieses Verhalten zu vermeiden. Die ECMAScript-Internationalisierungs-API bietet localecompare und Intl.Collator.
Verwenden Sie localeCompare()
return a.localeCompare(b);
}); , "wäre", "Woche", "wöchentlich"]
Use intl.collator()
· Jede Methode kann die Position anpassen Wie können wir die Verschachtelung von if-Anweisungen in JavaScript verbessern und effizienter gestalten?
printBlueBackground();
} else if (color === 'green') {
printGreenBackground();
} else {
printYellowBackground();
}
case 'black':
printBlackBackground();
break
case 'red':
printRedBackground( );
break;
printBlueBackground();
break; Standard:
printYellowBackground();
}
Aber was ist, wenn wir mehrere Beurteilungsbedingungen haben? Wenn wir es in diesem Fall prägnanter und geordneter gestalten möchten, können wir switch verwenden. Wenn wir true als Parameter an die switch-Anweisung übergeben, können wir jeweils eine Bedingung stellen.
case (typeof color === 'string' && color === 'blue'):
printBlueBackground();
break (typeof color === 'string' && color === 'green'):
printGreenBackground( ); 🎜>
Aber wir müssen mehrere Prüfungen unter jeder Bedingung vermeiden und versuchen, die Verwendung von Schaltern zu vermeiden. Wir müssen auch bedenken, dass die effizienteste Methode die Verwendung eines Objekts ist.
var colorObj = {
'schwarz': printBlackBackground,
'rot': printRedBackground,
'blau': printBlueBackground,
'grün': printGreenBackground,
'gelb': printYellowBackground
};
if (color in colorObj) {
Hier sind relevanter Information.
24 – Die Schlüssel der untergeordneten Konstruktion von ReactJs sind sehr wichtig
· Verwenden Sie einen vorhandenen unabhängigen Objektwert … render() {
… //Gut
//Schlecht
25 - AngularJs:
gelten
The Das bewundernswerteste Merkmal von AngularJs ist die bidirektionale Datenbindung. Damit es funktioniert, wertet AngularJs Modelländerungen aus und zeigt Schleifen an (
Digest-Schleife). Bei der neuen Schleife müssen Sie die richtige Wahl treffen, denn diese Phase zeigt die größte Auswirkung auf die Leistung. Mit der Kernmethode können Sie einen
建议：
· 给$apply传递函数表达式，这有一个错误处理机制，允许在消化周期中整合变化。
$scope.tip = ‘Javascript Tip’;
});
· 当25 - 在数组插入一个项
在数组的末尾添加一个元素很容易与push()，但还有一个更高性能的途径。
var arr = [1,2,3,4,5];
arr.push(6);
arr[arr.length] = 6; //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 43% 的速度
现在，如果我们正在尝试将一个项目添加到数组的开头：
arr.unshift(0);
[0].concat(arr); //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 98% 的速度
添加在阵列中的物品很容易使用splice，它是做它的最高效的方式。
?
1
2
items.splice(items.length / 2, 0, ‘hello’);
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
