Heim > Artikel > Backend-Entwicklung > Wir teilen einige JS-Tipps

Wir teilen einige JS-Tipps

小云云Original: 2018-03-20 16:43:251552Durchsuche

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.

2. Verwenden Sie === anstelle von ==

== (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

3. Weitere Möglichkeiten zum Konvertieren von Werten

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

4 - Ein Array löschen

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

5 – „Shuffle“ (zufällige Sortierung) der Array-Sortierung

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]

6 - Funktionen, die Objekte zurückgeben können Wird zum Verketten von Vorgängen verwendet

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: Timmy

7 - String Secure Connection

Gehen 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

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. >

Obwohl die Leistung möglicherweise besser ist, verwenden Sie Math.floor() >

9 - Node.js:让module在没被require的时候运行

在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(&#39;/.something.js&#39;)
 
module.exports = app; 
}

更多信息，请看the documentation for modules

10 - 给回调函数传递参数

在默认情况下，你无法将参数传给回调函数，如下：

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

11 - 使用更简单的类似indexOf的包含判断方式

原生的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或以上的浏览器中被支持。

12 - arrow 函数(ES6)

介绍下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函数的进一步信息可以看这里。查看不同的语法选请访问该站点。

13 - 测量一个JavaScript代码块性能的技巧

快速测量一个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 (在浏览器控制台输出)

14 - ES6中参数处理

在许多编程语言中，函数的参数是默认的，而开发人员必须显式定义一个参数是可选的。在JavaScript中的每个参数是可选的，但我们可以这一行为而不让一个函数利用ES6的默认值作为参数。

const _err = function( message ){
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 defined

_err是立即抛出一个错误的函数。如果没有一个参数作为值，默认值是会被使用，_err将被调用，将抛出错误。你可以在Mozilla开发者网络看到的更多默认参数的例子。

15 - 提升

理解提升将帮助你组织你的function。只需要记住，变量声明和定义函数会被提升到顶部。变量的定义是不会的，即使你在同一行中声明和定义一个变量。此外，变量声明让系统知道变量存在，而定义是将其赋值给它。

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 - 检查一个对象是否有属性

当你要检查一个对象是否存在某个属性时，你可能会这样做：

var myObject = {
name: ‘@tips_js’
};
if (myObject.name) { … }

这是可以的，但你必须知道这个还有两原生的方式，in operator 和 object.hasownproperty，每个对象是对象，既可用方法。每个object都继承自Object，这两个方法都可用。

两个方法的一些不同点：

var myObject = {
name: ‘@tips_js’
};
myObject.hasOwnProperty(‘name’); // true
‘name’ in myObject; // true
myObject.hasOwnProperty(‘valueOf’); // false, valueOf 是从原型链继承的
‘valueOf’ in myObject; // true

他们之间的不同在于检查的性质，换句话说，当该对象本身有查找的属性时hasOwnProperty返回yrue，然而，in operator不区分属性创建的对象和属性继承的原型链。
这里有另外一个例子：

var myFunc = function() { this.name = ‘@tips_js’;
};
myFunc.prototype.age = ‘10 days’;
var user = new myFunc();
user.hasOwnProperty(‘name’); // true
user.hasOwnProperty(‘age’); // false, 因为age是原型链上的

点击看例子。同时，建议在检查对象的属性存在时，阅读这些有关的常见错误。

17 - 模板字符串

截至ES6，JS已经有模板字符串作为替代经典的结束引用的字符串。
案例：普通字符串

var firstName = ‘Jake’;
var lastName = ‘Rawr’;
console.log(‘My name is ’ + firstName + ’ ’ + lastName);
// My name is Jake Rawr
模板字符串：
var firstName = ‘Jake’;
var lastName = ‘Rawr’;
console.log(My name is ${firstName} ${lastName});
// My name is Jake Rawr

在模板字符串中${}中，你可以写不用写/n或者简单逻辑来实现多行字符串。
您还可以使用函数来修改模板字符串的输出，它们被称为模板字符串的标记。你可能还想读到更多的理解模板字符串相关信息。

18- Konvertieren Sie die Knotenliste in ein Array

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);
//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.

Wenn Sie es2015 verwenden, können Sie...(Spread-Operator) verwenden

const nodelist = […document.querySelectorAll('p ') ]; // Gibt ein echtes Array zurück

