干货 | 你应该了解的25个JS技巧

写代码的时候总有一些东西是会重复出现的，次数多了你就会想找找捷径了。这类问题中有很大一部分解决起来甚至连库都不用装。下面就是我多年来收集的前 25 个捷径和小技巧。

JavaScript 不是强类型语言，对此我推荐的最佳解决方案是 TypeScript。但有时你只是想要一个简单的类型检查，这种时候 JavaScript 允许你使用“typeof”关键字。

“typeof”的问题在于，将其用于某些原语和函数时效果很好，但对于数组和对象来说，由于它们都被视为“对象”，因此很难把握它们之间的区别。

有时你需要知道某些内容是否为空，并根据结果决定要使用的方法，例如检查长度、大小或是否包含任何子元素。下面这个工具打包了这些功能，你可以用它检查 String、Object、Array、Map 和 Set 的大小。

其他语言里这个功能被做成了可以在数组上调用的方法或函数，但在 JavaScript 里面，你得自己做点工作。

有时你需要生成随机数，但希望这些数字在一定范围内，那就可以用这个工具。

有时你只是需要一些 ID？除非你要的是更复杂的 ID 生成器（例如 UUID），否则用不着为此安装什么新库，下面这个选项足够了。你可以从当前时间（以毫秒为单位）或特定的整数和增量开始生成，也可以从字母生成 ID。

Python 里我很喜欢的一个功能是 range 函数，而在 JavaScript 里我经常需要自己写这个功能。下面是一个简单的实现，非常适合 for…of 循环以及需要特定范围内数字的情况。

我在使用 NodeJs 将对象记录到控制台时经常使用这种方法。JSON.stringify 方法需要第三个参数，该参数必须有多个空格以缩进行。第二个参数可以为 null，但你可以用它来处理 function、Set、Map、Symbol 之类 JSON.stringify 方法无法处理或完全忽略的内容。

如果你有一堆异步或普通函数都返回 promise，要求你一个接一个地执行，这个工具就会很有用。它会获取函数或 promise 列表，并使用数组 reduce 方法按顺序解析它们。

如果你需要持续检查数据更新，但系统中没有 WebSocket，则可以使用这个工具来执行操作。它非常适合上传文件时，想要持续检查文件是否已完成处理的情况，或者使用第三方 API（例如 dropbox 或 uber）并且想要持续检查过程是否完成或骑手是否到达目的地的情况。

这个算不上是代码解决方案，更多是对 Promise API 的强化。这个 API 在不断进化，以前我还为“allSettled”“race”和“any”做了代码实现，现在直接用 API 的就好了。

ES6 开始，从数组中的不同位置交换值变得容易多了。这个做起来不难，但是了解一下也不错，

我最喜欢这条技巧了，我在使用 React 更新状态时经常用它。你可以将条件包装在括号中来有条件地将一个键插入一个 spread 对象。

当你有一个字符串变量，并想将其用作对象中的键以设置一个值时可以用它。

这是一个很好的技巧，可以帮助你检查对象键。

数组中经常有重复的值，你可以使用 Set 数据结构来消除它。它适用于许多数据类型，并且 set 有多种检查相等性的方法，很好用。对于不同实例或对象的情况，你还是可以使用 Set 来跟踪特定事物并过滤出重复的对象。

我真的很喜欢使用数组“.forEach”方法，但有时我需要提早退出或继续进行下一个循环，而不想用 for…loop。你可以复制“continue”语句行为来提前返回，但如果要复制“break”行为，则需要使用数组“.some”方法。

Destructuring（销毁）是 JavaScript 最好用的功能之一，而且你可以使用“冒号”设置别名，并使用“等号”设置属性默认值。

深入检查对象属性并处理 null 和 undefined 值时，你可以使用几个非常好用的 JavaScript 功能来解决常见的问题。

我经常对别人讲，JavaScript 类只是构造函数和底层的原型，不是像 Java 中那样的真实概念。一个证据是，你可以只使用一个构造函数来扩展一个类。在私有内容里这个很好用，在类里“#”这些看着很奇怪，并且用于 babel 或 WebPack 时，编译出来的代码更少。

类的一个问题是你只能扩展一个其他类。使用构造函数，你可以使用多个构造函数来构成一个函数，这样就会灵活多了。你可以使用函数原型的.apply 或.call 方法来实现。你甚至可以只扩展函数的一部分，只要它是一个对象即可。

有时，你需要循环任何可迭代的内容（Set、Map、Object、Array、String 等）。这个非常简单的 forEach 函数工具就可以做到这一点。如果回调返回 true，它将退出循环。

