Kleine Details, die Sie bei der Verwendung von JavaScript wissen müssen

Dieses Mal bringe ich Ihnen kleine Details, die Sie bei der Verwendung von JavaScript wissen müssen, und welche Vorsichtsmaßnahmen Sie über JavaScript wissen müssen. Hier sind praktische Fälle, schauen wir uns das an.

break-Anweisung und continue-Anweisung

Sowohl die break-Anweisung als auch die continue-Anweisung verfügen über eine Sprungfunktion, die es ermöglicht, den Code außerhalb der bestehenden Reihenfolge auszuführen.

Die break-Anweisung wird verwendet, um aus einem Codeblock oder einer Schleife auszubrechen.

var i = 0;
while(i < 100) {
  console.log(&#39;i 当前为：&#39; + i);
  i++;
  if (i === 10) break;
}

Die continue-Anweisung wird verwendet, um den aktuellen Zyklus sofort zu beenden, zum Kopf der Schleifenstruktur zurückzukehren und den nächsten Zyklus zu starten.

var i = 0;
while (i < 100){
  i++;
  if (i % 2 === 0) continue;
  console.log(&#39;i 当前为：&#39; + i);
}

Beachten Sie, dass es zusätzlich zu den Break- und Continue-Anweisungen auch eine Return-Anweisung gibt, die angibt, dass die aufrufende Funktion zur aufrufenden Funktion zurückkehrt, um die Ausführung fortzusetzen. Die Rückgabe kann von a begleitet werden Rückgabewert, gefolgt von den angegebenen Rückgabeparametern. Nach der Rückkehr endet die Funktion und die folgenden Anweisungen werden nicht mehr ausgeführt.

Label

Die JavaScript-Sprache ermöglicht es, dass vor der Anweisung eine Beschriftung steht, die äquivalent ist Der Locator wird verwendet, um zu einer beliebigen Stelle im Programm zu springen. Die Bezeichnung kann ein beliebiger Bezeichner sein, es kann jedoch kein reserviertes Wort sein. Der Anweisungsteil kann eine beliebige Anweisung sein. Das

-Tag wird normalerweise in Verbindung mit der break-Anweisung und der continue-Anweisung verwendet, um aus einer bestimmten Schleife zu springen.

top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log(&#39;i=&#39; + i + &#39;, j=&#39; + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0

Variables Heben (Heben)

1. Der Umfang des Hebens folgt dem Funktionsumfang. Ich verstehe, dass der Funktionsumfang hier nicht erwähnt wurde, aber ich kann ihn erwähnen, um die Leser daran zu erinnern, und dann zur weiteren Diskussion auf den Umfangsteil verlinken

2. „Heben ist nur für var Deklarationen Variablen sind gültig“, nicht wirklich. Das Hochziehen von Variablendeklarationen ist nicht alles Hochziehen. JavaScript bietet vier Möglichkeiten, Deklarationen innerhalb des Bereichs hochzuheben (in der Reihenfolge ihrer Priorität):

– sprachdefinierte Deklarationen wie diese und Argumente. Sie können eine Variable namens this im Gültigkeitsbereich nicht neu definieren, da es sich um eine von der Sprache automatisch definierte Anweisung handelt, die die höchste Priorität hat, d. h. sie wird an die Spitze gehoben und niemand kann sie überschreiben

-Formale Parameter. Obwohl wir var nicht verwenden müssen, um formale Parameter zu ändern, sind formale Parameter tatsächlich Variablen und werden automatisch zur nächsthöheren Priorität

hochgestuft – der Funktionsdeklaration. Zusätzlich zu var kann die Funktionsdeklaration auch neue Namen definieren und wird ebenfalls an die Spitze des Gültigkeitsbereichs gehoben, nur an zweiter Stelle nach den ersten beiden

– schließlich gibt es noch die in diesem Artikel erwähnte reguläre Variable, Das ist die var-Deklaration. Variablen

Ganzzahlen und Gleitkommazahlen

Intern in JavaScript werden alle Zahlen als 64-Bit-Gleitkommazahlen gespeichert, auch ganze Zahlen. Daher sind 1 und 1,0 gleich und haben die gleiche Zahl.

Das bedeutet, dass es am Ende der JavaScript-Sprache keine Ganzzahlen gibt, alle Zahlen sind Dezimalzahlen (64-Bit-Gleitkommazahlen). Was leicht verwirrend ist, ist, dass einige Operationen nur mit Ganzzahlen abgeschlossen werden können. Zu diesem Zeitpunkt konvertiert JavaScript die 64-Bit-Gleitkommazahl automatisch in eine 32-Bit-Ganzzahl, bevor die Operation ausgeführt wird.

Da Gleitkommazahlen keine exakten Werte sind, muss beim Vergleichen und Ausführen von Operationen mit Dezimalzahlen besondere Vorsicht geboten sein.

0.1 + 0.2 === 0.3
// false
0.3 / 0.1
// 2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1)
// false

Die Genauigkeit kann nur bis zu 53 Binärziffern betragen, was bedeutet, dass ganze Zahlen mit einem Absolutwert kleiner oder gleich 2 hoch 53, also -253 bis 253, sein können genau dargestellt.

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
// 9007199254740996

Im obigen Code erscheinen die Ergebnisse von Ganzzahloperationen falsch, nachdem der Wert größer als 2 hoch 53 ist. Daher kann ein Wert größer als 2 hoch 53 die Genauigkeit nicht aufrechterhalten. Da 2 hoch 53 ein 16-stelliger Dezimalwert ist, lautet die einfache Regel, dass JavaScript 15-stellige Dezimalzahlen genau verarbeiten kann.

Math.pow(2, 53)
// 9007199254740992
// 多出的三个有效数字，将无法保存
9007199254740992111
// 9007199254740992000

Nach dem Standard beträgt die Länge des Exponententeils einer 64-Bit-Gleitkommazahl 11 Binärbits, was bedeutet, dass der Maximalwert des Exponententeils 2047 (2 hoch 11) beträgt Leistung minus 1). Mit anderen Worten, der Maximalwert des Exponententeils einer 64-Bit-Gleitkommazahl beträgt 2047. Wenn die Hälfte davon geteilt wird, um eine negative Zahl darzustellen, beträgt der numerische Bereich, den JavaScript darstellen kann, 21024 bis 2-1023 (offener Bereich). ). Zahlen außerhalb dieses Bereichs können nicht dargestellt werden.

Wenn eine Zahl größer oder gleich 2 hoch 1024 ist, kommt es zu einem „Vorwärtsüberlauf“, d. h. JavaScript kann eine so große Zahl nicht darstellen und es wird Unendlichkeit zurückgegeben.

Math.pow(2, 1024) // Infinity
Math.pow(2, -1075) // 0

parseInt()

Bei Zahlen, die automatisch in die wissenschaftliche Notation konvertiert werden, behandelt parseInt die Darstellung in der wissenschaftlichen Notation als Zeichenfolge, was zu einigen seltsamen Ergebnissen führt.

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中文网其它相关文章！

推荐阅读：

React中有哪些类定义组件

navigator.clipboard浏览器怎么制作原生剪贴板

Das obige ist der detaillierte Inhalt vonKleine Details, die Sie bei der Verwendung von JavaScript wissen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!