function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ，或者不是对象和数组，直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用！！！
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result
}

对递归理解的不好 需要多看一看

4.类型转换

2.理解JS原型

• 函数作为返回值返回  

• 函数作为参数被传递

+// 函数作为返回值
+ function create() {
+    const a = 100
+     return function () {
+         console.log(a)
+     }
+ }
+
+ const fn = create()
+ const a = 200
+ fn() // 100
+
+// 函数作为参数被传递
+function print(fn) {
+    const a = 200
+    fn()
+}
+const a = 100
+function fn() {
+    console.log(a)
+}
+print(fn) // 100

• 当作普通函数被调用：window
• 使用call apply bind:传入什么绑定什么
• 作为对象方法调用：返回对象本身
• 在class中调用：返回class本身
• 箭头函数：返回上一作用域的this

• apply 用数组传参
• call 需要分别传参
• 与 bind 不同 call/apply 会立即执行函数
• bind 是复制函数  会返回新函数

// 模拟 bind
Function.prototype.bind1 = function (...args) {

    // 获取要绑定的新this（数组第一项 并弹出）
    const t = args.shift()

    // 旧this  就是fn1.bind(...)中的fn1
    const self = this

    // 返回一个函数
    return function () {
        return self.apply(t, args)//就相当于 fn1.apply(t,args)
    }
}

function fn1(a, b, c) {
    console.log('this', this)
    console.log(a, b, c)
    return 'this is fn1'
}

const fn2 = fn1.bind1({x: 100}, 10, 20, 30)
const res = fn2()
console.log(res)

bar.call(foo); // 1

//等同于//

var foo = {
    value: 1,
    bar: function() {
        console.log(this.value)
    }
};

foo.bar(); // 1

//手写call//
Function.prototype.call2 = function (...args) {
    const t = args.shift();
    t.fn = this;
    const result = t.fn(...args);
    delete t.fn;
    return result
}

// 测试一下
var foo = {
    value: 1
};

function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value);
}

bar.call2(foo, 'kevin', 18);
// kevin
// 18
// 1

Function.prototype.apply = function (context,...args) {
    context.fn = this;
    var result;
    if (!arr) {
        result = context.fn();
    }
    else {
        result = context.fn(...args);
    }

    delete context.fn
    return result;
}

5.闭包的实际应用

// 闭包隐藏数据，只提供API
function createCache() {
    const data = {} // 闭包中的数据，被隐藏，不被外界访问
    return {
        set: function (key, val) {
            data[key] = val
        },
        get: function (key) {
            return data[key]
        }
    }
}

const c = createCache()
c.set('a', 100)
console.log( c.get('a') )
//无法直接访问 data[a] 

let a
for (let i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click', function (e) {
        e.preventDefault()
        alert(i)
    })
    document.body.appendChild(a)
}  //错误方法 每次弹出的都是10：
let a,i
for (i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click', function (e) {
        e.preventDefault()
        alert(i)
    })
    document.body.appendChild(a)
}

四、异步问题

（1）！！同步和异步的区别

JS是一种单线程语言，每次只能做一件事。JS和DOM渲染共用一个线程，因为JS可修改DOM结构

使用异步，不会阻塞代码执行，不会导致卡顿。使用同步，则会导致卡顿

（setTimeout DOM ajax 等并不是ES6的内容 而是浏览器定义的 所以是WebAPIs）

（异步事件如setTimeout ajax 和  DOM事件 都是基于event loop实现的 只是触发时间不同 触发事件由浏览器决定 

但DOM事件不能被单纯的看作是异步）
异步的运行机制为

所有同步任务都在主线程上执行，形成一个执行栈（Call stack），任务执行后会被移除

当异步任务进入主线程，异步任务会被移进WebAPIs中等待被执行时机 （比如点击事件的点击 定时器的定时 ） 时机到了，就把异步任务塞进任务队列（callback queue)中

stack空了后  event loop自动触发  event loop不断检查queue中有没有未执行的异步任务 如果有，就把该异步任务移动到call stack中执行

主线程不断重复上面的第三步

注：异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。例如ajax的success，complete，error也都指定了各自的回调函数，这些函数就会加入“任务队列”中，等待执行

！！！！！图中的event loop就是异步回调的实现原理 也是重点！！！！！！

重点：

JS和DOM共用一个线程，在JS执行时还要让DOM渲染，那么什么时候渲染DOM呢？

就是在call stack空闲时！！！

当call stack空闲时，首先尝试DOM渲染，再触发下一次的Event Loop

即：每执行完一次异步，先尝试渲染DOM ，再用event loop去拿新的异步任务

（2）使用异步的场景有哪些？

（3）手写promise

// then() 一般正常返回 resolved 状态的 promise
Promise.resolve().then(() => {
    return 100
})

// then() 里抛出错误，会返回 rejected 状态的 promise
Promise.resolve().then(() => {
    throw new Error('err')
})

// catch() 不抛出错误，会返回 resolved 状态的 promise
Promise.reject().catch(() => {
    console.error('catch some error')
})

// catch() 抛出错误，会返回 rejected 状态的 promise
Promise.reject().catch(() => {
    console.error('catch some error')
    throw new Error('err')
})

// 第一题
Promise.resolve().then(() => {
    console.log(1)
}).catch(() => {
    console.log(2)
}).then(() => {
    console.log(3)
})

// 第二题
Promise.resolve().then(() => { // 返回 rejected 状态的 promise
    console.log(1)
    throw new Error('erro1')
}).catch(() => { // 返回 resolved 状态的 promise
    console.log(2)
}).then(() => {
    console.log(3)
})

// 第三题
Promise.resolve().then(() => { // 返回 rejected 状态的 promise
    console.log(1)
    throw new Error('erro1')
}).catch(() => { // 返回 resolved 状态的 promise
    console.log(2)
}).catch(() => {
    console.log(3)
})

function loadImg(src) {
    const p = new Promise(
                //new promise要传入一个函数 函数里的两个参数resolve reject也是函数//
        (resolve, reject) => {
            const img = document.createElement('img')
                        //img加载成功后的回调函数//
                        //我们用promise结果callback hell 但本质还是异步问题//
                       //所以promise内里的函数仍旧是异步函数//
            img.onload = () => {
                resolve(img)
            }
                       //img加载失败的回调函数//
            img.onerror = () => {
                const err = new Error(`图片加载失败 ${src}`)
                reject(err)
            }
            img.src = src
        }
    )
    return p
}

loadImg(url1).then(img1 => {
    console.log(img1.width)
    return img1 // return一个普通对象 此处return的img要传到下一个then里
}).then(img1 => {
    console.log(img1.height)
    return loadImg(url2) 
       //return一个promise实例  因此下一个then接受的就是这个promise返回的img2对象
}).then(img2 => {
    console.log(img2.width)
    return img2
}).then(img2 => {
    console.log(img2.height)
}).catch(ex => console.error(ex))

• 执行async函数，返回的是promise对象，如果函数内没返回 Promise ，则会自动封装 不用自己new了

async function fn2() {
    return new Promise.resolve()
}
console.log( fn2() )

async function fn1() {
    return 100  // 自动封装成promise 相当于 return Promise.resolve(100)

}
console.log( fn1() ) 

• await相当于promise的then，用来解析函数内部的异步操作，后面一定是promise对象，如果不是可以自动封装

//如果不用await 输出顺序是 2——3——now it is done
async function firstAsync () {
  let promise = new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve('now it is done')
    }, 1000)
  })
   promise.then(val=>{
    console.log(val)
   })
  console.log(2)
  return 3
}
firstAsync().then(val => {
  console.log(val)
})
	

		
	
//用await后 就能保证按照顺序执行
async function firstAsync () {
  let promise = new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve('now it is done')
    }, 1000)
  })

  console.log(await promise)//要promise的状态为resolved才会继续往下执行
  console.log(await 40)//自动封装 相等于await Promise.resolve(40)
  console.log(2)
  return Promise.resolve(3)
}

firstAsync().then(val => {
  console.log(val)
})

(async function () {
    const p2 = Promise.resolve(100)
    const res = await p2 //相当于then 拿到promise里的参数
    console.log(res) // 100
})()

(async function () {
    const res = await 100
    console.log(res) // 100
})()

