javascript实用写法汇总

转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)

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

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>

链接: https://fly63.com/article/detial/9239