JavaScript 的奇技淫巧

JavaScript 作为一门动态语言,拥有丰富的特性和灵活性。这使得开发者们能够编写出既强大又高效的代码。然而,在某些情况下,为了追求代码的精简或性能优化,开发者可能会采用一些非传统的技巧。接下来,我们一起探索一些这样的“奇技淫巧”,一起感受JavaScript的独特魅力。

1. 三元运算符的简洁写法

const age = 25;
const message = age > 18 ? 'Adult' : 'Minor'; // 更简洁的条件赋值

2. 立即执行函数表达式 (IIFE)

(function() {console.log('Immediately executed!');
})();

3. 函数柯里化 (Currying)

function add(x) {return function(y) {return x + y;};
}const addFive = add(5);
console.log(addFive(10)); // 15

4. 闭包 (Closure)

function counter() {let count = 0;return function() {return ++count;};
}const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

5. 位运算

// 检查一个数是否为2的幂
function isPowerOfTwo(n) {return n > 0 && (n & (n - 1)) === 0;
}console.log(isPowerOfTwo(16)); // true

6. 字符串模板

const name = 'Alice';
console.log(`Hello, ${name}!`); // Hello, Alice!

7. 箭头函数

const multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // 12

8. 解构赋值

const person = { firstName: 'John', lastName: 'Doe' };
const { firstName, lastName } = person;
console.log(firstName, lastName); // John Doe

9. 扩展运算符

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

10. 短路求值

const a = null;
const b = 42;
console.log(a || b); // 42

11. 空值合并运算符 (??)

const value = null;
const defaultVal = value ?? 5;
console.log(defaultVal); // 5

12. 可选链操作符 (?.)

const obj = { nested: { value: 42 } };
console.log(obj.nested?.value); // 42
console.log(obj.missing?.value); // undefined

13. 递归

function factorial(n) {return n <= 1 ? 1 : n * factorial(n - 1);
}
console.log(factorial(5)); // 120

14. 使用 Array.fromArray.of

const arrayFromSet = Array.from(new Set([1, 2, 2, 3]));
console.log(arrayFromSet); // [1, 2, 3]const arrayWithOneElement = Array.of(42);
console.log(arrayWithOneElement); // [42]

15. Promise 链式调用