(async function () {
    const p3 = Promise.reject('some err')
    const res = await p3 //rejected状态 不会执行
    console.log(res) // 不会执行
})()

• 可用try...catch捕获rejected 状态，代替了promise的catch

(async function () {
    const p4 = Promise.reject('some err')
    try {
        const res = await p4
        console.log(res)
    } catch (ex) {
        console.error(ex)
    }
})()

（5）异步的本质

async function async1 () {
  console.log('async1 start') //2 
  await async2()//undefined
    //await的后面都可以看做callback里的内容 即异步
    //类似event loop里的setTimeout(cb1)
  console.log('async1 end') //关键一步，将它放在队列中等待，最后执行
}

async function async2 () {
  console.log('async2') //3
}

console.log('script start') //1
async1()
console.log('script end')//4 此时同步代码执行完 开始event loop 执行异步代码

（6）异步集合遍历 for await of

function Gen (time) {
  return new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve(time)
    }, time)
  })
}
  //用for await ...of遍历异步操作集合
 async function test () {
   let arr = [Gen(2000), Gen(100), Gen(3000)]
   for await (let item of arr) {
     console.log(Date.now(), item)
   }
 }
 test()

// 定时算乘法
function multi(num) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num * num)
        }, 1000)
    })
}

// // 使用 forEach ，是 1s 之后打印出所有结果，即 3 个值是一起被计算出来的
// function test1 () {
//     const nums = [1, 2, 3];
//     nums.forEach(async x => {
//         const res = await multi(x);
//         console.log(res);
//     })
// }
// test1();

// 使用 for...of ，可以让计算挨个串行执行
async function test2 () {
    const nums = [1, 2, 3];
    for (let x of nums) {
        // 在 for...of 循环体的内部，遇到 await 会挨个串行计算
        const res = await multi(x)
        console.log(res)
    }
}
test2()

const obj = {
  count: 0,
  Gen (time) {
    return new Promise((resolve, reject) => {
      setTimeout(function () {
        resolve({ done: false, value: time })//要遵守可迭代协议
      }, time)
    })
  },
  [Symbol.asyncIterator] () {//迭代器协议
    let self = this
    return {
      next () {
        self.count++
        if (self.count < 4) {
          return self.Gen(Math.random() * 1000)
        } else {
          return Promise.resolve({
            done: true,
            value: ''
          })
        }
      }
    }
  }
}

async function test () {
  for await (let item of obj) {
    console.log(Date.now(), item)
  }
}

test()

同步任务执行完毕 call stack清空

执行 micro task queue 中的微任务

尝试DOM渲染

最后触发Event Loop 从callback queue中拿出待执行的宏任务

（8）品味一道经典好题

async function async1 () {
  console.log('async1 start')//2
  await async2() //立刻跳到async2 执行console.log('async2')
  //上面有 await ，下面就变成了“异步”
  console.log('async1 end')//微任务，先放着6
}

async function async2 () {
  console.log('async2')//3
}

console.log('script start')//1

setTimeout(function () { // 异步，宏任务，先放着 8
  console.log('setTimeout')
}, 0)

async1()

//初始化Promise时，传入的函数会被立刻执行！！//
new Promise (function (resolve) { 
  console.log('promise1') //4
  resolve()
}).then (function () { // 异步，微任务，先放着 7
  console.log('promise2')
})

console.log('script end')//5

// 同步代码执行完之后，屡一下现有的异步未执行的，按照顺序
// 1. async1 函数中 await 后面的内容 —— 微任务
// 2. setTimeout —— 宏任务
// 3. then —— 微任务

Web API

五、DOM

<div id="app"></div>
<script>
  let app = document.querySelector('#app')
  let span = document.createElement('span')
  span.innerHTML = '1111'
  app.appendChild(span)
</script>

 通用的事件绑定函数
 function bindEvent(elem, type, fn) {
     elem.addEventListener(type, fn)
 }

const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', event => {
    console.log(event.target) // 获取触发的元素
    event.preventDefault() // 阻止默认行为
    alert('clicked')
})

//普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
    // console.log(event.target) // 获取触发的元素
    event.preventDefault() // 阻止默认行为
    alert(this.innerHTML)//this指向bnt1 所以不能使用箭头函数 不然this就指向window了
})

