你可能不知道的几个实用JavaScript小技巧 💻👨‍💻

JavaScript 是一种广泛使用的网络编程语言。如果你打算在软件工程领域开始职业生涯，你很可能就会遇到 JavaScript。

尽管JavaScript有其限制和复杂难懂的概念，如果你想在网页开发的职业生涯中取得进步，学习和使用JavaScript几乎是必须的。

在这篇文章里，我将分享一些有用的JavaScript小技巧和窍门，以帮助你当你用JavaScript时应对棘手情况。

这些语言对分号的要求极其严格，例如 C#、C++ 和 Java，要求每行的结尾加上分号。

JavaScript 也使用分号来表示一行的终止，但分号在 JavaScript 中其实是可选的。也就是说，这里的分号是可选的，JavaScript 会应用一套复杂的规则集来自动确定是否需要在此插入分号。这被称为自动分号插入。

比如：

    function returnSomething()
    {
      return
        {
          name: 'JavaScript专家',
          contactMethod: '挥舞蝙蝠信号灯向天空'
        }
    }

全屏模式，退出全屏

乍一看，你可能会以为记录这个函数调用会显示出这个特定的对象。但实际上，情况并非如此。当你实际调用这个函数时，输出却是 undefined。

解释：因为开括号和返回语句不在同一行，ASI 会在那里为我们自动添加一个分号。就 JavaScript 而言，我们的代码实际上看起来是这样的：

function returnSomething()
{
  return ; , // <-- ASI 自动插入的分号，导致函数剩余部分不会被执行。
  {
    name: 'JavaScript 专家',
    contactMethod: '挥动蝙蝠信号向天空'
  }
}

点击这里进入全屏模式 点击这里退出全屏

为了避免这样的情况，我们应该仔细核对括号的位置以及其他语法结构。

让我们想象我们有一个简单的数组，我们知道可以弹出、推入、添加元素，可以随心所欲地操作数组。但我们也知道，和其他语言一样，JavaScript 也允许我们通过索引访问数组元素。

然而，JavaScript 不同寻常的地方在于，即使数组当前还没有达到那个索引位置，你也可以通过索引设定元素。

例子：他每天早上跑步。

var arr = [];
arr[0] = 1;
arr[1] = 2;
arr[100] = 100;
console.log(arr);
console.log('控制台输出：数组长度为 ' + arr.length + '。');

切换到全屏；切换出全屏

显示：

[ 1, 2, <98 个空位>, 100 ]
这个数组有101个元素

进入全屏 退出全屏

window.navigator 对象包含关于访客的浏览器和操作系统的详细信息。一些操作系统属性可以在platform属性里找到。

你可以使用以下代码段来获取系统的类型。

console.log(navigator.platform); // 打印当前平台信息

切换到全屏模式 退出全屏

输出：

    Win32（适用于 Windows 操作系统）
    MacIntel（适用于 macOS）
    Linux x86_64（64 位系统）
    WebOS（适用于 LG 智能电视）
    Linux（适用于三星智能电视）

进入全屏模式 退出全屏模式

或根据具体上下文调整为：
进入全屏 退出全屏

如何判断是否使用了移动浏览器

你可以通过检查设备列表中的userAgent来检测移动浏览器。

    function detectMobileBrowser() {
      // 检测移动浏览器
      if (navigator.userAgent.match(/Android/i) ||
          navigator.userAgent.match(/webOS/i) ||
          navigator.userAgent.match(/iPhone/i) ||
          navigator.userAgent.match(/iPad/i) ||
          navigator.userAgent.match(/iPod/i) ||
          navigator.userAgent.match(/BlackBerry/i) ||
          navigator.userAgent.match(/Windows Phone/i)) {
        return true;
      } else {
        return false;
      }
    }

全屏模式；退出全屏

在 JS 控制台消息中使用 CSS 样式和颜色

你可以通过特定语法在控制台中的消息上应用CSS样式和颜色，这在区分不同的消息时很有帮助。

代码示例如下：

    console.log(
            "%c别停!",
            "color:红色;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"
          );

全屏模式 退出全屏

输出如下：

就这样啦！这里有几个不太为人知的 JavaScript 小技巧，这些小技巧将来可能会对你有些帮助。

在领英上与我联系 :- 领英

可以看看我GitHub上的精彩项目，-GitHub主页

看看我的个人作品集：Aryan的个人作品集