//später ..

nodelist.forEach(…); nodelist.slice(…); 🎜>//etc…

19 – „Verwende streng“ und Faulheit

Der 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.

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!“

Oder innerhalb einer Funktion:

function f() // Strict Modussyntax im Funktionsbereich
'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

· Sehr eingeschränkte Verwendung von eval()

· 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:

· IE 10+
· FF 4+ · Chrome 13+

· Safari 5.1+

· Opera 12+

Siehe MDNs Beschreibung des strikten Modus.

20 - Methoden, die ein Array oder ein einzelnes Element als Parameter behandeln

Im Vergleich zum Schreiben einer separaten Methode zum Betreiben eines Arrays und eines Einzelnes Element bzw. Eine Funktion, die ein Element als Parameter verwendet, ist besser, eine allgemeine Funktion zu schreiben, damit sie bearbeitet werden kann. Dies ähnelt einigen jQuery-Methoden (durch den CSS-Abgleich werden alle Selektoren geändert).

Sie müssen einfach zuerst alles in ein Array einfügen. Array.concat akzeptiert ein Array oder ein einzelnes Objekt:

function printUpperCase(words) { var elements = [] .concat(words); for (var i = 0; i 13403de06f4a568b5711c5f4b3ee5135 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"

. 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
· 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“

· Überprüfen Sie, ob die Variable null ist

Variable === „null“

Sie sind aus Wertsicht gleich, aber aus Typ- und Wertsicht sind sie nicht gleich

null == undefiniert // wahr

null === undefiniert // falsch

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.

['Shanghai', 'New York', 'Mumbai', 'Buenos Aires'].sort();

// ["Buenos Aires", "Mumbai" , „New York“, „Shanghai“]

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.

Sehen Sie sich ein einfaches Beispiel an:

// Spanisch

['único','árbol', 'cosas', ' fútbol'].sort();

// ["cosas", "fútbol", "árbol", "único"] // Falsche Sortierung// Deutsch
['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.

Beide Methoden verfügen über eigene benutzerdefinierte Parameter, sodass sie für den vollen Funktionsumfang konfiguriert werden können.

Verwenden Sie localeCompare()

['único','árbol', 'cosas', 'fútbol'].sort(function ( a, b) {

return a.localeCompare(b);

}// [„árbol“, „cosas“, „fútbol“, „único“] ['Woche ', 'wöchentlich', 'wäre', 'Wann'].sort(function (a, b) {
return a.localeCompare(b);
}); , "wäre", "Woche", "wöchentlich"]

Use intl.collator()

['único','árbol ', 'cosas', 'fútbol'].sort(Intl.Collator().compare); // ["árbol", "cosas", "fútbol", "único"] ['Woche ', 'wöchentlich', 'wäre', 'Wann'].sort(Intl.Collator().compare);

// ["Wann", "wäre", "Woche", "wöchentlich"]

· Jede Methode kann die Position anpassen

· 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

Wie können wir die Verschachtelung von if-Anweisungen in JavaScript verbessern und effizienter gestalten?

if (color) { if (color === 'black') { printBlackBackground();

} else if (color === ' rot') {

printRedBackground(); } else if (color === 'blue') {
printBlueBackground();
} else if (color === 'green') {
printGreenBackground();
} else {
printYellowBackground();
}

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) {
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.

switch(true) { case (typeof color === 'string' && color === 'black'): printBlackBackground();

break;

case (typeof color === 'string' && color === 'red'): printRedBackground();
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) {

colorObjcolor;

Hier sind relevanter Information.

24 – Die Schlüssel der untergeordneten Konstruktion von ReactJs sind sehr wichtig

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.

· Verwenden Sie einen vorhandenen unabhängigen Objektwert

· Definieren Sie den Schlüssel in der übergeordneten Komponente, nicht in der untergeordneten Komponente

/ /Bad

… render() {

}
… //Gut

· Die Verwendung von Arrays ist keine gute Vorgehensweise· random() wird nie ausgeführt
//Schlecht

· 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

· Sie müssen für alle ein Schlüsselattribut angeben Kinder ReactCSSTransitionGroup

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

starten

digest(); ausgeführt wurden

$digest

在这种情况下，$digest方法在当前作用域和它的子作用域执行，你应该注意到，父级的作用域将不被检查，并没有受到影响。
建议：

· 只在浏览器DOM事件在Angular之外被触发的时候使用

digest
· 给$apply传递函数表达式，这有一个错误处理机制，允许在消化周期中整合变化。

apply(() => {
$scope.tip = ‘Javascript Tip’;
});

· 如果你仅仅想更新当前作用域或者他的子作用域，用

digest。性能不言而喻咯。
· 当

evalAsync。这是一个在当前循环或下一次循环的期间或对表达式做出评估的核心方法，这可以提高你的应用程序的性能。

25 - 在数组插入一个项

将一个项插入到现有数组中，是一个日常常见的任务，你可以使用push在数组的末尾添加元素，使用unshift在开始的位置，或者在中间使用splice。

这些都是已知的方法，但这并不意味着没有一个更高性能的途径。我们来看一看。
在数组的末尾添加一个元素很容易与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% 的速度

这两种方法都修改了数组，不相信我？看这个jsperf
现在，如果我们正在尝试将一个项目添加到数组的开头：

var arr = [1,2,3,4,5];
arr.unshift(0);
[0].concat(arr); //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 98% 的速度

这里更详细一点：unshift编辑原有的数组，concat返回一个新数组。jsperf
添加在阵列中的物品很容易使用splice，它是做它的最高效的方式。
?
1
2

var items = [‘one’, ‘two’, ‘three’, ‘four’];
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>

能够为大家提供这些简短而实用的JavaScript技巧来提高大家编程能力，这对于我来说是件很开心的事。每天仅花上不到2分钟的时间中，你将可以读遍JavaScript这门可怕的语言所呈现给我们的特性：performance(性能), conventions(协议), hacks(代码hack), interview questions(面试问题)及所有其他的项。

2、使用 === 代替 ==

==（或者!=）做对比的时候会将进行对比的两者转换到同一类型再比较。===（或者!==）则不会，他会将进行对比的两者做类型对比和值对比，相对于 == ，=== 的对比会更加严谨。
[10] == 10 // true
[10] === 10 // false
“10” == 10 // true
“10” === 10 // false
[] == 0 // true
[] === 0 // false
“” == false // true 但是 true == “a” 是false
“” === false // false

3、转换数值的更加的方法

将字符串转换为数字是非常常见的。最简单和最快的（jspref）的方式来实现，将使用+（加）算法。

var one = ‘1’;
var numberOne = +one; // Number 1

Sie können auch den Konvertierungstyp - (Minuszeichen) des Algorithmus verwenden und ihn in einen negativen Wert umwandeln.

var one = '1';
var negativeNumberOne = -one; // Number -1

4 - Ein Array löschen

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() {
//Empty the array
list = [];
}
empty();

Aber es gibt einen leistungsfähigeren Weg.

Sie können diese Codes verwenden:
var list = [1, 2, 3, 4];
function empty() {
//Leeren Sie das Array
list.length = 0;
}
empty();

· 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.
· 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] []

Weitere Details zu StackOverflow: Differenz-zwischen-Array-Länge-0-und-Array

5 - „Shuffle“ die Array-Sortierung (Zufällige Sortierung)

Dieser Code verwendet den Fisher-Yates-Mischalgorithmus, um ein bestimmtes Array zu mischen (zufällig zu sortieren). 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]; temp;
}
return arr;

