zoukankan      html  css  js  c++  java
  • Javascript编程技巧

     代码调试

    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} // 生成新的传参
      ... // 接口请求代码
    }
  • 相关阅读:
    localStorage、sessionStorage、Cookie的区别及用法
    使用BottomNavigationView+ViewPager+Fragment的底部导航栏
    使用BottomNavigationView+ViewPager+Fragment的底部导航栏
    使用BottomNavigationView+ViewPager+Fragment的底部导航栏
    使用BottomNavigationView+ViewPager+Fragment的底部导航栏
    MySQL UDF Dynamic Library Exploit in *nix
    MySQL UDF Dynamic Library Exploit in *nix
    MySQL UDF Dynamic Library Exploit in *nix
    区块链隐私保护:MimbleWimble 和 Grin 简介
    去中心化金融项目 Bloqboard FAQ
  • 原文地址:https://www.cnblogs.com/jxjl/p/12730881.html
Copyright © 2011-2022 走看看