10 个你可能还不知道的很酷JavaScript特性
英文 | https://javascript.plainenglish.io/5-cool-javascript-features-you-might-not-know-about-yet-f2fc818bdd31
翻译 | 杨小爱
您可能使用 JavaScript 很长时间了,它的最新版本是 ES12。您可能正在使用它的一些功能,今天,我想重点介绍其中的一些功能,它们可能有助于您编写更好、更清晰、更优的 JavaScript 代码。
1、空运算符
如果左侧为空或未定义,则此运算符返回右侧值。
const data= null ?? 'data';
console.log(data);
// expected output: "data"
const data1 = 1 ?? 4;
console.log(data1);
// expected output: 1
逻辑 OR (||) 运算符执行相同的操作,但是,当将 0 作为值传递时,它将视为 false,这使得它容易用于数字。
function add(a, b) {val1 = a || 1;val2 = b || 1;sum = val1 + val2;return sum;
}console.log(add(0, 0)); //output:2
当我们使用 Nullish 运算符时,同样的事情
function add1(a, b) {val1 = a ?? 1;val2 = b ?? 1;sum = val1 + val2;return sum;
}console.log(add1(0, 0)); //ouput:0
2、Switch 语句优化
如果你想优化你的 switch 语句,那么,这个语句会有所帮助。
// Longhand
switch (data) {case 1:data1();break;case 2:data2();break;case 3:data();break;// And so on...
}
// Shorthand
var data = {1: data1,2: data2,3: data
};
const val = 1
data[val]();
function data1() {console.log("data1");
}
function data2() {console.log("data2");
}
function data() {console.log("data");
}
3、控制台样式
您是否厌倦了使用相同的控制台?现在我们可以设计我们的控制台。
console.log(`%cabc`, 'font-weight:bold;color:red');
4、AND (&&) 运算符
如果我们想避免一个 if 语句,那么这个速记会很有帮助。
//Longhand
if (test1) {callMethod();
}
//Shorthand
test1 && callMethod();
5、短函数调用
我们可以使用三元运算符来实现这些功能。
// Longhand
function data1() {console.log('data1');
};
function data2() {console.log('data2');
};
var data3 = 1;
if (data3 == 1) {data1();
} else {data2();
} //data1
// Shorthand
(data3 === 1 ? data1 : data2)(); //data1
6、返回简写
这将有助于避免大量代码专门返回到基于返回语句的调用方法。
// Longhand
let value;
function returnMe() {if (!(value === undefined)) {return value;} else {return callFunction('value');}
}
var data = returnMe();
console.log(data); //output value
function callFunction(val) {console.log(val);
}
// Shorthand
function returnMe() {return value || callFunction('value');
}
7、 If... else 简写
当我们有 if-else 语句时,这会有所帮助(确保您有最多 2-3 个 if...else 语句,因为多于这些会降低代码的可读性)。
// Longhand
let mychoice: boolean;
if (money > 100) {mychoice= true;
} else {mychoice= false;
}
// Shorthand
let mychoice= (money > 10) ? true : false;
//or we can use directly
let mychoice= money > 10;
console.log(mychoice);
嵌套条件如下所示:
let salary = 300,
checking = (salary > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(checking); // "greater than 100"
8、可选链
有时,访问未定义的属性会出错,我们需要为所有嵌套对象属性添加空检查。可以使用可选链接来减少它。
const data = {a: 1,b: 'atit',d: {test1: {test2: 'patel',},},
};
console.log(data.val.test1); // here val is not present in object which leads the error
Error: Cannot read properties of undefined (reading 'test1')
console.log(data?.val); // using this we can check if the val is present in the data or not
9、对象属性赋值
当我们想从两个字符串创建对象并保持与字符串相同的键时,可以使用这个技巧来完成。
let data1 = 'abcd';
let data2 = 'efgh';
//Longhand
let data = {data1: data1, data2: data2};
//Shorthand
let data = {data1, data2};
10、延迟
当 JavaScript 代码量增加时,可能会导致浏览器必须等到所有脚本都执行完后再加载 DOM,从而增加了等待时间。
通过使用这个属性,我们可以告诉浏览器不要等待脚本;相反,它将继续构建 DOM,并在后台加载脚本。
<p>heading before loads</p>
<script defer src="src/test.js"></script>
<p>heading after loads</p>
总结
以上就是我今天与你分享的10个关于JavaScript 技巧的知识,希望能够有助于您的代码看起来更好,并帮助您在 JavaScript 中编写更清晰的代码。
感谢你的时间,谢谢阅读。
学习更多技能
请点击下方公众号
10 个你可能还不知道的很酷JavaScript特性相关推荐
- 你可能还不知道的关于JavaScript类型的细节?
类型 七种类型: Undefined Null Boolean String Number Symbol Object Undefined.Null 阅读问题:为什么有的编程规范要求使用void 0 ...
- 网络运维与安全岗位月薪2.5w,您还不知道的前景!
网络运维与安全岗位月薪2.5w,您还不知道的前景! 一.为什么学网络安全?标重点 1..市场巨大 每年各安全厂商收入高达400亿左右,随着5G的发展,万物互联时代,市场将进一步扩大. 2..薪资高 网 ...
- 【Android】你可能还不知道的elevation、以及Z值等
Android你可能还不知道的elevation以及Z值等 elevation以及Z值是什么 有什么用处呢 影响View的阴影 影响View相互阻挡顺序 还有CardView [Android]你可能 ...
- android 签名包闪退,解决APP连续闪退的方案,你还不知道的签名方式
原标题:解决APP连续闪退的方案,你还不知道的签名方式 用户在使用APP检测到连续闪退后,接下来要尝试对闪退进行修复,这里先分析可能的闪退原因: 闪退原因 连续闪退,可能是 App 启动关键路径中执行 ...
- delphi webbrowser 对象不支持_建模初学者,那些你可能还不知道的10个ZBrush小技巧!【值得收藏】...
介绍 如果你对zbrush软件的了解,只是认为它是一款雕刻软件,那么现在是时候对它另眼相看了. 作为数字雕刻的行业标准,ZBrush的工具集非常灵活,以至于能够让用户选择比较适合他们自己的工作流,人们 ...
- html你可能还不知道的一些知识点
一.标签语义化 html标签语义化是让大家直观的认识标签和属性的用途和作用,好处最主要的是对搜索引擎友好. Eg: 1.如果你想在页面中突出"奥巴马"这三个字,让搜索引擎重视它,如 ...
- iOS线程锁中你还不知道的内容
iOS线程锁 一:十种线程锁 我们在使用多线程的时候多个线程可能会访问同一块资源,这样就很容易引发数据错乱和数据安全等问题,这时候就需要我们保证每次只有一个线程访问这一块资源,锁 应运而生. 这里顺便 ...
- 关于线程池,那些你还不知道的事
本文转载于:https://www.cnblogs.com/hafiz/p/7589352.html#4010404 一.背景 最近在学习线程相关的知识,然后顺理成章少不了学习线程池,刚开始在没有深入 ...
- 【网络运维与安全岗位】月薪2.5w,您还不知道的前景!
一.为什么学网络安全?标重点 1..市场巨大 每年各安全厂商收入高达400亿左右,随着5G的发展,万物互联时代,市场将进一步扩大. 2..薪资高 网安人才的匮乏,用人开出招聘薪资往往高于求职者的预期. ...
最新文章
- 【Scratch】青少年蓝桥杯_每日一题_5.01_画三五七边型
- 利用叉乘快速判断点是否在三角形内
- authc过滤器 shiro_使用Shiro实现认证和授权(基于SpringBoot)
- 《深入浅出MySQL:数据库开发、优化与管理维护(第2版)》一一1.2 MySQL的安装...
- 系统安全工作笔记001---springcloud系统安全隐患与改善_工作经验_随时更新
- TIOBE 2 月编程语言排行榜:VB 又有人要了,Go 一直在跌!
- 平衡二叉树——Balance Binary Sort Tree 设计与实现
- 微信数据清空了怎么办?误删微信聊天记录怎么恢复
- java身份证实名认证-身份证二要素实名认证-身份证实名校验-身份证一致性实名认证
- 千锋教育python老师_千锋老师分享Python经典面试题
- 宏碁公司再次遭遇入侵,160GB敏感数据泄露
- 【大数据】阿里云大数据专业认证考试
- 测试人员进阶之路:成为测试专家或测试管理都需要知道什么
- 嵌入式硬件基础知识汇总<附带与硬件密切相关的软件介绍>
- A股非金融上市公司全要素生产率(2000-2021年)
- emoji语言常用图标收集(有趣的emoji)
- PS学习-风光照片综合处理(三)--绝美金色夕阳
- 用Java语言遍历读取和操纵XML文档
- ABViewer布局检测器功能以及性能改进
- python的研究现状_python在中国的现状和发展趋势?