常用的一些js技巧

js不常用但实用的JavaScript超级技巧 JavaScript 是一种应用场景多且功能强大的语言,对于现代 Web 开发至关重要。以下是一些超级技巧,它们将帮助你成为更高效、更有效的 JavaScript 开发人员,每个技巧都有详细的解释和示例。提示:以下是本篇文章正文内容,下面案例可供参考。 阅读详情

1. 空(null, undefined)验证

当我们创建了一个新的变量,我们通常会去验证该变量的值是否为空(null)或则未定义(undefined)。这对于 JavaScript 编程来说,是一个经常要考虑到的验证。

如果直接写,那么像下面这样:

if (variable1 !== null || variable1 !== undefined || variable1 !== "") {
    let variable2 = variable1;
}

我们可以使用一个更加简洁的版本:

let variable2 = variable1 || "";

在谷歌浏览器开发者面板的控制台下试试:

//值为null的例子
let variable1 = null;
let variable2 = variable1  || '';
console.log(variable2);
//输出: ''
//值为undefined的例子
let variable1 = undefined;
let variable2 = variable1  || '';
console.log(variable2);
//输出: ''
//正常情况
let variable1 = 'hi there';
let variable2 = variable1  || '';
console.log(variable2);
//输出: 'hi there'
    ```

2. 数组
这个好像比较简单!
非优化代码:

let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";

优化代码:

let a = ["myString1", "myString2", "myString3"];

3. if true .. else 的优化

优化前:

let big;
if (x > 10) {
    big = true;
}
else {
    big = false;
}

优化后:

let big = x > 10 ? true : false;
let big = (x > 10);
let x = 3,
big = (x > 10) ? "greater 10" : (x < 5) ? "less 5" : "between 5 and 10";
console.log(big); //"less 5"
let x = 20,
big = {true: x>10, false : x< =10};
console.log(big); //"Object {true=true, false=false}"

4. 变量声明

尽管 JavaScript 会自动将变量上提(hoist),使用该方法可以将所有的变量都在函数的头部用一行搞定。

优化前:

let x;
let y;
let z = 3;

优化后:

let x, y, z=3;

 5. 赋值语句的简化

优化前:

x=x+1;
minusCount = minusCount - 1;
y=y*10;

简化后:

x++;
minusCount--;
y *= 10;

假设 x=10,y=5,那么基本的算术操作可以使用如下的简写方式:

x += y; // x=15
x -= y; // x=5
x *= y; // x=50
x /= y; // x=2
x %= y; // x=0

6.判断非真的例子:

优化前:

let c;
if (c != true) {
    // do something...
}

优化后:

let c;
if (!c) {
    // do something...
}

7.函数调用还可以更短

简化前:

function x() {
    console.log("x");
}
function y() {
    console.log("y");
}
let z = 3;
if (z == 3) {
    x();
} else {
    y();
}

简化后:

function x() {
    console.log("x");
}
function y() {
    console.log("y");
}
let z = 3;
(z == 3 ? x : y)();

8.如何优雅的表示大数字

在 JavaScript 中,有一个简写数字的方法,1e7表示 10000000。

简化前:

for (let i = 0; i < 10000; i++) {

简化后:

for (let i = 0; i < 1e7; i++) {

 

40个JS常用使用技巧案例 以下是 40 个常用的 JavaScript 使用技巧,包含案例代码和解释: 解释: 对象是一种无序且唯一的数据结构,使用扩展运算符 将 转换回数组,从而实现去重。 解释:使用扩展运算符可以轻松地将多个数组合并成一个新数组。 解释:通过解构赋值,可以方便地从数组中提取值并赋给变量。 解释:可以从对象中提取属性并赋给变量。 解释:使用数组解构赋值可以简洁地交换两个变量的值。 解释:可选链操作符 可以避免在访问嵌套对象属性时出现 。 解释:空值合并操作符 用于在变量为 或 时提供默认值。 解释:箭头 阅读详情

相关推荐

如何使用Qt的PIMPL习惯用法(PIMPL Idiom

PIMPL是指“Pointer to IMPLementation”(指向实现的指针),意味着将实现细节隐藏起来,用户类无需关注这些实现细节。在Qt中常用PIMPL习惯用法来清晰地区分接口与实现,尽管Qt官方文档并未详细说明该机制。本文将演示如何在Qt中使用PIMPL习惯用法,并以一个简单的坐标输入对话框作为实例。

电脑管家 1032

JavaScript中进制之间转换方法

最近在刷面试题的时候看到一道进制转换题, 写完才发现可以用js的方法直接转换,这是自己总结的一些方法 1.其它进制转换为十进制数据: //可以直接用parseInt let num = parseInt(n1,n2); //n1:是需要转换为10进制的数 //n2:是被转换数据的进制值,如2,8,16等。 例如将十六进制的‘AA’转为十进制数据: //十六进制的数:AA => 十进制的数:170 let num = parseInt('AA',16); //AA和0xAA都可,此时num

Elets的博客 926

Linux显卡管理避坑指南:为什么Xorg总是占用你的NVIDIA GPU?

本文深入解析了在Linux系统上,尤其是双显卡笔记本中,Xorg显示服务器进程占用NVIDIA GPU的根本原因。文章从Xorg的驱动加载机制和NVIDIA驱动的独占性入手,详细对比了禁用配置文件、手动配置xorg.conf、使用官方PRIME方案以及切换到Wayland等主流解决方案的优缺点与适用场景,旨在帮助用户有效释放GPU资源,确保深度学习、游戏等计算任务能独占显卡性能。

xgboost6farmer的博客 264

js简单生成UUID

工作中经常会遇到随机生成类似uuid这种随机唯一串的情况,用随机数的话偶尔会出现重复,而下面这段代码可以快速生成uuid,避免出现重复的情况 function uuid() { return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =&gt; (c ^ crypto.getRan...

crazy_victor的博客 4363

ZYNQ Linux下UIO中断配置避坑实录:从设备树修改到用户层测试(Vivado 2018.2)

本文详细解析了ZYNQ Linux下UIO中断配置的全流程,从设备树修改到用户层测试,特别针对Vivado 2018.2环境中的常见陷阱提供解决方案。内容涵盖中断号配置规则、用户空间中断处理程序编写以及性能优化技巧,帮助开发者高效实现硬件中断的用户空间控制。

weixin_31854867的博客 332

新手必看:5分钟搞定Unitree Go1机器狗Gazebo仿真运动控制(附按键图解)

本文为新手提供了Unitree Go1机器狗在Gazebo仿真环境中实现运动控制的快速指南。通过5分钟极简配置和按键图解,帮助开发者快速掌握宇树科技明星产品的基础操作,包括环境搭建、仿真启动和运动控制技巧,适合零基础用户快速上手。

weixin_42550597的博客 300

1、JS基础、语法、标识符

每天多努力一点 180

Coze智能体开发:扣子空间制作PPT功能

扣子空间内置了丰富的场景模板,涵盖人文历史、学术分享、研究报告、数据分析等场景,可以满足不同用户的需求。 你只需输入与制作 PPT 相关的提示词,Agent 就能基于这些提示词展示思考的过程,并自动生成完整的 PPT。

王国平的博客 2052

JS中关于小数自动转为科学计数法

JS中关于小数自动转为科学计数法

前端小白的博客 1414

Java高频面试基础问题与知识点整理

Java高频面试知识点总结:覆盖高频基础知识考点+高频集合知识点深入分析+高频多线程与并发编程面试题汇总+其他扩展考察等。

曾经“等你生日那天”都遥远得像未来,如今却可欢愉的挥手说“下个十年见” 172万+

7、Python高光谱分析工具(PyHAT)简介

Python高光谱分析工具(PyHAT)是一个开源、跨平台的Python库及图形用户界面,用于行星光谱数据的可视化与分析。它支持多种高光谱传感器数据,如火星勘测轨道飞行器的CRISM、月船1号的M3以及SELENE Kaguya SP点光谱仪,提供预处理、衍生产品生成、统计学习和机器学习分析功能。PyHAT基于Pandas和NumPy构建,兼容Jupyter和QGIS环境,旨在解决现有光谱分析方法缺乏开源实现、难以探索性分析和算法分散的问题。其模块化架构涵盖数据输入/输出、通用光谱变换、测绘与点观测工具及高

aa123的博客 138

js常用方法(2) js生成uuid

简介: UUID 是 通用唯一识别码(Universally Unique Identifier)的缩写 function S4() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } function createUuid(m) { let uuid = "" if(!m || m % 4 != 0){...

SBTOC的博客 296

39、信号流图:解决线性代数方程组的图论方法

本文介绍了信号流图理论在求解线性代数方程组中的应用,重点阐述了Coates方法和Mason方法的原理、步骤及对比分析。通过图论视角,将矩阵运算转化为对有向图结构的分析,利用1-因子、1-阶连接、前向路径和反馈回路等概念,推导出方程组解的拓扑公式。文章结合具体实例演示两种方法的计算过程,并总结其在电路分析、控制系统和通信系统等领域的拓展应用,展示了信号流图理论的直观性与有效性。

pear55的博客 87

【JS】记录几个常用的javascript小技巧

1. 有时可以使用数组替换switch 2. 或运算寻找第一个真值 3. 与运算寻找第一个假值 4. 两个非运算 !! 将某个值转化为布尔类型 5. 空值合并运算符 '??'

余浩的博客 311

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

JavaScript常用小技巧(js优化)

JavaScript常用小技巧

qq_37831545的博客 544

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

javascript脚本history js常用技巧

js控制返回 1.超链接 [ 返回 ] 2.onclick事件 3.button的点击事件   function backAfter()   {      window.history.back();      //window.history.go(-1);//等效上面   }

A_post的专栏 863

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

JavaScript中常用简写技巧总结

这让你可以创建一个复合表达式,其中多个表达式被评估,复合表达式的最终值是其成员表达式中最右边的值。如果访问未定义的属性,则会产生错误。这里只会收集一些大多数人不知道的用法,但是确实能提高自己的编码技巧,像ES6那些基础的简写语法或者是三目运算符代替。分享一些自己常用的js简写技巧,长期更新,会着重挑选一些实用的简写技巧,使自己的代码更简洁优雅~比如想要拿到接口返回的特定字段的值,可以用解构赋值和对象的简写方法对map方法简写。因此,要从数组中删除重复项,你可以将其转换为集合,然后再转换回数组。

<sdffdsfsdfdfs>sfsfsfsdfsdffds</sdfsDS>Fsd 99

40种网站常用Javascript技巧

40种网站常用Javascript技巧转载自网络,地址不详。 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键no 可用于Table 2. 取消选取、防止复制 3. onpaste="return false" 不准粘贴 4. oncopy="return false;" oncut="

新新 1280

java js 网页_JavaScript的40种网页常用小技巧

JavaScript的40种网页常用小技巧1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键no 可用于Table2. 取消选取、防止复制3. onpaste="return false" 不准粘贴4. oncopy="return false;" oncut="return false;" 防止复制5. IE地址栏前换成自己...

weixin_34502341的博客 133

前端开发,JavaScript实际开发过程中常用JS小技巧

1.JS 阻止‘a’标签默认事件 //阻止a标签默认事件 var evt = evtwindow.event;/获取event对象 if (evt.preventDefault) { evt.preventDefault(;//非IE浏览器 } else { evt.returnValue =false;//IE低版本 } 2.JS 判断当前是苹果系统还是安卓系统 if (/iPhone/.test(navigator.userAgent)){ $(".btn:last").attr("href"

MaybyYouLove的博客 1751

11 个 JavaScript 常用技巧

来源 |https://segmentfault.com/a/1190000021518997当我开始学习 JavaScript 时,我把我在别人的代码、code challenge ...

web前端开发 243

20个常用的JavaScript简写技巧

关注公众号前端开发博客,回复“加群”加入我们一起学习,天天进步作者 | Amitav Mishra译者 | 清风依旧策划 | 田晓旭本文发布在 jscurious.com任何编程语言的...

前端开发博客 627

常用的一些javascript小技巧

事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture();事件按键 event.keyCode event.shiftKey event.altKey eve

PHP - 高屋建瓴 2594

50个常用的JavaScript技巧汇总

49.判断为空值(null, undefined, “”)代替||处理 null/undefined。4.数字转字符串 / 字符串转数字。21.函数节流(throttle)22.函数防抖(debounce)5.使用typeof检查变量类型。16.删除对象中 falsy 值。19.立即执行函数(IIFE)45.设置 innerHTML。14.从对象中提取部分属性。31.检查字符串开头/结尾。20.函数缓存(记忆化)23.获取当前时间戳。39.判断是否为数组。九、DOM 操作技巧。50.判断是否为数字。

On the way 224

15个常用的JavaScript简写技巧

4. 赋默认值if(path!== ‘’) {} else {// 简写5、与运算符 (&&)// 简写6、交换两个变量x = y;y = temp;// 简写7、箭头函数// 简写8、模板字符串// 简写9、多条件检查// 简写方法 1if ([1, ‘one’, 2, ‘two’].indexOf(value) >= 0) { // indexOf 返回下标 没有则返回-1// 简写方法 2。

2501_90250923的博客 700

10个超棒的 JavaScript 数组常用技巧

今天我要分享的是10个超棒的 JavaScript 数组常用技巧,可以让你在数据处理上得心应手,让你的开发工作事半功倍。开始吧!

2401_86400276的博客 532
上一篇: vue cli 3 build 打包之后路径错误问题
下一篇: git push错误:RPC failed; HTTP 411 curl 22 The requested URL returned error: 411 Length Required
wy_Blog
博客等级 码龄10年 68粉丝 72原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值