zoukankan      html  css  js  c++  java
  • javascript实用写法汇总v

    转Boolean类型

    !!'a'

    通过两个取反,可以强制转换为Boolean类型。

    转Number类型

      // String转化为Number
      console.log(+'45');
      // 日期输出时间戳
      console.log(+new Date);

    parseInt

    ~~,这种方法还可以将字符串转换成数字类型。向下取整。

      // ~~将字符串转换成数字类型,向下取整
      console.log(~~3.14159); //3
      console.log(~~'5.678'); //5
      console.log(-2.33 | 0 );  //-2
      console.log(2.33 >> 0 ); //2

    原理是~是一个叫做按位非的操作,会返回数值的反码,两次取反就是原数。|为位运算符,两个位只要有一个为1,那么结果都为1,否则就为0。>>运算符执行有符号右移位运算。都是二进制操作。 原因在于JavaScript中的number都是double类型的,在位操作的时候要转化成int。

    Hex

    十六进制操作。其实就是一个Array.prototype.toString(16)的用法
    看到这个词脑袋里冒出的肯定是css的颜色。

    做到随机的话可以这样

    console.log((~~(Math.random()*(1<<24))).toString(16)); 

    «
    左移操作,将数值二进制左移
    解释上面的1<<24的操作
    其实是1左移24位。000000000000000000000001左移24位,变成了1000000000000000000000000

    短路表达式,弃用if-else

    反面示例:

    if () { 
    // ... 
    } else if () { 
    // ... 
    } else { 
    // ... 
    }

    用 || 和 &&来简化if-else 。有时候用 !! 操作符也能简化if-else模式。例如这样:

    let a = b || 1;//b为真,a=b;b为假,a=1; 
    let c = b && 1;//b为真,c=1;b为假,c=b; 
    // 使用!!符号 
    let isValid = !!(value && value !== 'error');

    另外一种undefined

    let data = void 0; // undefined

    保留指定位数的小数点

    let num = 2.443242342; 
    num = num.toFixed(4); //"2.4432"

    注意, toFixed() 方法返回的是字符串而不是一个数字。

    单行写一个评级组件

    let rate1 = 1; 
    let star1 = "★★★★★☆☆☆☆☆".slice(5 - rate1, 10 - rate1);//"★☆☆☆☆"
    console.log(star1);
    let rate2 = 2; 
    let star2 = "★★★★★☆☆☆☆☆".slice(5 - rate2, 10 - rate2);//"★★☆☆☆"
    console.log(star2);
    let rate3 = 3; 
    let star3 = "★★★★★☆☆☆☆☆".slice(5 - rate3, 10 - rate3);//"★★★☆☆"
    console.log(star3);
    let rate4 = 4; 
    let star4 = "★★★★★☆☆☆☆☆".slice(5 - rate4, 10 - rate4);//"★★★★☆"
    console.log(star4);
    let rate5 = 5; 
    let star5 = "★★★★★☆☆☆☆☆".slice(5 - rate5, 10 - rate5);//"★★★★★"
    console.log(star5);

    金钱格式化

    let cash = '1234567890'
    let num = cash.replace(/B(?=(d{3})+(?!d))/g, ',');//"1,234,567,890" 
    console.log(num);
    
    //非正则的优雅实现 
    function formatCash(str) { 
     return str.split('').reverse().reduce((prev, next, index) => { 
     return ((index % 3) ? next : (next + ',')) + prev 
     }) 
    } 
    let num2 = formatCash(cash);//"1,234,567,890"
    console.log(num2);

    标准jsON的深拷贝

    let a = { 
     a1: 1, 
     b1: { c: 1, d: 2 } 
    }; 
    let b=jsON.parse(JSON.stringify(a)); 
    console.log(b);//{a1: 1, b1: {…}}

    数组去重

    ES6中利用Set去重比较牛

    let array=[1, "1", 2, 1, 1, 3]; 
    //拓展运算符(...)内部使用for...of循环 
    let arr1 = [...new Set(array)];//(4) [1, "1", 2, 3]
    console.log(arr1);
    
    //利用Array.from将Set结构转换成数组 
    let arr2 = Array.from(new Set(array));//(4) [1, "1", 2, 3]
    console.log(arr2);

    取数组中的最大值和最小值

    Math.max方法可以求出给定参数中最大的数。

    console.log(Math.max('1','2','3.1','3.2'));//3.2 
    console.log(Math.min(1,0,-1));//-1

    但如果是数组,就不能这样调用了。此时就用到了apply方法。Function.apply()是JS的一个OOP特性,一般用来模拟继承和扩展this的用途。所有函数都有apply(作用域链,参数)这个方法,当作用域链为null时,默认为上文,这个函数的“参数”,接收一个数组。

    let arr = ['1','2','3.1','3.2',0,-1]; 
    //用apply方法 
    console.log(Math.max.apply(null, arr));//3.2 
    console.log(Math.min.apply(Math, arr));//-1 
    //用拓展运算符 
    console.log(Math.max(...arr));//3.2 
    console.log(Math.min(...arr));//-1

    IIFE

    (function(arg) {
     // do something
    })(arg)

    实用价值在于可以防止全局污染。

    广州vi设计公司 http://www.maiqicn.com 我的007办公资源网 https://www.wode007.com

    Event

    写一个计数器

    通过创建一个闭包,把times封装到里面,然后返回函数。

    <html>
      <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
      </head>
      <body>
        <button>click me</button>
      </body>
    </html>
    
    <script>
    
    let foo = document.querySelector('.foo')
    foo.addEventListener('click', (function() {
     var times = 0
     return function() {
      times++
      console.log(times)
     }
    })(), false)
    
    </script>
  • 相关阅读:
    用面向对象的方法重写选项卡
    js 深入理解原型模式
    ECMAScript中的两种属性
    引用类型
    js 变量、作用域和内存问题
    html5 canvas画布尺寸与显示尺寸
    网页画板制作
    了解数组中的队列方法,DOM中节点的一些操作
    JavaScript中的数组对象遍历、读写、排序等操作
    this在方法赋值过程中无法保持(隐式丢失)
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13685513.html
Copyright © 2011-2022 走看看