24条超实用JavaScript基础技巧

2017年07月26日 12:02:58益点益滴1464

1 – 使用===,而不是==
==(或!=)操作符在需要的时候会自动执行类型转换。===(或!==)操作不会执行任何转换。它将比较值和类型,而且在速度上也被认为优于==。

2 – typeof、instanceof和constructor

var arr = ["a", "b", "c"];

typeof arr;   // return "object"

arr  instanceof Array // true

arr.constructor();  //[]

3 – 从数组中获取一个随机项

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];

var  randomItem = items[Math.floor(Math.random() * items.length)];

4 – 在特定范围内获取一个随机数

这个代码片段在你想要生成测试数据的时候非常有用,比如一个在最小最大值之间的一个随机薪水值。

var x = Math.floor(Math.random() * (max - min + 1)) + min;

5 – 生成一个随机的数字字母字符串

function getRandomAlphaNum(len) {

                var rdmString = "";

                for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));

                return rdmString.substr(0, len);

            }

console.log(getRandomAlphaNum(6)); //cs7c8s

特意查了一下Math.random()生成0到1之间的随机数,number.toString(36)是将这个数字转换成36进制(0-9,a-z),最后substr去掉前面的“0.”字符串

6 – 在打乱一个数字数组

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];

numbers = numbers.sort(

    function(){

        return Math.random() - 0.5

    });

7 – 在Java、C#、PHP和很多其他语言中都有一个经典的 trim 函数,用来去除字符串中的空格符,而在JavaScript中并没有,所以我们需要在String对象上加上这个函数。

function trim(str){ //删除左右两端的空格

    return str.replace(/(^\s+)|(\s+$)/g, "");

}

[去掉字符串的前后空格,不包括字符串内部空格]

8 – 附加(append)一个数组到另一个数组上

直接改变array1

var array1 = [12 , "foo" , {name: "Joe"} , -2458];

var array2 = ["Doe" , 555 , 100];

Array.prototype.push.apply(array1, array2);

返回值是一个新的数组,不改变原数组

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1] = "Adrew"

arr2[2] = "Martin"

document.write(arr.concat(arr2))//George,John,Thomas,James,Adrew,Martin

document.write(arr)//George,John,Thomas

9 – 将arguments(类数组)对象转换成一个数组

var argArray = Array.prototype.slice.call(arguments);

10 – 验证参数是否是数字(number)

function isNumber(n){

    return !isNaN(parseFloat(n)) && isFinite(n);

}

11 – 验证参数是否是数组

Array.isArray(obj);

12 – 获取一个数字数组中的最大值或最小值

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];

var maxInNumbers = Math.max.apply(Math, numbers);

var minInNumbers = Math.min.apply(Math, numbers);

13 – 清空一个数组

var myArray = [12 , 222 , 1000 ];

myArray.length = 0; // myArray will be equal to [].

14 – 使用 splice来删除一个数组中的项。

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ];

items.length; // return 11

items.splice(3,1) ;

items.length; // return 10

var personFromString = JSON.parse(stringFromPerson);

21 – 避免使用 eval() 和 Function 构造函数

使用 eval 和 Function 构造函数是非常昂贵的操作,因为每次他们都会调用脚本引擎将源代码转换成可执行代码。

21 – 避免使用 for-in 来遍历一个数组
避免使用这样的方式:

var sum = 0;

for (var i in arrayNumbers) {

    sum += arrayNumbers[i];

}

更好的方式是:

var sum = 0;

for (var i = 0, len = arrayNumbers.length; i < len; i++) {

    sum += arrayNumbers[i];

}

附加的好处是,i 和 len 两个变量的取值都只执行了一次,会比下面的方式更高效:

for (var i = 0; i < arrayNumbers.length; i++)

22 – 使用 switch/case 语句,而不是一长串的 if/else

在判断情况大于2种的时候,使用 switch/case 更高效,而且更优雅(更易于组织代码)。但在判断的情况超过10种的时候不要使用 switch/case

function getCategory(age) {

    var category = "";

    switch (true) {

        case isNaN(age):

            category = "not an age";

            break;

        case (age >= 50):

            category = "Old";

            break;

        case (age <= 20):

            category = "Baby";

            break;

        default:

            category = "Young";

            break;

    };

    return category;

}

getCategory(5);  // will return "Baby"

【译者注:一般对于数值范围的判断,用 if/else 会比较合适。 switch/case 更适合对确定数值的判断】

23 – 为 XMLHttpRequests 设置超时。

var xhr = new XMLHttpRequest ();

xhr.onreadystatechange = function () {

    if (this.readyState == 4) {

        clearTimeout(timeout);

        // do something with response data

    }

}

var timeout = setTimeout( function () {

    xhr.abort(); // call error callback

}, 60*1000 );

xhr.open('GET', url, true);

xhr.send();

24 – 原始运算符始终比函数调用要高效

使用

var min = a < b ? a b;

A[A.length] = v;

不使用

var min = Math.min(a,b);

A.push(v);

超赞,真给力!嗯,必须鼓励~

打赏 1

欢迎点评!或反馈疑问...

支持Ctrl+Enter提交
暂无留言,快抢沙发!
账号:mxy310@163.com[复制]
账号:77940140[复制]