看过来,这里有JavaScript技术干货?

今天是一篇正经的技术分享,针对JavaScript技能的十来个专业小技巧,如果你想提升一下JS方面的能力成为一个更好的前端开发人员,那么就可以接着看下去哦。

1、使用逻辑运算符进行短路评估

您可以使用逻辑运算符进行短路评估,方法是使用 && 运算符返回表达式链中的第一个假值或最后一个真值,或者使用 || 运算符返回表达式链中的第一个真值或最后一个假值。

1.const dogs = true;

2.

3.

4.// nooby

5.if (dogs) {

6.    runAway();

7.}

8.

9.

10.// pro

11.dogs && runAway()

12.

13.

14.function runAway(){

15.    console.log('You run!');

16.}

2. 对象键维护它们的插入顺序

对象键通过遵循一个简单的规则来维护它们的插入顺序:类整数键按数字升序排序,而非类整数键根据它们的创建时间排序。

1.const character = {

2.    name: "Arthas",

3.    age: 27,

4.    class: "Paladin",

5.    profession: "Lichking",

6.};

7.

8.

9.// name age class profession

10.console.log(Object.keys(character));

3. 理解 JavaScript 中的 Truthy 和 Falsy 值

在布尔上下文中使用时,Truthy 和 Falsy 值会隐式转换为 true 或 false。

虚假值 => false, 0, ""(空字符串), null, undefined, &NaN

真值 => "Values", "0", {}(空对象),&[](空数组)

1.// pro

2.if(![].length){

3.    console.log("There is no Array...");

4.} else {

5.    console.log("There is an Array, Hooray!");

6.}

7.

8.

9.if(!""){

10.    console.log("There is no content in this string...");

11.} else {

12.    console.log("There is content in this string, Hooray!");

13.}

4. 使用 XOR 运算符比较数字

按位异或运算符 (^) 对两个操作数执行按位异或运算。这意味着如果位不同则返回 1,如果相同则返回 0。

1.const a = 1337;

2.const b = 69;

3.

4.

5.// nooby

6.a !== 69 ? console.log('Unequal') : console.log("Equal");  // Unequal

7.b !== 69 ? console.log('Unequal') : console.log("Equal");  // Equal

8.

9.

10.// pro

11.a ^ 69 ? console.log('Unequal') : console.log("Equal");    // Unequal

12.b ^ 69 ? console.log('Unequal') : console.log("Equal");    // Equal

5. 使用对象中的动态属性

1.// nooby

2.let propertyName = "body";

3.let paragraph = {

4.    id: 1,

5.};

6.paragraph[propertyName] = "other stringy";

7.// { id: 1, body: 'other stringy' }

8.console.log(paragraph)

9.

10.

11.// pro

12.let propertyName = "body";

13.let paragraph = {

14.    id: 1,

15.    [propertyName] : "other stringy"

16.};

17.// { id: 1, body: 'other stringy' }

18.console.log(paragraph)

6. 轻松消除数组中的重复值

您可以使用集合消除数组中的重复值。

1.// nooby

2.let answers = [7, 13, 31, 13, 31, 7, 42];

3.let leftAnswers = [];

4.let flag = false;

5.for (i = 0; i< answers.length; i++) {

6.    for (j = 0; j < leftAnswers.length; j++) {

7.        if (answers[i] === leftAnswers[j]) {

8.            flag = true;

9.        }

10.    }

11.    if (flag === false) {

12.        leftAnswers.push(answers[i]);

13.    }

14.    flag = false;

15.}

16.//[ 7, 13, 31, 42 ]

17.console.log(leftAnswers)

18.

19.

20.

21.

22.// pro

23.let answers = [7, 13, 31, 13, 31, 7, 42];

24.let leftAnswers = Array.from(new Set(answers));

25.// [ 7, 13, 31, 42 ]

26.console.log(leftAnswers)

以上是关于JavaScript的一些技巧分享,编写好的代码可以直接用哟。了解更多技术干货可以持续关注我们!

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

