web前端分享JS有哪些很牛的语法系列二

　　web前端分享JS有哪些很牛的语法系列二，JS这个语言好是好，但是很多时候写起来太丑了，每次看大牛的代码的时候，妈妈都问我为什么跪着读代码，随着 ES 2015的普及我们可以写出很多可读性强且漂亮的代码，那么接下来就带着大家一块学习一下可以把JS写漂亮的 “很牛” 语法。

　　在组织面向对象代码的时候我们通常使用的语法是 :

　　function Swiper(){

　　}

　　原型编程时我们往往会因为语言的无奈写成这样的 :

　　Swiper.prototype.init = function (){}

　　Swiper.prototype.render = function(){}

　　...

　　这样写丑陋且麻烦，那么如何让我们的代码变得更漂亮，更好用那？对于JS有一定了解的童鞋可能会这么写，兼容性良好且可以节省大量的代码。

　　Swiper.prototype = {

　　constructor : Swiper,

　　init : function(){

　　},

　　render:function(){

　　}

　　....

　　}

　　这样组织看起来工整一点但是还会存在不少莫名其妙的属性constructor是个啥，好像没啥用啊，那么如果我们在项目中加入了类似jQuery 这样的类库，我们的代码就可以变得更加简练，类似于这样

　　$.extend(Swiper.prototype,{

　　init : function(){

　　},

　　render:function(){

　　}

　　})

　　但是受限于语法，没法让方法看起来很很清爽，而且要引入一个庞大的类库，那么我们在项目构建时使用babel这样的编译工具，我们可以写成

　　Object.assign(Swiper.prototype,{

　　Init(){

　　},

　　render(){

　　}

　　})

　　现在你的代码可以无需任何类库，变得漂亮，优雅。甚至无需使用class关键字就可以让我们的代码变得清晰、耐看，有逼格。

　　说完了面向对象这个大事再跟大家普及两个极其方便的ES6新特性。

　　一行式数组去重:

　　var arr = [1,1,2,3,2,3,4,5,6,7]

　　arr = Array.from(new Set(arr));

　　ok数组去重完毕，不再用一大堆逻辑代码处理数组中的重复，不可谓不”很牛”

　　让我们的HTMLCollection 可以使用forEach ， map ，filer... 等遍历属性 :

　　当我们选择一组元素想要遍历的时候我们在es5中往往需要非常恶心的for循环语法:

　　例如 :

　　var domlist = document.querySelector(“.list”);

　　我们需要使用非常...的for 循环

　　for( var i = 0 ; i < domlist.lenght ; i++){

　　domlist[i].....

　　}

　　如何让这段代码变得优雅那 ？

　　domlist = Array.from(domlist)

　　domlist.forEach( dom =>{

　　dom....

　　})

　　怎么样，是不是代码上了一个台阶的赶脚。

　　好了，今天的“很牛”语法就暂时说到这里，各位小伙伴，我们下期见。