文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript速记技巧:向着更清晰的代码迈进

2024-12-03 15:56

关注

无论是哪个编程语言的速记技巧,都有助于你编写更好、更清晰的代码。借助速记技巧,不仅可以提升代码可读性,还可以编写更少代码完成任务。下面是一些JavaScript的速记技巧。

[[356172]]

1. 声明变量

  1. //Longhand  
  2. let x;  
  3. let y = 20;  
  4. //Shorthand  
  5. let x, y = 20

2. 给多个变量赋值

可以在一行代码中给多个变量同时赋值。

  1. //Longhand  
  2. let marks = 26;  
  3. let result;  
  4. if(marks >= 30){ 
  5.  result = 'Pass';  
  6. }else{  
  7.  result = 'Fail';  
  8. }  
  9. //Shorthand  
  10. let result = marks >= 30 ? 'Pass' : 'Fail'; 

3. 三元运算符

使用三元运算符(条件),五行代码可以简化为一行。

  1. //Longhand  
  2. let imagePath;  
  3. let path = getImagePath();  
  4. if(path !== null && path !== undefined && path !== '') {  
  5.   imagePath = path;  
  6. } else {  
  7.   imagePath = 'default.jpg';  
  8. }  
  9. //Shorthand  
  10. let imagePath = getImagePath() || 'default.jpg'; 

4. 分配默认值

我们可以使用OR(||)短路评估为变量指定一个默认值,以防期望值为空。

  1. //Longhand  
  2. let imagePath;  
  3. let path = getImagePath();  
  4. if(path !== null && path !== undefined && path !== '') {  
  5.   imagePath = path;  
  6. } else {  
  7.   imagePath = 'default.jpg';  
  8. }  
  9. //Shorthand  
  10. let imagePath = getImagePath() || 'default.jpg'; 

5. AND(&&)短路评估

如需只在变量为真的情况下调用一个函数,则可使用AND(&&)短路评估在一行内完成。

  1. //Longhand  
  2. if (isLoggedin) { 
  3.  goToHomepage();  
  4. }  
  5. //Shorthand  
  6. isLoggedin && goToHomepage(); 

速记写法这一行,只有在isLoggedin返回结果为真时,goToHomepage()才会执行。

6. 交换两个变量

通常交换两个变量需要借助第三个变量。然而通过数组析构赋值,可以轻松交换两个变量。

  1. //Longhand  
  2. console.log('You got a missed call from ' + number + ' at ' + time);  
  3. //Shorthand  
  4. console.log(`You got a missed call from ${number} at ${time}`); 

7. 箭头函数

  1. //Longhand  
  2. function add(num1, num2) {  
  3.    return num1 + num2;  
  4. }  
  5. //Shorthand  
  6. const add = (num1, num2) => num1 + num2; 

8. 模板文字

我们通常使用“+”运算符连接字符串值和变量。有了ES6模板,我们可以通过一种更简单的方式实现。

  1. //Longhand  
  2. console.log('JavaScript, often abbreviated as JS, is a\n' +             'programming language thatconforms to the \n' +  
  3. 'ECMAScript specification. JavaScript is high-level,\n' +  
  4. 'often just-in-time compiled, and multi-paradigm.' ); //Shorthand  
  5. console.log(`JavaScript, often abbreviated as JS, is a programming languagethat conforms to the ECMAScript specification. JavaScript is high-level, oftenjust-in-time compiled, and multi-paradigm.`); 

9. 多行字符串

