Maison > Article > interface Web > Petits détails à connaître lorsque vous utilisez JavaScript
Petits détails à connaître lorsque vous utilisez JavaScript
- php中世界最好的语言original
- 2018-03-19 16:57:571103parcourir
Cette fois je vais vous apporter petits détails que vous devez connaître lorsque vous utilisez JavaScript, et quelles sont les précautions que vous devez connaître sur JavaScript. Voici des cas pratiques, jetons un coup d'œil.
instruction break et instruction continue
L'instruction break et l'instruction continue ont toutes deux une fonction de saut, qui permet au code d'être exécuté hors de l'ordre existant.
L'instruction break est utilisée pour sortir d'un bloc de code ou d'une boucle.
var i = 0;
while(i < 100) {
console.log('i 当前为：' + i);
i++;
if (i === 10) break;
}L'instruction continue est utilisée pour terminer immédiatement le cycle en cours, revenir en tête de la structure de la boucle et démarrer le cycle suivant.
var i = 0;
while (i < 100){
i++;
if (i % 2 === 0) continue;
console.log('i 当前为：' + i);
}Notez qu'en plus des instructions break et continue, il existe également une instruction return indiquant que la fonction appelante revient à la fonction appelante pour continuer l'exécution. Le return peut être accompagné d'un. valeur de retour, suivie des paramètres de retour spécifiés. Après le retour, la fonction se termine et les instructions suivantes ne sont plus exécutées
Label
Le langage JavaScript le permet, il y a une étiquette devant l'instruction, ce qui équivaut à. le localisateur, utilisé pour accéder à n'importe quel emplacement du programme. L'étiquette peut être n'importe quel identifiant, mais il ne peut pas s'agir d'un mot réservé. La partie instruction peut être n'importe quelle instruction. La balise
est généralement utilisée en conjonction avec l'instruction break et l'instruction continue pour sortir d'une boucle spécifique.
top:
for (var i = 0; i < 3; i++){
for (var j = 0; j < 3; j++){
if (i === 1 && j === 1) break top;
console.log('i=' + i + ', j=' + j);
}
}
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0Levage variable (Levage)
La portée du levage suit la portée de la fonction. Je comprends que la portée de la fonction n'a pas été mentionnée ici, mais je peux mentionner une phrase pour rappeler aux lecteurs, puis créer un lien vers la partie portée pour une discussion plus approfondie
"Le levage est uniquement pour < ; 🎜> déclarations Les variables sont valides", pas vraiment. Le levage des déclarations de variables ne consiste pas uniquement en un levage. JavaScript propose quatre façons de hisser les déclarations dans la portée (par ordre de priorité) :
var
0.1 + 0.2 === 0.3 // false 0.3 / 0.1 // 2.9999999999999996 (0.3 - 0.2) === (0.2 - 0.1) // falseLa précision ne peut aller que jusqu'à 53 chiffres binaires, ce qui signifie que les entiers ayant une valeur absolue inférieure ou égale à 2 élevée à la puissance 53, soit -253 à 253, peuvent être représenté avec précision.
Math.pow(2, 53) // 9007199254740992 Math.pow(2, 53) + 1 // 9007199254740992 Math.pow(2, 53) + 2 // 9007199254740994 Math.pow(2, 53) + 3 // 9007199254740996 Math.pow(2, 53) + 4 // 9007199254740996Dans le code ci-dessus, une fois qu'il est supérieur à 2 élevé à la puissance 53, les résultats des opérations sur les nombres entiers commencent à apparaître erronés. Par conséquent, toute valeur supérieure à 2 élevée à la puissance 53 ne peut pas maintenir la précision. Puisque 2 à la puissance 53 est une valeur décimale à 16 chiffres, la règle simple est que JavaScript peut gérer avec précision les nombres décimaux à 15 chiffres.
Math.pow(2, 53) // 9007199254740992 // 多出的三个有效数字，将无法保存 9007199254740992111 // 9007199254740992000Selon la norme, la longueur de la partie exposant d'un nombre à virgule flottante de 64 bits est de 11 bits binaires, ce qui signifie que la valeur maximale de la partie exposant est de 2047 (2 au 11ème puissance moins 1). En d'autres termes, la valeur maximale de la partie exposant d'un nombre à virgule flottante de 64 bits est 2047. Si la moitié est divisée pour représenter un nombre négatif, la plage numérique que JavaScript peut représenter est de 21024 à 2-1023 (plage ouverte ). Les nombres au-delà de cette plage ne peuvent pas être représentés. Si un nombre est supérieur ou égal à 2 élevé à la puissance 1024, alors un "débordement direct" se produira, c'est-à-dire que JavaScript ne peut pas représenter un nombre aussi grand et Infinity sera renvoyé.
Math.pow(2, 1024) // Infinity Math.pow(2, -1075) // 0parseInt()Pour les nombres automatiquement convertis en notation scientifique, parseInt traite la représentation en notation scientifique comme une chaîne, conduisant ainsi à des résultats étranges.
parseInt(1000000000000000000000.5) // 1 // 等同于 parseInt('1e+21') // 1 parseInt(0.0000008) // 8 // 等同于 parseInt('8e-7') // 8
parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制。
parseInt('1000', 2) // 8 parseInt('1000', 6) // 216 parseInt('1000', 8) // 512
isFinite()
isFinite方法返回一个布尔值，表示某个值是否为正常的数值。
isFinite(Infinity) // false isFinite(-Infinity) // false isFinite(NaN) // false isFinite(-1) // true
with语句
它的作用是操作同一个对象的多个属性时，提供一些书写的方便。
var obj = {
p1: 1,
p2: 2,
};
with (obj) {
p1 = 4;
p2 = 5;
}
// 等同于
obj.p1 = 4;
obj.p2 = 5;注意，如果with区块内部有变量的赋值操作，必须是当前对象已经存在的属性，否则会创造一个当前作用域的全局变量。
var obj = {};
with (obj) {
p1 = 4;
p2 = 5;
}
obj.p1 // undefined
p1 // 4位运算符
二进制或运算符（or）：符号为|，表示若两个二进制位都为0，则结果为0，否则为1。
二进制与运算符（and）：符号为&，表示若两个二进制位都为1，则结果为1，否则为0。
二进制否运算符（not）：符号为~，表示对一个二进制位取反。
异或运算符（xor）：符号为^，表示若两个二进制位不相同，则结果为1，否则为0。
左移运算符（left shift）：符号为<<
右移运算符（right shift）：符号为>>
带符号位的右移运算符（zero filled right shift）：符号为>>>
void 运算符
void运算符的作用是执行一个表达式，然后不返回任何值，或者说返回undefined。
下面是一个更实际的例子，用户点击链接提交表单，但是不产生页面跳转。
<a href="javascript: void(document.form.submit())"> 提交 </a>
圆括号的作用
圆括号不是运算符，而是一种语法结构。它一共有两种用法：一种是把表达式放在圆括号之中，提升运算的优先级；另一种是跟在函数的后面，作用是调用函数。
Number(Object)
简单的规则是，Number方法的参数是对象时，将返回NaN，除非是包含单个数值的数组。
Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5之所以会这样，是因为Number背后的转换规则比较复杂。
第一步，调用对象自身的valueOf方法。如果返回原始类型的值，则直接对该值使用Number函数，不再进行后续步骤。
第二步，如果valueOf方法返回的还是对象，则改为调用对象自身的toString方法。如果toString方法返回原始类型的值，则对该值使用Number函数，不再进行后续步骤。
第三步，如果toString方法返回的是对象，就报错。
String(Object)
String方法的参数如果是对象，返回一个类型字符串；如果是数组，返回该数组的字符串形式。
String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"String方法背后的转换规则，与Number方法基本相同，只是互换了valueOf方法和toString方法的执行顺序。
先调用对象自身的toString方法。如果返回原始类型的值，则对该值使用String函数，不再进行以下步骤。
如果toString方法返回的是对象，再调用原对象的valueOf方法。如果valueOf方法返回原始类型的值，则对该值使用String函数，不再进行以下步骤。
如果valueOf方法返回的是对象，就报错。
原生错误类型
SyntaxError对象是解析代码时发生的语法错误。ReferenceError对象是引用一个不存在的变量时发生的错误。angeError对象是一个值超出有效范围时发生的错误。主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。TypeError对象是变量或参数不是预期类型时发生的错误。比如，对字符串、布尔值、数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数。URIError对象是 URI 相关函数的参数不正确时抛出的错误，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。eval函数没有被正确执行时，会抛出EvalError错误。该错误类型已经不再使用了，只是为了保证与以前代码兼容，才继续保留。
var err1 = new Error('出错了！');
var err2 = new RangeError('出错了，变量超出有效范围！');
var err3 = new TypeError('出错了，变量类型无效！');
err1.message // "出错了！"
err2.message // "出错了，变量超出有效范围！"
err3.message // "出错了，变量类型无效！"
finally 代码块
try...catch结构允许在最后添加一个finally代码块，表示不管是否出现错误，都必需在最后运行的语句。
function cleansUp() {
try {
throw new Error('出错了……');
console.log('此行不会执行');
} finally {
console.log('完成清理工作');
}
}
cleansUp()
// 完成清理工作
// Error: 出错了……
map()
map方法不仅可以用于数组，还可以用于字符串，用来遍历字符串的每个字符。但是，不能直接使用，而要通过函数的call方法间接使用，或者先将字符串转为数组，然后使用。
var upper = function (x) {
return x.toUpperCase();
};
[].map.call('abc', upper)
// [ 'A', 'B', 'C' ]
// 或者
'abc'.split('').map(upper)
// [ 'A', 'B', 'C' ]
其他类似数组的对象（比如document.querySelectorAll方法返回DOM节点集合），也可以用上面的方法遍历。
map方法还可以接受第二个参数，表示回调函数执行时this所指向的对象。
var arr = ['a', 'b', 'c'];
[1, 2].map(function(e){
return this[e];
}, arr)
// ['b', 'c']
如果数组有空位，map方法的回调函数在这个位置不会执行，会跳过数组的空位。
Array(2).map(function (){
console.log('enter...');
return 1;
})
// [, ,]
reduce()，reduceRight()
reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。
它们的差别是，reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。
这两个方法的第一个参数都是一个函数。该函数接受以下四个参数。
累积变量，默认为数组的第一个成员
当前变量，默认为数组的第二个成员
当前位置（从0开始）
原数组
[1, 2, 3, 4, 5].reduce(function(x, y){
console.log(x, y)
return x + y;
});
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15
Object.keys()，Object.getOwnPropertyNames()
Object.keys方法和Object.getOwnPropertyNames方法都用来遍历对象的属性。
Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名。
Object.getOwnPropertyNames方法与Object.keys类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。
对于一般的对象来说，Object.keys()和Object.getOwnPropertyNames()返回的结果是一样的。只有涉及不可枚举属性时，才会有不一样的结果。Object.keys方法只返回可枚举的属性，Object.getOwnPropertyNames方法还返回不可枚举的属性名。
var a = ['Hello', 'World']; Object.keys(a) // ["0", "1"] Object.getOwnPropertyNames(a) // ["0", "1", "length"]
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
navigator.clipboard浏览器怎么制作原生剪贴板
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!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript