美文网首页
一些好用的代码

一些好用的代码

作者: 柑橘与香蕉 | 来源:发表于2020-05-15 09:37 被阅读0次
    //正则  
    let cash = '1234567890'  
    cash.replace(/\B(?=(\d{3})+(?!\d))/g, ',');//"1,234,567,890"  
    //非正则的优雅实现  
    function formatCash(str) {  
     return str.split('').reverse().reduce((prev, next, index) => {  
     return ((index % 3) ? next : (next + ',')) + prev  
     })  
    }  
    formatCash(cash);//"1,234,567,890"
    
    let rate = 3;  
    "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);//"★★★☆☆"
    
    let num = 2.443242342;  
    num = num.toFixed(4); //"2.4432"
    
    let array=[1, "1", 2, 1, 1, 3];  
    //拓展运算符(...)内部使用for...of循环  
    [...new Set(array)];//[1, "1", 2, 3\]  
    //利用Array.from将Set结构转换成数组  
    Array.from(new Set(array));//[1, "1", 2, 3\]
    
    Math.max方法可以求出给定参数中最大的数。
    
     Math.max('1','2','3.1','3.2');//3.2  
     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方法  
    Math.max.apply(null, arr);//3.2  
    Math.min.apply(Math, arr);//-1  
    //用拓展运算符  
    Math.max(...arr);//3.2  
    Math.min(...arr);//-1
    

    隐藏所有指定的元素

    const hide2 = (el) => Array.from(el).forEach(e => (e.style.display = 'none'));
    // 事例:隐藏页面上所有`<img>`元素?
    hide(document.querySelectorAll('img'))
    

    检查元素是否具有指定的类

    const hasClass = (el, className) => el.classList.contains(className)
    // 事例
    hasClass(document.querySelector('p.special'), 'special') // true
    

    如何切换一个元素的类?

    const toggleClass = (el, className) => el.classList.toggle(className)
    // 事例 移除 p 具有类`special`的 special 类
    toggleClass(document.querySelector('p.special'), 'special')
    

    获取当前页面的滚动位置

    const getScrollPosition = (el = window) => ({
      x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
      y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
    });
    // 事例
    getScrollPosition(); // {x: 0, y: 200}
    

    平滑滚动到页面顶部

    const scrollToTop = () => {
      const c = document.documentElement.scrollTop || document.body.scrollTop;
      if (c > 0) {
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, c - c / 8);
      }
    }
    // 事例
    scrollToTop()
    

    如何检查父元素是否包含子元素

    const elementContains = (parent, child) => parent !== child && parent.contains(child);
    
    // 事例
    elementContains(document.querySelector('head'), document.querySelector('title')); 
    // true
    elementContains(document.querySelector('body'), document.querySelector('body')); 
    // false
    

    相关文章

      网友评论

          本文标题:一些好用的代码

          本文链接:https://www.haomeiwen.com/subject/kspqohtx.html