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

news2024/11/23 6:52:53

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

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

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/614362.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spark RDD分区

文章目录 一、RRD分区&#xff08;一&#xff09;RDD分区概念&#xff08;二&#xff09;RDD分区作用 二、RDD分区数量&#xff08;一&#xff09;RDD分区原则&#xff08;二&#xff09;影响分区的因素&#xff08;三&#xff09;使用parallelize()方法创建RDD时的分区数量1、…

软件测试之环境搭建—苏汽web系统测试环境搭建

一、搭建环境的准备工作 1、安装好RedHat&#xff0c;输入用户名&#xff1a;root&#xff0c;密码&#xff1a;123456&#xff0c;右键点击桌面&#xff0c;打开终端输入“ifconfig”查询IP地址 2.打开xshell&#xff0c;点击文件&#xff0c;选择新建连接&#xff0c;在输入…

【数据分析之道-Matplotlib(七)】Matplotlib直方图

文章目录 专栏导读1、hist()基本语法2、使用 hist() 函数绘制多个数据组的直方图3、修改直方图的颜色及边框颜色4、六一儿童节为主题&#xff0c;使用直方图进行可视化 专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN Python领域新星创作者&#xff0c;专注于分享pyth…

POI报表的高级应用

POI报表的高级应用 掌握基于模板打印的POI报表导出理解自定义工具类的执行流程 熟练使用SXSSFWorkbook完成百万数据报表打印理解基于事件驱动的POI报表导入 模板打印 概述 自定义生成Excel报表文件还是有很多不尽如意的地方&#xff0c;特别是针对复杂报表头&#xff0c;单元格…

我们世界中的10个算法

下面的图表展示了我们日常生活中最常用的算法。它们被应用在互联网搜索引擎、社交网络、WiFi、手机甚至卫星等各个领域。 1.排序算法 排序算法用于将一组数据按照特定的顺序进行排列。它们被广泛应用于各种场景&#xff0c;如搜索引擎中的搜索结果排序、数据分析中的数据整理和…

转转前端周刊第六十八期

转转前端周刊 本刊意在将整理业界精华文章给大家&#xff0c;期望大家一起打开视野 如果你有发现一些精华文章想和更多人分享&#xff0c;可以点击我们的公众号名称&#xff0c;将文章链接和你的解读文案发给我们&#xff01;我们会对内容进行筛选和审核&#xff0c;保留你的推…

基于TensorFlow Object Detection API实现RetinaNet目标检测网络(附源码)

文章目录 一、RetinaNet简介1. Backbone网络2. FPN网络 二、RetinaNet实现1. tf.train.CheckPoint简介2. RetinaNet的TensorFlow源码 一、RetinaNet简介 RetinaNet是作者Tsung-Yi Lin和Kaiming He于2018年发表的论文Focal Loss for Dense Object Detection中提出的网络。Retina…

运维小白必学篇之基础篇第十六集:DNS架构FTP实验

DNS架构FTP实验 目录 DNS架构FTP实验 服务端 客户端 服务端 在ftp架构了安装dns域名服务 yum -y install bind 配置主配置文件 vim /etc/named.conf listen-on port 53 { 192.168.50.1; }; allow-query { 192.168.50.0/24; }; 配置区域文件 vim /etc/named.rfc1912.zones…

深聊丨“紫东太初”大模型背后有哪些值得细读的论文(一)

原创&#xff1a;谭婧 没有人想等待&#xff0c;没有人想落伍。 新鲜论文时兴火热&#xff0c;成为大模型发展迅猛的标志之一&#xff0c;人们用“刷论文”这个游荡意味的动词替代另一个颇为严肃的动作&#xff0c;“读论文”。 论文被当作“教材”和“新知识”&#xff0c;在a…

矢量网络分析仪RS罗德与施瓦ZNB8 9KHZ至8.5GHZ德国二手

Rohde & Schwarz ZNB8网络分析仪&#xff0c;8.5 GHz&#xff0c;2 或 4 端口 ​罗德与施瓦茨 ZNB8 Rohde & Schwarz ZNB8 矢量网络分析仪具有高达 140 dB&#xff08;10 Hz IF 带宽&#xff09;的宽动态范围、低于 0.004 dB RMS&#xff08;10 kHz IF 带宽&#xff…

