文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何使用ES6简化代码

2023-06-27 18:27

关注

小编给大家分享一下如何使用ES6简化代码,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

使用 ES6 简化代码

ES6 已经发展很多年了,兼容性也已经很好了。恰当地使用,可以让代码更加地简洁优雅。

(1)使用箭头函数取代小函数

有很多使用小函数的场景,如果写个 function,代码起码得写 3 行,但是用箭头函数一行就搞定了,例如实现数组从大到小排序:

var nums = [4, 8, 1, 9, 0]; nums.sort(function(a, b){     return b - a; }); //输出[9, 8, 4, 1, 0]

如果用箭头函数,排序只要一行就搞定了:

var nums = [4, 8, 1, 9, 0];``nums.sort(a, b => b - a);

代码看起来简洁多了,还有 setTimeout 里面经常会遇到只要执行一行代码就好了,写个 function  总感觉有点麻烦,用字符串的方式又不太好,所以这种情况用箭头函数也很方便:

setTimeout(() => console.log("hi"), 3000)

箭头函数在 C++/Java 等其它语言里面叫做 Lambda 表达式,Ruby 比较早就有这种语法形式了,后来 C++/Java  也实现了这种语法。当然箭头函数或者 Lambda 表达式不仅适用于这种一行的,多行代码也可以,不过在一行的时候它的优点才比较明显。

(2)使用 ES6 的 class

虽然 ES6 的 class 和使用 function 的 prototype 本质上是一样的,都是用的原型。但是用 class  可以减少代码量,同时让代码看起来更加地高大上,使用 function 要写这么多:

function Person(name, age){     this.name = name;     this.age = age; }  Person.prototype.addAge = function(){     this.age++; };  Person.prototype.setName = function(name){     this.name = name; };

使用 class 代码看加地简洁易懂:

class Person{     constructor(name, age){         this.name = name;         this.age = age;     }     addAge(){         this.age++;     }     setName(name){         this.name = name;     } }

并且 class 还可以很方便地实现继承、静态的成员函数,就不需要自己再去通过一些技巧去实现了。

(3)字符串拼接

以前要用+号拼接:

var tpl =     '<div>' +     '    <span>1</span>' +     '</div>';

现在只要用两个反引号“`”就可以了:

var tpl = `   <div>         <span>1</span>     </div> `;

另外反引号还支持占位替换,原本你需要:

var page = 5,     type = encodeURIComponet("#js"); var url = "/list?page=" + page + "&type=" + type;

现在只需要:

var url = `/list?page=${page}&type=${type}`;

就不用使用+号把字符串拆散了。

(4)块级作用域变量

块级作用域变量也是 ES6 的一个特色,下面的代码是一个任务队列的模型抽象:

var tasks = []; for(var i = 0; i < 4; i++){     tasks.push(function(){         console.log("i is " + i);     }); } for(var j = 0; j < tasks.length; j++){     tasks[j](); }

但是上面代码的执行输出是 4,4,4,4,并且不是想要输出:0,1,2,3,所以每个 task 就不能取到它的 index 了,这是因为闭包都是用的同一个  i 变量,i 已经变成 4 了,所以执行闭包的时候就都是 4 了。那怎么办呢?可以这样解决:

var tasks = []; for(var i = 0; i < 4; i++){     !function(k){         tasks.push(function(){             console.log("i is " + k);         });     }(i); } for(var j = 0; j < tasks.length; j++){     tasks[j](); }

把 i 赋值给了 k,由于 k 它是一个 function 的一个参数,每次执行函数的时候,肯定会实例化新的 k,所以每次的 k  都是不同的变量,这样就输出就正常了。但是代码看起来有点别扭,如果用 ES6,只要把 var 改成 let 就可以了:

var tasks = []; for(let i = 0; i <= 4; i++){     tasks.push(function(){         console.log("i is " + i);     }); } for(var j = 0; j < tasks.length; j++){     tasks[j](); }

只改动了 3 个字符就达到了目的。因为 for 循环里面有个大括号,大括号就是一个独立的作用域,let  定义的变量在独立的作用域里面它的值也是独立的。当然即使没写大括号 for 循环执行也是独立的。除了以上几点,ES6 还有其它一些比较好用的功能,如 Object的 assign,Promise 等,也是可以帮助写出简洁高效的代码。

以上是“如何使用ES6简化代码”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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