js有哪些变态的语法？

我不是女神ヾ 2021-09-30 14:34 240阅读 0赞

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....

\})

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

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

转载于:https://www.cnblogs.com/CQqf/p/10768538.html

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是语法糖？Java中有哪些语法糖？

什么是语法糖？Java中有哪些语法糖？语法糖语法糖（Syntactic Sugar），也称糖衣语法，是由英国计算机学家 Peter.J.Landin 发明

淡淡的烟草味﹌/ 2024年03月02日 09:28/ 0 赞/ 22 阅读

相关有哪些必看的前端 JS 库？

前端自动化前端构建工具 gulp – The streaming build system grunt – the JavaScript Task Runner 前端

小灰灰/ 2023年01月03日 01:19/ 0 赞/ 107 阅读

相关 [JavaScript]js有哪些继承方式

js继承的方法想要继承，就必须先提供一个父类，这里以Person来作为父类举例下文中所有构造函数名均无实际意义，如Coder、Rocker等，仅用于举例

╰+哭是因爲堅強的太久メ/ 2022年11月28日 13:33/ 0 赞/ 183 阅读

相关 golang中常见的语法糖有哪些

语法糖：Syntactic sugar 目录 1、函数中的形参不定长，用 ... 代替 2、使用 := 进行简短赋值与初始化 3、访问结构体成员变量时，使用 . -

灰太狼/ 2022年10月29日 12:21/ 0 赞/ 190 阅读

相关 Node. js 有哪些全局对象

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

墨蓝/ 2022年10月17日 10:38/ 0 赞/ 101 阅读

相关 js的基本数据类型有哪些？

js的基本数据类型有哪些？ `ECMAScript`中有5中简单数据类型（也称为基本数据类型）: `Undefined`、`Null`、`Boolean`、`Number

古城微笑少年丶/ 2022年09月29日 14:53/ 0 赞/ 229 阅读

相关 js延迟加载的方式有哪些

defer和async属性、动态创建DOM方式（用得最多）、按需异步载入js。注：（setTimeOut（js，time）） JS延迟加载，也就是等页面加载完成之后再加载 J

﹏ヽ暗。殇╰゛Y/ 2022年06月06日 06:51/ 0 赞/ 237 阅读

相关 js有哪些变态的语法？

JS这个语言好是好，但是很多时候写起来太丑了，每次看大牛的代码的时候，妈妈都问我为什么跪着读代码，随着 ES 2015的普及我们可以写出很多可读性强且漂亮的代码，那么接下来就带

我不是女神ヾ/ 2021年09月30日 14:34/ 0 赞/ 241 阅读

相关 js中常用的输出方式有哪些

js中常用的输出方式有哪些 1、alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符...

红太狼/ 2020年06月06日 18:26/ 0 赞/ 743 阅读

相关 js中有哪些输出的方式

js中有哪些输出的方式 js中输出的方式有： 1、使用 window.alert() 弹出警告框。 2、使用 document.write() 方法将内容写到 HTML...

小灰灰/ 2020年06月02日 12:56/ 0 赞/ 650 阅读