如果你想确保你的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小技巧,让你写的代码有腔调的更多相关文章

  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. 12个十分实用的JavaScript小技巧

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

  6. 常用的一些javascript小技巧

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

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

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

  8. 8个Javascript小技巧

    1. 使用 + 字符可以转换成数字 比如要把一个字符串数字转换成数字,你可能会这样做: var one = '1'; var two = '2'; var numberOne = Number(one ...

  9. JavaScript小技巧整理篇(非常全)

    能够为大家提供这些简短而实用的JavaScript技巧来提高大家编程能力,这对于我来说是件很开心的事.每天仅花上不到2分钟的时间中,你将可 以读遍JavaScript这门可怕的语言所呈现给我们的特性: ...

随机推荐

  1. Java static关键字特点

    一.特点 1.随着类的加载而加载2.优先于对象存在3.被类的所有对象共享4.可以通过类名调用 二.调用特征 静态方法: 成员变量:只能访问静态变量 成员方法:只能访问静态成员方法 非静态方法: 成员变 ...

  2. 【BZOJ2790】[Poi2012]Distance 筛素数+调和级数

    [BZOJ2790][Poi2012]Distance Description 对于两个正整数a.b,这样定义函数d(a,b):每次操作可以选择一个质数p,将a变成a*p或a/p, 如果选择变成a/p ...

  3. Symfony 使用KnpTimeBundle

    使用time_diff时出现:diff.ago.hour; 解决:1:引入"knplabs/knp-time-bundle": "^1.7",https://g ...

  4. 怎样解决KEIL 5 编译KEIL4的带有RTX系统的project解决方法

        1.笔者个人对KEIL5与KEIL4的比較             相较于KEIL 5 的"华丽",笔者还是喜欢KEIL4的"内敛".主要也还是习惯了, ...

  5. tfboys——tensorflow模块学习(一)

    Tensorflow的基本使用 TensorFlow 的特点: 使用图 (graph) 来表示计算任务. 在被称之为 会话 (Session) 的上下文 (context) 中执行图. 使用 tens ...

  6. 队列(Queue)

    队列(Queue) Queue: 先入先出(FIFO)的数据结构. offer,add区别: 一些队列有大小限制,因此如果想在一个满的队列中加入一个新项,多出的项就会被拒绝. 这时新的 offer 方 ...

  7. 在linux系统下Git源码系统的文件下载

    Git是一个开源的分布式版本控制系统,在linux系统中下载git中的文件使用repo的很多. 网上有很多repo下载的地址失效,目前可用的链接在这里记录一下. 没有安装git的安装一下: sudo ...

  8. Spark MLlib框架详解

    1. 概述 1.1 功能 MLlib是Spark的机器学习(machine learing)库,其目标是使得机器学习的使用更加方便和简单,其具有如下功能: ML算法:常用的学习算法,包括分类.回归.聚 ...

  9. CSS3环形动画菜单

    在线演示 本地下载

  10. 第一篇 先用socket模拟web服务器

    一.用socket来模拟网站访问 socket为python2.7 #!/usr/bin/env python # -*- coding:utf-8 -*- import socket def han ...