转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 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); 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,3]; 拓展运算符(...)内部使用for...of循环 let arr1 = [...new Set(array)];(4) [1,3] console.log(arr1); 利用Array.from将Set结构转换成数组 let arr2 = Array.from(new Set(array));方法可以求出给定参数中最大的数。console.log(Math.max('1','2','3.1','3.2'));3.2 console.log(Math.min(1,-1));-1但如果是数组,就不能这样调用了。此时就用到了apply方法。Function.apply()是JS的一个OOP特性,一般用来模拟继承和扩展this的用途。所有函数都有apply(作用域链,参数)这个方法,当作用域链为null时,默认为上文,这个函数的“参数”,接收一个数组。
let arr = ['1','3.2',-1用apply方法 console.log(Math.max.apply(null,arr));3.2 console.log(Math.min.apply(Math,1)">-1 用拓展运算符 console.log(Math.max(...arr));3.2 console.log(Math.min(...arr));-1
IIFE
((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 class="foo">click me</button> </body> </html> <script> let foo = document.querySelector('.foo') foo.addEventListener('click',(() { var times = 0 return () { times++ console.log(times) } })(),false) </script>