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),[])