10个JavaScript One-Liners让初学者看起来很专业

原文链接:https://pinjarirehan.medium.com/10-javascript-one-liners-for-beginner-developers-to-look-pro-b9548353330a

原文作者:Rehan Pinjari

翻译:小圆


你是不是在辛苦码字时,看到别人轻松甩出一行 JavaScript 就搞定难题?那感觉就像变魔术一样!

这就是单行代码的力量。这些简短的代码片段可以非常有效,让你感觉自己像一个JavaScript 专家。

但是,在开始将多行代码简化成一行代码之前,我们先来分解一下。单行代码是指将复杂功能压缩到一行的简短 JavaScript 代码片段。它们可以帮助你编写更紧凑的代码,有时甚至也可以提升代码的可读性。说不定还能让其他程序员眼前一亮~

我们现在聚焦于实用且对初学者友好的“单行代码技巧”,它们将帮助你快速取得成果。

以下是一些可以添加到你的 JavaScript 工具箱中的不错选择:

Array Filtering

假设你有一个包含测试分数的数组,并且需要找到所有的A(在这个案例中,代表偶数)。一行代码就可以帮到你!

const scores = [85, 92, 73, 98, 80];
const evenScores = scores.filter(num => num % 2 === 0);// evenScores 将是 [92, 98, 80]

这段代码使用filter方法来创建一个新数组,该数组仅包含通过测试的元素。

箭头函数(num => num % 2 === 0)用于检查每个数字是否为偶数。

何时使用: 从数组中过滤掉不需要的元素是一种常见的操作。这种一行代码的方式对于保持数据的清洁非常有价值。

Array Mapping

如果你有一个边长数组,并想计算每个正方形的面积。这行代码可以将数组中的每个元素映射(转换)为其平方:

const sideLengths = [5, 3, 7];
const areas = sideLengths.map(num => num * num);// areas 将是 [25, 9, 49]

map方法会通过对原始数组中的每个元素调用提供的函数来创建一个新数组,该新数组包含调用函数的结果。在这里,函数是将每个数字平方计算出来。

何时使用: 这种单行代码对于在数组的每个元素上执行数学运算非常有用。

Flattening Arrays

有时你会遇到嵌套数组,比如一个商店产品列表,每个变量都有子项。单行代码可以帮助你展平这些结构:

const nestedGroceries = [["Apples", ["Red", "Green"]],["Milk", ["Whole", "2%"]]
];
const flatGroceries = nestedGroceries.flat(2); // flatGroceries 将是 ["Apples", "Red", "Green", "Milk", "Whole", "2%"]

flat方法(在ES6及更高版本中可用)会创建一个新数组,其中包含了所有子数组元素的连接。这可以简化你的数据操作任务。

何时使用: 展平嵌套数组可以更容易地在单一维度上处理数据。

Unique Elements(No Duplicates Allowed!)

如果你有一份嘉宾列表,但其中包含了一些重复条目。

单行代码可以帮助你确保每位嘉宾都收到唯一的邀请函(避免尴尬的“等等,我有两张?”的情况)。

// 具有重复条目的原始嘉宾列表
const guestList = ["Alice", "Bob", "Charlie", "Alice"];// 通过将数组转换为Set再转换回数组来删除重复项
const uniqueGuestList = [...new Set(guestList)];// 唯一的GuestList将是[“Alice”,“Bob”,“Charlie”]
console.log(uniqueGuestList);

这行代码利用了Set的方法。Set存储唯一值。

我们将原始列表中唯一嘉宾的Set元素展开(...)回一个新数组中。

何时使用: 数据清理通常意味着从数组中移除重复项。这行代码使你的数据保持干净和整洁。

Shorthand Conditionals

你是否曾经写过一个if...else语句跨多行,只是为了根据条件赋值?其实还有一种更简洁的方法:

// 定义用户的年龄
const age = 18;// 根据用户的年龄确定信息
const message = age >= 18 ? "Welcome!" : "Sorry, not yet.";// 输出信息
console.log(message);

这段代码使用了三元操作符,这是在单行中编写简短的if-else语句的巧妙方式。

