当前位置: 首页 > news >正文

30 个 JavaScript 技巧,让你的代码更具可读性

1 、使用 !! 转换为布尔值

使用双重否定快速将任何值转换为布尔值。

let truthyValue = !!1; // true
let falsyValue = !!0; // false

2 、 默认函数参数

设置函数参数的默认值以避免定义错误。

function greet(name = "Guest") {return `Hello, ${name}!`;
}greet();//Hello Guest!greet('World');//Hello World!

3 、 短 If-Else 的三元运算符

if-else 语句的简写。

let price = 100;
let message = price > 50 ? "Expensive" : "Cheap";//Expensive

4 、动态字符串的模板文字

使用模板文字将表达式嵌入字符串中。

let item = "coffee";
let price = 15;
let result = `One ${item} costs $${price}`;//One coffee costs $15

5 、解构赋值

轻松从对象或数组中提取属性。

let [x, y] = [1, 2];
console.log(x,y);//1,2
let {name, age} = {name: "Alice", age: 30};
console.log(name,age);//Alice,30

6 、用于数组和对象克隆的扩展运算符

克隆数组或对象而不引用原始对象。

let arr = [1, 2, 3];
let cloneArr = [...arr];//[1,2,3]

7 、短路求值

使用逻辑运算符进行条件执行。

let isValid = true;
isValid && console.log("Valid!");//Valid!

8 、可选链接 (?.)

如果引用为空,则安全地访问嵌套对象属性而不会出现错误。

let user = {name: "John", address: {city: "New York"}};
/*引用不为空*/
console.log(user?.address?.city); // "New York"
/*引用为空*/
console.log(user?.info?.post); // undefined

9 、空值合并运算符 (??)

使用 ?? 为空或未定义提供默认值。

let username = null;
console.log(username ?? "Guest"); // "Guest"

10 、使用 map、filter 和 reduce 进行数组操作

无需传统循环即可优雅地处理数组。

let numbers = [1, 2, 3, 4];// Map
let doubled = numbers.map((x) => x * 2);
console.log(doubled);//[2, 4, 6, 8]// Filter
const evens = numbers.filter((x) => x % 2 === 0); 
console.log(evens);//[2, 4]// Reduce
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue,0
);
console.log(sum);//10

11 、标记模板文字

使用模板文字进行函数调用,以进行自定义字符串处理。

function highlight(strings, ...values) {return strings.reduce((prev, current, i) => `${prev}${current}${values[i] || ""}`,"");
}
let price = 10;console.log(highlight`The price is ${price} dollars.`);
//The price is 10 dollars.

12 、使用 Object.entries() 和 Object.fromEntries()

将对象转换为数组,数组转换为对象,以便于操作。

let person = { name: "Alice", age: 25 };
let entries = Object.entries(person);//[["name","Alice"],["age",25]]
let newPerson = Object.fromEntries(entries);//{name: 'Alice', age: 25}

13 、 用于唯一元素的 Set 对象去重

使用 Set 存储任何类型的唯一值。

let numbers = [1, 1, 2, 3, 4, 4];
let uniqueNumbers = [...new Set(numbers)];//[1, 2, 3, 4]

14 、 对象中的动态属性名称

在对象文字表示法中使用方括号来创建动态属性名称

let dynamicKey = 'name';
let person = {[dynamicKey]: "Alice"}; // {name: 'Alice'}

15 、使用 bind() 进行函数柯里化

创建一个新函数,当调用该函数时,将其 this 关键字设置为提供的值。

function multiply(a, b) {return a * b;
}
let double = multiply.bind(null, 2);
console.log(double(5)); // 10

16 、使用 Array.from() 从类似数组的对象创建数组

将类似数组或可迭代的对象转换为真正的数组。

const obj = {0: 'Hello',1: ',',2: ' ',3: 'World',length: 4
};const arr = Array.from(obj);console.log(arr); //[ 'Hello', ',', ' ', 'World' ]

