记录--JavaScript 中有趣的 9 个常用编码套路

这篇具有很好参考价值的文章主要介绍了记录--JavaScript 中有趣的 9 个常用编码套路。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--JavaScript 中有趣的 9 个常用编码套路

1️⃣ set对象:数组快速去重

常规情况下,我们想要筛选唯一值,一般会想到遍历数组然后逐个对比,或者使用成熟的库比如lodash之类的。

不过,ES6带来了一个新玩意儿!它引入了一个全新的对象类型:Set!而且,如果结合上...展开运算符,我们可以超级快速地创建一个已经去重的全新数组!😎

const arr = [10, 10, 10, 20, 20, 30, 40, 40, 50, 60, 60, 70];
const uniArr = [...new Set(array)];
console.log(uniArr);
// [10, 20, 30, 40, 50, 60, 70]

这个技巧只适用于包含基本类型的数组,比如undefinednullbooleanstringnumber

但是要记住哦,如果数组里面还有对象、函数或其他数组的话,就不能用这个方法了!🚨

2️⃣ include方法:简化( || 或)条件判断

当我们使用逻辑运算符||进行条件判断时,如果有很多可选值,代码会变得冗长。

不过,我们可以使用includes方法来简化对数组的遍历操作,方便地判断数组是否包含某个特定的元素。

这样一来,我们就可以更简洁地列出可选值,而不必写一长串的条件判断语句。includes方法可以帮助我们轻松判断数组中是否存在指定的元素🔎🎯

const myNum = '3';
const numArr = ['1', '2', '3'];
​
// 使用 || 
if (myNum === '1' || myNum === '2' || myNum === '3') {
    //……
}
​
// 使用 include
if (numArr.includes(myNum)) {
    //……
}           

3️⃣ 截断数组:改变length就可以

操作数组时,我们通常会优先使用array对象中的高级函数。

不过,我这里要介绍一种更简单的方法来改变数组长度,我喜欢它的原因是它非常直观且易读。

只需使用length属性并传递一个数字,就可以改变数组的长度。这样做非常方便!😊

let array = ['1', '2', '3', '4'];
array.length = 2;
console.log(array); // ['1', '2']

当然 ,如果你更注重性能,还是请使用 array.slice()

4️⃣ 数字分割符: 提高数字可读性

若要提高数字的可读性,你可以使用下划线作为分隔符来更好地区分数字的各个部分。这样做可以让数字更易读,让人一目了然🔢💡

const num = 1_000_000_000;
​
console.log(num); // 1000000000

5️⃣ 控制台打印:用对象包裹更清晰

在使用console.log()时,你可以将参数括在大括号中,这样可以在控制台输出时同时显示变量的名称和值。这种方式非常方便,让你更清晰地了解每个变量的内容🔍💡

const name = "道长王jj";
console.log({ name });
​
// {
//     "name": "道长王jj"
// }

6️⃣ 短路运算:简化条件判断

if...else条件判断是代码过程中最常用的,几乎在任何情况下,我们都会快速地敲下它来控制逻辑流程。

不过,有时候我们也希望代码更加简洁、快速,不占那么多篇幅。我们想尽可能地简洁且快速,于是就会用到三元运算符:

const num = 75;
const result1 = num > 100 ? '大于100' : '小于100';

但是我在这里并不是推荐使用“三元运算”,其实有时候三元运算符可能会让代码逻辑变得有点复杂哦!😅比如这样:

const result2 = num > 100 ? (num > 200 ? '大于200' : '介于100和200之间') : '小于100';

这个时候,使用 && 和 || 这类逻辑运算符反而能更简洁的表达算式。

举个例子:

// 假设,我们有三个已经打过分的相亲对象必须选择一个来当女朋友,使用 `&&` 可以很好的帮我们做出选择。
const one = 8;
const two = 9;
const three = 10;
// 返回10
console.log(one && two && three); 
// 返回0
console.log(0 && null); 
// 当然,如果你足够独特~~(变态)~~,就是不要女朋友,如果选只选最差的,你可以使用 `||` 来帮你做吹选择。
const one = 8;
const two = 9;
const three = 10;
// 返回8
console.log(one || two || three); 
// 返回null
console.log(0 || null); 

哦,这个情况在工作场景中确实很常见。

