js小技巧

1.控制台打印样式

• 控制台打印,前面加上%c,后面的写法和css一样.

  console.log("%c My name is syz", "color:red;font-size:16px");
      console.log("%c hahaha", "font-weight:blod;text-shadow:3px 4px #ccc");
  

2.表格console

• 通过如果想打印一个数组里面放了多个对象，可以通过console.table来打印出来一个关于这个数组中所有对象的一个表格。

  var a = { name: 'syz', age: 18 }
      var b = { name: 'aaa', age: 20 }
      var c = { name: 'bbb', age: 22 }
      console.table([a, b, c])
  

  

3.时间console

• 通过加上开始和结束可以知道中间运行的时长，性能分析时用

  console.time('time')
      var sum = 0
      for (var i = 0; i < 10000000; i++) {
        sum += i
      }
  console.timeEnd('time')
  

4.任何类型转Boolean型

• 在前面加上！！即可

  console.log(!!a);
  

• 也可以在数字的后面拼接一个空的字符串，将这个数字转化为字符串类型

  console.log(typeof (sum + ''));
  

• 也可以在字符串前面加一个+号，把字符串类型转化为数字类型

  var m = '6578i'
      console.log(typeof (+m));
  

5.进制转化

• 十进制转化为16/8进制以及16/8进制转化为10进制

	// 10进制转化为16进制
    console.log((255).toString(16));
    // 10进制转化为16进制
    console.log((255).toString(8));

    // 16进制转化为10进制
    console.log(parseInt("ff",16));
    // 8进制转化为10进制
    console.log(parseInt("377",8));

6.将伪数组转化为真正的数组

• 伪数组有数组的一些方法，比如length，但不是真正的数组，并没有数组中的全部方法。

var lis = document.querySelectorAll('.list>li')
    console.log(lis);
    let lisres = Array.from(lis)
    console.log(lisres);
    let lisres1 = Array.prototype.slice.call(lis)
    console.log(lisres1);

以下是伪数组（上面）和真正的数组（下面）的区别

7.对数字进行格式化

• 将数字三位进行分割

//数字三位用逗号隔开进行格式化
    let num = 12345
    let formatNum = num.toLocaleString('en-US')
    console.log(formatNum);
    // 有小数，默认为三位并且四舍五入，可以设置小数后5位
    let num1 = 1234567.34678
    let formatNum1 = num1.toLocaleString('en-US', {
      minimumFractionDigits: 5
    })
    console.log(formatNum1);