17 、可迭代对象的 for…of 循环

直接迭代可迭代对象(包括数组、映射、集合等)。

let arr = []
for (let value of ["a", "b", "c"]) {arr.push(value)
}
console.log(arr);//["a", "b", "c"]const str = "Hello, World!";
let arr2 = []
for (let char of str) {arr2.push(char)
}
console.log(arr2);//['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

18 、 使用 Promise.all() 实现并发 Promise

同时运行多个 Promise 并等待所有 Promise 完成。

let promises = [fetch(url1), fetch(url2)];
Promise.all(promises).then((responses) => console.log("All done"));

19 、函数参数的 Rest 参数

将任意数量的参数捕获到数组中。

function sum(...nums) {return nums.reduce((acc, current) => acc + current, 0);
}sum(1,2,3,4,5);//15
sum(12,15,18);//45

20 、用于性能优化的记忆化

存储函数结果以避免冗余处理。

const memoize = (fn) => {const cache = {};return (...args) => {let n = args[0]; // assuming single argument for simplicityif (n in cache) {console.log("Fetching from cache");return cache[n];} else {console.log("Calculating result");let result = fn(n);cache[n] = result;return result;}};
};

21 、使用 ^ 交换值

使用 XOR 按位运算符交换两个变量的值,无需临时变量。

let a = 1, b = 2;
a ^= b; b ^= a; a ^= b; // a = 2, b = 1

22 、使用 flat() 展平数组

使用 flat() 方法轻松展平嵌套数组,展平深度作为可选参数。

let nestedArray = [1, [2, [3, [4]]]];
let flatArray = nestedArray.flat(Infinity);// [1, 2, 3, 4]

23 、使用一元加法转换为数字

使用一元加法运算符快速将字符串或其他值转换为数字。

let str = "123";
let num = +str;
console.log(typeof(num));//number

24 、 HTML 片段的模板字符串

使用模板字符串创建 HTML 片段,使动态 HTML 生成更清晰。

let items = ['apple', 'orange', 'banana'];
let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`;
console.log(html);//'<ul><li>apple</li><li>orange</li><li>banana</li></ul>'

25 、使用 Object.assign() 合并对象

将多个源对象合并为目标对象,有效地组合它们的属性。

let obj1 = { a: 1, b: 2 };
let obj2 = { b: 3, c: 4 };
let obj3 = Object.assign(obj1, obj2);console.log(obj3); // { a: 1, b: 3, c: 4 }

26 、短路默认值

处理可能未定义或为空的变量时,利用逻辑运算符分配默认值。

let options = userOptions || defaultOptions;

27 、 使用括号表示法动态访问对象属性

使用括号表示法动态访问对象的属性,当属性名称存储在变量中时很有用。

let property = "name";
let value = person[property]; // Equivalent to person.name

28 、 使用 Array.includes() 进行存在性检查

使用 includes() 检查数组是否包含某个值,这是 indexOf 的更清晰的替代方案。

const fruits = ['apple', 'banana', 'cherry'];// 检查数组是否包含特定的水果
const fruitToCheck = 'banana';// 使用 Array.includes() 方法来检查
const hasFruit = fruits.includes(fruitToCheck);// 输出结果
console.log(hasFruit); // 输出: true,因为 'banana' 存在于数组中

29 、 Function.prototype.bind() 的强大功能

将函数绑定到上下文(此值)并部分应用参数,创建更可重用和模块化的代码。

const greet = function (greeting, punctuation) {return `${greeting}, ${this.name}${punctuation}`;
};
const greetJohn = greet.bind({ name: "John" }, "Hello");
console.log(greetJohn("!")); // "Hello, John!"

30 、防止对象修改

使用 Object.freeze() 防止对对象的修改,使其不可变。为了实现更深层次的不变性,请考虑更彻底地实施不变性的库。

let obj = { name: "Immutable" };
Object.freeze(obj);
obj.name = "Mutable"; // Fails silently in non-strict mod

相关文章:

30 个 JavaScript 技巧,让你的代码更具可读性

1 、使用 !! 转换为布尔值 使用双重否定快速将任何值转换为布尔值。 let truthyValue !!1; // true let falsyValue !!0; // false 2 、 默认函数参数 设置函数参数的默认值以避免定义错误。 function greet(name "Guest") {return Hello, ${name}!; }greet(…...

电商行业中选择分账系统的关键因素!

分账是指将一笔交易的款项拆分成多个部分&#xff0c;按照预先设定的比例或规则分配给相关方。在电商行业中&#xff0c;分账通常是指将交易金额分给卖家、平台和其他相关方。 具体来说&#xff0c;分账可以帮助实现以下目标&#xff1a; 卖家结算&#xff1a;将顾客支付的货…...

通过继承实现状态模式(C++)

注意&#xff1a;先做类的声明和抽象基类的声明 抽象基类的函数方法中引入类&#xff0c;具体方法在类的实现后面声明。 在抽象基类的子类的函数中可以调用类的成员函数。 #include <iostream>using namespace std;class Contex;class state { public:virtual void Ha…...

全国多地公布2024下半年软考报名具体时间

下半年开考科目&#xff1a; 高级资格&#xff1a;系统分析师、系统架构设计师、网络规划设计师、系统规划与管理师 中级资格&#xff1a;软件设计师、网络工程师、信息安全工程师、信息系统监理师、多媒体应用设计师、系统集成项目管理工程师 初级资格&#xff1a;网络管理…...

【Python】requests的response.text 和 urllib.request 的 response.read()的区别

刚写代码的时候&#xff0c;我经常会把requests 和 urllib下的request 包搞混&#xff0c;这两个请求响应的方法看起来很相似&#xff0c;但是写获取的方法是不一样的。 前者requests 是用response.text 来获取源码&#xff0c;而 urllib.request是用 response.read() 来获取h…...

Obsidian插件安装与开发

大概背景 事情的起因还是因为做笔记&#xff0c;我喜欢利用插件Obsidian Git自动同步笔记到Gitee&#xff0c;写md文档有个问题就是关于图片如何存储。 我个人习惯是将所有图片都保存到指定的文件夹下&#xff0c;如图&#x1f447; 由于Obsidian对粘贴图片默认格式为这样的&…...

lvs的dr模式实现

目录 一、实验环境准备 1、五台红帽9系统的主机 2、关闭所有的防火墙以及关闭selinux 二、在lvs中配置 1、在lvs中安装lvs软件并设置开机启动 2、在lvs中打开内核路由功能&#xff0c;并把它写入/etc/sysctl.conf文件中 3、webserver1和webserver2下载httpd 4、在lvs主机…...

免费写作神器,自动生成高质量文章

在当今数字化的时代&#xff0c;信息的传播和创作变得前所未有的重要。无论是企业的营销推广、个人的博客写作&#xff0c;还是学术研究报告&#xff0c;优质的文章都能发挥巨大的作用。而随着人工智能技术的飞速发展&#xff0c;免费的ai写作工具应运而生&#xff0c;为我们带…...

C#属性

属性(property)的概念是&#xff1a;它是一个方法或一对方法&#xff0c;在客户端代码看来&#xff0c;他&#xff08;们&#xff09;是一个字段。 下面把前面示例中变量名为_firstName的名字字段改为私有。FirstName属性包含get和set访问器&#xff0c;来检索和设置支持字段的…...

Spring的代理模式

目录 1、什么是代理模式&#xff1f; 2、为什么要用代理模式&#xff1f; 3、有哪几种代理模式&#xff1f; 4、静态代理 5、动态代理 &#xff08;1&#xff09;Proxy动态代理 &#xff08;2&#xff09;Enhancer动态代理 &#xff08;3&#xff09;dbUtil和动态代理的…...

el-table合计放在标题上方且合并列以及渲染后端返回的数据

el-table二次封装的父组件中的属性 <y-table :table-data"tableData" :table-model"tableModel" :isShowSummary"true" :getSummaries"getSummaries"></y-table>el-table合计放在标题上方 <style lang"scss"…...

magic-api相关应用与配置

目录 项目启动 工具&#xff1a;IDEA 运行项目 关于配置 项目启动 工具&#xff1a;IDEA 新建——》项目——》导入——》运行 运行项目 http://localhost:9999/magic/web/index.htmlhttp://localhost:9999/magic/web/index.html 关于配置 配置多数据源 在线配置多数据…...

AI大模型赋能开发者|海云安创始人谢朝海受邀在ISC.AI 2024大会就“大模型在软件开发安全领域的应用”主题发表演讲

近日&#xff0c;ISC.AI 2024 第十二届互联网安全大会在北京国家会议中心盛大开幕。作为全球规格最高、规模最大、影响力最深远的安全峰会之一&#xff0c;本次大会以“打造安全大模型 引领安全行业革命”为主题&#xff0c;聚焦安全与AI两大领域&#xff0c;吸引了众多行业领袖…...

基于Kahn算法|动态线程池,支持扩展点并发执行|召回|过滤

背景 在《分布式领域扩展点设计稿》一文中&#xff0c;我们提到针对业务横向扩展点和纵向扩展点的编排能力。 那有这样的一种场景&#xff1a;针对于一次会话&#xff0c;同时会调很多外部服务&#xff0c;同时这些RPC服务会有多种直接或间接的关系&#xff0c;是否有更高效的…...

Bootstrap 4 表头固定,tbody滚动条

表格 <div class"row" style"background-color: #fff;overflow: auto;max-height: 500px;"> <table class"table table-striped table-bordered scrolltable text-nowrap"> <thead> …...

MYSQL知识点(持续更新)

数据库 文章目录 数据库Mysql基础篇数据库相关概念MYSQL启动数据库类型关系型数据库 SQL语法SQL通用语法SQL分类DDL - 数据库操作 Mysql基础篇 数据库相关概念 数据库、 存储数据的仓库&#xff0c;数据是组织的进行存储 数据库管理系统 操纵和管理数据库的大型软件 SQL语句…...

html+css网页设计 酷狗首页1个页面 (无js)

htmlcss网页设计 酷狗首页1个页面无js功能 页面还原度80% 网页作品代码简单&#xff0c;可使用任意HTML编辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 …...

用户体验至上:9款软件界面设计工具分享

你知道如何选择正确的UI设计软件吗&#xff1f;您知道哪些界面设计软件需要设计美观的用户界面&#xff0c;以及带来良好用户体验的APP吗&#xff1f;根据APP界面的不同功能&#xff0c;制作软件界面的选择也会有所不同。但是&#xff0c;并非要非常精通所有的制作软件界面&…...

Lambda 表达式:解锁编程世界的魔法之门

引言 在这个技术日新月异的时代&#xff0c;编程语言不断进化以适应日益复杂的软件开发需求。其中&#xff0c;Lambda表达式作为一门现代编程语言的重要特性&#xff0c;已经成为了提升代码效率与可读性的关键工具。无论你是刚刚踏入编程领域的新手&#xff0c;还是已经在软件…...

【python】Pandas处理Excel表格用法分析与最佳实践

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

TI德州仪器TPS3103K33DBVR低功耗电压监控器IC电源管理芯片详细解析

1. 基本介绍 TPS3103K33DBVR 是 德州仪器&#xff08;Texas Instruments, TI&#xff09; 推出的一款 低功耗电压监控器&#xff08;Supervisor IC&#xff09;&#xff0c;属于 电源管理芯片&#xff08;PMIC&#xff09; 类别&#xff0c;主要用于 系统复位和电压监测。 2. …...