前端进阶~~~必备技巧(二)

•  数字分隔符

             为了提高数字的可读性，您可以使用下划线作为分隔符：

        const numbers = 1_2_3_4_5
        console.log(numbers) // 12345

 

 

•   字符串转数字

        弱类型转换

　　　　 const num= '234’; 　　　　console.log(typeof +num) 

        强制类型转换

　　　　 const num= '234’; 　　　　console.log(typeof Number(num))

        转换函数

      const num= '234’; 　　　 console.log(typeof parseInt(num))      console.log(typeof parseFloat(num))

 

•  数字转字符串

　　　　显示转换

　　　　　　　const numa = 12345

　　　　　　　console.log( typeof(numa.toString()))

　　　　　　　console.log( typeof(String(numa))) 

 

　　　　隐世转换

　　　　　　　const numa = 12345

　　　　　　　console.log( typeof(numa +''))

 

•  数组中获取最小值/最大值

     使用 Math.min() 或 Math.max() 结合扩展运算符来查找数组中的最小值或最大值

  　const numbers = [6, 2, 4, 3, 9, 5];

     console.log(Math.max(...numbers)); // 9

     console.log(Math.min(...numbers)); // 2

   

•  缩短数组

  可以设置 length 属性来缩短数组

    const numbers = [1, 2, 3, 4, 5] 

      numbers.length = 3;

      console.log(numbers); // [1, 2, 3]

 

•  简写条件判断语句

  如果仅在判断条件为 true 时才执行函数，则可以使用 && 简写

  　　// 普通写法 if (true) { doSomething(); }

　　　　 // 简写 true && doSomething();

•  数组去重

   const numbers = [2, 5, 4, 4, 2, 6, 7, 3, 9];

 

　　　　console.log([...new Set(numbers)]);  // [2, 3, 4, 5, 6, 7, 9]

 

 

•  从数组中过滤所有虚值

 　　　const myArray = [1, undefined, NaN, 2, null, '@163.com', true, 13, false];

     console.log(myArray.filter(Boolean)); // [1, 2, "@163.com", true, 13]

 

•   妙用 includes

      const java= 'JavaScript'; const Arr= ['HTML', 'CSS', 'JavaScript'];

　　　　// 普通写法

　　　　　　if (java === 'JavaScript') { // do something }

　　　　// includes 写法

　　　　　　if (Arr.includes(java)) { // do something }

 

      . 妙用 reduce 对数组求和

    const myArray = [10, 20, 30, 40];
    const reducer = (total, currentValue) => total + currentValue;

    console.log(myArray.reduce(reducer)); // 100           

 

     .console.table() 打印特定格式的表格

         语法：

      // [] 里面指的是可选参数
      console.table(data [, columns]);

         参数：

            · data 表示要显示的数据。必须是数组或对象。

            · columns 表示一个包含列的名称的数组。

         实例：

      // 一个对象数组，只打印 firstName
      function Person(firstName, lastName) {
          this.firstName = firstName;
          this.lastName = lastName;
      }

      const john = new Person("John", "Smith");
      const jane = new Person("Jane", "Doe");
      const emily = new Person("Emily", "Jones");

      console.table([john, jane, emily], ["firstName"]);

 

 

  ·console.log() 样式

　　　　您知不知道可以使用 CSS 语句在 DevTools 中设置 console.log 输出的样式：

    ·元素的 dataset

     使用 dataset 属性访问元素的自定义数据属性 (data-*)：

   <div id="user" data-name="John Doe" data-age="29" data-something="Some Data">
       John Doe
   </div>

   <script>
        const user = document.getElementById('user');
       console.log(user.dataset); 
    // { name: "John Doe", age: "29", something: "Some Data" }
 
       console.log(user.dataset.name); // "John Doe"
       console.log(user.dataset.age); // "29"
       console.log(user.dataset.something); // "Some Data"
   </script>     

 

　　　　

　　　　

         觉得有用的笔记，大家共同进步~