这 10 个 JS 小技巧,你可能还不知道

前端达人

共 3516字,需浏览 8分钟

 ·

2021-11-10 08:47


英文 | 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 语句,那么,这个语句会有所帮助。
// Longhandswitch (data) {    case 1:        data1();        break;    case 2:        data2();        break;    case 3:        data();        break;        // And so on...}// Shorthandvar data = {    1: data1,    2: data2,    3: data};const val = 1data[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、短函数调用
我们可以使用三元运算符来实现这些功能。
// Longhandfunction 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、返回简写
这将有助于避免大量代码专门返回到基于返回语句的调用方法。
// Longhandlet value;function returnMe() {    if (!(value === undefined)) {        return value;    } else {        return callFunction('value');    }}var data = returnMe();console.log(data); //output valuefunction callFunction(val) {    console.log(val);}// Shorthandfunction returnMe() {    return value || callFunction('value');}
7、 If... else 简写
当我们有 if-else 语句时,这会有所帮助(确保您有最多 2-3 个 if...else 语句,因为多于这些会降低代码的可读性)。
// Longhandlet mychoice: boolean;if (money > 100) {    mychoice= true;} else {    mychoice= false;}// Shorthandlet mychoice= (money > 10) ? true : false;//or we can use directlylet 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 errorError: 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 中编写更清晰的代码。
感谢你的时间,谢谢阅读。

学习更多技能

请点击下方公众号


浏览 13
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报