假设我们想返回变量的 length ,但我们不确定接口会不会给我们需要的类型。

这个时候我们就可以使用 if/else 语句来检查是可接受的类型,但它会让我们的代码非常臃肿。

这时候,我们可以使用短路运算来简化代码,而且有极高的健壮性:

// 使用if
let temp = getArray();
​
if (!temp) {
    tempLength = 0;
} else {
    tempLength = temp.length
}
​
// 使用 ||
// 如果变量 tempArray 为真,则将返回该变量。否则,将返回 []
const temp = (tempArray || []).length;

7️⃣ 可选链:更加安全地访问对象属性

你有没有遇到过访问嵌套对象属性的困扰?

就是有时候你根本不确定这个对象或者它的子属性到底存不存在,结果就报错了!😩以至于程序崩溃无法运行

console.log(abc.ss)
// ceError: abc is not defined
//     at <anonymous>:1:1
// (匿名) @ VM190795

为了不让报错阻止我们的程序运行,我们通常会将它包装在一个if……else代码块中:

if (abc.ss) {
  console.log(abc.ss);
} else {
  console.log('没有abc这个变量喏~');
}
​
// 还可以用短路运算
console.log(abc && abc.ss)

8️⃣ 巧用运算符:快速类型转换

在这之前需要科普一些小知识:

除了常规的truefalse之外,其他变量也可以被当成true 或者 false

除了0""(空字符串)nullundefinedNaNfalse 之外呢,JavaScript中的所有其他值都是"真的"哦!

所以呢,基于这个认知。

我们可以使用负运算符 ! ,将类型转换为 "boolean"

const x = Boolean(expression);     // 推荐
const x = !!(expression);          // 推荐
const x = new Boolean(expression); // 不太好

我们可以使用连接运算符 + 后跟一组空引号 '',将类型转换为 "string" 。

const value = 12 + '';
console.log(value); // '12'

我们可以使用加法运算符 +,将类型转换为 "number" 。

const value = '12';
value = value + 1;
console.log(value); // 13
​
// 当然也可以转换 Boolean 变成 Number 
// 工作中不推荐这样用!!!!
console.log(+true); // 1
console.log(+false); // 0

9️⃣ 快速运算:更快更简洁的数学运算操作符

以前我们在使用JavaScript进行数学运算时,总是要借助Math库进行运算。

很奇怪的是,但是很多教程并没有提醒我们,ES7其实带来的全新运算符✨

如果想示乘方操作,通常我们会调用Math.pow(5, 7)这个方法。但是现在我们可以使用幂运算符**了,而且性能更快更好。

console.log(5 ** 7); // 78125

如果想将浮点数转换为整数,通常我们会使用Math.floor()Math.ceil()Math.round()这些方法。不过,其实可以使用 | 将浮点数直接截断为整数。这个技巧可以让你的代码更简洁高效哦!🚀

// 正数,则向下舍入
console.log(34.9 | 0);  // Result: 34
// 负数,则向上舍入
console.log(-12.9 | 0); // Result: -12

以前我们只取千分位需要进行类型转换后才能进行取数

let str = "33545"; 
Number(str.substring(0, str.length - 3)); // 33

但是我们可以更优雅地这样做:

console.log(33545 / 1000 | 0)  // Result: 33

本文转载于:

https://juejin.cn/post/7239895900297740344

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--JavaScript 中有趣的 9 个常用编码套路文章来源地址https://www.toymoban.com/news/detail-472108.html

