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小技巧的更多相关文章

  1. 12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  2. 11个不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在 ES6中新增的,它类似于数组,但 ...

  3. [转]11个教程中不常被提及的JavaScript小技巧

    原文地址: https://www.cnblogs.com/ld1024/p/10723827.html 这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日 ...

  4. 11个教程中不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...

  5. 常用的一些javascript小技巧

    (转载)常用的一些javascript小技巧: http://bbs.blueidea.com/thread-2201069-1-1.html

  6. 12个十分实用的JavaScript小技巧

    12个非常实用的JavaScript小技巧 在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候 ...

  7. 12个非常有用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  8. 8个Javascript小技巧,让你写的代码有腔调

    如果你想确保你的JavaScript在大多数浏览器和移动设备中都可以工作,那么我从大漠等大神指导,原来可以使用f2etest,也可以使用Endtest,browserstack等 1. 使用 + 字符 ...

  9. javascript小技巧-js小技巧收集(转)

    本文转载自:http://blog.csdn.net/ocean20/article/details/2498699 每一项都是js中的小技巧,但十分的实用! 1.document.write(&qu ...

随机推荐

  1. jquery ajax 提交form表单 以及django后台接受

    HTML <form id="project_file_upload" enctype="multipart/form-data" > <di ...

  2. 跟着百度学PHP[13]-文件处理 文件后缀验证、设置随机文件名....

    目录: 文件的处理:00x1 判断错误 文件的处理:00x2 判断类型 文件的处理:00x3 文件大小 ++++++++++++++++++++++++++++++++++++++++++++++++ ...

  3. Linux kernel 之 uart 驱动解析

    uart 是一种非常之常见的总线,比如DEBUG信息输出,小数据量数据传输,485,以及蓝牙的控制,GPS,很多都是通过uart 进行数据传输并进行控制. 在Linux kernel 内部,uart ...

  4. C++:成员函数实现在类定义中与在类定义外的区别

    //a.cpp class A{ public: int fun(int x){ ); } }; void tt() { } //b.cpp class A{ public: int fun(int ...

  5. su和sudo命令

    su命令用于在不同的用户之间切换,比如使用user1登陆了系统,但要执行一些管理操作,比如useradd,普通用户没有这个权限的,解决的办法有两个. 1:退出user1用户,重新以root用户登录系统 ...

  6. man page用法

    通过man man可查看man page的具体用法. 1   Executable programs or shell commands       2   System calls (functio ...

  7. 面向对象设计原则三:里氏替换原则(LSP)

    里氏替换原则(LSP)定义:在任何父类出现的地方都可以用它的子类类替换,且不影响功能.解释说明:其实LSP是对开闭原则的一个扩展,在OO思想中,我们知道对象是由一系列的状态和行为组成的,里氏替换原则说 ...

  8. window.parent.document解决原生js或jQuery 实现父窗口的问题

    做WEB前端开发的过程中,经常会有这样的需求,用户点击[编辑]按钮,弹出一个对话框,在里边修改相应的值,然后把修改后的值显示在原页面,最后点击保存. 用window.parent.document.g ...

  9. JQueryEasyUI-DataGrid显示数据,条件查询,排序及分页

    <html><head>    <title></title>    <script src="/jquery-easyui-1.3.4 ...

  10. OGNL是Object-Graph Navigation Language的缩写,它是一种功能强大的表达式语言

    OGNL是Object-Graph Navigation Language的缩写,它是一种功能强大的表达式语言(ExpressionLanguage,简称为EL),通过它简单一致的表达式语法,可以存取 ...