//代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
    event.preventDefault()
    alert(this.innerHTML)
})

const xhr = new XMLHttpRequest()
 xhr.open('GET', '/data/test.json', true)//使用GET方法  true——异步请求
 xhr.onreadystatechange = function () { //相当于写 img.onloasd=... 也是一个回调函数
     if (xhr.readyState === 4) {
         if (xhr.status === 200) {//满足这两个条件时 数据才正常
           alert(xhr.responseText)//responseText是服务器返回的响应

         } else if (xhr.status === 404) {
             console.log('404 not found')
         }
     }
 }
 xhr.send(null)//get请求 不用返回string 返回null就行了

const xhr = new XMLHttpRequest()
 xhr.open('POST', '/data/test.json', true)//使用POST方法
 xhr.onreadystatechange = function () { 
     if (xhr.readyState === 4) {
         if (xhr.status === 200) {
           alert(xhr.responseText)

         } else {
             console.log('其他情况')
         }
     }
     const postData={
      userName:'zhangsan'
      password:'xxx'
   }
 }
 xhr.send(JSON.stringify(postData)//send一个JSON字符串

function ajax(url,successFn){    
const xhr = new XMLHttpRequest()
 xhr.open('GET', '/data/test.json', true)
 xhr.onreadystatechange = function () { 
     if (xhr.readyState === 4) {
         if (xhr.status === 200) {
           successFn(xhr.responseText)
         } else if (xhr.status === 404) {
             console.log('404 not found')
         }
     }
 }
 xhr.send(null)    
}

function ajax(url) {
    const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', url, true)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                  resolve(
                  JSON.parse(xhr.responseText)//将返回的字符串转换为对象
                  )
            }else if (xhr.status === 404 || xhr.status === 500) 
                        {
               reject(new Error('404 not found'))
                }
            }
        }
        xhr.send(null)
    })
    return p
}

const url = '/data/test.json'
ajax(url)
.then(res => console.log(res))
.catch(err => console.error(err))   

4.常用的AJAX工具

$(selector).load(URL,data,callback);
//必需的 URL 参数规定希望加载的 URL
//可选的 data 参数规定与请求一同发送的查询字符串键/值对集合
//可选的 callback 参数是 load() 方法完成后所执行的函数名称

2.常见的header

3.Restful API

• 传统API设计：把每个url当作一个功能
• restful api把每个url当成一个唯一的资源：

尽量不用url参数	（像一个方法） （是唯一的资源）
用method表示操作类型	传统的： （此时还是把url当作功能 post就表示提交数据 get就表示获取数据） restful api： （此时用method来表示操作类型）

• 强制缓存就是直接去访问缓存资源，不去访问服务器了
• 而协商缓存还是要先访问服务器，和服务器商量一下（即比较资源标识），商量后决定是浏览器是使用缓存资源，还是服务器返回新的资源

十一.开发环境

1.git

3.抓包

4.webpack

（这里先放一放，等一下回头搞他）

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // mode 可选 development 或 production ，默认为后者
    // production 会默认压缩代码并进行其他优化（如 tree shaking）
    mode: 'development',
    entry: path.join(__dirname, 'src', 'index'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: ['babel-loader'],
                include:  path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'),
            filename: 'index.html'
        })
    ],
    devServer: {
        port: 3000,
        contentBase: path.join(__dirname, 'dist'),  // 根目录
        open: true,  // 自动打开浏览器
    }
}

十二.运行环境

2.性能优化

• 多使用内存、缓存或其他方法
• 减少CPU计算量，减少网络加载耗时，用空间换时间

const input1 = document.getElementById('input1')

 let timer = null //定时器
 input1.addEventListener('keyup', function () {
     if (timer) {
         clearTimeout(timer)//clearTimeout用来取消由setTiemout设置的timeout
     }
    timer = setTimeout(() => {
         // 模拟触发 change 事件
         console.log(input1.value)

         // 清空定时器
         timer = null
     }, 500)
})

// 防抖
function debounce(fn, delay = 500) {
    // timer 是闭包中的  不会对外暴露
    let timer = null

    return function () {//返回的是个函数哦！！！
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments) //进行绑定
            timer = null
        }, delay)
    }
}
const input1 = document.getElementById('input1')
input1.addEventListener('keyup', debounce(function (e) {
    console.log(e.target)
    console.log(input1.value)
}, 600))

