编写更加简洁的JS代码

Array.includes处理多条件判断

includes在IE上不兼容，可以用indexof代替

错误示例

test (type) {
    if (type === 'name' || type === 'value' || type === 'list') {
        console.log(type)
    }
}

正确示例

test (type) {
    let typeArr = ['name', 'value', 'list']
    if (typeArr.includes(type)) {
        console.log(type)
    }
}

减少if...else嵌套，提前return

错误示例

test (type) {
    let typeArr = ['name', 'value', 'list']
    if (type) {
        if (typeArr.includes(type)) {
            console.log(type)
        } else {
            console.log('传递了错误的type类型')
        }
    }
}


function test (prop, order) {
    if(prop == 'roomNum'){
        if(order == 'descending'){
            console.log('room_1')
        }else{
            console.log('room_0')
        }
    }else if(prop == 'intime'){
            if(order == 'descending'){
            console.log('intime_1')
            }else{
            console.log('intime_0')
            }
    }else{
        console.log('intime_1')
    }
}

正确示例

test (type) {
    if (!type) return
    let typeArr = ['name', 'value', 'list']
    if (!typeArr.includes(type)) {
        console.log('传递了错误的type类型')
        return
    }
    console.log(type)
}


function test (prop, order) {
var obj = {
    roomNum: {
        descending: 'room_1',
        default: 'room_0'
    },
    intime: {
        descending: 'intime_1',
        default: 'intime_0'
    }
}
if (!obj[prop]) {
    console.log('intime_1')
    return
}
var sort = obj[prop][order] || obj[prop]['default']
console.log(sort)
}

使用函数默认参数和结构

错误示例

// 默认参数
test (type, data) {
    let info = type ? type : 'info'
    let user = data ? data : 'user'

    console.log(info, user)
}

// 解构
test (obj) {
    if (!(obj && obj instanceof Object)) return
    let name = obj.name ? obj.name : 'info'
    let value = obj.value ? obj.value : 'user'

    console.log(name, value)
}

正确示例

// 默认参数
test (type = 'info', data = 'user') {
    console.log(type, data)
}

// 解构
test ({name, value} = {}) {
    console.log(name, value)
}

使用Map或Object字面量代替switch

错误示例

test (type) {
    if (!type) return
    switch (type) {
        case 'name':
            console.log('你传入了名字')
            break
        case 'phone':
            console.log('你传入了手机号')
            break
        case 'email':
            console.log('你传入了邮箱')
            break
        default:
            console.log('错误类型')
            break
    }
}

正确示例

// Map
test (type) {
    if (!type) return
    const handleData = new Map()
        .set('name', '你传入了名字')
        .set('phone', '你传入了手机号')
        .set('email', '你传入了邮箱')

    console.log(handleData.get(type) || '错误类型')
}

// 字面量
test (type) {
    if (!type) return
    const handleData = {
        name: '你传入了名字',
        phone: '你传入了手机号',
        email: '你传入了邮箱'
    }
    
    console.log(handleData[type] || '错误类型')
}

map想较与Object的优势在于其key可以是任何类型

map以正则为KRY

window.onload = function () {
    const actions = () => {
        const functionA = () => { console.log(1) }
        const functionB = () => { console.log(2) }
        const functionC = () => { console.log(3) }
        return new Map([
            [/^guest_[1-4]$/, functionA],
            [/^guest_5$/, functionB],
            [/^guest_undefined*$/, functionC],
        ])
    }

    const onButtonClick = (identity, status) => {
        let action = [...actions()].filter(([key, value]) => (key.test(`${identity}_${status}`)))
        action.forEach(([key, value]) => value.call(this))
    }

    try {
        onButtonClick('guest', 4)
        // onButtonClick('guest')
    } catch (err) {
        console.log(err)
    }
}

用Array.every和Array.some来处理全部或部分满足条件

Array.every 之后的代码只执行一遍

Array.some 则有多少元素执行几遍

错误示例

test (arr) {
    if (!arr) return
    let num = 0
    arr.forEach((item) => {
        if (item > 3) return
        num += 1
    })
    if (!num) {
        console.log('所有数字均大于3')
        return
    }
    console.log('有数字不大于3')
}

