Maison > Article > développement back-end > Partager quelques conseils js

Partager quelques conseils js

小云云original: 2018-03-20 16:43:251507parcourir

Cet article partage principalement avec vous quelques astuces js. L'article est un peu long, j'espère qu'il pourra vous aider.

1. Code JavaScript tolérant aux pannes (protection contre les erreurs 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>

peut vous fournir ces compétences JavaScript courtes et pratiques pour améliorer vos capacités de programmation. une chose très heureuse pour moi. En moins de 2 minutes par jour, vous pourrez découvrir les fonctionnalités que nous présente ce terrible langage qu'est JavaScript : performances (performance), conventions (protocole), hacks (code hacks), questions d'entretien (questions d'entretien) question ) et tous les autres éléments.

2. Utilisez === au lieu de ==

== (ou !=). sera Ou convertissez-le dans le même type et comparez à nouveau. === (ou !==) ne comparera pas les types et les valeurs des deux comparés. Par rapport à ==, la comparaison de === sera plus rigoureuse.
[10] == 10 // vrai
[10] === 10 // faux
« 10 » == 10 // vrai
« 10 » === 10 // faux
[] == 0 // vrai
[] === 0 // faux
"" == faux // vrai mais vrai == "a" est faux
"" == = false // false

3. Autres façons de convertir des valeurs

La conversion de chaînes en nombres est très courante. Le moyen le plus simple et le plus rapide (jspref) de le faire serait d'utiliser l'algorithme + (plus).

var one = '1';
var numberOne = +one; // Numéro 1

Vous pouvez également utiliser -( signe moins) est le type de conversion de l'algorithme et devient une valeur négative.

var one = '1';
var négatifNumberOne = -one; // Number -1

4 - Effacer un tableau

Vous définissez un tableau et souhaitez effacer son contenu. Généralement, vous feriez ceci :

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

Plus de détails sur StackOverflow : différence-entre-array-length-0-and-array

5 - "Shuffle" (tri aléatoire) le tri du tableau

Ce code utilise ici l'algorithme de brassage de Fisher Yates pour mélanger un tableau spécifié (ordonné aléatoirement).

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;  
};

Cas :
? 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 - Les fonctions qui renvoient des objets peuvent Utilisé pour les opérations de chaînage

Lors de la création de fonctions pour des objets JavaScript orientés objet, renvoyer un objet de la fonction permettra aux fonctions d'être chaînées ensemble pour l'exécution.

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

Connexion sécurisée à 7 chaînes

Supposons que vous y soyez sont des variables de type inconnu et vous souhaitez les concaténer. Bien sûr, les opérations algorithmiques ne sont pas appliquées en cas de cascade :

var one = 1; var two = 2;

var three = '3'; var result = ”.concat(one, two, three); //”123”

Une telle concaténation n'est pas exactement ce à quoi vous vous attendez. Au lieu de cela, une certaine concaténation et un ajout de phase peuvent conduire. à des résultats inattendus :

var un = 1 ; var deux = 2 ; var trois = '3'

var résultat = un + deux + trois ; ; //"33" au lieu de "123"

En parlant de performances, en comparant join et concat, leur vitesse d'exécution est presque la même. Vous pouvez en savoir plus sur MDN <.>

8 - Arrondi plus rapide

L'astuce d'aujourd'hui concerne les performances L'opérateur double tilde "~~" est parfois appelé l'opérateur double NOT ? Vous pouvez l'utiliser comme remplacement plus rapide de Math.floor() Pourquoi ? Décaler l'entrée -(input+1), donc un double décalage transformera l'entrée en -(-(input+1)), ce qui est. un excellent outil pour passer à 0. Pour les nombres d'entrée, il imitera Math.ceil() Prend une valeur négative et Math.floor() renvoie 0 s'il échoue. Cela peut être utile au lieu de renvoyer un NaN si Math.floor. () échoue.>

Bien que ~~ puisse avoir de meilleures performances, pour plus de lisibilité, utilisez 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- Convertir la liste de nœuds en tableau

La méthode querySelectorAll renvoie un objet de liste de nœuds similaire à un tableau. Ces structures de données sont similaires aux tableaux car elles apparaissent souvent sous forme de tableaux, mais les méthodes de tableau telles que map et foreach ne peuvent pas être utilisées. Voici un moyen rapide, sûr et réutilisable de convertir une liste de nœuds en un tableau d'éléments DOM :

const nodelist = document.querySelectorAll('p'); .apply(null, nodelist);
//plus tard ..
nodelistToArray.forEach(…);
nodelistToArray.map(…); //etc…

La méthode apply consiste à transmettre une série de paramètres au format tableau à une fonction donnée. MDN souligne que apply appellera un objet de type tableau, ce que renvoie querySelectorAll. Parce que nous n'avons pas besoin de spécifier cela dans le contexte de la fonction, nous passons null ou 0. Le résultat renvoyé est un tableau d'éléments DOM pouvant être utilisé à l'aide de méthodes de tableau.

Si vous utilisez es2015, vous pouvez utiliser...(opérateur de propagation)

const nodelist = […document.querySelectorAll('p ') ]; // Renvoie un vrai tableau

//plus tard ..

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

19 - « utilisation stricte » et paresse

Le JavaScript en mode strict permet aux développeurs d'écrire du JavaScript de manière plus sûre . Par défaut, JavaScript permet aux développeurs d'être paresseux. Par exemple, on ne peut pas utiliser var lors de la première déclaration d'une variable. Bien que cela puisse ressembler à un développeur inexpérimenté, c'est aussi la source de nombreuses erreurs. le nom est mal orthographié ou mentionné accidentellement dans une portée externe.

Les programmeurs aiment laisser l'ordinateur faire des choses ennuyeuses à notre place, en vérifiant certaines erreurs dans notre travail. "use strict" nous demande de le faire et de convertir nos erreurs en erreurs JavaScript.

On peut ajouter cette directive en haut d'un fichier js :

// L'intégralité du fichier script sera en syntaxe de mode strict"use strict"; var v = "Salut ! Je suis un script en mode strict !"

Ou au sein d'une fonction :

· Les variables ne peuvent être utilisées que si elles sont déclarées avec var avant · Erreurs causées par une tentative d'écriture en lecture seule propriétés · Le constructeur doit être appelé avec le mot-clé new

· cela ne pointera pas vers l'objet global par défaut

· Utilisation très limitée de eval() · Protéger les caractères réservés ou les futurs caractères réservés d'être utilisé comme noms de variables

Le mode strict est bénéfique dans les nouveaux projets, mais il peut être très difficile de l'utiliser dans des projets plus anciens où il n'est pas utilisé dans la plupart des endroits. C'est également un problème lorsque vous fusionnez plusieurs fichiers en un seul, car cela peut entraîner l'exécution du fichier entier en mode strict.
Ce n'est pas une déclaration, juste un littéral, et sera ignoré par les versions antérieures des navigateurs. Prise en charge du mode strict :

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

· Safari 5.1+

· Opera 12+

Voir la description du mode strict par MDN.

20 - Méthodes qui gèrent un tableau ou un seul élément comme paramètre

Par rapport à l'écriture d'une méthode distincte pour faire fonctionner un tableau et un élément unique respectivement Une fonction qui prend un élément comme paramètre Il est préférable d'écrire une fonction générale pour qu'elle puisse être utilisée. Ceci est similaire à certaines méthodes jQuery (la correspondance CSS modifiera tous les sélecteurs). Il vous suffit d'abord de tout mettre dans un tableau, Array.concat acceptera un tableau ou un seul objet :

function printUpperCase(words) {
var elements = [] .concat(words); for (var i = 0; i 2395a9d536dc898cb354304ab3ed1726 "ours", "pomme de terre"]);
// => CACTUS
// OURS
// POMME DE TERRE

21 - La différence entre indéfini et null

· non défini signifie qu'une variable n'a pas été déclarée, ou qu'une variable a été déclarée mais aucune valeur n'a été affectée· null signifie une valeur spécifique, c'est-à-dire "non value"
. JavaScript définit les variables non définies comme non définies par défaut
· JavaScript ne définira pas de valeur nulle aux variables non attribuées. Il est utilisé par les programmeurs pour représenter une valeur sans valeur
· les données non définies au format json sont invalides, tandis que null est valide
· non défini Le type n'est pas défini
· null est similaire à l'objet Pourquoi ?
· Les deux sont des valeurs primitives
· Les deux sont considérés comme faux (Boolean(undefined) // false, Boolean(null) // false).
· Vérifiez si la variable n'est pas définie

type de variable === « non défini » · Vérifiez si la variable est nulle

variable === « null » Ils sont égaux du point de vue de la valeur, mais ils ne sont pas égaux du point de vue du type et de la valeur

null == undéfini // vrai null === undéfini // faux

22 - Trier les chaînes en caractères non-ASCII

JavaScript a une méthode native pour trier un tableau au format chaîne. Faire un simple array.sort() triera les chaînes par ordre alphabétique. Bien entendu, des capacités de tri personnalisées sont également disponibles.

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

Lorsque vous essayez d'utiliser des caractères non-ASCII, tels que ['é', 'a', 'ú', 'c' ] En faisant le tri, vous obtenez un résultat bizarre ['c', 'e', 'á', 'ú'], cela se produit parce que le tri n'est possible qu'en anglais.

Regardez un exemple simple :

// Espagnol ['único','árbol', 'cosas', ' fútbol'].sort();
// ["cosas", "fútbol", "árbol", "único"] // Mauvais tri
// Allemand
['Woche', ' wöchentlich ', 'wäre', 'Wann'].sort();
// ["Wann", "Woche", "wäre", "wöchentlich"] // Mauvais tri

Heureusement, il existe deux façons d'éviter ce comportement. L'API d'internationalisation ECMAScript fournit localecompare et Intl.Collator. Les deux méthodes ont leurs propres paramètres personnalisés afin qu'elles puissent être configurées pour fonctionner pleinement.

Utiliser 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"]

Utiliser 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"]

· Chaque méthode peut personnaliser la position

· Dans le navigateur FF, intl.collator() sera plus rapide lorsque la comparaison est de grands nombres ou des chaînes

Par conséquent, lorsque vous attribuez un tableau de chaînes dans une langue autre que l'anglais, n'oubliez pas d'utiliser cette méthode pour éviter un tri accidentel.

23 - Améliorer les conditions imbriquées

Comment pouvons-nous améliorer et rendre l'imbrication des instructions if en JavaScript plus efficace.

if (couleur) {

if (couleur === 'noir') { printBlackBackground(
} else if (couleur === '); rouge') {
printRedBackground();
} else if (color === 'bleu') {
printBlueBackground();
} else if (color === 'vert') {
printGreenBackground();
} else {
printYellowBackground();
}
}

Une amélioration consiste à utiliser des instructions switch au lieu d'instructions if imbriquées. Bien qu’il soit plus propre et plus organisé, il n’est pas recommandé car il est difficile à déboguer. Voici pourquoi.

switch(color) {
case 'black':
printBlackBackground();
break; );
break;
case 'blue':
printBlueBackground();
break;
case 'green':
printGreenBackground(); default :
printYellowBackground();
}

Mais qu'en est-il lorsque nous avons plusieurs conditions de jugement ? Dans ce cas, si nous voulons le rendre plus concis et ordonné, nous pouvons utiliser switch. Si nous passons true en paramètre à l'instruction switch, cela nous permet de placer une condition dans chaque cas.

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

printBlackBackground(

); break; case (typeof color === 'string' && color === 'red'):
printRedBackground();
case (typeof color === 'string'); && color === 'bleu'):
printBlueBackground();
break;
case (typeof color === 'string' && color === 'green'):
printGreenBackground( );
break;
case (typeof color === 'string' && color === 'jaune'):
printYellowBackground(); 🎜>

Mais nous devons éviter plusieurs contrôles dans chaque condition et essayer d'éviter d'utiliser switch. Il faut également considérer que la méthode la plus efficace passe par un objet.
var colorObj = {
'black': printBlackBackground,
'red': printRedBackground,
'blue': printBlueBackground,
'green': printGreenBackground, 'jaune': printYellowBackground

};

if (color in colorObj) {
colorObjcolor;
>

Voici des éléments plus pertinents information.

24 - Les clés de la construction enfant de ReactJs sont très importantes

les clés sont celles qui représentent tous les composants que vous devez transmettre au propriété de tableau dynamique. Il s'agit d'un identifiant unique et spécifique que React utilise pour identifier chaque composant DOM afin de savoir s'il s'agit d'un composant différent ou du même composant. Utilisez des clés pour garantir que les composants enfants sont enregistrés et non recréés, et pour éviter que des choses étranges ne se produisent.

· Utiliser une valeur d'objet indépendante existante · Définir la clé dans le composant parent, pas dans le composant enfant

/ /Mauvais …

render() {

}
… //Bon

· Utiliser des tableaux n'est pas une bonne pratique· random() ne s'exécute jamais//Mauvais

· Vous pouvez créez votre identifiant unique, assurez-vous que la méthode est rapide et a été attachée à l'objet
· Lorsque le nombre d'enfants est énorme ou contient des composants complexes, utilisez des clés pour améliorer les performances
· Vous devez fournir un attribut clé pour tous enfants ReactCSSTransitionGroup

25 - AngularJs :

appliquer

boucle de digestion Parfois, vous devez exécuter manuellement une boucle). nouvelle Boucle, vous devez faire le bon choix car cette phase est celle qui montre le plus d'impact en termes de performances. La méthode core permet de démarrer un .

boucle digest, qui appelle en interne

digest();

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

Vous pouvez également utiliser le type de conversion - (signe moins) de l'algorithme et le transformer en une valeur négative.

var one = '1';
var négatifNumberOne = -one; // Number -1

4 - Effacer un tableau

Vous définissez un tableau et souhaitez effacer son contenu. Habituellement, vous feriez ceci :

var list = [1, 2, 3, 4];
function empty() {
//Vider le tableau
list = [];
}
empty();

Mais il existe une manière plus performante.

Vous pouvez utiliser ces codes :
var list = [1, 2, 3, 4];
function empty() {
//Vider le tableau
list.length = 0;
}
empty();

· list =[] attribue une référence à une variable à ce tableau, tandis que d'autres références ne sont pas concernés. Cela signifie que les références au contenu du tableau précédent restent toujours en mémoire, provoquant une fuite de mémoire.
· list.length = 0 supprime tout ce qui se trouve à l'intérieur du tableau, cela ne nécessite aucune référence à autre chose
Cependant, si vous avez un tableau copié (A et copy-A), si vous utilisez list.length = 0 supprime son contenu, la copie perd également son contenu.
var foo = [1,2,3];
var bar = [1,2,3];
var foo2 =
var bar2 =
foo = [ ];
bar.length = 0;
console.log(foo, bar, foo2, bar2);//[] [] [1, 2, 3] []

Plus de détails sur StackOverflow : différence entre-la longueur du tableau 0 et le tableau

5 - "Mélanger" le tri du tableau (tri aléatoire)

Ce code utilise l'algorithme de brassage Fisher Yates pour mélanger (trier aléatoirement) un tableau spécifié.

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;
}
retour arr
};