这是一种确保函数调用了完成工作所需内容的绝佳方法。你可以使用默认参数值的特性来调用函数，然后就会抛出一个错误。如果调用该函数时带上了它需要的值，则该值将替换该函数，并且什么也不会发生。使用 undefined 调用也有相同的效果。

很多时候，你需要在加载时初始化某些内容，设置它需要的各种事物，然后就可以在应用程序中到处使用它，而无需再做什么补充工作。你可以使用 IIFE 函数来做到这一点，这个函数太好用了。这种模块模式用来隔离事物非常好用，它可以只暴露需要交互的内容。

开发人员通常会安装一些类似“lodash”的库来执行这一操作，但使用纯 JavaScript 来实现确实也很容易。这是一个简单的递归函数：只要是一个对象，就使用函数的构造器将其重新初始化为一个克隆，然后对所有属性重复该过程。

如果你喜欢不变性，那么这个工具你一定要常备。

原文链接：

25 Javascript Code Solutions Utility Tricks You Need to Know About

https://beforesemicolon.medium.com/25-javascript-code-solutions-utility-tricks-you-need-to-know-about-3023f7ed993e

延伸阅读：

关注我并转发此篇文章，即可获得学习资料~若想了解更多，也可移步InfoQ官网，获取InfoQ最新资讯～

JavaScript中必须掌握的基本知识

一.简介

JavaScript（JS）是一门高级的、解释型的动态编程语言。用于 HTML或web应用，可被浏览器直接执行。

完整的JavaScript包括以下几个部分：

  1. ECMAScript，描述了该语言的语法和基本对象
  2. 文档对象模型（DOM），描述处理网页内容的方法和接口
  3. 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

JavaScript的基本特点：

  • 是一种解释性脚本语言（代码不进行预编译）。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务：

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息
  • 控制cookies，包括创建和修改等

二.用法

1.嵌入HTML

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

如果 <script> 放在 body 中，建议放在底部。因为浏览器会按照代码在文件中的顺序解析 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。所以，要将 JavaScript 代码放在 body 中，应置于 HTML 页面底部。

2.外部js脚本

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。外部文件不使用 <script> 标签，直接写 javascript 代码。

如需使用外部文件，请在 <script> 标签的 \”src\” 属性中设置该 .js 文件：

3.在console调试

可以进入浏览器中console，如chrome F12 进入console，以命令行的形式输入js命令

4.事件触发

把 JavaScript 代码放入函数中，在事件发生时调用该函数。

三.变量

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值

也可以使用let,const来定义，这三者的区别是：var与let涉及块级作用域，let 命令只在所在的代码块 {} 内有效，具体参考；const定义一个只读常量

一般用var即可，let更推荐

注意: 在JavaScript中，所有代码指令都会以分号结尾 (;)

JavaScript中数据类型主要有:

算数运算符主要有:

比较运算符主要有:

在常规的比较中，数据类型是被忽略的

四.基本语法

1.条件语句

if 语句只有当指定条件为 true 时，该语句才会执行代码。

使用 if….else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

使用 if….else if…else 语句来选择多个代码块之一来执行。

三目运算

2.循环语句

JavaScript 支持不同类型的循环：

  • for – 循环代码块一定的次数
  • for/in – 循环遍历对象的属性
  • while – 当指定的条件为 true 时循环指定的代码块
  • do/while – 同样当指定的条件为 true 时循环指定的代码块

for 循环

for/in遍历

while 循环会在指定条件为真时循环执行代码块。

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

3.函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

加上形参

匿名函数，函数存储在变量中，不需要函数名称，通常通过变量名来调用。

4.异常判断

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

在浏览器中，页面被加载的时候，会自动生成这个页面的DOM对象（document）

DOM对象是一个树模型

可以通过这个对象：

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

1.查找HTML元素

通过id查找

通过标签查找

通过类名查找

因为查找返回的元素也是对象，所以可以对它再进行查找

2.修改HTML元素

改变HTML输出流

修改 HTML 内容

改变 HTML 元素的属性

3.DOM事件

事件可以是浏览器行为，也可以是用户行为，当事件触发时，可以执行对应的js代码

常见事件

HTML 元素中可以添加事件属性，并添加 JavaScript 代码，当此元素的事件被触发时，就会触发执行js代码

<button onclick=\”getElementById(\’demo\’).innerHTML=Date()\”>现在的时间是?</button><p id=\”demo\”></p>

也可以由DOM对象分配事件，因为事件也是html的一个属性

addEventListener() 方法

语法为

第一个参数是事件的类型 (如 \”click\” 或 \”mousedown\”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

详细的事件类型参考https://developer.mozilla.org/zh-CN/docs/Web/Events,注意与在元素属性中的事件是不同的

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科