if判断

if的判断不是只能写判断表达式，可以直接判断数据，数据会自动转换为布尔值，进行真假的判断

if(isFind){  // if(isFind===true)的简写
    // 处理1
}else{
    // 处理2
}

判断是对象还是null

var user=null
if(!user){
    // 未登录处理
}

字符串类型转换为数字型

var page='10'
page=+page  // 通过加号，将字符串隐式的转化为数字型

数据转换为布尔型

var a='aaa'
y=!!a  // 通过取反操作，隐式转换为布尔类型，然后再次取反转换为正确值

默认值的使用

var limit
limit=limit||10  // limit的值可能为null或undefined，值为false，会使用10作为最后结果

安全读取对象属性

user&&user.addr&&user.addr.city  // 使用此方法读取判断city的值和真假

函数防抖

两秒后进行拼接打印

function debounce(fn,delay=1000,...args1){
    let timer=null
    return (...args2)=>{
        clearTimeout(timer)
        time=setTimeout(()=>{
            fn(...args1,...args2)
        },delay)
    }
}
const newFn=debounce(
    function (a,b,c,d){
        console.log(a,b,c,d)
    },
    2000,
    1,
    2
)
newFn(3,4)

// 1 2 3 4

函数节流

一秒调用一次函数

class Timer{
    constructor(callback,duration=1000){
        this.callback=callback
        this.duration=duration
        this.count=0
        this.id=null
    }
    start(){
        if(this.id){
            return
        }
        this.id=setInterval(()=>{
            this.callback(++this.count)
        },this.duration)
    }
    stop(){
        clearInterval(this.id)
        this.id=null
    }
}
const t=new Timer((serial)=>{
    console.log(serial)
})
t.start()

数组去重

const arr = [23,44,77,88,7,10,2,88,44,2]
const result=[...new Set(arr)]
console.log(result)  // [23, 44, 77, 88, 7, 10, 2]

函数配置项

function foo(options={}){
    const defaultOptions={
        a:1,
        b:2,
        c:3,
        d:4
    }
    options={
        ...defaultOptions,
        ...options      
    }
    console.log(options)
}
foo() // {a: 1, b: 2, c: 3, d: 4}

foo({
    a:100
})  // {a: 100, b: 2, c: 3, d: 4}

函数日志打印

const calculator={
    count:0,
    next(){
        return ++this.count
    },
    double(a){
        return a * 2
    },
    add(a,b){
        return a + b
    }
}
for (const key in calculator){
    const origin=calculator[key]
    calculator[key]=function(...args){
        console.log(`开始调用${key}函数`)
        origin.call(this,...args)
        console.log(`调用${key}函数结束`)
    }
}
calculator.add(1,2)

函数科里华

提供了一个名为currying的函数，它用于将一个接受多个参数的函数转化为一个可以接受单个参数并返回一个新函数的函数，这个过程被称为柯里化（Currying）。

function currying(fn,...bingArgs){
    return (...args)=>{
        const allArgs=[...bingArgs,...args]
        if(allArgs.length<fn.length){
            return currying(fn,...allArgs)
        }else{
            return fn(...allArgs)
        }
    }
}

const sum=(a,b,c,d)=>a+b+c+d

console.log( currying(sum)(1)(2)(3)(4) )
console.log( currying(sum,1)(2,3)(4) )
console.log( currying(sum,1,2)(3)(4) )
console.log( currying(sum,1,2)(3,4) )

...bingArgs

在currying函数的参数列表中，...bingArgs表示将传入的参数收集到一个数组中。例如，如果你调用currying(fn, 1, 2, 3)，bingArgs将是一个包含三个元素（1, 2, 3）的数组。

使用展开语法，你可以将一个数组的元素展开为函数的单独参数。例如，fn(...bingArgs)会将bingArgs数组的元素展开并传递给fn函数。

...args

在currying函数返回的新函数中，...args用于收集传递给这个新函数的任意数量的参数。这些参数被收集到一个名为args的数组中。

这允许你在调用新函数时传入任意数量的参数，这些参数将被添加到bingArgs参数的后面。例如，如果bingArgs是[1, 2]，并且你调用返回的函数并传入参数3和4，那么allArgs将是[1, 2, 3, 4]。

通过这种方式，你可以逐步地为原始函数fn提供所需的参数，直到提供了足够的参数来调用它。

不可改对象的数据修改

const products=[
{name:'xiaomi',stock:2000},
{name:'iphone',stock:1500},
{name:'huawei',stock:3000}
]

const newProducts=products.map((p)=>p.name==='iphone'?{...p,stock:p-stock - 1}:p)

前端代码优化