zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    学期总结
    Sprint 2(第一天)
    学期总结
    实验四、主存空间的分配和回收
    阅读《构建之法》与链接有感.
    《构建之法》八、九、十章读后感
    Scrum领取任务
    实验三、进程调度模拟程序实验
    《构建之法》6-7章读后感
    实验二 作业调度模拟程序
  • 原文地址:https://www.cnblogs.com/zhidong123/p/6673906.html
Copyright © 2011-2022 走看看