会检查条件(age >= 18),并将对应的值(“Welcome!” 或 “Sorry, not yet.”)赋给message变量。

何时使用: 速记条件语句非常适合根据情况执行简单的赋值,同时保持代码的整洁和高效。

  • 可读性考虑:虽然三元运算符很方便,但复杂的情况可能会使代码难以理解。请谨慎使用!

String Reversal

单行代码也可以用于文本处理!比如,反转一个字符串,来看看它是否是回文(正读和反读都相同的单词,如“racecar”)?

const str = "Hello, world!";
const reversedStr = str.split('').reverse().join('');// reversedStr will be "!dlrow ,olleH"

这行代码将字符串拆分成字符数组,反转数组元素的顺序,然后再将它们重新连接成一个新字符串——所有这些都在一行内完成!

何时使用: 像反转或提取子串这样的字符串处理任务可以通过单行代码简化。

  • 记住:对于复杂的字符串操作,为了可读性,可能更适合使用更长的代码。

Object Property Existence

如果想创建一个问候用户的操作,但在未提供姓名时提供一个备用值怎么办?一行代码就可以处理这个问题:

const user = { name: "Alice", age: 30 };// 检查用户对象是否具有“email”属性
const hasEmail = "email" in user;// hasEmail将为false,因为user对象中不存在“email”属性

这行代码使用了ES6的默认参数。在这里,如果在调用greet函数时没有提供name,就会使用默认值“Guest”。

何时使用:默认参数可以避免在函数调用时没有提供正确参数时发生的错误,从而使你的代码更健壮。

Default Parameter Values

如何创建一个操作来问候用户,但在没有提供名称的情况下给出一个备份值?单行代码可以管理这一点:

const greet = (name = "Guest") => `Hello, ${name}!`;
console.log(greet());// 输出: Hello, Guest!console.log(greet("Bob"));
// 输出: Hello, Bob!

这行代码使用ES6默认参数。这里,如果在调用greet函数时没有提供名称,则使用默认值“Guest”。

何时使用: 默认参数可以避免在没有正确参数的情况下调用函数时出错,从而使你的代码更易管理。

Compact Arrays

有时你可能会遇到包含空值或null元素的数组。单行代码可以帮助你解决:

const numbers = [1, 0, null, 3]; // 原始数组
const compactNumbers = numbers.filter(Boolean); // 使用带布尔值的过滤器作为回调函数// compactNumbers将为【1,3】,因为Boolean(1)为true,布尔值(0)为false,布尔值(null)为false,并且布尔值(3)为true

这行代码再次使用了filter方法。不过,这次filter使用Boolean构造函数来检查“假值”(如nullundefined0、空字符串""NaN)。

任何计算结果为false的元素都将被排除在新数组之外。

何时使用:清理数组以移除不必要的元素可以确保你正在处理的是重要的数据。

Dynamic Obiect Keys

单行代码甚至可以用来构建操作后确定键的对象。

const prop = "score";
const person = { [prop]: 90 };// person will be {score: 90}

这行代码使用了计算属性名。在创建对象时,prop变量的值被用作花括号内的键名。这里允许基于变量或表达式动态创建键。

何时使用:动态对象键对于创建结构未预设的对象很有用。

  • 记住:虽然这些用于动态键生成的高级一行代码令人印象深刻,但它们可能会影响可读性。请谨慎使用!

最后

希望这些单行代码技巧,可以帮助你提升你的 JavaScript 技能。

虽然,单行代码是不错的技巧,但也需要谨慎使用,以确保在实际应用中代码的清晰性和可维护性。

请持续关注后续内容,我们将更深入地探讨 JavaScript 概念

(如有侵权,请联系删除)

关于OpenTiny

在这里插入图片描述

OpenTiny 是一套企业级 Web 前端开发解决方案,提供跨端、跨框架、跨版本的 TinyVue 组件库,包含基于 Angular+TypeScript 的 TinyNG 组件库,拥有灵活扩展的低代码引擎 TinyEngine,具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具,可帮助开发者高效开发 Web 应用。

欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~
OpenTiny 官网:https://opentiny.design/
OpenTiny 代码仓库:https://github.com/opentiny/
TinyVue 源码:https://github.com/opentiny/tiny-vue
TinyEngine 源码: https://github.com/opentiny/tiny-engine
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~ 如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~

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

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

相关文章

量化机器人对投资策略的调整

量化机器人在现代投资管理中扮演着越来越重要的角色,尤其在调整和优化投资策略方面表现出其独特的价值。通过运用先进的算法、人工智能和大数据分析,这些机器人能够实现投资策略的高度自动化调整,帮助投资者适应不断变化的市场环境。 首先&a…

DangerWind-RPC-framework---三、服务端下机

当一台机器下线时,面临很多问题:如何将其从注册中心下线?如何清理释放资源?客户端拉取服务列表时也使用了本地缓存,如何及时更新本地缓存? 服务端机器的优雅下线需要使用ShutdownHook,这相当于添…

前端八股文 插槽的使用场景

什么是插槽 官方解释&#xff1a;Vue 实现了一套内容分发的 API&#xff0c;将 元素作为承载分发内容的出口。 大白话&#xff1a;插槽就是子组件中的提供给父组件使用的一个占位符&#xff0c;用<slot> 表示&#xff0c;父组件可以在这个占位 符中填充任何模板代码&am…

苹果笔记本电脑能玩哪些游戏 苹果电脑可以玩的单机游戏推荐

苹果笔记本有着优美的外观和强大的性能。用户不仅可以使用苹果笔记本办公、剪辑&#xff0c;越来越多的用户开始关注苹果笔记本在游戏领域的表现&#xff0c;尤其是在大型游戏方面。本文将为你详细介绍苹果笔记本都能玩什么游戏&#xff0c;以及为你推荐苹果电脑可以玩的单机游…

Mybatis之动态sql、缓存、分页、配置数据源

SQL动态查询 if标签 当传递某个DTO时&#xff0c;需要根据某个属性是否存在而动态增加条件时&#xff0c;就可以使用if标签 <select id"getUser" resultType"user">select id, name, age, sex from user where 11<if test"userDto.name !…

EventBus原理分析

EventBus 是一个流行的事件发布/订阅框架&#xff0c;主要用于简化 Android 应用中不同组件之间的通信。它的设计基于观察者模式&#xff0c;可以有效地减少组件间的耦合性&#xff0c;使得代码更加模块化和可维护。 下面是 EventBus 的实现原理&#xff0c;结合其源码进行说明…

快到不可思议!Internet Download Manager下载器,让你的网速飞起来!

&#x1f31f; 快到不可思议&#xff01;Internet Download Manager下载器&#xff0c;让你的网速飞起来&#xff01;&#x1f680; 嗨喽&#xff0c;各位csdn的朋友们&#xff01;&#x1f44b;今天我要跟大家分享一个我超爱的下载神器——Internet Download Manager&#xff…

MySQL相关函数

SQL函数 聚合函数 定义&#xff1a;聚合函数作用与一组数据&#xff0c;并对一组数据返回一个值。 常用&#xff1a;AVG()、SUM()、MAX()、MIN()、COUNT()。 说明&#xff1a;聚合函数不能嵌套使用。 字符串函数 MYSQL中常用的字符串函数&#xff1a; 函数名作用concat(s1,s…

springboot+vue项目实战2024第三集修改用户信息

1.获取用户信息 GetMapping("/userInfo")// RequestHeader(name "Authorization") String tokenpublic Result<User> userInfo(){// Map<String, Object> map JwtUtil.parseToken(token);Map<String,Object> map ThreadLocalUti…

基于uni-app与图鸟UI的知识付费小程序模板

一、项目概述 在知识经济蓬勃发展的背景下&#xff0c;移动互联网成为知识传播与消费的重要渠道。本项目旨在利用前沿的前端技术栈——uni-app及高效UI框架图鸟UI&#xff0c;打造一款集多功能于一体的、面向广大求知者的知识付费平台移动端模板。该模板旨在简化开发流程&…