Fall:

var a = [1, 2, 3, 4, 5, 6, 7, 8];
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.

function Person(name) {

this.name = name; this.sayName = function() { console.log(„Hallo, mein Name ist : ", this.name);

dieses zurückgeben;

}; this.changeName = function(name) { this.name = 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;

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

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
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) ) // -> 0

Auch wenn ~~ möglicherweise eine bessere Leistung erbringt, verwenden Sie Math.floor().

9 - Node.js: Lassen Sie das Modul laufen, wenn es nicht benötigt wird

In 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.

if (!module.parent) {

// Führen Sie  node Something.js node something.jsapp.listen(8088, function() {
console.log('app listen on port 8088'); })
} else {
//
 require('/.something.js') require('/.something.js')
module.exports = app }

Mehr Weitere Informationen finden Sie in der Dokumentation zu Modulen

10 – Übergabe von Parametern an Rückruffunktionen

Standardmäßig können Sie keine Parameter übergeben, die den Rückruf ermöglichen Funktion wie folgt:

function callback() { console.log('Hi human'
}
document.getElementById('someelem' ). addEventListener('click', callback);

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() {
console.log('sum = ', (a+b)}
}
var x = 1, y = 2;
document.getElementById('someelem').addEventListener('click', callback(x, y));

Was ist ein Verschluss Wolltuch? Ein Abschluss ist eine Funktion über unabhängige (freie) Variablen. Mit anderen Worten: Die im Abschluss definierte Funktion merkt sich die Umgebung, in der sie erstellt wurde. Weitere Informationen finden Sie unter MDN. Auf diese Weise sind die Parameter X/Y im Rahmen der Callback-Funktion vorhanden.

Eine andere Möglichkeit ist die Bindungsmethode. Zum Beispiel:

var alarmText = function(text) {

alert(text); document.getElementById('someelem').addEventListener( ' click', warningText.bind(this, 'hello'));

Es gibt einige geringfügige Leistungsunterschiede zwischen den beiden Methoden. Weitere Informationen finden Sie unter jsperf

11 – Verwenden Sie eine einfachere Eindämmungsmethode ähnlich indexOf

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:

var someText = 'JavaScript Rules';

if (someText.indexOf(' JavaScript ') !== -1) {

} // oder
if (someText.indexOf('JavaScript') >= 0) {
}

Aber schauen wir uns diese ExpressJs-Codeschnipsel noch einmal an.

// examples/mvc/lib/boot.js

for (var key in obj) {

// „reserved“ exports if (~[ 'name', 'prefix', 'engine', 'before'].indexOf(key)) continue;

// examples/web-service/index.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.

var someText = 'text';
!!~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()

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
[1, 2, 3].includes(1); // true

Leider wird dies nur in Chrome, Firefox, Safari 9 oder höher unterstützt.

12 - Pfeilfunktion (ES6)

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.
Was sind also die Vorteile davon?

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
param => Ausdruck
// Kann auch in Klammern geschrieben werden
// Klammern sind Multiparameter-Anforderungen
(param1 [, param2]) => Ausdruck

/ Tägliche Funktionen verwenden
var arr = [5,3,2,9,1]; var arrFunc = arr.map(function(x) {
return x * x;
});
console.log(arr)

// Verwendung Pfeilfunktion var arr = [5,3,2,9,1];
var arrFunc = arr.map((x) => x*x);

Wie Sie sehen können, kann Ihnen die Pfeilfunktion in diesem Beispiel Zeit sparen, indem Sie die Parameter eingeben und Schlüsselwörter in Klammern zurückgeben. Es wird empfohlen, die Parameter in Klammern einzugeben, z. B. (x,y) => Es ist lediglich eine Möglichkeit für

, 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();
var counterB = new CounterB();
var counterC = new CounterC();

// Schlechtes Beispiel

function CounterA() {

// CounterA's  diese  Instanz (!! ignoriere dies) this this.i = 0; setInterval(function () {
//
 thisthis bezieht sich auf das globale Objekt, nicht auf CounterAs thisthis
// Beginnen Sie also mit 100 statt 0 (local this.i) this.i++; getElementById(“counterA”).innerHTML = this.i;
}, 500);
}
// Manuelle Bindung that = this
function CounterB() { this .i = 0;
var that = this;
setInterval(function() {
that.i++;
document.getElementById(“counterB”).innerHTML = that.i;
}, 500 );
}
// Use .bind(this)
function CounterC() { this.i = 0;
setInterval(function() { this .i++;
document.getElementById(“counterC”).innerHTML = this.i;
}.bind(this), 500);
// Pfeilfunktion verwenden
function CounterD() { this.i = 0;
setInterval(() => { this.i++;
document.getElementById(“counterD”).innerHTML = this.i;
} , 500);
}

Weitere Informationen zur Pfeilfunktion finden Sie hier. Um die verschiedenen Syntaxoptionen zu sehen, besuchen Sie diese Website.

13 - Tipps zum Messen der Leistung eines JavaScript-Blocks

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,
i;
for (i = 0; i 5620877d1b157bb5f36c8a5f1afb4d54 a + b
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.

15 – Boosting

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.

function doTheThing() {

// Fehler: notDeclared ist nicht definiert

console.log(notDeclared); // Ausgabe: undefiniert
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 :

var myObject = {

name: '@tips_js'

}; if (myObject.name) { … }

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:

var myObject = {

name: '@tips_js'

} myObject.hasOwnProperty('name'); // true 'name' in myObject; // true

myObject.hasOwnProperty('valueOf'); // false, valueOf wird von der Prototypenkette geerbt

'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:

var myFunc = function() { this.name = '@tips_js';
myFunc. prototyp. age = '10 Tage'; var user = new myFunc();

user.hasOwnProperty('name'); // true

user.hasOwnProperty('age'); Alter ist
in der Prototypenkette

点击看例子。同时，建议在检查对象的属性存在时，阅读这些有关的常见错误。

17 - 模板字符串

截至ES6，JS已经有模板字符串作为替代经典的结束引用的字符串。
案例：普通字符串

18- Konvertieren Sie die Knotenliste in ein Array

Wenn Sie es2015 verwenden, können Sie...(Spread-Operator) verwenden

const nodelist = […document.querySelectorAll('p ') ]; // Gibt ein echtes Array zurück

//später ..

nodelist.forEach(…); nodelist.slice(…); 🎜>//etc…

19 – „Verwende streng“ und Faulheit

Der 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.

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!“

Oder innerhalb einer Funktion:

· Sehr eingeschränkte Verwendung von eval()

· Reservierte Zeichen oder zukünftige reservierte Zeichen schützen von der Verwendung als Variablennamen

· Safari 5.1+

· Opera 12+

Siehe MDNs Beschreibung des strikten Modus.

20 - Methoden, die ein Array oder ein einzelnes Element als Parameter behandeln

Sie müssen einfach zuerst alles in ein Array einfügen. Array.concat akzeptiert ein Array oder ein einzelnes Objekt:

function printUpperCase(words) { var elements = [] .concat(words); for (var i = 0; i 13403de06f4a568b5711c5f4b3ee5135 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"

· Überprüfen Sie, ob die Variable null ist

Variable === „null“

Sie sind aus Wertsicht gleich, aber aus Typ- und Wertsicht sind sie nicht gleich

null == undefiniert // wahr

null === undefiniert // falsch

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.

['Shanghai', 'New York', 'Mumbai', 'Buenos Aires'].sort();

// ["Buenos Aires", "Mumbai" , „New York“, „Shanghai“]

Sehen Sie sich ein einfaches Beispiel an:

// Spanisch

['único','árbol', 'cosas', ' fútbol'].sort();

Beide Methoden verfügen über eigene benutzerdefinierte Parameter, sodass sie für den vollen Funktionsumfang konfiguriert werden können.

Verwenden Sie localeCompare()

['único','árbol', 'cosas', 'fútbol'].sort(function ( a, b) {

return a.localeCompare(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);

// ["Wann", "wäre", "Woche", "wöchentlich"]

· Jede Methode kann die Position anpassen

23 – Verschachtelte Bedingungen verbessern

Wie können wir die Verschachtelung von if-Anweisungen in JavaScript verbessern und effizienter gestalten?

if (color) { if (color === 'black') { printBlackBackground();

} else if (color === ' rot') {

printRedBackground(); } else if (color === 'blue') {
printBlueBackground();
} else if (color === 'green') {
printGreenBackground();
} else {
printYellowBackground();
}

switch(true) { case (typeof color === 'string' && color === 'black'): printBlackBackground();

break;

colorObjcolor;

Hier sind relevanter Information.

24 – Die Schlüssel der untergeordneten Konstruktion von ReactJs sind sehr wichtig

· Definieren Sie den Schlüssel in der übergeordneten Komponente, nicht in der untergeordneten Komponente

/ /Bad

… render() {

}
… //Gut

· Die Verwendung von Arrays ist keine gute Vorgehensweise· random() wird nie ausgeführt
//Schlecht

· Sie müssen für alle ein Schlüsselattribut angeben Kinder ReactCSSTransitionGroup

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

starten

digest(); ausgeführt wurden

$digest

在这种情况下，$digest方法在当前作用域和它的子作用域执行，你应该注意到，父级的作用域将不被检查，并没有受到影响。
建议：

· 只在浏览器DOM事件在Angular之外被触发的时候使用

digest
· 给$apply传递函数表达式，这有一个错误处理机制，允许在消化周期中整合变化。

apply(() => {
$scope.tip = ‘Javascript Tip’;
});

· 如果你仅仅想更新当前作用域或者他的子作用域，用

digest。性能不言而喻咯。
· 当

evalAsync。这是一个在当前循环或下一次循环的期间或对表达式做出评估的核心方法，这可以提高你的应用程序的性能。

25 - 在数组插入一个项

将一个项插入到现有数组中，是一个日常常见的任务，你可以使用push在数组的末尾添加元素，使用unshift在开始的位置，或者在中间使用splice。

这两种方法都修改了数组，不相信我？看这个jsperf
现在，如果我们正在尝试将一个项目添加到数组的开头：

var arr = [1,2,3,4,5];
arr.unshift(0);
[0].concat(arr); //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 98% 的速度

这里更详细一点：unshift编辑原有的数组，concat返回一个新数组。jsperf
添加在阵列中的物品很容易使用splice，它是做它的最高效的方式。
?
1
2

var items = [‘one’, ‘two’, ‘three’, ‘four’];
items.splice(items.length / 2, 0, ‘hello’);

我试着在不同的浏览器和操作系统中运行这些测试，结果是相似的。我希望这些建议对你有用，鼓励你自己做测试！

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!

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

Vorheriger Artikel：Beispielanalyse für den klassischen PHP-AlgorithmusNächster Artikel：Beispielanalyse für den klassischen PHP-Algorithmus

In Verbindung stehende Artikel

Mehr sehen

Wir teilen einige JS-Tipps

2. Verwenden Sie === anstelle von ==

3. Weitere Möglichkeiten zum Konvertieren von Werten

4 - Ein Array löschen

5 – „Shuffle“ (zufällige Sortierung) der Array-Sortierung

6 - Funktionen, die Objekte zurückgeben können Wird zum Verketten von Vorgängen verwendet

7 - String Secure Connection

9 - Node.js:让module在没被require的时候运行

10 - 给回调函数传递参数

11 - 使用更简单的类似indexOf的包含判断方式

12 - arrow 函数(ES6)

13 - 测量一个JavaScript代码块性能的技巧

14 - ES6中参数处理

15 - 提升

16 - 检查一个对象是否有属性

17 - 模板字符串

18- Konvertieren Sie die Knotenliste in ein Array

function printUpperCase(words) { var elements = [] .concat(words); for (var i = 0; i 13403de06f4a568b5711c5f4b3ee5135 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

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.

Wie können wir die Verschachtelung von if-Anweisungen in JavaScript verbessern und effizienter gestalten?

… render() {

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

25 - 在数组插入一个项

1、javascript 容错处理代码(屏蔽js错误)

2、 使用 === 代替 ==

3、转换数值的更加的方法

4 - Ein Array löschen

5 - „Shuffle“ die Array-Sortierung (Zufällige Sortierung)

this.name = name; this.sayName = function() { console.log(„Hallo, mein Name ist : ", this.name);

10 – Übergabe von Parametern an Rückruffunktionen

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:

12 - Pfeilfunktion (ES6)

13 - Tipps zum Messen der Leistung eines JavaScript-Blocks

}; if (myObject.name) { … }

17 - 模板字符串

18- Konvertieren Sie die Knotenliste in ein Array

function printUpperCase(words) { var elements = [] .concat(words); for (var i = 0; i 13403de06f4a568b5711c5f4b3ee5135 KAKTUS // BÄR

· undefiniert bedeutet, dass eine Variable nicht deklariert wurde oder eine Variable deklariert wurde, aber kein Wert zugewiesen wurde

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.

Wie können wir die Verschachtelung von if-Anweisungen in JavaScript verbessern und effizienter gestalten?

… render() {

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

25 - 在数组插入一个项

In Verbindung stehende Artikel

function printUpperCase(words) { var elements = [] .concat(words); for (var i = 0; i 13403de06f4a568b5711c5f4b3ee5135 KAKTUS
// BÄR

21 - Der Unterschied zwischen undefiniert und null

2、使用 === 代替 ==

function printUpperCase(words) { var elements = [] .concat(words); for (var i = 0; i 13403de06f4a568b5711c5f4b3ee5135 KAKTUS
// BÄR