JavaScript中类型转换技巧
1. 强类型转换成数字
1.1 String强制转换成数字
可以用*1来转化为数字，实际上是调用的.valueOf方法，然后使用Number.isNaN来判断是否为NaN，或者使用a !== a 来判断是否为NaN,因为NaN !== NaN
'32' * 1 // 32
'abc' * 1 // NaN
null * 1 // 0
undefined * 1 // NaN
1* { valueof:() => '3' } // 3
还有：+把字符串转换成数字
+ '123' // 123
+ 'abc' //NaN
+ '' // 0
+ null // 0
+ undefined // NaN
+ { valueOf: () => '3' } // 3
1.2 Object强制转换成String
可以使用字符串 + object的方式来转化对象为字符串，实际上调用的是.toString()方法。
'the Math object:' + Math // 'the Math Object: [Object Math]'
'then JSON object:' + JSON // 'then JSON object: [Object JSON]'
当然也可以覆盖对象的toString 和 valueOf方法来自定义对象的类型转换:
2 * { valueOf:() => '3' } // 6
'j' + {toString: () => 's' } // 'js'
《eFFective Javascript》P11：当+用在连接字符串时，当一个对象既有toString方法又有valueOf方法时候，JS通过盲目使用valueOf方法来解决这种含糊。对象通过valueOf方法强制转换为数字，通过toString方法强制转换为字符串。
'' + { toString: () => 'S', valueOf: () => 'J'} // J
1.3 我们知道JS中有一些假值：false,null,0,NaN,undefined,' ',可以使用Boolean构造函数来进行一次转换
const compact = arr => arr.filter(Boolean)
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]) // [ 1, 2, 3, 'a', 's', 34 ]
1.4 双位运算符 ~~
可以使用双位操作符来代替Math.floor()。双否定位操作符的优势在于它执行相同的操作运行速度更快
Math.floor(4.9) // 4
//简写为：
~~4.9 // 4
不过要注意的，对于整数来说~~运算结果与Math.floor()运算结果相同，而对于负数来说不相同
~~4.5 // 4
Math.floor(4.5) // 5
~~-4.5 // -4
Math.floor(-4.5) // -m5
1.5 短路运算符
-
&&为取假值，从左到右依次判断，如果遇到一个假值，就返回假值，以后不再执行 -
||为取真值，从佐到右依次判断，如果遇到一个真值，就返回真值，以后不再执行
let param1 = expr1 && expr2
let param2 = expr1 || expr2
| 运算符 | 实例 | 说明 |
|---|---|---|
&& |
expr1&&expr2 |
如果expr1 能转换成false则返回expr1,否则返回expr2. 因此, 在Boolean环境中使用时, 两个操作结果都为true时返回true,否则返回false. |
|| |
expr1||expr2 |
如果expr1能转换成true则返回expr1,否则返回expr2. 因此,在boolean环境(在if的条件判断中)中使用时, 二者操作结果中只要有一个为true,返回true;二者操作结果都为false时返回false. |
! |
!expr |
如果单个表达式能转换为true的话返回false,否则返回true. |
| 因此可以用来做很多有意思的事情，比如给变量赋初值： |
let variable1
let variable2 = variable1 || 'foo'
也可以用来进行简单的判断，取代冗长的if语句:
let variable = param && param.prop
1.6 取整 | 0
对于一个数字 | 0可以取整，负数也同样适用，num | 0
1.3 | 0 // 1
-1.9 | 0 // -1
1.7 判断奇偶数，负数也同样适用,num & 1
const num = 3
!!(num & 1) // true
!!(num % 2) // true
2 函数
2.1 函数默认值
func = (l,m = 3,n = 4) => (l * m * n)
func(2) // 24
2.2 强制参数
默认情况下，如果不向函数参数传值，那么JS会将函数参数设置为undefined。其它一些语言规则会发出警告或者错误。要执行参数分配，可以使用if语句抛出未定义的错误，或者可以利用强制参数。
mandatory = () => {
throw new Error('缺少参数')
}
foo = （bar = mandatory() ） => {
return bar // 这里如果不传入参数，就会执行manadatory函数报出错误
}
2.3 隐式返回值
返回值是我们通常用来返回函数最终结果的关键字，只有一个语句的箭头函数，可以隐式返回结果（函数必须省略大括号，以便省略返回关键词：return）
要返回多行语句，比如对象文本，需要使用( )而不是{ }来包裹函数体。这样可以确保代码以单个语句的形式进行求值。
function calcCircumference(diameter) {
return Math.PI * diameter
}
// 简写为：
calcCircumference = diameter => (
Math.PI * diameter;
)
2.4 惰性载入函数
在某个场景下我们的函数中有判断语句，这个判断依据在整个项目运行期间一般不会变化，所以判断分支在整个项目运行期间只会运行某个特定分支，那么就可以考虑惰性载入函数
function foo () {
if ( a != b){
console.log('aaa')
}else {
console.log('bbb')
}
}
function foo () {
if ( a != b ){
foo = function () {
console.log('aaa')
}
}else {
foo = function () {
console.log('bbb')
}
}
return foo ()
}
2.5 一次性函数
可以在函数体里覆盖当前函数，那么可以创建一个一次性的函数，重新赋值之前的代码相当于只运行了一次，适用于运行一些只需要执行一次的初始化代码
var sca = function() {
console.log('msg')
sca = function() {
console.log('foo')
}
}
sca() // msg
sca() // foo
sca() // foo
3 代码复用
3.1 Object [key]
虽然将foo.bar写成foo['bar']是一个常见的做法，但是这种做法构成了编写可重用代码的基础，许多框架都使用了这种方法，比如element的表单验证
const schema = {
first: {
required:true
},
last:{
required:true
}
}
const validate = (schema,values) => {
for(let i in schema){
if(schema[i].required){
if(!values[i]){
return false
}
}
}
return true
}
4 数字
4.1 不同进制表示法
es6新增了不同进制的书写格式，在后台传参的时候需要注意这一点
29 // 10进制
035 // 8进制29 原来的方式
0o35 // 8进制29 es6的方式
0x1d // 16进制29
0b11101 // 2进制29
4.2 精确到指定位数的小数
将数字四舍五入到 指定的小数位数，使用Math.round ()和模板字面量将数字四舍五入为指定的小数位。省略第二个参数decimals,数字将被四舍五入到一个整数。
const round = (n,decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)
round(1.345, 2)
round(1.345, 1)
5 数组
5.1 reduce 方法同时实现map和filter
假设现在有一个数列，你希望更新它的每一项（map的功能），然后筛选出一部分，（filter的功能）。如果是先使用map然后filter的话，需要遍历两次。
const numbers = [10,20,30,40]
const doubledOver50 = numbers.reduce((cr,pr,arr) => {
pr = pr * 2
if(pr > 50){
cr.push(pr)
}
return cr
},[])
5.2 统计数组中相同项的个数
let cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota']
let carsObj = cars.reduce((cr,pr,arr) => {
obj[pr] = obj[pr]? ++obj[pr]:1
return obj
},{})
5.5 将数组平铺到指定深度
使用递归，为每个深度级别depth递减1。使用Array.reduce()和Array.concat()来合并元素或数组，基本情况下，depth等于1停止递归
const flatten = (arr,depth = 1) =>
depth !=1
?arr.reduce((cr,pr,arr) => cr.concat(Array.isArray(pr)?flatten(pr,depth-1):pr),[])
:arr.reduce((cr,pr)=>cr.concat(pr),[])