const div1 = document.getElementById('div1')

 let timer = null//还是要定义一个定时器
 div1.addEventListener('drag', function (e) {
     if (timer) {
        return
     }
     timer = setTimeout(() => {
         console.log(e.offsetX, e.offsetY)
         timer = null
     }, 100)
 })

// 节流
function throttle(fn, delay = 100) {
    let timer = null //同理，也是闭包

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments) //进行绑定
            timer = null
        }, delay)
    }
}

div1.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
}，200))

• 防抖策略是将 高频操作合并为一次执行，如果高频操作每次清空定时器，以最后一次操作为主。
• 节流策略是 将高频操作 按周期执行，一个timeout 周期内执行一次，如果第一个周期执行完，有新的操作进来进行另一个周期。

• var是ES5语法 存在变量提升（但ES6中已经没有了） let const是ES6语法
• var let是变量 可修改  const是常量 不可修改
• let const有块状作用域 var没有

// 测试
const obj1 = {
    a: 100,
    b: {
        x: 100,
        y: 200
    }
}
const obj2 = {
    a: 100,
    b: {
        x: 100,
        y: 200
    }
}
console.log( isEqual(obj1, obj2) )

// 首先判断是否是对象或数组
function isObject(obj) {
    return typeof obj === 'object' && obj !== null//注意 !==null
}
// 全相等（深度）
function isEqual(obj1, obj2) {
    if (!isObject(obj1) || !isObject(obj2)) {
        // 如果两者中有一个值类型（注意，参与 equal 的一般不会是函数）
               //这个判断可以避免[1,2,3]和{1，2，3}这种情况
        return obj1 === obj2
    }
    if (obj1 === obj2) {
        return true
    }
    // 两个都是对象或数组，而且不相等
    // 首先，先取出obj1和obj2的keys，比较keys的个数 如果属性个数都不同 肯定不等
    const obj1Keys = Object.keys(obj1)//迭代器
    const obj2Keys = Object.keys(obj2)
    if (obj1Keys.length !== obj2Keys.length) {
        return false
    }
    // 以obj1为基准，和 obj2依次递归比较
    for (let key in obj1) {
        // 比较当前 key 的 val 递归！！！
        const res = isEqual(obj1[key],obj2[key])//递归请注意！
        if (!res) {
            return false
        }
    }
    //全部遍历完还没有return false 就可以顺利的return true了
    return true
}

• 不改变原数组
• 返回一个数组

 const arr = [10, 20, 30, 40]

// // concat  拼接
 const arr1 = arr.concat([50, 60, 70])
 // map  映射
 const arr2 = arr.map(num => num * 10)
// // filter  过滤 
 const arr3 = arr.filter(num => num > 25)
// // slice 拷贝截取
 const arr4 = arr.slice()

6.[10,20,30].map(parseInt)

• map的参数和返回值
• parseInt的参数和返回值

const res = [10, 20, 30].map(parseInt)
console.log(res)

// 重点是做好拆解！
[10, 20, 30].map((num, index) => {
    return parseInt(num, index)
})

8.call和apply的区别

 <div id="div3">
            <a href="#">a1</a><br>
            <a href="#">a2</a><br>
            <a href="#">a3</a><br>
            <a href="#">a4</a><br>
            <button>加载更多...</button>
        </div>
 
<script>
  const div = document.querySelector('div3')
  div.addEventListener('click', event => {
      event.preventDefault()  //阻止默认事件
      const target=event.target
      if(target.nodeName === 'A'){ //进行判断
      alert(target.innerHTML)
      }
  })
</script>

10.闭包是什么？有何特性？有何影响？

 // 自由变量示例 —— 内存会被释放
 let a = 0
 function fn1() {
     let a1 = 100

     function fn2() {
         let a2 = 200

        function fn3() {
             let a3 = 300
             return a + a1 + a2 + a3
         }
         fn3()//fn3执行完毕 a3被释放
     }
     fn2()//fn2执行完毕 a2被释放

 }
 fn1()//fn1执行完毕 a1被释放