Cas :

? = [1, 2, 3, 4, 5, 6, 7, 8];

var b = shuffle(a); log(b); 8, 6, 5, 3, 1, 4]

6 - Les fonctions qui renvoient des objets peuvent être chaînées Opérations

Lors de la création de fonctions pour Objets JavaScript orientés objet, le retour d'un objet de la fonction permettra aux fonctions d'être enchaînées ensemble pour l'exécution.

function Person(name) { this.name = name;

this.sayName = function() {

console.log("Bonjour, je m'appelle : ", this.name); renvoie ceci; };

this.changeName = function(name) {

this.name = name; renvoie ceci; } ;

}

var person = new Person("John"); person.sayName().changeName("Timmy").sayName();
//Bonjour, je m'appelle : John
//Bonjour, je m'appelle : Timmy

7 - Connexion sécurisée par chaîne

Supposons que vous ayez des variables de type inconnu, vous souhaitez les connecter. Bien sûr, les opérations algorithmiques ne sont pas appliquées en cascade :

var one = 1; var two = 2;

var three = '3'; var result = ”.concat(one, two, three); //”123”

Une telle concaténation n'est pas exactement ce à quoi vous vous attendez. Au lieu de cela, une certaine concaténation et un ajout de phase peuvent conduire. à des résultats inattendus :

