点击上面蓝字关注我们
封面
虽然一直是做前端，但是一直没有空写一下关于前端的文章。所以小伙伴们注意了，此篇文章是关于Javascript和ES6的一些小技巧~ 看不懂的小伙伴们，只能发信息留言问我了
文 | 灯泡点灯
编辑 | 灯泡点灯Lightman
时长 | 10 min
好久没有写过Javascript的文章，今天想写一篇关于 Javascript的8个小技巧。这些小技巧可以帮助减少代码量，并帮助你优化代码。写的有腔调，指尖有风。
* 如果你想确保你的JavaScript在大多数浏览器和移动设备中都可以工作，那么我从大漠等大神指导，原来可以使用f2etest，也可以使用Endtest，browserstack等
1. 使用 + 字符可以转换成数字
比如要把一个字符串数字转换成数字，你可能会这样做：
var one = ‘1’;
var two = ‘2’;
var numberOne = Number(one); //1
var numberTwo = parseInt(two); //2
我要说的这个小技巧是在John Papa那里学到的，通过 + 字符，直接实现了对变量的 数字转换。
这种方式灰常简单，但前提得是一个数字的字符串，否则就会得到NaN值。
例如下面的代码：
function convertNumber(str){
return +str;
}
convertNumber(‘1234’);
//1234
convertNumber(‘abc’);
//NaN
var one = ‘1’;
var numberOne = +one; //1
这种写法比较简单，想说为什么这样写，因为比较酷~
2 清空数组
有时候清空Array你可能会这样做
var list = [1, 2, 3, 4];
list = [ ];
但另一个方法可能会更加的高效一些：
你可以这样写：
var list = [1,2,3,4];
list.length = 0;
这样做是因为：
list = [ ] ,会将一个新数组的引用分配给变量，而其他任何引用都不受影响。这意味着对前一个数组的内容的引用仍然保留在内存中，导致内存泄漏。
list.length = 0, 则直接就删除了Array中的内容
3 合并数组
在实际操作中，经常要实现数组的合并，尤其是有时候Component化后，会需要定义许多的Module啊，Component等等，比如Angular, 可能由于项目比较大，而让不同的app声明了不同的数组。那此时可以这样做，使用Array.concat() 或者 [ ].concat()
比如
ComponentModule= [‘call-back’,’router’,’nav’]
PageModule = [‘home’,’payment’]
AppModule = [ ]. concat(ComponentModule,PageModule)
然后这个函数并不适合用来合并两个大型的数组，因为其将消耗大量的内存来存储新创建的数组。在这种情况之个，可以使用Array.pus().apply(arr1,arr2)来替代创建一个新数组。这种方法不是用来创建一个新的数组，其只是将第一个第二个数组合并在一起，同时减少内存的使用：
var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
4 把Arguments转换成数组
这用到了ES6的特性，把Arguments的数值spread出去
function toArray(…args){
console.log(args);
}
toArray(1,2,3); //[1,2,3]
5 复制数组
同样也使用了ES6的特性
var arr=[1,2,3];
//var arr2=Array.from(arr);
var arr2=[...arr];
arr.pop();
console.log(arr); //[1,2]
console.log(arr2); //[1,2,3]
6 数字转字符串
假设有不确定的变数类型，需要转换成字符串，如果直接使用可能会有错误
var one = 1;
var two = 2;
var three = '3';
var result = one + two + three;
// 会得到 "33" 而非 "123"
可以使用 concat 来链接字符串，而避免了错误
var one = 1;
var two = 2;
var three = '3';
var result = ''.concat(one, two, three); // 得到 "123"
7在Array中找到最大值和最小值
有时候，程序员就是有尿性，非要找到最大值和最小值，内建函数有 Math.max() 和 Math.min() 可以找到最大和最小值
Math.max(1, 2, 3, 4); // 4
Math.min(1, 2, 3, 4); // 1
如果要在Array中找最大最小值可以这样用
var numbers = [1, 2, 3, 4];
Math.max.apply(null, numbers) // 4
Math.min.apply(null, numbers) // 1
通过ES6 的Spread来完成
var numbers = [1, 2, 3, 4];
Math.max(...numbers) // 4
Math.min(...numbers) // 1
8 设置默认值
也许这个小技巧，许多小伙伴在学javascript一段时间就都已经掌握了了。
如果你想必须给一个变量赋默认值，可以这样简单写
var a;
console.log(a) // undefined
a = a || ‘default value’
console.log(a) // default value
a = a || ‘new value’
console.log(a) // default value
end
别急
欢迎 IT 精英关注，加入澳洲IT求职技术群，认识前辈，交流技术，招聘分享。已经有上百名小伙伴与你一样爱知求真，长按下面图片识别二维码，添加 小花 ，验证邀请加入群聊
我们是谁
澳洲IT匠人圈是为了打造澳洲IT精英圈，希望在澳洲的广大IT认识团结互助，让在土澳的我们也能感受到高科技的光芒。组织IT社交圈，推送招聘广告，精品干货文章，澳洲业界动态，
也期待更多有梦想的人加入
投稿，请联系小花或E-Mail
商务联系
首席勾搭官 | +61 411 392 977
UA勾搭小花 | 微信 uniapp001
转载原创联系
澳洲IT匠人圈
澳洲IT圈等待你的加入
长按二维码关注
点击阅读原文，查看更多