React--Component组件浅析

目录 一 前言二 什么是React组件&#xff1f;三 二种不同 React 组件1 class类组件2 函数组件 四 组件通信方式五 组件的强化方式六 总结 一 前言 在 React 世界里&#xff0c;一切皆组件&#xff0c;我们写的 React 项目全部起源于组件。组件可以分为两类&#xff0c;一类是类…

驱动开发:内核扫描SSDT挂钩状态

在笔者上一篇文章《驱动开发&#xff1a;内核实现SSDT挂钩与摘钩》中介绍了如何对SSDT函数进行Hook挂钩与摘钩的&#xff0c;本章将继续实现一个新功能&#xff0c;如何检测SSDT函数是否挂钩&#xff0c;要实现检测挂钩状态有两种方式&#xff0c;第一种方式则是类似于《驱动开…

【Unity-UGUI控件全面解析】| Layout自动布局组件详解

🎬【Unity-UGUI控件全面解析】| Layout自动布局组件详解一、组件介绍二、组件属性面板2.1 布局元素 (Layout Element)2.2 水平布局组 (Horizontal Layout Group)2.3 垂直布局组 (Vertical Layout Group)2.4 网格布局组 (Grid Layout Group)三、代码操作组件四、组件常用方法示…

把 AI 装进即时通讯,会发生什么?

今年以来&#xff0c;AIGC 技术以“天”为单位快速进化&#xff0c;刷足了存在感。科技公司迅速将 AI 嵌入自家的产品中&#xff0c;追逐 AI 带来的生产力变革&#xff0c;解决日益复杂的需求。从文学到音乐&#xff0c;从绘画到编程&#xff0c;无一领域不受其影响。 在这些领…

网络编程(1)

获取本网络信息相关接口 接口说明&#xff1a; QHostInfo类为主机信息&#xff0c;为主机名查找提供静态函数 QHostAddress类为主机地址类&#xff0c;管理IPV4或IPV6地址信息。 QNetworkInterface类为网络接口类&#xff0c;提供主机IP地址和网络接口的列表。 QNetworkAd…

关于人生,爱情和事业,谈谈我的人类史观(视频在最后)

前几天在知乎上回答了一个问题&#xff0c;没想到一下子好像火了&#xff0c;评论超过五百&#xff0c;也有各种质疑&#xff0c;其中有一个人的问题我觉得值得探讨&#xff0c;因为在回答中&#xff0c;我写下了一段也许值得留存的文字。 视频里面有更多的内容的扩展&#xff…

2023智源大会议程公开丨具身智能与强化学习论坛

6月9日&#xff0c;2023北京智源大会&#xff0c;将邀请这一领域的探索者、实践者、以及关心智能科学的每个人&#xff0c;共同拉开未来舞台的帷幕&#xff0c;你准备好了吗&#xff1f;与会知名嘉宾包括&#xff0c;图灵奖得主Yann LeCun、图灵奖得主Geoffrey Hinton、OpenAI创…

chatgpt赋能python:Python:填写网页内容的SEO最佳实践

Python&#xff1a;填写网页内容的SEO最佳实践 在今天的数字领域中&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;已经成为成功在线业务的必要元素。其中&#xff0c;内容是SEO的核心部分。网页内容不仅仅是用户体验的关键&#xff0c;还是吸引搜索引擎注意的因素之一。…

Java 进阶 -- 集合(一)

本节描述Java集合框架。在这里&#xff0c;您将了解什么是集合&#xff0c;以及它们如何使您的工作更轻松&#xff0c;程序更好。您将了解组成Java Collections Framework的核心元素——接口、实现、聚合操作和算法。 介绍告诉您集合是什么&#xff0c;以及它们如何使您的工作…

【Python】Python系列教程-- Python3 函数(二十一)

文章目录 前言定义一个函数语法实例函数调用参数传递可更改(mutable)与不可更改(immutable)对象python 传不可变对象实例传可变对象实例参数必需参数关键字参数默认参数不定长参数匿名函数return 语句强制位置参数 前言 往期回顾&#xff1a; Python系列教程–Python3介绍&am…