返回

JS中的惊喜之物

前端

JavaScript中的惊喜之物

JavaScript,一门强大的编程语言,它作为Web开发的基础,为我们构建交互式网站提供了无限可能。在JavaScript中,存在着一些鲜为人知却至关重要的特性,就像隐藏的宝藏,等待着我们去挖掘。让我们一起探寻这些惊喜之物,发现JavaScript的更多奥秘。

1. 标记循环与块的名称

JavaScript允许我们为for循环和代码块标记名称。这对于控制循环和代码块的执行提供了极大的灵活性。

for循环标记

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break myLoop; // 使用break标记名称终止循环
  }
}

myLoop: for (let j = 0; j < 5; j++) {
  if (j === 3) {
    continue myLoop; // 使用continue标记名称跳过本次循环
  }
  console.log(j);
}

在这个例子中,我们为for循环标记了一个名称"myLoop"。在循环内部,可以使用break myLoop;和continue myLoop;来分别终止循环和跳过本次循环。

代码块标记

{
  let x = 10;
  if (x > 5) {
    break block; // 使用break标记名称终止代码块
  }
  console.log(x);
}

block: {
  let y = 20;
  if (y > 15) {
    break block; // 使用break标记名称终止代码块
  }
  console.log(y);
}

在这个例子中,我们为代码块标记了一个名称"block"。在代码块内部,可以使用break block;来终止代码块的进一步执行。

2. void操作符的妙用

void操作符是一个鲜为人知但用途广泛的操作符。它不管后面表达式的计算结果如何,总是返回undefined。

console.log(void 0); // undefined
console.log(void 10); // undefined
console.log(void "Hello"); // undefined
console.log(void true); // undefined

void操作符可以用来抑制表达式的副作用,比如函数调用或对象属性的访问。

function myFunction() {
  console.log("Hello World!");
}

void myFunction(); // 调用函数,但抑制控制台输出

3. &&和||的巧妙运用

&&和||是JavaScript中非常重要的逻辑运算符。它们可以用来连接两个或多个布尔表达式,并根据表达式的结果来决定最终的布尔值。

&&运算符

&&运算符表示逻辑与,只有当所有连接的布尔表达式都为true时,最终结果才为true。

console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

||运算符

||运算符表示逻辑或,只要有一个连接的布尔表达式为true,最终结果就为true。

console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

&&和||运算符可以用来简化代码,提高代码的可读性。

if (x > 0 && y < 10) {
  // 执行某些操作
}

上面的代码等价于:

if (x > 0) {
  if (y < 10) {
    // 执行某些操作
  }
}

4. 非布尔值在条件判断中的运用

在JavaScript中,不仅仅是布尔值可以用于条件判断。任何值都可以用于条件判断,只要它能转换成布尔值。

真值和假值

在JavaScript中,有两种特殊的值:真值和假值。真值表示为true,假值表示为false。

console.log(true); // true
console.log(false); // false

非布尔值的转换

当非布尔值用于条件判断时,JavaScript会自动将其转换成布尔值。转换规则如下:

  • undefined、null、NaN、0、空字符串""和false被转换为false。
  • 其他所有值都被转换为true。
console.log(undefined); // false
console.log(null); // false
console.log(NaN); // false
console.log(0); // false
console.log(""); // false
console.log(false); // false

console.log(1); // true
console.log("Hello"); // true
console.log({}); // true
console.log([]); // true

非布尔值在条件判断中的运用

非布尔值在条件判断中的运用非常广泛,比如:

  • 检查变量是否已定义:
if (x) {
  // 执行某些操作
}
  • 检查数组是否为空:
if (arr.length) {
  // 执行某些操作
}
  • 检查对象是否为空:
if (Object.keys(obj).length) {
  // 执行某些操作
}