云边协同与人工智能AI的深度融合(云端训练、边端推理)

在面向物联网、大流量等场景下&#xff0c;为了满足更广连接、更低时延、更好控制等需求&#xff0c;云计算在向一种更加全局化的分布式节点组合形态进阶&#xff0c;边缘计算是其向边缘侧分布式拓展的新触角。 以物联网场景举例&#xff0c;设备产生大量数据&#xff0c;上传到…

都2023了,学习自动化测试还有必要么?会不会浪费我时间

最近收到不少小伙伴私信提问&#xff0c;其中问得比较多的就是“学习自动化测试有那么重要吗&#xff1f;”。 我的回答是肯定的——很重要。 相信不少同学都有诸如此类的疑问&#xff0c;例如&#xff1a;“日常工作中好像用不上自动化&#xff1f;”、“手工点点点好像也可…

【从零开始学习 UVM】9.1、UVM Config DB —— UVM Resource database 资源库详解

文章目录 resource 是一个参数化的容器,可以保存任意数据。资源可用于配置组件、为序列提供数据或在TestBench不同部分之间启用信息共享。它们使用作用域信息(scope)存储,因此其可见性可以限制在TestBench的某些部分中。您可以将任何数据类型放入资源数据库中,并使另一个组…

若依后端管理系统学习日志

文章目录遇到的问题1. 自定义模块404解决方案1. 自定义后台异常返回2. 添加导入按钮3. 树形列表搜索遇到的问题 1. 自定义模块404 idea没有报错&#xff0c;但是点击进去页面显示404。 F12查看错误信息&#xff0c;原来是访问后端controller接口没有成功&#xff0c;找不到导…

上传文件—ajax

目录 一、上传图片文件 1.写基本html 完成页面主框架 2.script部分 2-0 主框架 上传文件按钮被点击触发事件 2-1验证使得否选择文件 2-2 介绍 FormData 2-3 监听onreadystatechange事件 小结 二、实现上传文件进度条 1. 在bootstrap找进度条组件 2.script 完成进度条算法…

Java锁深入理解2——ReentrantLock

前言 本篇博客是《Java锁深入理解》系列博客的第二篇&#xff0c;建议依次阅读。 各篇博客链接如下&#xff1a; Java锁深入理解1——概述及总结 Java锁深入理解2——ReentrantLock Java锁深入理解3——synchronized Java锁深入理解4——ReentrantLock VS synchronized Java锁…

QT Qwidget 事件处理机制

qlineEdit Qt事件处理是指在Qt应用程序中处理各种事件的过程。事件是指在应用程序中发生的各种操作&#xff0c;例如按键、鼠标点击、窗口移动等。Qt提供了一个事件处理机制&#xff0c;使得开发者可以对这些事件进行处理&#xff0c;以实现应用程序的各种功能。 Qt中的事件处…

CMake设置Visual Studio工程的调试环境变量和工作目录cwd的方法

1、设置在Visual Studio中调试的环境变量&#xff0c;此设置仅仅在VS中点击那个绿色三角运行时有效&#xff0c;与你直接双击打开exe文件运行无关&#xff0c;有效避免多版本动态库全部写入系统环境变量的污染问题&#xff1b; # Visual Studio中调试依赖的独立环境变量 set_p…

代码随想录算法训练营第五十天| ● 309.最佳买卖股票时机含冷冻期 ● 714.买卖股票的最佳时机含手续费 ●总结

309.最佳买卖股票时机含冷冻期 看完题后的思路 dp[i][] 0: 第i天不持有股票的最大利润 1: 持有 递推公式 dp[i][0]max(第i-1天不持有,第i-1天持有,在第i天卖了) dp[i][1]max(第i-1天持有, 第i-2天不持有,第i天持有) 初始化 dp[0][0]0; dp[0][1]-price[i]; dp[1][0]max(x,x) d…

PCB模块化设计23——LDO线性稳压电源模块PCB布局布线设计规范

