总结一下最近学到的10个JS技巧

悠悠 2022-09-24 14:20 165阅读 0赞

**记录一些常用的JavaScript技巧**

## 1.使用`!!`操作符转换Boolean值 ##

当我们要检验一个值是否为`true`或`false`时，可使用`!!`来快速转换为布尔值，如果值为`0`、`NaN`、`null`、`undefined`、`""`时，返回`false`，其余值返回`true`。

var a='123';
        var b=0;
        console.log(!!a);     //true
        console.log(!!b);     //false

## 2.使用+将字符串转换为数字 ##

这个方法只适合全部为数字的字符串，否则将转为`NaN`。当字符串中存在非数字时最好使用`parseInt`或者`parseFloat`.

var a='1234';
    console.log(+a);            //1234
    console.log(typeof(+a));    //number
    var b='1234abc';
    console.log(+a);            //NaN
    console.log(typeof(+a));    //number
    console.log(parseInt(a));   //1234

## 3.使用三目运算符或`&&`、`||`简化`if`条件语句 ##

使用`&&`可简化单条`if`语句。

if(connect){
        login();
    }
    //可简化为
    connect&&login();

`if`判断语句：

if(a){
        return b;
    }else{
        return c;
    }
    
    //可简写为
    return a?b:c
    //或
    return a&&b||c

## 4.使用||设置默认参数 ##

如果||操作符前面的参数为`false`，则返回`||`后面的参数。

function User(name,age){ 
        this.name=name||'wei';
        this.age=age||23;
    }

## 5.在循环中缓存arr.length ##

数组循环时如果设置`i<arr.length`时，每次循环都会计算数组的长度，当循环时不改变数组长度时可以先缓存数组的长度再循环。

for(var i=0,l=arr.length;i<length;i++){}

## 6.用slice复制数组和获取数组最后的元素 ##

`slice()`方法用于截取数组，如果只输入一个参数则默认截取到数组末尾，如果输入负数则在数组最后进行截取。

//复制数组
    var arr=[1,2,3,4,5];
    var arr1=[];
    arr1=arr.slice(0);  
    console.log(arr1);      //[1,2,3,4,5]
    //获取数组末尾的元素
    var a=arr.slice(-1);
    var b=arr.slice(-2);
    var c=arr.slice(-3);
    console.log(a);         //[5]
    console.log(b);         //[4,5]
    console.log(c);         //[3,4,5]

## 7.数组截断 ##

如果一个数组的长度为10，但是现在只想要数组的前5个元素，则可以设置`arr.length=5`即可。

var arr=[1,2,3,4,5,6,7,8,9,10];
    console.log(arr);   //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    arr.length=5;
    console.log(arr);   //[1, 2, 3, 4, 5]

## 8.合并数组 ##

可以使用`concat()`合并两个数组

var arr1=[1,2,3];
    var arr2=[4,5,6];
    var arr3=arr1.concat(arr2);
    console.log(arr3);      //[1, 2, 3, 4, 5, 6]
    //如果想将两个数组合并到第一个数组中，即将arr2添加到arr1中
    Array.prototype.push.apply(arr1,arr2);
    //或者
    //[].push.apply(arr1,arr2)
    console.log(arr1);      //[1, 2, 3, 4, 5, 6]

## 9.将arguments转换为数组 ##

`arguments`是一个对象，但是拥有数组的特质，有`length`属性，也可以使用方括号访问，如`arguments[3]`访问传入的第四个参数。要将`arguments`转换为数组可以使用`call`方法使`slice`方法在`arguments`中执行。

function A(a,b,c){ 
        Array.prototype.slice.call(arguments);
        //或者
        //[].slice.call(arguments)
    }

## 10.数组元素乱序 ##

数组乱序，可以从数组中随机取出元素放入到一个新的数组中

var arr=[1,2,3,4,5];
    var arr1=[];
    for(var i=0;i<arr.length;){
        var j=Math.floor(Math.random()*arr.length);
        arr1.push(arr[j]);
        //删除添加到新数组中的元素，防止重复，arr长度会减一
        arr.splice(j,1);
    }

还可以使用`sort()`方法来为数组重新排序，`sort()`方法可以不使用参数，也可以使用一个函数当做参数，这个函数可以传入两个值，如果`a<b`,则在数组中`a`出现在`b`之前，返回一个小于`0`的数,如果`a>b`，在数组中`a`出现在`b`之后，返回一个大于`0`的数，如果相等，返回`0`.  
利用`sort()`乱序

var arr=[1,2,3,4,5];
    arr.sort(function(){ return Math.random()-0.5});