到了这里,关于记录--JavaScript 中有趣的 9 个常用编码套路的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [译]JavaScript中Base64编码字符串的细节

    本文作者为 360 奇舞团前端开发工程师 本文为翻译 原文标题:The nuances of base64 encoding strings in JavaScript 原文作者:Matt Joseph 原文链接:https://web.dev/articles/base64-encoding   Base64编码和解码是一种常见的将二进制内容转换为适合Web的文本的形式。它通常用于data URLs,比如内嵌图片

    2024年02月05日
    浏览(52)
  • JavaScript实现字符编码转换utf-8/gbk(附完整源码)

    以上代码中,我们使用了JavaScript内置的TextEncoder和TextDecoder类来实现字符编码转换。这两个类是ES6新增的特性,需要在支持ES6的浏览器上才能正常运行。 使用示例: 运行结果说明转换成功。需要注意的是,在不同的浏览器中,对字符编码的支持程度可能不同,因此在使用时需

    2024年02月04日
    浏览(37)
  • 3--常用编码

    在网页设置网页编码 在head/head中加入设置特定html标签 meta charset=\\\"utf-8\\\" / 这样页面的编码就会变成utf-8 如果没有设置编码就会使用默认的编码,而浏览器默认编码与之不同就会出现乱码 常用的有三种格式分别是 utf-8、gbk、gbk2312 ASCII (American Standard Code for Information Interchange):美

    2024年02月14日
    浏览(21)
  • JavaScript系列从入门到精通系列第九篇:JavaScript中赋值运算符和关系运算符以及Unicode编码介绍

    文章目录 一:赋值运算符 1:= 2:+= 3:-= 4:*= 5:/= 6:%= 二:关系运算符  1:数值类型关系运算 (一): (二):= (三): (四):= 2:其他类型关系运算 三:Unicode编码表         =右侧的值可以赋值给左侧的变量。         上边这两个写法是一样的。                 

    2024年02月08日
    浏览(60)
  • 记录智能车自制霍尔编码器(PCB篇)

    前文论述了智能车独轮车组自制编码器的可行性,昨天下单编码器今天就到货了,在此记录一下自制(抄板)年轻人的第一款编码器的历程。 到货的编码器  这种商品店家自然是不可能提供原理图和PCB,能有尺寸图已经是非常好了。所以主要靠自己观察,好在构造本就很简单,

    2024年02月06日
    浏览(49)
  • 【华为OD统一考试B卷 | 100分】整数编码(C++ Java JavaScript Python)

    在线OJ 已购买本专栏用户,请私信博主开通账号,在线刷题!!! 运行出现 Runtime Error 0Aborted,请忽略 2023年5月份,华为官方已经将的 2022/0223Q(1/2/3/4)统一修改为 2023A卷和2023B卷。你收到的链接上面会标注A卷还是B卷。请注意:根据反馈,目前大部分收到的都是B卷。B卷对应之

    2024年02月13日
    浏览(45)
  • 微信打不开MP4文件 (记录编码问题)

    我是从这个帖子的提示出了问题 一般我们常见的MP4视频编码方式有两种: MPEG4 和 H.264,微信只支持H.264编码的 参考文章 在维基百科中也说明了有些MP4的编码格式是已经淘汰了的 淘汰的:H.263、H.262(MPEG-2第2部分)、MPEG-1和H.261 提一下有的视频该一下扩展名就也可以播放的应

    2023年04月08日
    浏览(504)
  • 【错误记录】IntelliJ IDEA 中编译运行报错 ( 当前设置 GBK 编码 | 错误: 编码UTF-8的不可映射字�? )

    当前的 IntelliJ IDEA 设置的编码为 GBK 编码 , 选择 \\\" 菜单栏 / File / Settings \\\" 选项 , 在 \\\" File Encodings \\\" 中 , 查看 工程的编码 , 运行时报错 : 在中文注释的位置 , 编码报错 ; D:\\002_Project\\003_Java_WorkExsamplesrcmainjavaArrowCanvas.java:17 : 错误: 编码UTF-8的不可映射字�? // ����ֱ�� ^

    2024年02月14日
    浏览(51)
  • 【Java】计算机如何存储字符&&常用编码介绍

    计算机存储字符型数据的本质:将字符转为对应码值,然后将码值转换为二进制,最后存到计算机中。 采用不同的编码方式,则字符对应的码值就不同。目前常见的编码方式有: ASCII ((American Standard Code for Information Interchange): 美国信息交换标准代码。 【优点】只用1个字节表

    2023年04月08日
    浏览(61)
  • 【STM32】HAL库自学记录-旋转编码器的使用

    通过本文可学会两种实现判断旋转编码器正转反转的方法,可根据自己的应用场景来选择使用哪种方法。 1、芯片:STM32F103RCT6 2、STM32CubeMx软件 3、IDE: MDK-Keil软件 4、旋转编码器模块 5、XCOM V1.4串口软件 图中C端为GND。 方向 :A相和B相相差一个相位,一般来说是90°。A相信号在

    2024年02月11日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包