var un = 1 ;

var deux = 2 ; var trois = '3'
var résultat = un + deux + trois ; ; //"33" au lieu de "123"

En parlant de performances, en comparant join et concat, leur vitesse d'exécution est presque la même. Vous pouvez en savoir plus sur MDN <.>

8 - Arrondi plus rapide

// Décalage d'unité
console.log(~1337) // -1338
// Double décalage
console.log(47.11) // -> 🎜>console.log(
-12.88) // -> -12 console.log(
1.9999) // -> 1 console.log(~~3) // -> 3
//Situation d'échec
console.log(
[]) // -> 0 console.log(
NaN) // -> >console.log(~~null) // -> 0 //Échec s'il est supérieur à un entier de 32 bits
console.log(
(2147483647 + 1) === (2147483647 + 1) ) // -> 0

Bien que ~~ puisse avoir de meilleures performances, pour plus de lisibilité, utilisez Math.floor().

9 - Node.js : Laisser le module s'exécuter lorsqu'il n'est pas requis

Dans node, vous pouvez l'exécuter selon le code require('./something.js') ou node Something.js, pour dire à votre programme de faire deux choses différentes. Ceci est utile si vous souhaitez interagir avec l'un de vos modules autonomes.

if (!module.parent) {

// Exécuter  node Something.js node something.js
app.listen(8088, function() { console.log('app listening on port 8088');
})
} else {
// Utiliser
require('/.something.js')require('/.something.js')
module.exports = app;
>

Plus Pour plus d'informations, consultez la documentation des modules

10 - Passer des paramètres aux fonctions de rappel

Par défaut, vous ne pouvez pas passer de paramètres Donner le rappel fonctionner comme suit :

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

Vous pouvez profiter des fermetures JavaScript pour transmettre des paramètres à la fonction de rappel. L'exemple est le suivant :

function callback(a, b) { return function() {
console.log('sum = ', (a+b)); var x = 1, y = 2;
document.getElementById('someelem').addEventListener('click', callback(x, y));

Qu'est-ce qu'un fermeture Drap de laine ? Une fermeture est une fonction sur des variables indépendantes (libres). Autrement dit, la fonction définie dans la fermeture se souvient de l'environnement dans lequel elle a été créée. Voir MDN pour plus d'informations. Ainsi, lorsqu'ils sont appelés, les paramètres X/Y existent dans le cadre de la fonction de rappel.

Une autre façon consiste à utiliser la méthode de liaison. Par exemple :

var alertText = function(text) { alert(text)

};

document.getElementById('someelem').addEventListener( ' click', alertText.bind(this, 'hello'));

Il existe de légères différences de performances entre les deux méthodes. Pour plus de détails, veuillez vous référer à jsperf.

11 - Utilisez une méthode de confinement plus simple similaire à indexOf

JavaScript natif n'a pas de méthode contain. Pour vérifier si une valeur existe dans une chaîne ou un élément d'un tableau de chaînes, vous pouvez faire ceci :

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

}

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

Mais regardons à nouveau ces extraits de code ExpressJs.

// examples/mvc/lib/boot.js for (var key in obj) {

// exports « réservés »

if (~[ 'nom', 'préfixe', 'moteur', 'avant'].indexOf(key)) continue;

// examples/lib/utils. js

exports.normalizeType = function(type){
return ~type. indexOf('/')
? acceptParams(type)
{ valeur : mime.lookup(type), params : {} };
// examples/web-service/index.js

if (!~apiKeys.indexOf(key)) return next(error(401, 'invalid api key'));

Le problème est~ opérateur de bits. "Les opérateurs effectuent des opérations sur des expressions binaires comme celle-ci, mais ils renvoient des valeurs numériques JavaScript standard." Ils convertissent -1 en 0, ce qui est faux en JavaScript.

var someText = 'text';
!!~someText.indexOf('tex'); // someText contient "tex" - true
!~someText.indexOf('tex') ; // someText ne contient pas "tex" - false
~someText.indexOf('asd'); // someText ne contient pas "asd" - false
~someText.indexOf('ext'); / someText inclut "ext" - true
String.prototype.includes()

Introduite dans ES6 (ES 2015), la méthode include() peut être utilisée pour déterminer si un string contient Une autre chaîne :

'something'.includes('thing'); // true

dans ECMAScript 2016 (ES7) , même les tableaux peuvent être utilisés de cette manière, comme indexOf :

!!~[1, 2, 3].indexOf(1); // true
[1, 2, 3].includes(1); // true

Malheureusement, cela n'est pris en charge que dans Chrome, Firefox, Safari 9 ou version ultérieure.

12 - fonction flèche (ES6)

Présentant les nouvelles fonctionnalités d'ES6, la fonction flèche peut être un outil très pratique Utiliser l'écriture. plus de code en moins de lignes. Son nom vient de sa syntaxe, où => ressemble à une "grosse flèche" comparée à la petite flèche ->. Certains d'entre vous savent peut-être que ce type de fonction est similaire aux fonctions anonymes dans d'autres langages statiques tels que les expressions lambda. On l'appelle anonyme car ces fonctions fléchées n'ont pas de nom de fonction descriptif.
Alors, quels en sont les avantages ?

Syntaxe : Moins de LOC, pas besoin de taper encore et encore des mots-clés de fonction.

Sémantique : capturez le mot-clé this à partir du contexte.

Exemple de syntaxe simple :

Regardez les deux extraits de code ci-dessous, ils font le même travail. Vous pouvez rapidement comprendre le fonctionnement de la fonction flèche.

// Syntaxe quotidienne de la fonction flèche
param => expression
// Peut également être écrite entre parenthèses
// Les parenthèses sont des exigences multi-paramètres
(param1 [, param2]) => expression

// Utiliser les fonctions quotidiennes
var arr = [5,3,2,9,1]
var arrFunc = arr.map(function(x) {
return x * x;
});
console.log(arr)

// Utiliser fonction flèche
var arr = [5,3,2,9,1];
var arrFunc = arr.map((x) => x*x);

Comme vous pouvez le constater, la fonction flèche dans cet exemple peut vous faire gagner du temps lors de la saisie des paramètres et renvoyer des mots-clés entre parenthèses. Il est recommandé de saisir les paramètres entre parenthèses, tels que (x,y) => C'est juste une façon pour

de gérer l'oubli, selon le cas d'utilisation. Mais le code ci-dessus s'exécutera également comme ceci : x => x*x Pour l'instant, il semble que ce ne soient que des améliorations syntaxiques qui conduisent à moins de LOC et à une meilleure lisibilité.

cette liaison

Il y a une meilleure raison d'utiliser la fonction flèche. C'est dans ce contexte que se pose ce problème. En utilisant la fonction flèche, vous n'avez pas à vous soucier de .bind(this) et that=this. Parce que la fonction flèche trouvera cela à partir du contexte.

Regardez l'exemple suivant :

// Définissez globalement this.i this.i = 100
var; counterA = new CounterA();
var counterB = new CounterB();
var counterC = new CounterC();
var counterD = new CounterD();

// Mauvais exemplefonction CounterA() {
//
cettethis instance de CounterA (!! ignorez ceci)
this.i = 0;
setInterval(function () {
// thisthis

fait référence à l'objet global, pas au

<span style="font-size: 14px;">this</span>this

// Alors, commencez à compter avec 100 au lieu de 0 (local this.i)
this.i++
document; getElementById("counterA").innerHTML = this.i;
}, 500);
}
// Liaison manuelle = this
function CounterB() {
this .i = 0;
var that = this;
setInterval(function() {
that.i++;
document.getElementById("counterB").innerHTML = that.i;
}, 500 );
}
// Utilisez .bind(this)
function CounterC() {
this.i = 0;
setInterval(function() {
this .i++;
document.getElementById("counterC").innerHTML = this.i;
}.bind(this), 500);
}
// Utiliser la fonction flèche
function CounterD() {
this.i = 0;
setInterval(() => {
this.i++;
document.getElementById("counterD").innerHTML = this.i;
} , 500); }

De plus amples informations sur la fonction flèche peuvent être trouvées ici. Pour voir les différentes options de syntaxe, visitez ce site.

13 - Conseils pour mesurer les performances d'un bloc JavaScript

Pour mesurer rapidement les performances d'un bloc JavaScript, on peut utiliser la console des fonctions comme console.time(label) et console.timeEnd(label)

console.time("Array initialize"); 🎜> len = arr.length,
i;
for (i = 0; i b84371b43be2fdb1ccb05d8ba2953235 a + b getSum( 10 ) // renvoie une erreur, b n'est pas défini
getSum( undefined, 10 ) // renvoie une erreur , a n'est pas défini

_err est une fonction qui renvoie immédiatement une erreur. S'il n'y a pas d'argument comme valeur, la valeur par défaut sera utilisée, _err sera appelé et une erreur sera générée. Vous pouvez voir plus d'exemples de paramètres par défaut sur le Mozilla Developer Network.

15 - Boosting

Comprendre le boosting vous aidera à organiser vos fonctions. N'oubliez pas que les déclarations de variables et les fonctions de définition sont hissées au sommet. Les définitions de variables ne fonctionneront pas, même si vous déclarez et définissez une variable sur la même ligne. De plus, une déclaration de variable permet au système de savoir qu'une variable existe, alors qu'une définition lui attribue une valeur.

function doTheThing() { // Erreur : notDeclared n'est pas défini

console.log(notDeclared);

// Sortie : non défini console; .log(définiLater);
var définiLater;
définiLater = 'Je suis défini !'
// Sortie : 'Je suis défini !' Sorties : undefined
console.log(definedSimulateneously);
var definitionSimulateneously = 'Je suis défini !'
// Sorties : 'Je suis défini !' // Sortie : 'Je l'ai fait !'
doSomethingElse();
function doSomethingElse(){
console.log('Je l'ai fait !'); : undefined n'est pas une fonction
functionVar();
var functionVar = function(){
console.log('Je l'ai fait !');
}

Pour faciliter la lecture, le fait de hisser une déclaration de variable dans une portée de fonction indiquera clairement à partir de quelle portée la variable est déclarée. Définissez les variables avant de devoir les utiliser. Définissez des fonctions en bas du périmètre pour garantir un code clair et standardisé.

16 - Vérifier si un objet a une propriété

Lorsque vous souhaitez vérifier si un objet a une certaine propriété, vous pouvez faire ceci :

var monObjet = {

nom : '@tips_js'

}; if (monObjet.nom) { … }

C'est possible, mais il faut savoir qu'il existe deux méthodes natives, dans Operator et Object.hasownproperty. Chaque objet est un objet et a des méthodes disponibles. Chaque objet hérite de Object et les deux méthodes sont disponibles.

Quelques différences entre les deux méthodes :

var myObject = {

name: '@tips_js'

}; 🎜>myObject.hasOwnProperty('name'); // true 'name' in myObject; // true myObject.hasOwnProperty('valueOf'); // false, valueOf est hérité de la chaîne de prototypes

'valueOf' in myObject; // true

La différence entre eux réside dans la nature de la vérification, en d'autres termes, lorsque l'objet lui-même possède la propriété recherchée. , hasOwnProperty renvoie yrue , cependant, l'opérateur in ne fait pas de distinction entre l'objet créé par la propriété et la chaîne de prototypes dont la propriété est héritée.

Voici un autre exemple :

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

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

user.hasOwnProperty('age'); l'âge est
sur la chaîne du prototype

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

17 - 模板字符串

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

18- Convertir la liste de nœuds en tableau

Si vous utilisez es2015, vous pouvez utiliser...(opérateur de propagation)

const nodelist = […document.querySelectorAll('p ') ]; // Renvoie un vrai tableau

//plus tard ..

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

19 - « utilisation stricte » et paresse

Le JavaScript en mode strict permet aux développeurs d'écrire du JavaScript de manière plus sûre . Par défaut, JavaScript permet aux développeurs d'être paresseux. Par exemple, on ne peut pas utiliser var lors de la première déclaration d'une variable. Bien que cela puisse ressembler à un développeur inexpérimenté, c'est aussi la source de nombreuses erreurs. le nom est mal orthographié ou mentionné accidentellement dans une portée externe.

On peut ajouter cette directive en haut d'un fichier js :

// L'intégralité du fichier script sera en syntaxe de mode strict"use strict"; var v = "Salut ! Je suis un script en mode strict !"

Ou au sein d'une fonction :

· cela ne pointera pas vers l'objet global par défaut

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

· Safari 5.1+

· Opera 12+

Voir la description du mode strict par MDN.

20 - Méthodes qui gèrent un tableau ou un seul élément comme paramètre

Par rapport à l'écriture d'une méthode distincte pour faire fonctionner un tableau et un élément unique respectivement Une fonction qui prend un élément comme paramètre Il est préférable d'écrire une fonction générale pour qu'elle puisse être utilisée. Ceci est similaire à certaines méthodes jQuery (la correspondance CSS modifiera tous les sélecteurs). Il vous suffit d'abord de tout mettre dans un tableau, Array.concat acceptera un tableau ou un seul objet :

function printUpperCase(words) {
var elements = [] .concat(words); for (var i = 0; i 2395a9d536dc898cb354304ab3ed1726 "ours", "pomme de terre"]);
// => CACTUS
// OURS
// POMME DE TERRE

21 - La différence entre indéfini et null

type de variable === « non défini » · Vérifiez si la variable est nulle

variable === « null » Ils sont égaux du point de vue de la valeur, mais ils ne sont pas égaux du point de vue du type et de la valeur

null == undéfini // vrai null === undéfini // faux

22 - Trier les chaînes en caractères non-ASCII

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

Regardez un exemple simple :

Utiliser localeCompare()

Utiliser 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"]

· Chaque méthode peut personnaliser la position

· Dans le navigateur FF, intl.collator() sera plus rapide lorsque la comparaison est de grands nombres ou des chaînes

Par conséquent, lorsque vous attribuez un tableau de chaînes dans une langue autre que l'anglais, n'oubliez pas d'utiliser cette méthode pour éviter un tri accidentel.

23 - Améliorer les conditions imbriquées

Comment pouvons-nous améliorer et rendre l'imbrication des instructions if en JavaScript plus efficace.

if (couleur) {

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

printBlackBackground(

};

if (color in colorObj) {
colorObjcolor;
>

Voici des éléments plus pertinents information.

24 - Les clés de la construction enfant de ReactJs sont très importantes

· Utiliser une valeur d'objet indépendante existante · Définir la clé dans le composant parent, pas dans le composant enfant

/ /Mauvais …

render() {

}
… //Bon

· Utiliser des tableaux n'est pas une bonne pratique· random() ne s'exécute jamais//Mauvais

appliquer

boucle digest, qui appelle en interne

digest();

. $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’);

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse d'un exemple d'algorithme PHP classiqueArticle suivant：Analyse d'un exemple d'algorithme PHP classique

Articles Liés

Voir plus

Partager quelques conseils js

2. Utilisez === au lieu de ==

3. Autres façons de convertir des valeurs

4 - Effacer un tableau

5 - "Shuffle" (tri aléatoire) le tri du tableau

Lors de la création de fonctions pour des objets JavaScript orientés objet, renvoyer un objet de la fonction permettra aux fonctions d'être chaînées ensemble pour l'exécution.

Supposons que vous y soyez sont des variables de type inconnu et vous souhaitez les concaténer. Bien sûr, les opérations algorithmiques ne sont pas appliquées en cas de cascade :

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

10 - 给回调函数传递参数

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

12 - arrow 函数(ES6)

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

14 - ES6中参数处理

15 - 提升

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

17 - 模板字符串

18- Convertir la liste de nœuds en tableau

21 - La différence entre indéfini et null

22 - Trier les chaînes en caractères non-ASCII

· Utiliser une valeur d'objet indépendante existante · Définir la clé dans le composant parent, pas dans le composant enfant

Le La fonctionnalité la plus admirable d'AngularJs est la liaison de données bidirectionnelle. Pour que cela fonctionne, AngularJs évalue les modifications du modèle et affiche les boucles (

25 - 在数组插入一个项

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

2、 使用 === 代替 ==

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

4 - Effacer un tableau

console.log("Bonjour, je m'appelle : ", this.name); renvoie ceci; };

10 - Passer des paramètres aux fonctions de rappel

JavaScript natif n'a pas de méthode contain. Pour vérifier si une valeur existe dans une chaîne ou un élément d'un tableau de chaînes, vous pouvez faire ceci :

12 - fonction flèche (ES6)

13 - Conseils pour mesurer les performances d'un bloc JavaScript

}; if (monObjet.nom) { … }

17 - 模板字符串

18- Convertir la liste de nœuds en tableau

21 - La différence entre indéfini et null

22 - Trier les chaînes en caractères non-ASCII

· Utiliser une valeur d'objet indépendante existante · Définir la clé dans le composant parent, pas dans le composant enfant

Le La fonctionnalité la plus admirable d'AngularJs est la liaison de données bidirectionnelle. Pour que cela fonctionne, AngularJs évalue les modifications du modèle et affiche les boucles (

25 - 在数组插入一个项

Articles Liés

2、使用 === 代替 ==