zoukankan      html  css  js  c++  java
  • 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....

    })

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

    好了,今天的“变态”语法就暂时说到这里,想要了解更多,我们后续再分享。

  • 相关阅读:
    牛客-Python-字符流中第一个不重复的字符
    牛客网-python-表示数值的字符串
    牛客网-(标星)正则表达式的匹配
    牛客网-构建乘积数组
    牛客网-和为S的两个数字
    new code-和为S的连续正数序列
    newcode-平衡二叉树
    Reinforcement Learning学习笔记|Deep Q-learning算法
    Reinforcement Learning学习笔记|Q-learning算法
    C++|重拾|笔记20190307
  • 原文地址:https://www.cnblogs.com/CQqf/p/10768538.html
Copyright © 2011-2022 走看看