8个Javascript小技巧,让你写的代码有腔调
如果你想确保你的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
8个Javascript小技巧,让你写的代码有腔调的更多相关文章
- 12个非常实用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- 11个不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...
- [转]11个教程中不常被提及的JavaScript小技巧
原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...
- 11个教程中不常被提及的JavaScript小技巧
这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...
- 12个十分实用的JavaScript小技巧
12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...
- 常用的一些javascript小技巧
(转载)常用的一些javascript小技巧: http://bbs.blueidea.com/thread-2201069-1-1.html
- 12个非常有用的JavaScript小技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...
- 8个Javascript小技巧
1. 使用 + 字符可以转换成数字 比如要把一个字符串数字转换成数字,你可能会这样做: var one = '1'; var two = '2'; var numberOne = Number(one ...
- JavaScript小技巧整理篇(非常全)
能够为大家提供这些简短而实用的JavaScript技巧来提高大家编程能力,这对于我来说是件很开心的事.每天仅花上不到2分钟的时间中,你将可 以读遍JavaScript这门可怕的语言所呈现给我们的特性: ...
随机推荐
- Lumen开发:如何向 IoC 容器中添加自己定义的类
版权声明:本文为博主原创文章,未经博主允许不得转载. 先在起始文件bootstrap/app.php加上$app->register(App\Providers\User\UserService ...
- java面向对象编程知识点总结
一:今天完成 上午详细了解了java面向对象编程的一些细节,记录如下. 1)类 是一种引用类型,包含一个签名和一个主体,主体是放在花括号里面的成员,成员包括字段和方法,还有构造方法.初始化程序和嵌套类 ...
- EasyDSS流媒体解决方案实现的RTMP/HLS视频直播、直播鉴权(如何完美将EasyDSS过渡到新版)
上一篇博文介绍了EasyDSS点播功能,然后作为RTMP流媒体服务器,接受RTMP推流.进行实时的直播流分发又是自身一大核心功能. 需求背景: 写本篇博文的一个目的是向大家介绍一下EasyDSS新版的 ...
- 九度OJ 1204:农夫、羊、菜和狼的故事 (遍历、BFS)
时间限制:1 秒 内存限制:32 兆 特殊判题:是 提交:744 解决:502 题目描述: 有一个农夫带一只羊.一筐菜和一只狼过河. 果没有农夫看管,则狼要吃羊,羊要吃菜. 但是船很小,只够农夫带一样 ...
- kettle连接资源库设置
到这里你是登陆不上去的,需要创建或更新按钮,因为需要在你的数据库里创建关于kettle的数据表,来存储资源库 点执行就可以了 一般情况下kettle资源库自动给你创建两个用户: 工具->资源库- ...
- SQL性能优化常用语句(摘录网上)
1.把trace文件导入到表中 , ) AS RowNumber,* into TableName FROM fn_trace_gettable('trace.trc', default) 2.查询C ...
- [原创]Scala学习:关于变量(val,var,类型推断)
1.常量定义: val val 类似于java中的final变量.一旦初始化了,val就不能再被赋值 val megs = "hello world" 2.变量的定义: var ...
- 【leetcode刷题笔记】Remove Duplicates from Sorted List II
Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...
- 第二十三篇、IO多路复用 二
基于IO多路复用实现socket的连接 下面流程:1.先创建列表,让自己的socket对象传入,然后遍历select第一个参数2.客户端连接,那么客户端socket就传入到了列表里面,3.遍历,接收客 ...
- debian下使用ft232为stm32f429i-discovery烧写uboot和uImage
操作系统:debian 软件: openocd minicom 硬件: MiniUSB线.stm32f429i-discovery, WaveShare FT232串口模块(可以在淘宝上买到) 关 ...