对于多行字符串,我们通常使用“+”运算符和换行转义符(\n)进行连接。然而可以使用“`”简化代码。

  1. let firstname = 'Amitav';  
  2. let lastname = 'Mishra'; //Longhand  
  3. let obj = {firstname: firstname, lastname: lastname};  
  4. //Shorthand  
  5. let obj = {firstname, lastname}; 

10. 多重条件检查

对于多值匹配,可以将所有的值放在数组中,并使用indexOf()或includes()方法。

  1. //Longhand  
  2. if (value === 1 || value === 'one' || value === 2 || value === 'two') {  
  3.      // Execute some code  
  4. }  
  5. // Shorthand 1 
  6. if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {  
  7.     // Execute some code  
  8. }// Shorthand 2 
  9. if ([1, 'one', 2, 'two'].includes(value)) {  
  10.     // Execute some code  

11. 对象属性分配

如果变量名和对象键名相同,可以只在对象文字中设置变量名,不用同时设置键和值。JavaScript会自动将键名设置为变量名,并将该值赋为变量值。

  1. let firstname = 'Amitav';  
  2. let lastname = 'Mishra'; //Longhand  
  3. let obj = {firstname: firstname, lastname: lastname};  
  4. //Shorthand  
  5. let obj = {firstname, lastname}; 

12. 字符串类型转换为数字类型

有内置的方法,如parseInt 和parseFloat ,可用于将字符串转换为数字。更简单的方法是,在字符串值前加上一元运算符(+)。

  1. //Longhand  
  2. let total = parseInt('453');  
  3. let average = parseFloat('42.6');  
  4. //Shorthand  
  5. let total = +'453';  
  6. let average = +'42.6'; 

13. 多次重复同一字符串

若要将字符串重复指定的次数,可以使用for 循环。但是使用repeat() 方法可以在一行中完成。

  1. //Longhand  
  2. let str = '';  
  3. for(let i = 0; i < 5; i ++) {  
  4.   str += 'Hello ';  
  5. }  
  6. console.log(str); // Hello Hello Hello Hello Hello  
  7. // Shorthand  
  8. 'Hello '.repeat(5) 

小贴士:想通过给某人发100次“对不起”进行道歉?试试repeat()方法。如果你想在每次重复时另起一行,只需加上\n。

14. 指数幂

我们可以用Math.pow()方法求幂。然而用双星号(**)有一个更短的语法。

  1. //Longhand  
  2. const power = Math.pow(4, 3); // 64  
  3. // Shorthand  
  4. const power = 4**3; // 64 

15. 按位双非运算符

按位双非运算符可以替代Math.floor()方法。

  1. //Longhand  
  2. const floor = Math.floor(6.8); // 6  
  3. // Shorthand  
  4. const floor = ~~6.8; // 6 

按位双非运算符方法仅适用于32位整数,即(2**31)-1 = 2147483647。所以对于任何高于2147483647的数字,按位运算符(~~)都会给出错误的结果,所以在这种情况下建议使用Math.floor()。

16. 找出数组的最大值和最小值

可以使用for循环遍历数组的每个值,从而找到最大值或最小值。也可以使用Array.reduce()方法来查找数组中的最大值和最小值。

但是使用扩展运算符则可在一行中完成。

  1. // Shorthand  
  2. const arr = [2, 8, 15, 4];  
  3. Math.max(...arr); // 15  
  4. Math.min(...arr); // 2 

17. For循环

为遍历数组,通常使用的是传统的for 循环,也可以使用for...of 循环进行遍历。如需访问每个值的索引,可以使用for...in循环。

  1. let arr = [10, 20, 30, 40]; //Longhand  
  2. for (let i = 0; i < arr.length; i++) {  
  3.   console.log(arr[i]);  
  4. } //Shorthand  
  5. //for of loop  
  6. for (const val of arr) {  
  7.   console.log(val);  
  8. } //for in loop  
  9. for (const index in arr) {  
  10.   console.log(arr[index]);  

使用for...in循环还可以遍历对象属性。

  1. let obj = {x: 20, y: 50};  
  2. for (const key in obj) {  
  3.   console.log(obj[key]);  

18. 数组合并

  1. let arr1 = [20, 30]; //Longhand  
  2. let arr2 = arr1.concat([60, 80]);  
  3. // [20, 30, 60, 80]  
  4. //Shorthand  
  5. let arr2 = [...arr1, 60, 80];  
  6. // [20, 30, 60, 80] 

19. 多级对象的深度克隆

要深度克隆多级对象,可以遍历每个属性,并检查当前属性是否包含对象。如果是,则通过传递当前属性值(即嵌套对象)对同一函数进行递归调用。也可以使用JSON.stringify()和JSON.parse()在一行中实现。

  1. let obj = {x: 20, y: {z: 30}};  
  2. //Longhand  
  3. const makeDeepClone = (obj) => {  
  4.   let newObject = {};  
  5.   Object.keys(obj).map(key => {  
  6.     if(typeof obj[key] === 'object'){  
  7.       newObject[key] =makeDeepClone(obj[key]);  
  8.     } else {  
  9.       newObject[key] = obj[key];  
  10.     }  
  11.   });  
  12.  return newObject;  
  13. } const cloneObj = makeDeepClone(obj);  
  14. //Shorthand  
  15. const cloneObj = JSON.parse(JSON.stringify(obj)); 

如果对象属性以函数作为值,则速记技巧(JSON.parse(JSON.stringify(obj)))无效。因为JSON.stringif作用于对象时,以函数作为值的属性会从对象中移除。所以这种情况下,还是要用普通写法。

20. 从字符串中获取字符

  1. let str = 'jscurious.com'; //Longhand  
  2. str.charAt(2); // c  
  3. //Shorthand  
  4. str[2]; // c 

希望本文能让你有所收获。

 

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