笔记-------es6

一、es6

（一）filter

三个参数：current => 当前值， index => 当前值的下标， array => 原数组对象

let a = [1,3,5,12,15]
let b = a.filter((current, index, array) => {
    return current > 10
})
console.log(a)
console.log(b)

（二）let const var 区别

1. var

• 声明（变量）提升
• 变量覆盖
• 没有块级作用域

function fn2(){
    for(var i=0; i<3; i++){
        console.log(i) // 0,1,2
    }
    console.log(i) //0,1,2,3
}

2. const

• 声明之后必须赋值，否则就报错
• 定义的值不能修改，否则报错
• 支持let的其他属性

3. let

二、 undefined和null

（一）undefined

1. 已声明 未赋值

    let o   
    console.log(o)   //undefined

2. 对象某个属性不在

    let obj = {}
    console.log(obj.a)

3. 函数调用，少了个参数

    function fn(a,b){
        console.log(a,b)
    }
    fn(4)

4. 函数默认返回值为undefined return

    function abcd(){
        console.log("124")
        return 345
    }
    console.log(abce())

5. undefined

console.log(undefined) //undefined

（二）null

1. 手动释放内存

let obj = {}
obj = null

2. 作为函数的参数(此参数不是对象)

let num = null

3. 原型链的顶端
4. null

console.log(null)  //null

三、foreach() 和 map()

（一）foreach()

1. 没有返回值
2. 不能用break打断
3. 遍历的是value

let arr = ["a", "b", "c"]
let res = arr.foreach(value => {
    console.log(value)// "a"   "b"   "c"
    break; //报错
    return value + "1" //undefined
})
conlose.log(res)

（二）map()

1. 有返回值(数组)，默认return是undefined
2. 接受参数是一个函数（key, value）
3. 不能用break打断

let arr = ["a", "b", "c"]
let res = arr.map((value, key) => {
    break; //报错
    return value + 1
})
console.log(res)

四、递归实现 1-100 求和

function add(num1,num2){
    let num = num1 + num2
    if(num2+1>100){
        return num
    }else{
        return add(num,num2+1)
    }
}
let sum = add(1, 2)
console.log(sum)

五、闭包

1. 闭包是什么——方法里返回一个方法

function a(){
    let a=1
    return function(){
        return a1
    }
}

2. 闭包存在的意义

• 延长变量的生命周期
• 创建私有环境
• 有自己的词法作用域

3. 闭包的弊端

• 闭包会常驻内存 => 慎用闭包，手动回收
• 会造成内存泄漏

function makeCount(){
    let num = 0 
    function changeValue(val){
        num += val
    }
    return {
        add: function(){ //加
            return changeValue(1)
        },
        reduce: function(){ //减
            return changeValue(-1)
        },
        value: function(){ //查询
            return num
        }
    }
}
let count = makeCount()
conlose.log(count.add()) //1
conlose.log(count.add()) //2
conlose.log(count.add()) //3
conlose.log(count.reduce()) //2
conlose.log(count.reduce()) //1
conlose.log(count.reduce()) //0

六、防抖和节流

（一）、防抖 — 将多次操作变成一次

<input type="text" placeholder="请输入" id="inp">

function debounce(fn,wait){
    let timeout = null
    return args => {
        if(timeout)clearTimeout(timeout)
        timeout = setTimeout(fn,wait)
    }
}
let inp = document.getElementById("inp")
function demo(){
    console.log("发送请求")
}
inp.addEventLister("input",debounce(demo,2000))

（二）、节流 — 一定时间内只调用一次函数

=== 应用场景：1.提交表单 2.高频监听事件 ===

<style>
    #box{width:200px; height:200px; background:#ff0000;}
</style>
<div id="box"></div>

function throttle(event,time){
    let timer = null
    return function(){
        if(!timer){
            timer = setTimeout(()=>{
                event()
                timer = null
            },time)
        }
    }
}
function demo(){
    console.log("发送请求")
}
let box = document.getEventById("box")
box.addEventListen("touchmove",throttle(demo,2000))