// // 闭包 函数作为返回值 —— 内存不会被释放
//例子1 函数作为返回值
 function create() {
     let a = 100
     return function () {
         console.log(a)
     }
 }
 let fn = create()//虽然create被执行完了 但是a被跟着函数一起返回 不能被释放
 let a = 200//没人用它 自然释放了
 fn() // 100
//例子2 函数作为参数
function print(fn) {
    let a = 200//没人理它 释放了
    fn()
}
let a = 100
function fn() {
    console.log(a)
}//这个函数被当作参数 所以a不能释放
print(fn) // 100

 // 函数声明 sum直接就可以用了 预加载过了
const res = sum(10, 20)
 console.log(res)
 function sum(x, y) {
     return x + y
 }
 // 函数表达式 此时sum不能用
 var res = sum(10, 20)
 console.log(res)
 var sum = function (x, y) {
     return x + y
 }

17.new Object ()和 Object.create() 的区别

const obj1 = {
    a: 10,
    b: 20,
    sum() {
        return this.a + this.b
    }
}//有原型

const obj2 = new Object({
    a: 10,
    b: 20,
    sum() {
        return this.a + this.b
    }
})//也有原型

const obj21 = new Object(obj1) // obj1 === obj21为true  但 obj1 === obj2 为false

const obj3 = Object.create(null)//没有原型
const obj4 = new Object() // 虽然是空的{} 但是有原型

const obj5 = Object.create({
    a: 10,
    b: 20,
    sum() {
        return this.a + this.b
    }
})//此时 obj5还是一个空对象{ }  但它的原型为create内{...}的内容

const obj6 = Object.create(obj1)//即 obj6.__proto__===obj.1

window.onerror = function(message, source, lineno, colno, error) { ... }

• 对于跨域的JS 如CDN的，不会有详细的报错信息
• 对于压缩的JS 还要配合sourceMap 反差到未压缩代码的行和列

26.获取页面url参数

 function query(name) {
     const search = location.search.substr(1) //截取一下
     // search: 'a=10&b=20&c=30'
     const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
          //i 表示大小写不区分
     const res = search.match(reg)
     if (res === null) {
         return null
     }
     return res[2]//res[2]才是要取的参数 
 }
 query('b')//20

// URLSearchParams
function query(name) {
    const search = location.search
    const p = new URLSearchParams(search)
    return p.get(name)
}
console.log( query('b') )

27.将url参数解析为JS对象

function flat(arr) {
    // 验证 arr 中，还有没有深层数组 [1, 2, [3, 4]]
    const isDeep = arr.some(item => item instanceof Array)
    if (!isDeep) {
        return arr // 已经是 flatern [1, 2, 3, 4]
    }

    const res = Array.prototype.concat.apply([], arr)//利用concat拍平
    return flat(res) // 递归 一次没拍平 就拍第二次
}

const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] )
console.log(res)//

29.数组去重

 function unique(arr) {
     const res = []
     arr.forEach(item => {
         if (res.indexOf(item) < 0) {
             res.push(item)
         }
     })
     return res
 }

// 使用 Set （无序，不能重复）
function unique(arr) {
    const set = new Set(arr)
    return [...set] //注意这里 return是把set打散 打成一个数组输出 要记住这一点
       //因为set本质还是一个集合 如果不打散 输出结果为  }

const res = unique([30, 10, 20, 30, 40, 10])
console.log(res)

30.手写深拷贝

function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ，或者不是对象和数组，直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用！！！
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result
}

31.RAF requetAnimateFrame

// 3s 把宽度从 100px 变为 640px ，即增加 540px
// 60帧/s ，3s 180 帧 ，每次变化 3px

const $div1 = $('#div1')
let curWidth = 100
const maxWidth = 640

// // setTimeout
// function animate() {
//     curWidth = curWidth + 3
//     $div1.css('width', curWidth)
//     if (curWidth < maxWidth) {
//         setTimeout(animate, 16.7) // 自己控制时间
//     }
// }
// animate()

// RAF
function animate() {
    curWidth = curWidth + 3
    $div1.css('width', curWidth)
    if (curWidth < maxWidth) {
        window.requestAnimationFrame(animate) // 时间不用自己控制
    }
}
animate()

32.如何优化性能