目录PCB模块化设计23——LDO线性稳压电源模块PCB布局布线设计规范一、LDO线性稳压电源组成与概念二、LDO的电路的主干道布局要点PCB模块化设计23——LDO线性稳压电源模块PCB布局布线设计规范 一、LDO线性稳压电源组成与概念 LDO线性稳压器是最基本的稳压电源变换&#xff0c;…

STM32时钟与定时器

目录 一、STM32的时钟系统 二、SysTick定时器 三、HAL_Delay的实现 四、通用定时器 一、STM32的时钟系统 概念时钟系统是由振荡器&#xff08;信号源&#xff09;、定时唤醒器、分频器等组成的电路。常用的信号源有晶体振荡器和RC振荡器。 意义时钟是嵌入式系统的脉搏&…

自然语言处理中的数据预处理:理论与实践

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️&#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

2020-2022年美赛C题信件汇总

2020-2022年美赛O奖C题写信汇总(机翻) 2020 <1> Dear Marketing Director of Sunshine Company , According to your requirements, we analyze the ratings and reviews of competitive products on Amazon for baby pacifier, microwave and hair dryer to be intro…

C++ 模板、函数模板、类模板

函数模板、类模板 文章目录函数模板、类模板前言1.模板1.1 模板的概念1.2 模板的特点2. 函数模板2.1 函数模板语法2.2 函数模板注意事项2.3 普通函数与函数模板的区别2.4 普通函数与函数模板的调用规则2.5 模板的局限性2.6 函数模板案例3. 类模板3.1 类模板语法3.2 类模板与函数…

2023年Java程序员生存指南,8个中肯建议度过寒潮!

最近小源看到一个2023Java程序员生存指南&#xff0c;觉得挺有意思的&#xff0c;今天分享给大家&#xff01; 第一&#xff0c;不要在互联网公司基于低代码做开发。 第二&#xff0c;保证一定强度的刷题&#xff0c;原因嘛你懂的~ 第三&#xff0c;凡是要求名校的岗位&#xf…

C#,码海拾贝(08)——埃特金(Aitken)逐步曲线插值算法,《C#数值计算算法编程》源代码升级改进版

埃特金逐步线性插值法&#xff08;Aitken successive linear interpolation method&#xff09;一种能逐步升阶的插值方法.用拉格朗日插值多项式计算函数近似值时&#xff0c;如果精度不满足要求&#xff0c;需增加插值节点以提高插值多项式次数时&#xff0c;原来算出的结果均…

字节二面,原来我对自动化测试的理解太浅了

如果你入职一家新的公司&#xff0c;领导让你开展自动化测试&#xff0c;作为一个新人&#xff0c;你肯定会手忙脚乱&#xff0c;你会如何落地自动化测试呢&#xff1f; 01 什么是自动化 有很多人做了很长时间的自动化但却连自动化的概念都不清楚&#xff0c;这样的人也是很悲…

七、网络安全

&#xff08;一&#xff09;网络安全设计 1、网络安全体系设计 &#xff08;1&#xff09;物理安全 通信线路的可靠性、硬软件设备的安全性、设备的备份、防灾害防干扰能力、设备的运行环境、不间断电源 eg机房安全 &#xff08;2&#xff09;系统安全 操作系统本身的缺陷…

vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】

文章目录4.完成非路由组件Header与Footer业务4.1使用组件的步骤&#xff08;非路由组件&#xff09;本人其他相关文章链接4.完成非路由组件Header与Footer业务 在咱们项目开发中&#xff0c;不在以HTML CSS 为主&#xff0c;主要搞业务、逻辑 开发项目的流程&#xff1a; (1)…

模式识别 —— 第六章 支持向量机(SVM)与核(Kernel)

模式识别 —— 第六章 支持向量机&#xff08;SVM&#xff09;与核&#xff08;Kernel&#xff09; 文章目录模式识别 —— 第六章 支持向量机&#xff08;SVM&#xff09;与核&#xff08;Kernel&#xff09;硬间隔&#xff08;Hard-Margin&#xff09;软间隔&#xff08;Soft…