fetch('/api/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));

总结一下

这些技巧展示了 JavaScript 的灵活性和强大功能。虽然它们可以使代码变得更加紧凑和高效,但在实际开发中应该根据具体情况谨慎使用。始终记得,清晰和可维护的代码通常是首选。当你考虑使用这些技巧时,请确保它们不会影响到代码的整体可读性和可维护性。

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

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

相关文章

土耳其云手机提升TikTok电商效率

在数字化飞速发展的今天&#xff0c;TikTok不仅是一个社交平台&#xff0c;更是一个巨大的电商市场。随着TikTok电商功能在全球范围内的扩展&#xff0c;土耳其的商家和内容创作者正面临着前所未有的机遇。本文将详细介绍土耳其云手机怎样帮助商家抓住机遇&#xff0c;实现业务…

项目都做完了,领导要求国际化????--JAVA后端篇

springboot项目国际化相信各位小伙伴都会&#xff0c;很简单&#xff0c;但是怎么项目都做完了&#xff0c;领导却要求国际化文件就很头疼了 国际化的SpringBoot代码&#xff1a; 第一步&#xff1a;创建工具类 /*** 获取i18n资源文件** author bims*/ public class Message…

MATLAB怎么实现多条曲线共用一个图例

y1 sin(x); y2 3*sin(x); y3 cos(x); y4 3*cos(x); 例子&#xff1a;如果我们有4条曲线&#xff0c;分布是cos类和sin类&#xff0c;我们的图例就想区分是cos类还是sin类。 第一步&#xff08;关键步骤&#xff09; 我们要把我们所需要的类别曲线先画一遍&#xff0c; …

实现文档的自动化发布与跨平台阅读

在当今的软件开发领域&#xff0c;文档作为代码之外的重要资产&#xff0c;其管理和发布同样需要高效和自动化。 利用Git进行版本控制&#xff0c;通过GitBook和Typora发布文档&#xff0c;并与GitLab CI/CD工具集成&#xff0c;以实现文档在多种设备上的流畅阅读体验。 一、…

《Programming from the Ground Up》阅读笔记:p75-p87

《Programming from the Ground Up》学习第4天&#xff0c;p75-p87总结&#xff0c;总计13页。 一、技术总结 1.persistent data p75, Data which is stored in files is called persistent data, because it persists in files that remain on disk even when the program …

用 apifox cli 命令行运行本地接口出现TypeError:Invalid IP address: undefined

用 apifox cli 命令行运行本地接口出现TypeError:Invalid IP address: undefined&#xff0c;客户端运行是通过的但命令行运行会报错 修改端口也是一样报错&#xff0c;地址修改为127.0.0.1会报错connect ECONNREFUSED 127.0.0.1:8080 解决方法&#xff1a;不用localhost&…

智能合约在能源行业中的应用:促进可再生能源的发展与利用

随着全球能源需求的增长和环境保护意识的提升&#xff0c;可再生能源作为替代传统能源的重要选择&#xff0c;正逐步成为能源供应的主流。本文将探讨智能合约在能源行业中的应用&#xff0c;特别是如何通过智能合约促进可再生能源的发展与利用。 可再生能源的重要性与挑战 可再…

react中使用forwardRef获取子组件中的节点以及子组件的方法(useImperativeHandle的使用)

1.forwardRef的使用 import { forwardRef, useRef } from "react"const Son forwardRef((props, ref)> {return (<input type"text" ref{ref} id"kannoId"/>) })function ForwardRef() {const sonRef useRef(null)const showRef ()…

Javascript前端面试基础5【每日更10】

let与var的区别 let命令不存在变量提升&#xff0c;如果在let前使用&#xff0c;会导致报错&#xff08;var存在变量提升&#xff09;如果块区中存在let和const命令&#xff0c;就会形成封闭作用域不允许重复声明&#xff0c;因此&#xff0c;不能在函数内部重新声明参数 m…

React如何用一个变量接收所有axios接口内的数据渲染dom

在React中&#xff0c;使用axios进行HTTP请求并接收数据以渲染DOM是常见的操作。你提到的“用一个变量接收所有axios接口内的数据”这个概念&#xff0c;实际上取决于你的应用结构和数据管理的需求。这里有几种常见的方式来处理这种情况&#xff1a; 1. 使用React状态&#xf…

基于Qt的视频剪辑

在Qt中进行视频剪辑可以通过多种方式实现&#xff0c;但通常需要使用一些额外的库来处理视频数据。以下是一些常见的方法和步骤&#xff1a; 使用FFmpeg FFmpeg是一个非常强大的多媒体框架&#xff0c;可以用来处理视频和音频数据。你可以使用FFmpeg的命令行工具或者其库来实现…

YOLOv8魔改核心-模型yaml文件解析与网络结构打印

前言 本篇文章主要用于记录学习YOLOv8中网络模型yaml文件&#xff0c;我们一般只知道如何去训练模型&#xff0c;和配置yaml文件&#xff0c;但是对于yaml文件是如何输入到模型里&#xff0c;模型如何将yaml文件解析出来的确是不知道的&#xff0c;下面我们从yaml文件来讲解&a…

python+vue3+onlyoffice在线文档系统实战20240726笔记,左侧菜单实现和最近文档基本实现

解决右侧高度过高的问题 解决方案&#xff1a;去掉右侧顶部和底部。 实现左侧菜单 最近文档&#xff0c;纯粹文档 我的文档&#xff0c;既包括文件夹也包括文件 共享文档&#xff0c;别人分享给我的 基本实现代码&#xff1a; 渲染效果&#xff1a; 简单优化 设置默认菜…

基于上云api前端开发经验教训(loading...)

问题一&#xff1a;部署前端代码时npm报错 由于npm源在国外&#xff0c;出现安装异常或比较慢的情况&#xff0c;使用cnpm(淘宝镜像)来解决。 安装cnpm npm install -g cnpm --registryhttp://registry.npmmirror.com使用cnpm(同npm一样) cnpm install

RT-Thread Studio搭建 Renesa Version Board开发环境

目录 概述 1 认识Version Board 1.1 Vision-Board简介 1.2 Vision-Board的资源 2 搭建Version Board开发环境 2.1 RT Thread Studio 2.2 安装SDK 3 开发环境验证 3.1 创建项目 3.2 编译和下载 概述 本文主要介绍使用RT-Thread Studio搭建 Renesa Version Board开发环…

c语言第四天笔记

关于 混合操作&#xff0c;不同计算结果推理 第一种编译结果&#xff1a; int i 5; int sum (i) (i) 6 7 13 第二种编译结果&#xff1a; int i 5; int sum (i) (i) 6 7 7 7 前面的7是因为后面i的变化被影响后&#xff0c;重新赋值 14 第一种编译结果&#xff…

Html+Css网页开发之动态登录页面(默认Chrome)

>>效果展示图<< 一、需求分析与设计要求 实现了一个动态背景图案的效果&#xff0c;包括一个白色的容器&#xff0c;内部有一个标题、一个输入框、一个按钮和一些文本。 背景是一个渐变色的线性渐变&#xff0c;而在容器的周围&#xff0c;有一些随机的方形和圆形图…

【CN】Argo 持续集成和交付(一)

1.简介 Argo 英 [ˈɑ:ɡəu] 美 [ˈɑrˌɡo] Kubernetes 原生工具&#xff0c;用于运行工作流程、管理集群以及正确执行 GitOps。 Argo 于 2020 年 3 月 26 日被 CNCF 接受为孵化成熟度级别&#xff0c;然后于 2022 年 12 月 6 日转移到毕业成熟度级别。 argoproj.github.i…

【数学建模】权重生成与评价模型(下)

文章目录 权重生成与评价模型&#xff08;下&#xff09;5. 模糊综合评价法5.1 模糊综合分析法的原理5.2 模糊综合分析法的案例 6. 秩和比分析法6.1 秩和比分析法原理6.2 秩和比分析法案例6.3 RSR的分布及其计算确定RSR的分布计算回归方程示例代码实现代码解释 6.4 秩和比分析法…

Godot入门 02玩家1.0版

添加Node2D节点&#xff0c;重命名Game 创建玩家场景&#xff0c;添加CharacterBody2D节点 添加AnimatedSprite2D节点 从精灵表中添加帧 选择文件 设置成8*8 图片边缘模糊改为清晰 设置加载后自动播放&#xff0c;动画循环 。动画速度10FPS&#xff0c;修改动画名称idle。 拖动…