正确示例

test (arr) {
    if (!arr) return
    arr.every(item => item > 3 ? console.log('所有数字均大于3') : console.log('有数字不大于3'))
    
    arr.some(item => item === 3 && console.log('数组中包含3'))
}

可借助length清空数组

省去重新赋值的过程

重新赋值

test () {
    let arr = [1, 3, 4]
    arr = []
    console.log(arr)
}

应用length

test () {
    let arr = [1, 3, 4]
    arr.length = 0
    console.log(arr)
}

使用解构来处理数组和对象

错误示例

// 处理数组
test (str) {
    if (!(str && str instanceof String)) return
    let arr = str.split(',')
    let year = arr[0]
    let code = arr[1]

    console.log(year, code)
}

// 处理对象
test (obj) {
    if (!(obj && obj instanceof Object)) return
    let year = obj.year || ''
    let code = obj.code || ''

    console.log(year, code)
}

正确示例

// 处理数组
test (str) {
    if (!(str && str instanceof String)) return
    let arr = str.split(',')
    let { 0: year, 1: code } = arr

    console.log(year, code)
}

// 处理对象
test (obj) {
    if (!(obj && obj instanceof Object)) return
    let { year, code } = obj

    console.log(year, code)
}

平铺多维数组

平铺二维数组

test () {
    const arr = [11, [22, 33], [44, 55], 66]
    const flatArr = [].concat(...arr) //=> [11, 22, 33, 44, 55, 66]

    console.log(flatArr)
}

平铺多维数组

test (arr) {
    const flattened = [].concat(...arr)
    return flattened.some(item => Array.isArray(item)) ? 
    test(flattened) : flattened
}
useTest () {
    const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]]
    const flatArr = test(arr)
    console.log(flatArr)
}

类型转换

string强制转换为数字

可以用*1来转化为数字(实际上是调用.valueOf方法)
然后使用Number.isNaN来判断是否为NaN，或者使用 a !== a 来判断是否为NaN，因为 NaN !== NaN

数据处理

使用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 ]

~~代替Math.floor( )

可以使用双位操作符来替代 Math.floor( )。双否定位操作符的优势在于它执行相同的操作运行速度更快。

对整数来说 ~~ 运算结果与 Math.floor( ) 运算结果相同，而对于负数来说不相同：

~~4.5            // 4
Math.floor(4.5)        // 4
~~-4.5        // -4
~~-4.5 - 1        // -5
Math.floor(-4.5)        // -5

取整| 0

对一个数字| 0可以取整，负数也同样适用，num | 0

1.3 | 0         // 1
-1.9 | 0        // -1

判断奇偶数 & 1

1 & 1    		-> 1
2 & 1			-> 0

函数处理

强制参数

mandatory = ( ) => {
    throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {     // 这里如果不传入参数，就会执行manadatory函数报出错误
    return bar;
}

隐式返回值

function calcCircumference(diameter) {
  return Math.PI * diameter
}
// 简写为：
calcCircumference = diameter => (
  Math.PI * diameter
)

字符串比较时间先后

var a = "2014-08-08";
var b = "2014-09-09";

console.log(a>b, a<b); // false true
console.log("21:00"<"09:10");  // false
console.log("21:00"<"9:10");   // true   时间形式注意补0

数字补0操作

const addZero1 = (num, len = 2) => (`0${num}`).slice(-len) // 只适用于类时间这种两位数的
const addZero2 = (num, len = 2) => (`${num}`).padStart(len, '0')
addZero1(3) // 03

addZero2(32,4)  // 0032

数组

reduce方法同时实现map和filter

arr.reduce(callback,[initialValue])

• callback

  执行数组中每个值的函数，包含四个参数：

  ​ accumulator累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。

  `currentValue数组中正在处理的元素。

  currentIndex可选数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则为1。

  array可选调用reduce()的数组

• initialValue可选

  作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

// filter
const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num) => {
  num = num * 2;
  if (num > 50) {
    finalList.push(num);
  }
  return finalList;
}, []);
doubledOver50;            // [60, 80]

// 统计相同数据个数
var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) {
  obj[name] = obj[name] ? ++obj[name] : 1;
  return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }