关于php:前端JavaScript小技巧

在JavaScript世界里,有些操作会让你无奈了解,然而却无比优雅!

  1. 有时候读取变量属性时,他可能不是Ojbect。这个这个你就要判断这个变量是否为对象,如果是在如援用

    var obj;
    if(obj instanceof Object){
      console.log(obj.a);
    }else{
      console.log('对象不存在');
    }

    ES6中有简便写法,能够帮咱们简短代码,从而更加明确

    var obj;
    console.log(obj?.a || '对象不存在');
  2. 1,2,3,4,5,6….10,11,12 小于10的后面补0
    其实咱们用slice函数能够奇妙解决这个问题
    slice(start,end);
    start:必须。规定从何处开始选取。如果是正数,那么它规定从数组尾部开始算起的地位。也就是说,-1 指最初一个元素,-2 指倒数第二个元素,以此类推。
    end :可选。规定从何处完结选取。该参数是数组片断完结处的数组下标。如果没有指定该参数,那么切分的数组蕴含从 start 到数组完结的所有元素。如果这个参数是正数,那么它规定的是从数组尾部开始算起的元素。

    var list=[1,2,3,4,5,6,7,8,9,10,11,12,13];
    list=list.map(ele=>('0' + ele).slice(-2));
    console.log(list);

  3. 打印可视化console.table()

    var obj = { name: 'Jack' };
    console.table(obj);
    obj.name= 'Rose';
    console.table(obj);

  4. 获取数组中的最初的元素
    数组办法slice()能够承受负整数,如果提供它,它将从数组的开端开始截取数值,而不是结尾。

    let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    console.log(array.slice(-1)); // Result: [9]
    console.log(array.slice(-2)); // Result: [8, 9]
    console.log(array.slice(-3)); // Result: [7, 8, 9]
  5. es6模板字符串

    let name = "Charlse"
    let place = "India";
    let isPrime = bit =>{
      return (bit === 'P'? 'Prime' : 'Nom-Prime')
    }
    let messageConcat = `Mr.name' is form ${place} .He is a   
    ${isPrime('P')} member`;
  6. H5语音合成
    在网页端实现将指定的文字进行语音合成并进行播报。
    应用HTML5的Speech Synthesis API就能实现简略的语音合成成果。

    <input id="btn1" type="button" value="点我" onclick="test();" />
    <script>
      function test() {
     const sos = `阿尤!不错哦`;
     const synth = window.speechSynthesis;
     let msg = new SpeechSynthesisUtterance(sos);
     synth.speak(msg)
      }
    </script>

    而后点击按钮,就会触发test办法的执行实现语音合成
    这里举荐应用Chrome浏览器,因为HTML5的反对度不同

  7. 数字取整

    let floatNum = 100.5;
    let intNum = ~~floatNum;
    console.log(intNum); // 100

  8. 字符串转数字

    let str="10000";
    let num = +str;
    console.log(num); // 10000
  9. 替换对象键值

    let obj = {
     key1: "value1",
     key2: "value2"
    };
    let revert = {};
    Object.entries(obj).forEach(([key, value]) => revert[value] = key);
    console.log(revert);

  10. 数组去重

    let arrNum = [
     1, 2, 3, 4, 5, 6, 7, 8, 9, 0,
     1, 2, 3, 4, 5, 6, 7, 8, 9, 0
    ];
    let arrString = [
     "1", "2", "3", "4", "5", "6", "7", "8", "9", "0",
     "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
    ];
    let arrMixed = [
     1, "1", "2", true, false, false, 1, 2, "2"
    ];
    arrNum = Array.from(new Set(arrNum));
    arrString = [...new Set(arrString)];
    arrMixed = [...new Set(arrMixed)];
    console.log(arrNum); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
    console.log(arrString); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
    console.log(arrMixed); // [1, "1", "2", true, false, 2]
  11. 数组转化为对象

    const arr = [1,2,3]
    const obj = {...arr}
    console.log(obj)
  12. 合并对象

    const obj1 = { a: 1 }
    const obj2 = { b: 2 }
    const combinObj = { ...obj1, ...obj2 }
    console.log(combinObj)

    也就是通过开展操作符(spread operator)来实现。

  13. 获取数组中的最初一项

    let arr = [0, 1, 2, 3, 4, 5];
    const last = arr.slice(-1)[0];
    console.log(last);
  14. 一次性函数,实用于初始化的一些操作

    var sca = function() {
     console.log('msg')//永远只会执行一次
     sca = function() {
         console.log('foo')
     }
    }
    sca()        // msg
    sca()        // foo
    sca()

进步工作效率,缩小代码量,升高键盘磨损水平
我心愿你喜爱它并学到了一些新货色。
感激你的浏览,编程高兴!

.

六年代码两茫茫,不思量,自难忘

6年资深前端主管一枚,分享技术干货,我的项目实战经验,面试领导

关注博主不迷路~

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据