javaScript实用技巧

lela
103 阅读4分钟

1使用对象代替列表参数

  • 当我们使用参数列表传递参数时，如果参数较多，就可能出现一些问题， 例如我们必须按照参数列表的顺序进行传递。如果使用TypeScript进行编写，还需要编写使可选参数列在强制参数之后。

  • 当函数参数较多时，可以考虑使用对象形式进行传参。以对象形式传递参数时，传递可选参数不需要再最后，参数顺序也不重要，这样做也比参数列表更容易阅读和理解通过对象传递内容。

    // 参数列表传递
    function getItem(pricc,quantity,name,description){}
    getItem(15,undefined,'bananas','fruit')
    
    // 对象参数传递
    function getItem(args){
        const {price,quantity,name,description} = args;
    }
    getItem({name:'bananas',price:0,quantity:1,desciption:'fruit'});

2.将值转换为布尔值

  • 在javaScript，以下这些值在布尔值转换时都转换为false，所有其他值都转换为true
  1. undefined
  2. null
  3. 0
  4. -0
  5. NaN
  6. “”

通常我们会使用Bollean()显示的将这些值转换为布尔值，实际上，我们还可以使用！运算符进行转换，我们知道！是将值转换为布尔值并反转它，两个！！相当于直接将非布尔值转换为布尔值，与Boolean（）相比，此方法性能更好，因为是计算机操作。

!!undefined //false
!!"" //true
!!null //fasle
!!NAN //fasle

3.获取数组中最后一项

通常我们想获取数组中最后一项，通常会这样写

const arr = [1,2,3,4,5],
arr[arr.length-1] // 5

其实，我们也可以使用数组的slice方法来获取最后一个元素

arr.slice(-1)

当我们将slice方法的参数设置为负值时，它会从数组后面开始截取数组值，如果要借去最后两个值，则传入-2.

4.使用switch case性能比if/else好，代码更加整洁

if（1==month）{days=31}
else if(2==month){days=29}
else if(3==month){days=31}
else if(4==month){days=30}
else if(5==month){days=31}

switch(month){
case 1:days =31;break;
case 2:days =29;break;
case 3:days =31;break;
case 4:days =30;break;
case 5:days =31;break;
}

5.检查是否为空对象

通常我们想检查对象是否为空，可以使用以下方法

Object.keys({}).length //0
Object.keys({key:1}).length //1
Object.keys()方法用于获取对象的键，它将返回一个包含这些键值的数组，如果返回的数组长度为0，则该对象为空

6.删除数组元素

通常如果我们想删除一个数组的元素，可以使用delete来完成，但是删除会元素会变成undefined，不会消失，且执行消耗很多时间，所以大部分情况下不会满足我们的需求，所以我们可以使用数组的slice方法来删除数组的元素

const array = ["a","b","c","d"]
array.splice(0,2) //[a,b]

7.获取查询参数

一般我们想获取URL中的参数，可以使用window对象上的属性

window.location.search

如果一个URL是google.com?project=j&type=1 那么通过上面的操作你会得到?project=j&type=1，如果你想得到其中一个参数，你可以这样做。

let type = new URLSearchParams(location.search).get('type');

8.缩短console.log()

每次debug都要写很多console.log()会比较麻烦，可以使用以下形式简写

const c = console.log.bind(document);
c(222)
c('hello world')

9.动态声明对象属性

如果你想动态滴对一个对象声明属性，你可以这样做

const dynamic = 'color';
var item = {
    brand:'Ford',
    [dynacmic]:'blue'
}
console.log(item); // {brand:'Ford',color:'blue'}

10.将类数组转换为数组

可以使用以下方法将类数组转换为数组

Array.prototype.slice.call(arguments);

此外还可以使用扩展运算符
[...arguments]

11.验证undefined和null

如果有这样的代码

if(a === null || a === undefined){
   doSomething();
}

我们可以使用null合并操作符来简化上面的代码，这样，仅当a未定义或为空时，才会执行控制合并运算符之后的代码,空合并运算符？？是一个逻辑运算符，当左侧操作符为null或未定义时返回其右侧操作数，否则返回左侧操作数

a ?? doSomething()

12.拼接阵列

如果我们想组合几个数组，我们可以使用扩展运算符

const start = [1,2];
const end = [5,6,7];
cosnt numbers = [9,...start,...end, 8]

或者使用数组的contact方法

const start = [1,2,3,5];
const end = [4,6,7];
start.contact(end);

13.清空数组

如果要清空数组，可以将数组的长度设置为0

let array = ['a','b','c','d','E']
array.length = 0;
console.log(array) // 0

14.简化判断

如果又如下判断

if(a===undefined || a===10 || a===15 || a===null){
  //...
}

可以使用数组来简化这种判断

if([undefined,10,15,null].includes(a)){
}

15.逻辑运算符

如果有这样的代码片段：

if(a>10){
dosomething(a)
}

可以使用逻辑运算符重写

a > 10 && dosomething(a)

16.初始化一个数组

如果你想初始化一个指定长度的一维数组并指定默认值，你可以这样做
const array = Array.(6).fill('');
// ['','','','','',''];
avatar
文章
阅读
粉丝