js方法 js的九种小技巧
如何优雅地写出漂亮的JavaScript代码?既可以效率更高,还能阅读起来更加直观,避免错误。今天为大家介绍九个小技巧。
·第一,箭头函数Arrow Function。以前的函数可以写成这样或者是这样,现在直接使用箭头。如果函数体内只有一行,甚至可以省略花括弧。如果函数里面直接返回另一个函数,改成箭头函数后就无需嵌套了。
·第二,展开运算符Spread Operator。比如把数组a作为数组b的一部分的时候就可以这样写。同样的,如果想把对象c作为d的部分的时候也可以这样写。在JS里面函数的输入就是一个数组,所以可以动态的加入一个数组作为函数的输入参数。
·第三,剩余运算符Rest Operator。它类似于刚才展开运算符的逆方向,将第二个以后的元素都变成rest变量。
·第四,在Python中的range可以返回从0开始的数组,而在JS中使用这样的方式也可以创建。但如果还嫌麻烦,可以使用Lodash的range函数。
·第五,如果想创建的对象object的键Key是动态创建,之前可能需要先创建空对象再动态赋值,现在在创建时加上中括号就可以了。
·第六,在调试中通常会使用console.log函数。这时如果传入多个对象只会输出值,可能认不清楚。其实只要在log函数中将多个对象用花括弧包起来,对象的名字就是键key,在调试时就会清楚很多了。
·第七,使用条件运算符Conditional Operator。如果只是简单的条件判断,本来需要这样写,现在这样就可以了。
·第八,一般无需再使用for循环了,建议多使用forEach、reduce、map、filter函数。forEach函数不返回值,map函数返回每次处理的值组成的数组。filter函数中只有返回true的才会被保留。reduce函数是从初始值如这里的0开始,将acc作为累加值最终返回,这样就相当于是所有值的加和对象object的解构。
比如引入一个包,可以使用解构的函数,对于多层的object还可以这样取值,其实只要按照逆方向写就可以了。
10个实用的JS技巧「值得收藏」
我一直在寻找提高效率的新方法。而且 JavaScript 总是能给人带来惊喜。
arguments 对象是函数内部可访问的类似数组的对象,其中包含传递给该函数的参数的值。
与其他数组不同,这里我们可以访问值并获得长度(length),但是不能在其上使用其他数组方法。
幸运的是,我们可以将其转换为常规数组:
我一开始想到的是使用一个循环,但是那样会很浪费。
我们有以下代码:
我们可以进一步简化代码,同时使用变量和函数:
我以前在函数开始时声明变量,只是为了避免在出现意外错误时遇到 undefined。
逗号运算符
逗号运算符(,)用来计算其每个操作数(从左到右)并返回最后一个操作数的值。
你可以调整大小或清空数组。
结构赋值语法是一种 JavaScript 表达式,可以将数组中的值或对象中的属性解包为不同的变量。
你可以在声明对象之前分配一个动态属性。
对于所有 ES6 爱好者而言,我们可以使用带有 Spread 运算符的 Set 对象来创建一个仅包含唯一值的新数组。
履行好自己的责任比提升效率要重要的多。
你的网站需要兼容所有浏览器。
你可以使用 Endtest或其他类似工具来确保兼容性。
https://endtest.io/
你还有其他 JavaScript 技巧或窍门要分享吗?
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
作者 | Zander Shirley
译者 | 王强
策划 | 小智
转发链接:https://mp.weixin.qq.com/s/QQp3GTUvnwn_cunmaqDwTg
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。