Javascript编程技巧

Posted 2021-02-28 jxjl

 代码调试

console.log(‘123‘)    //纯粹打印显示
console.dir(Array)    //纯粹打印显示
console.trace()       //向标准错误流输出当前的调用栈。
console.error(‘123‘)  //输出的log前有个黄色的图标
console.warn(‘123‘)   //输出的log前有个红色的图标
console.time(‘A‘)
for(let i=0; i< 10000; i++){
    //这里放函数代码
}
console.timeEnd(‘A‘)   //这里会打印出中间执行的代码花费了多长时间

 if判断多个值

• 不佳的写法

if(val === ‘a‘ || val === ‘b‘ || val === ‘d‘) { 
　　... 
}

• 改进如下：↓

if([‘a‘, ‘b‘, ‘d‘].includes(val)){

     ...
}

 小数取整

1.234 | 0        //1
-1.232 | 0      //-1

 字符串转数字

+‘0123‘   //123
+‘1.1‘   //1.1

 完美的判断数据类型

const isType = type => val => type === Object.prototype.toString.call(val).slice(8, -1)     // 此处运用了箭头函数+闭包
const isArray = isType(‘Array‘)  // 判断是否为数组
const isObject = isType(‘Object‘) // 判断是否为对象
const isNull = isType(‘Null‘) // 判断是否为null
const isUndefined = isType(‘Undefined‘) // 判断是否为undefined
const isFunction = isType(‘Function‘) // 判断是否为函数
const isRegExp = isType(‘RegExp‘) // 判断是否为正则表达式
const isString = isType(‘String‘) // 判断是否是字符串
const isNumber = isType(‘Number‘) // 判断是否为number
const isDate = isType(‘Date‘) // 判断是否是日期
console.log(isArray([]))   // true

过滤空值

const arr = [undefined, null, "", 0, false, NaN, 1, 2].filter(Boolean)  // arr => [1, 2] 

变量值交换

let [a, b] = [1, 2]
[a, b] = [b, a]

 日期对象的隐式转换

console.log(+new Date())             //1567911660998
console.log(+new Date(‘2019/09/08 11:01:01‘))     //  1567911661000

 数组去重

[...new Set(arr)]

 时间字符串直接比较大小

console.log(‘10:00‘>‘09:00‘);  // true

 复杂数据的可靠获取

function safeGet(run, defaultValue) {
    try {
        return run()
    } catch(e){
        return defaultValue 
    } 
}
safeGet(() => window.a.b.d.c.adf, ‘0‘)  // 0

 格式化JSON

console.log(JSON.stringify({ alpha: ‘A‘, beta: ‘B‘ }, null, ‘	‘));
// Result:
// ‘{
//     "alpha": A,
//     "beta": B
// }‘

 高级定时器

setTimeout(function(){
    //处理中
    setTimeout(arguments.callee, interval);
}, interval);

 数组分块

setTimeout(function(){
     //取出下一个条目并处理
     var item = array.shift();
     process(item);
     //若还有条目，再设置另一个定时器
    if(array.length > 0){
        setTimeout(arguments.callee, 100);
    }
}, 100);

 函数默认值

export const getData = function (body) {
  const defaultBody = {
    codeType: this.tableObj.codeType,
    codeName: this.tableObj.codeName,
    page: 1,
    limit: 10
  }
  const newBody = {...defaultBody, ...body} // 生成新的传参
  ... // 接口请求代码
}