好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

  • 客服QQ
  • 官方微信

    好程序员

    专注高端IT职业培训

[HTML5] 好程序员web前端培训分享JS有哪些很牛的语法系列二

[复制链接]
189 0
叶子老师 发表于 5 天前 | 只看该作者 |阅读模式 打印 上一主题 下一主题
  好程序员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.....
  }
  
  如何让这段代码变得优雅那
  
  domlist = Array.from(domlist)
  
  domlist.forEach( dom =>{
  dom....
  })
  
  怎么样,是不是代码上了一个台阶的赶脚。
  
  好了,今天的“很牛”语法就暂时说到这里,各位小伙伴,我们下期见。
好程序员web前端培训官网:http://masterremove.com/html5_class.shtml

精彩内容,一键分享给更多人!
收藏
收藏0
转播
转播
分享
淘帖0
支持
支持0
反对
反对0
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启