Java:分批查询

前言 最近遇到一个场景问题&#xff0c;就是基于SQL server数据库的规范&#xff0c;查询条件in如果个数超过2100个就会报错。由于是ORM映射框架采用的MybatisPlus 起初我想到的是基于 MybatisPlus 的 参数分割&#xff0c;测试还是不行&#xff0c;于是就直接基于 mybatis xm…

自定义业务非受检异常

【受检和非受检异常】 受检异常&#xff1a;当你需要强制调用者对异常异常进行处理时&#xff0c;抛出该类型异常。往往适用于开发通用的底层接口、或者调用第三方出现异常时。 非受检异常&#xff1a;当你不需要调用者关心时&#xff0c;抛出该类型异常。往往适用于普通的业务…

arm64架构下源码编译安装kafka —— 筑梦之路

一般来说&#xff0c;直接使用官方提供的二进制文件即可&#xff0c;没有必要使用源码编译安装的方式&#xff0c;而对于有特殊用途的&#xff0c;选择源码编译安装无疑是更好地选择。比如修改源码实现想要的功能&#xff0c;mirrormaker2保持topic名称不变。 git clone https…

缓存击穿、缓存穿透、缓存雪崩以及应对措施

1.缓存击穿 1.1概念 是指当某一key的缓存时间过期时大量并发量的请求同时访问此key&#xff0c;瞬间击穿服务器的直接访问数据库&#xff0c;让数据库处于负载的情况。 1.2解决措施 1.2.1异步定时更新 在缓存处理上&#xff0c;某一个热点数据的过期时间为一小时&#xff…

线性回归笔记

https://blog.51cto.com/u_16213589/7682076 残差图 多元回归-最小二乘法-残差分析笔记 一.多元线性回归模型的假设 我们需要进行以下六个假设&#xff0c;这些假设是经典的多元线性回归模型有效的前提&#xff1a; 1、因变量Y和自变量X1&#xff0c;X2&#xff0c;…&#…

Vue3.js“非原始值”响应式实现基本原理笔记(三)

如果您觉得这篇文章有帮助的话&#xff01;给个点赞和评论支持下吧&#xff0c;感谢~ 作者&#xff1a;前端小王hs 阿里云社区博客专家/清华大学出版社签约作者/csdn百万访问前端博主/B站千粉前端up主 此篇文章是博主于2022年学习《Vue.js设计与实现》时的笔记整理而来 书籍&a…

BEV 之 LSS概要

1、 Lift 显示估计图像下采样&#xff08;16倍&#xff09;后的特征点深度&#xff0c;将2D图像提升到3D空间&#xff0c;得到图像特征的视锥&#xff08;点云&#xff09;。 根据图像和深度均分得到3D视锥索引 下采样16倍&#xff0c;得到特征图大小为 H x W, 每个特征点深…

机器视觉理论入门

文章目录 前言一、马尔视觉理论二、图形与图像三、图像基础名词总结 前言 Marr的视觉计算理论立足于计算机科学&#xff0c;系统地概括了心理物理学、神经生理学、临床神经病理学等方面已取得的所有重要成果&#xff0c;是迄今为止最为系统的视觉理论。Marr 的视觉计算理论虽然…

LiteOS GPIO操作

在源码工程中&#xff0c; 华为海思在hi_io.h头文件里已定义好表示每个IO口的宏定义&#xff0c;如&#xff1a; typedef enum {HI_IO_NAME_GPIO_0, /**< GPIO0 */HI_IO_NAME_GPIO_1, /**< GPIO1 */HI_IO_NAME_GPIO_2, /**< GPIO2 */... } 并且在此头文…

【论文速读】《面向深度学习的联合消息传递与自编码器》

这篇文章来自华为的渥太华无线先进系统能力中心和无线技术实验室&#xff0c;作者中有大名鼎鼎的童文。 一、自编码架构的全局收发机面临的主要问题 文章对我比较有启发的地方&#xff0c;是提到自编码架构的全局收发机面临的主要问题&#xff1a; 问题一&#xff1a;基于随…