高频面试真题 ​

代码笔记

1. 简述 ​

• 验证和复习之前学过的知识
• 在之前的知识体系里面补充其他技能
  • 占的比重不是很大，是纯api的东西，并不是成体系的
  • 游离于整体知识体系，但很重要
  • 如正则表达式、数组api等
• 题目没有按照知识点或者难度排序(混排)
  • 面试题按照组来，每组三个
• 只筛选了初级面试题，即本系列笔记知识体系之内的

2. 第1组面试题 ​

2.1. 题目 ​

• var和let、const的区别
• typeof返回哪些类型
• 列举强制类型转换和隐式类型转换

2.2. var和let、const的区别 ​

• 答案
  • var是ES5及其之前的语法，let、const是es6语法；var有变量提升
  • var和let是变量，可修改；const是常量，不可修改
  • let、const有块级作用域，var没有
    • 块级作用域是es6的特点
• 代码演示
  js

  /**
   * 变量提升 只有ES5及其以下有
   * es5语法只有用var定义变量，如果定义变量，
   * 他会把这个变量提前拎出来，并声明成undefined
   */
  // 使用var 
  // console.log(a) // undefined
  // var a = 200
  /*
    // 即变形为
    var a
    console.log(a) // undefined
    a = 200
  */
  
  // 使用let
  // console.log(a) // 报错
  // let a = 200
  
  /**
   * 块级作用域 es6特有
   */
  for (let i = 0; i < 10; i++) {
    let j = i + 1
    // var j = i + 1  // 有值
  }
  console.log(j)

  /**
   * 变量提升 只有ES5及其以下有
   * es5语法只有用var定义变量，如果定义变量，
   * 他会把这个变量提前拎出来，并声明成undefined
   */
  // 使用var 
  // console.log(a) // undefined
  // var a = 200
  /*
    // 即变形为
    var a
    console.log(a) // undefined
    a = 200
  */
  
  // 使用let
  // console.log(a) // 报错
  // let a = 200
  
  /**
   * 块级作用域 es6特有
   */
  for (let i = 0; i < 10; i++) {
    let j = i + 1
    // var j = i + 1  // 有值
  }
  console.log(j)

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  
• 延伸
  • 函数表达式有些类似变量提升，这个后面再说

2.3. typeof返回哪些类型 ​

• 答案
  • 值类型：undefined、string、number、boolean、symbol
  • 引用类型：object => 无法具体细分(对象或者数组)
    • 注意：typeof null === 'object'
  • 方法：function
    • 具有引用类型特点，但一般不作为引用类型的数据使用
    • 因为function是作为一个可执行的工具去使用的
    • 一般做数据存储或者变量定义的时候，我们一般会定义值类型或者引用类型(对象或者数组)，存储代码中的变量或者说是数据
    • 很少在函数里面存储数据，函数是一个可执行的工具

2.4. 列举强制类型转换和隐式类型转换 ​

• 答案：
  • 强制类型转换：parseInt、parseFloat、toString等
  • 隐式类型转换：if、逻辑运算、==、+拼接字符串

3. 第2组面试题 ​

3.1. 题目 ​

• 手写深度比较、模拟lodash isEqual
  • 两个地址不一样对象，层次比较深，怎么去比较，可能里面属性是一样的
• split()和join()的区别
  • 基本字符串操作
• 数组的pop、push、unshift、shift分别做什么
  • 基本数组操作

3.2. 手写深度比较 ​

• 场景
  js

  // 实现如下效果
  const obj1 = {a:10, b:{x:100, y:200}}
  const obj2 = {a:10, b:{x:100, y:200}}
  isEqual(obj1, obj2) === true

  // 实现如下效果
  const obj1 = {a:10, b:{x:100, y:200}}
  const obj2 = {a:10, b:{x:100, y:200}}
  isEqual(obj1, obj2) === true

  1
  2
  3
  4
  
• 答案
  • 手写demo传送门
  js

  const obj1 = {a:10, b:{x:100, y:200}}
  const obj2 = {a:10, b:{x:100, y:200}}
  // console.log(obj1, obj2);  // false
  
  // 判断是否是对象或数组
  const isObj = obj=> {
    return typeof obj === 'object' && obj !== null
  }
  
  // 实现对象深度比较
  const isEqual = (obj1, obj2)=> {
    // console.log(obj1, obj2)
  
    // 判断参数是否是对象
    // 也在递归的时候用
    // isEqual(100, 100)
    if(!isObj(obj1) || !isObj(obj2)) {
      // 参与equal的一般不是函数，一般是数据
      // 不是对象就是值类型，可以直接比较
      return obj1 === obj2
    }
  
    // 如果两个对象相等(obj1 === obj1)
    if(obj1 === obj2) {
      return true
    }
  
    // 两个都是引用类型(对象或数组)，且两者地址不同
    // 深度比较全相等
    // 步骤：
    /**
     * 1. 先取出obj1和obj2的keys，比较个数，个数不一样直接false
     * 2. 个数相等，以obj1为基准，和obj2依次递归比较
     * 3. 全部遍历完，没有遇到false，就是全相等
     */
    // 取出keys
    // 如果是数组，可以获取它的索引下标
    const obj1Keys = Object.keys(obj1)
    const obj2Keys = Object.keys(obj2)
  
    // 个数不相等
    if(obj1Keys.length !== obj2Keys.length) {
      return false
    }
  
    // 个数相等，以obj1为基准，和obj2依次递归比较
    // for in 对象数组都适用
    for(let key in obj1) {
      // 比较当前key的value => 递归
      // 拿到obj1里面的值，和obj2里面的值，进入该方法
      // 该方法里面有值的比较
      // isEqual(100, 100)
      // 拿到值比较的布尔值
      // 遇到对象，再进行遍历，再到值的比较
      const res = isEqual(obj1[key], obj2[key])
  
      // 有值不相等
      if(!res) {
        return false
      }
    }
  
    // 遍历完没有遇到false，就是全相等
    return true
  }
  
  // 结果
  console.log("实现对象深度比较", isEqual(obj1, obj2))  // true

  const obj1 = {a:10, b:{x:100, y:200}}
  const obj2 = {a:10, b:{x:100, y:200}}
  // console.log(obj1, obj2);  // false
  
  // 判断是否是对象或数组
  const isObj = obj=> {
    return typeof obj === 'object' && obj !== null
  }
  
  // 实现对象深度比较
  const isEqual = (obj1, obj2)=> {
    // console.log(obj1, obj2)
  
    // 判断参数是否是对象
    // 也在递归的时候用
    // isEqual(100, 100)
    if(!isObj(obj1) || !isObj(obj2)) {
      // 参与equal的一般不是函数，一般是数据
      // 不是对象就是值类型，可以直接比较
      return obj1 === obj2
    }
  
    // 如果两个对象相等(obj1 === obj1)
    if(obj1 === obj2) {
      return true
    }
  
    // 两个都是引用类型(对象或数组)，且两者地址不同
    // 深度比较全相等
    // 步骤：
    /**
     * 1. 先取出obj1和obj2的keys，比较个数，个数不一样直接false
     * 2. 个数相等，以obj1为基准，和obj2依次递归比较
     * 3. 全部遍历完，没有遇到false，就是全相等
     */
    // 取出keys
    // 如果是数组，可以获取它的索引下标
    const obj1Keys = Object.keys(obj1)
    const obj2Keys = Object.keys(obj2)
  
    // 个数不相等
    if(obj1Keys.length !== obj2Keys.length) {
      return false
    }
  
    // 个数相等，以obj1为基准，和obj2依次递归比较
    // for in 对象数组都适用
    for(let key in obj1) {
      // 比较当前key的value => 递归
      // 拿到obj1里面的值，和obj2里面的值，进入该方法
      // 该方法里面有值的比较
      // isEqual(100, 100)
      // 拿到值比较的布尔值
      // 遇到对象，再进行遍历，再到值的比较
      const res = isEqual(obj1[key], obj2[key])
  
      // 有值不相等
      if(!res) {
        return false
      }
    }
  
    // 遍历完没有遇到false，就是全相等
    return true
  }
  
  // 结果
  console.log("实现对象深度比较", isEqual(obj1, obj2))  // true

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  

3.3. split()和join()的区别 ​

• 答案
  js

  // 将字符串以-分割，形成数组
  let arrRes = '1-2-2'.split('-')
  console.log(arrRes)  // ["1", "2", "2"]
  
  // 将数组以-拼接，形成字符串
  let strRes= [1, 2, 3].join('-')
  console.log(strRes);  // 1-2-3

  // 将字符串以-分割，形成数组
  let arrRes = '1-2-2'.split('-')
  console.log(arrRes)  // ["1", "2", "2"]
  
  // 将数组以-拼接，形成字符串
  let strRes= [1, 2, 3].join('-')
  console.log(strRes);  // 1-2-3

  1
  2
  3
  4
  5
  6
  7
  

3.4. 数组的pop、push、unshift、shift分别做什么 ​

• 解答思路
  • 功能是什么
  • 返回值是什么
  • 是否会对原数组造成影响
• 答案
  • pop
    • 刨除数组最后一项
    • 返回数组最后一项
    • 会改变原数组
  • shift
    • 刨除数组第一项
    • 返回数组第一项
    • 会改变原数组
  • push
    • 往后追加
    • 返回 length
    • 会改变原数组
  • unshift
    • 往前追加
    • 返回 length
    • 会改变原数组
• 延伸
  • 数组操作分纯函数和非纯函数
  • 纯函数的要求
    • 不改变源数组（没有副作用）
    • 有返回值，且函数的返回结果只依赖于它的参数
    • 纯函数在react里面是一个特别重要的概念
  • 数组的api有哪些是纯函数
    • concat
    • map
    • filter
    • slice
  • 数组的api有哪些是非纯函数
    • push pop shift unshift
    • forEach => 它没有返回一个数组，没什么返回值
    • some => 不会改变原来数组的值，也不会返回值
    • every => 不会改变原来数组的值，也不会返回值
    • reduce => 不会改变原来数组的值，也不会返回值
  • 手写demo传送门
  js

  // 定义数组
  const arr = [10, 20, 30, 40]
  
  /**
   * 面试题
   */
  // pop
  // 刨除数组最后一项并返回
  // 会改变原数组
  const popRes = arr.pop()
  console.log("pop", popRes, arr)  // 40  // [10, 20, 30]
  
  // shift
  // 刨除数组第一项并返回
  // 会改变原数组
  const shiftRes = arr.shift()
  console.log("shift", shiftRes, arr)  // 10  // [20, 30, 40]
  
  // push
  // 往后追加
  // 返回 length
  // 会改变原数组
  const pushRes = arr.push(50)
  console.log("push", pushRes, arr)  // 5  // [10, 20, 30, 40, 50]
  
  // unshift
  // 往前追加
  // 返回 length
  // 会改变原数组
  const unshiftRes = arr.unshift(5)
  console.log("unshift", unshiftRes, arr)  // 5  // [5, 10, 20, 30, 40]
  
  /**
   * 扩展 - 纯函数
   * 
   * 纯函数在react中应用广泛
   * 纯函数的要求
   * 1. 不改变源数组（没有副作用）
   * 2. 有返回值，且函数的返回结果只依赖于它的参数
   */
  // concat
  // 追加数组
  const arr1 = arr.concat([50, 60, 70])
  // [5, 20, 30, 50, 50, 60, 70]
  console.log("纯函数-concat", arr1, arr);  // 原数组不变
  
  // map
  // 遍历
  const arr2 = arr.map(num => num * 10)
  // [50, 200, 300, 500]
  console.log("纯函数-map", arr2, arr);  // 原数组不变
  
  // filter
  // 过滤数组
  const arr3 = arr.filter(num => num > 25)
  // [30, 50]
  console.log("纯函数-filter", arr3, arr);  // 原数组不变
  
  // slice
  // 截取数组 => 不传参数类似于深拷贝
  const arr4 = arr.slice()
  // [5, 20, 30, 50]
  console.log("纯函数-slice", arr4, arr);  // 原数组不变
  
  /**
   *  扩展 - 非纯函数
   */
  // push pop shift unshift 示例见上
  // 不会改变原来数组的值，也不会返回值
  // forEach
  // some 
  // every
  // reduce

  // 定义数组
  const arr = [10, 20, 30, 40]
  
  /**
   * 面试题
   */
  // pop
  // 刨除数组最后一项并返回
  // 会改变原数组
  const popRes = arr.pop()
  console.log("pop", popRes, arr)  // 40  // [10, 20, 30]
  
  // shift
  // 刨除数组第一项并返回
  // 会改变原数组
  const shiftRes = arr.shift()
  console.log("shift", shiftRes, arr)  // 10  // [20, 30, 40]
  
  // push
  // 往后追加
  // 返回 length
  // 会改变原数组
  const pushRes = arr.push(50)
  console.log("push", pushRes, arr)  // 5  // [10, 20, 30, 40, 50]
  
  // unshift
  // 往前追加
  // 返回 length
  // 会改变原数组
  const unshiftRes = arr.unshift(5)
  console.log("unshift", unshiftRes, arr)  // 5  // [5, 10, 20, 30, 40]
  
  /**
   * 扩展 - 纯函数
   * 
   * 纯函数在react中应用广泛
   * 纯函数的要求
   * 1. 不改变源数组（没有副作用）
   * 2. 有返回值，且函数的返回结果只依赖于它的参数
   */
  // concat
  // 追加数组
  const arr1 = arr.concat([50, 60, 70])
  // [5, 20, 30, 50, 50, 60, 70]
  console.log("纯函数-concat", arr1, arr);  // 原数组不变
  
  // map
  // 遍历
  const arr2 = arr.map(num => num * 10)
  // [50, 200, 300, 500]
  console.log("纯函数-map", arr2, arr);  // 原数组不变
  
  // filter
  // 过滤数组
  const arr3 = arr.filter(num => num > 25)
  // [30, 50]
  console.log("纯函数-filter", arr3, arr);  // 原数组不变
  
  // slice
  // 截取数组 => 不传参数类似于深拷贝
  const arr4 = arr.slice()
  // [5, 20, 30, 50]
  console.log("纯函数-slice", arr4, arr);  // 原数组不变
  
  /**
   *  扩展 - 非纯函数
   */
  // push pop shift unshift 示例见上
  // 不会改变原来数组的值，也不会返回值
  // forEach
  // some 
  // every
  // reduce

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  

4. 第3组面试题 ​

4.1. 题目 ​

• 数组slice和splice的区别
• [10, 20, 30].map(parseInt)返回结果是什么
• ajax请求get和post的区别

4.2. 数组slice和splice的区别 ​

• 答案
  • 功能区别
    • slice => 切片
    • splice => 剪接
  • 参数和返回值
    • slice
      • slice的参数为数组下标(从开始下标到结束下标)
      • 返回值为数组，不改变原数组
    • splice
      • 第一个参数表示开始的下标，第二个参数表示长度，后面的参数是替换的内容
      • 返回值是数组，会改变原数组
  • 是否是纯函数
    • slice是纯函数
    • splice不是纯函数
  • 手写demo传送门
  js

  // 定义数组
  const arr = [10, 20, 30, 40]
  
  /**
   * slice
   */
  // 不传参数类似于深拷贝
  // 是一个纯函数
  // 不改变源数组（没有副作用）
  // 有返回值，且函数的返回结果只依赖于它的参数
  let arr1 = arr.slice()
  console.log("不传参，类似深拷贝", arr1);  // [10, 20, 30, 40]
  
  // 从下标1开始截取，截取到下标3
  // arr.slice(startIndex, endIndex)
  let arr2 = arr.slice(1, 3)
  console.log("传参，开始和结束索引", arr2);  // [20, 30]
  
  // 如果不写结束索引，表示截取到最后
  // 从下标为1的索引开始截，截到最后
  let arr3 = arr.slice(1)
  console.log("只传一个参数，从某个索引截到最后", arr3);  // [20, 30, 40]
  
  // 从末尾开始截，截最后两个
  let arr4 = arr.slice(-2)
  console.log("从末尾开始截，截最后两个", arr4);  // [30, 40]
  
  /**
   *  splice
   */
  // 第一个参数表示开始的下标
  // 第二个参数表示长度
  // 后面的参数是替换的内容
  // 前面的两个参数表示需要被替换的区域
  // 后面的参数表示当前区域要被替换的内容
  // splice(startIndex, length, 替换的内容)
  // 相当于剪切，找到数组需要被剪切的范围，然后粘贴
  let spliceRes1 = arr.splice(1, 2, 'a', 'b', 'c')
  console.log("splice用法，相当于剪切粘贴", spliceRes1, arr)  // [20, 30]  // [10, "a", "b", "c", 40]
  
  // 如果后面参数不填，相当于删除中间部分
  arr = [10, 20, 30, 40]  // 因为上面的数组已经被修改了，这里重新定义
  let spliceRes2 = arr.splice(1, 2)
  console.log("只传两个参数，相当于删除", spliceRes2, arr)  // [20, 30]  // [10, 40]
  
  // 如果不需要移除，从某个位置添加若干元素
  arr = [10, 20, 30, 40]  // 因为上面的数组已经被修改了，这里重新定义
  let spliceRes3 = arr.splice(1, 0, 666, 2333, 555)
  console.log("不需要移除，从某个位置添加若干元素", spliceRes3, arr)  // []  // [10, 666, 2333, 555, 20, 30, 40]

  // 定义数组
  const arr = [10, 20, 30, 40]
  
  /**
   * slice
   */
  // 不传参数类似于深拷贝
  // 是一个纯函数
  // 不改变源数组（没有副作用）
  // 有返回值，且函数的返回结果只依赖于它的参数
  let arr1 = arr.slice()
  console.log("不传参，类似深拷贝", arr1);  // [10, 20, 30, 40]
  
  // 从下标1开始截取，截取到下标3
  // arr.slice(startIndex, endIndex)
  let arr2 = arr.slice(1, 3)
  console.log("传参，开始和结束索引", arr2);  // [20, 30]
  
  // 如果不写结束索引，表示截取到最后
  // 从下标为1的索引开始截，截到最后
  let arr3 = arr.slice(1)
  console.log("只传一个参数，从某个索引截到最后", arr3);  // [20, 30, 40]
  
  // 从末尾开始截，截最后两个
  let arr4 = arr.slice(-2)
  console.log("从末尾开始截，截最后两个", arr4);  // [30, 40]
  
  /**
   *  splice
   */
  // 第一个参数表示开始的下标
  // 第二个参数表示长度
  // 后面的参数是替换的内容
  // 前面的两个参数表示需要被替换的区域
  // 后面的参数表示当前区域要被替换的内容
  // splice(startIndex, length, 替换的内容)
  // 相当于剪切，找到数组需要被剪切的范围，然后粘贴
  let spliceRes1 = arr.splice(1, 2, 'a', 'b', 'c')
  console.log("splice用法，相当于剪切粘贴", spliceRes1, arr)  // [20, 30]  // [10, "a", "b", "c", 40]
  
  // 如果后面参数不填，相当于删除中间部分
  arr = [10, 20, 30, 40]  // 因为上面的数组已经被修改了，这里重新定义
  let spliceRes2 = arr.splice(1, 2)
  console.log("只传两个参数，相当于删除", spliceRes2, arr)  // [20, 30]  // [10, 40]
  
  // 如果不需要移除，从某个位置添加若干元素
  arr = [10, 20, 30, 40]  // 因为上面的数组已经被修改了，这里重新定义
  let spliceRes3 = arr.splice(1, 0, 666, 2333, 555)
  console.log("不需要移除，从某个位置添加若干元素", spliceRes3, arr)  // []  // [10, 666, 2333, 555, 20, 30, 40]

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  

4.3. [10, 20, 30].map(parseInt)返回结果是什么 ​

• 解题思路
  • map的参数和返回值
    • map的参数是一个函数，返回值是一个数组
    • map参数中函数的参数，一个是item,一个是index
  • parseInt的参数和返回值
    • parseInt的参数第一个是具体的数和第二个是进制位
    • 返回值是一个整型
• 答案
  • [10, NaN, NaN]
  • 手写demo传送门
  js

  // 他实际上算是简写
  // console.log([10, 20, 30].map(parseInt))  // [10, NaN, NaN]
  
  // 拆解 - 两个写法是一样的
  let res = [10, 20, 30].map((num, index)=> {
    // 第一个参数是数字，第二个参数是进制
    // 进制0和10是一样的
    // parseInt(10, 0)  // 10
    // parseInt(20, 1)  // NaN
    // parseInt(30, 2)  // NaN
    return parseInt(num, index)
  })
  console.log(res)

  // 他实际上算是简写
  // console.log([10, 20, 30].map(parseInt))  // [10, NaN, NaN]
  
  // 拆解 - 两个写法是一样的
  let res = [10, 20, 30].map((num, index)=> {
    // 第一个参数是数字，第二个参数是进制
    // 进制0和10是一样的
    // parseInt(10, 0)  // 10
    // parseInt(20, 1)  // NaN
    // parseInt(30, 2)  // NaN
    return parseInt(num, index)
  })
  console.log(res)

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  

4.4. ajax请求get和post的区别 ​

• get一般用于查询操作，post一般用于用户提交操作
• get参数拼接在url上，post放在请求体内(数据体积可更大)
• 安全性：post易于预防CSRF

5. 第4组面试题 ​

5.1. 题目 ​

• 函数call和apply的区别
• 事件代理(委托)是什么
• 闭包是什么，有什么特性，有什么负面影响

5.2. 函数call和apply的区别 ​

• 答案
  • 他们的区别主要在参数上
  • 第一个参数是this，是一样的
  • call第二个的参数开始是一个一个拆分传进去的，即参数列表
  • 第一个参数是this要指向的对象，第二个参数是数组或类数组
    • fn.call(this, p1, p2, p3)
    • fn.apply(this, arguments)
  • 两个可以相互转换，但为了方便，js做了这两种形式
  js

  function fn(x, y){
    console.log(x, y)  // 
    console.log(this) // this是指obj
  }
  
  let obj = {
    a: "obj对象"
  }
  
  // 将this指向变成obj
  fn(1, 2)  // window, 1, 2
  fn.apply(obj, [1,2]) // 第二个参数是数组  // obj, 1, 2
  fn.call(obj, 1, 2) // 第二个参数开始时参数列表  // obj, 1, 2
  fn.bind(obj, 1, 2)()  // 和call一样，但是无法直接执行

  function fn(x, y){
    console.log(x, y)  // 
    console.log(this) // this是指obj
  }
  
  let obj = {
    a: "obj对象"
  }
  
  // 将this指向变成obj
  fn(1, 2)  // window, 1, 2
  fn.apply(obj, [1,2]) // 第二个参数是数组  // obj, 1, 2
  fn.call(obj, 1, 2) // 第二个参数开始时参数列表  // obj, 1, 2
  fn.bind(obj, 1, 2)()  // 和call一样，但是无法直接执行

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  
• 延伸
  • call()的第一个参数是this要指向的对象，后面传入的是参数列表，参数可以是任意类型，当第一个参数为null、undefined的时候，默认指向window
  • call()改过this的指向后，会再执行函数，bind()改过this后，不执行函数，会返回一个绑定新this的函数
  • 即bind的传参和call一样，都是一个一个拆分传进去的，但是bind无法直接执行
  • 在判断数据类形式使用typeof，一般不是太准确的，我们可以使用Object.prototype.toString.call()方法来判断一个数据的数据类型
    • console.log(Object.prototype.toString.call(12)) // [object Number]
  • call、apply、bind的应用
    • demo包含之前面试题
    • 手写demo传送门
    js

    // call()、apply()、bind() 都是用来重定义 this 这个对象的
    
    /**
     * 面试题
     */
    function fn(x, y){
      console.log(x, y)  // 
      console.log(this) // this是指obj
    }
    
    let obj = {
      a: "obj对象"
    }
    
    // 将this指向变成obj
    fn(1, 2)  // window, 1, 2
    fn.apply(obj, [1,2]) // 第二个参数是数组  // obj, 1, 2
    fn.call(obj, 1, 2) // 第二个参数开始时参数列表  // obj, 1, 2
    fn.bind(obj, 1, 2)()  // 和call一样，但是无法直接执行
    
    /**
     * call()的应用
     */
    // 利用call()判断数据类型
    console.log(Object.prototype.toString.call("qq"))            // [Object String] 返回值都是字符串类型
    console.log(Object.prototype.toString.call(12))              // [object Number]
    console.log(Object.prototype.toString.call(false))           // [object Boolean]
    console.log(Object.prototype.toString.call(undefined))       // [object Undefined]
    console.log(Object.prototype.toString.call(null))            // [object Null]
    console.log(Object.prototype.toString.call(function(){}))    // [object Function]
    console.log(Object.prototype.toString.call([]))              // [object Array]
    console.log(Object.prototype.toString.call({}))              // [object Object]
    
    // 封装
    let getType = a=> {
      let obj = Object.prototype.toString.call(a); // 区分对象类型  确定当前的数据的类型
      let sub = obj.substr(8); 
    
      // stringObject.substr(start,length)  start 要抽取的子符串的起始下标，
      // length 截取的长度，如果不写则表示从start开始截取到最后 ，stringObject表示某一字符串
      let len = sub.length;
      sub = sub.substr(0,len-1)
      let rs =  sub.toLowerCase(sub) //转换成小写
      return rs ;
    }
    console.log(getType([])); // array
    
    // 利用call()翻转字符串
    // 思路:将字符串转化为数组，借用数组中的reverse，将字符串翻转过来
    let str = "abcdefg";
    // 方法一：这种方法内有使用call()
    let arr =  Array.from(str).reverse().join("") // 将字符串转化为数组，在进行翻转，然后在进行拼接
    console.log(arr, typeof arr) // gfedcba string
    // 方法二：
    let rs = Array.prototype.reverse.call(str.split("")).join(""); 
    // splice(start,length)方法用于把一个字符串分割成字符串数组，start 表示从指定的地方分割字符串，length表示分割的长度。
    // 返回一个一个字符串数组，如果把空字符串 ("") 用为参数那么字符串中的每个字符之间都会被分割
    console.log(rs, typeof arr) // gfedcba string
    
    // 利用apply()求最大值
    // apply()所执行的操作：1.执行Math.max(1,2,3,5,4) 2.把内部的this改成arr
    var arr1 =[2,6,8,3,4,9,7,23,56,889]; 
    // 改变this指向到math.max，给math.max传值
    console.log(Math.max.apply(arr1, arr1))  // 第一个arr表示让arr借用max这个方法，第二个arr表示传给max的数据

    // call()、apply()、bind() 都是用来重定义 this 这个对象的
    
    /**
     * 面试题
     */
    function fn(x, y){
      console.log(x, y)  // 
      console.log(this) // this是指obj
    }
    
    let obj = {
      a: "obj对象"
    }
    
    // 将this指向变成obj
    fn(1, 2)  // window, 1, 2
    fn.apply(obj, [1,2]) // 第二个参数是数组  // obj, 1, 2
    fn.call(obj, 1, 2) // 第二个参数开始时参数列表  // obj, 1, 2
    fn.bind(obj, 1, 2)()  // 和call一样，但是无法直接执行
    
    /**
     * call()的应用
     */
    // 利用call()判断数据类型
    console.log(Object.prototype.toString.call("qq"))            // [Object String] 返回值都是字符串类型
    console.log(Object.prototype.toString.call(12))              // [object Number]
    console.log(Object.prototype.toString.call(false))           // [object Boolean]
    console.log(Object.prototype.toString.call(undefined))       // [object Undefined]
    console.log(Object.prototype.toString.call(null))            // [object Null]
    console.log(Object.prototype.toString.call(function(){}))    // [object Function]
    console.log(Object.prototype.toString.call([]))              // [object Array]
    console.log(Object.prototype.toString.call({}))              // [object Object]
    
    // 封装
    let getType = a=> {
      let obj = Object.prototype.toString.call(a); // 区分对象类型  确定当前的数据的类型
      let sub = obj.substr(8); 
    
      // stringObject.substr(start,length)  start 要抽取的子符串的起始下标，
      // length 截取的长度，如果不写则表示从start开始截取到最后 ，stringObject表示某一字符串
      let len = sub.length;
      sub = sub.substr(0,len-1)
      let rs =  sub.toLowerCase(sub) //转换成小写
      return rs ;
    }
    console.log(getType([])); // array
    
    // 利用call()翻转字符串
    // 思路:将字符串转化为数组，借用数组中的reverse，将字符串翻转过来
    let str = "abcdefg";
    // 方法一：这种方法内有使用call()
    let arr =  Array.from(str).reverse().join("") // 将字符串转化为数组，在进行翻转，然后在进行拼接
    console.log(arr, typeof arr) // gfedcba string
    // 方法二：
    let rs = Array.prototype.reverse.call(str.split("")).join(""); 
    // splice(start,length)方法用于把一个字符串分割成字符串数组，start 表示从指定的地方分割字符串，length表示分割的长度。
    // 返回一个一个字符串数组，如果把空字符串 ("") 用为参数那么字符串中的每个字符之间都会被分割
    console.log(rs, typeof arr) // gfedcba string
    
    // 利用apply()求最大值
    // apply()所执行的操作：1.执行Math.max(1,2,3,5,4) 2.把内部的this改成arr
    var arr1 =[2,6,8,3,4,9,7,23,56,889]; 
    // 改变this指向到math.max，给math.max传值
    console.log(Math.max.apply(arr1, arr1))  // 第一个arr表示让arr借用max这个方法，第二个arr表示传给max的数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    

5.3. 事件代理(委托)是什么 ​

• 答案
  • 我们在上层容器去(父级)定义一个事件
  • 根据冒泡机制和事件对象(e.target)去获取子集列表的元素
  • 使用stopPropagation取消冒泡
  • 手写demo传送门
  js

  const p1 = document.getElementById('p1')
  const body = document.body
  
  // 通用的绑定函数 - 完整版
  /* let bindEvent = (elem, type, selector, fn)=> {
      if(fn == null) {
        fn = selector
        selector = null
      }
  
      // 绑定
      elem.addEventListener(type, event=> {
        const target = event.target  // 我们当前触发的元素
        // console.log("当前触发的元素", target)
  
        if(selector) {
          console.log("代理绑定");
  
          if(target.matches(selector)) {
            fn.call(target, event)
          }
        } else {
          console.log("普通绑定");
  
          fn.call(target, event)
        }
      })
  } */
  
  // 通用的绑定函数 - 简易版
  let bindEvent = (elem, type, fn)=> {
    elem.addEventListener(type, fn)
  }
  
  // p1
  bindEvent(p1, 'click', event => {
    event.stopPropagation() // 注释掉这一行可以体会冒泡
    console.log('激活')
    console.log(event.target, event.target.textContent)  // 需要知道是谁触发的
  })
  
  // body
  bindEvent(body, 'click', event => {
    console.log('取消')
    console.log(event.target, event.target.textContent)  // 需要知道是谁触发的
  })

  const p1 = document.getElementById('p1')
  const body = document.body
  
  // 通用的绑定函数 - 完整版
  /* let bindEvent = (elem, type, selector, fn)=> {
      if(fn == null) {
        fn = selector
        selector = null
      }
  
      // 绑定
      elem.addEventListener(type, event=> {
        const target = event.target  // 我们当前触发的元素
        // console.log("当前触发的元素", target)
  
        if(selector) {
          console.log("代理绑定");
  
          if(target.matches(selector)) {
            fn.call(target, event)
          }
        } else {
          console.log("普通绑定");
  
          fn.call(target, event)
        }
      })
  } */
  
  // 通用的绑定函数 - 简易版
  let bindEvent = (elem, type, fn)=> {
    elem.addEventListener(type, fn)
  }
  
  // p1
  bindEvent(p1, 'click', event => {
    event.stopPropagation() // 注释掉这一行可以体会冒泡
    console.log('激活')
    console.log(event.target, event.target.textContent)  // 需要知道是谁触发的
  })
  
  // body
  bindEvent(body, 'click', event => {
    console.log('取消')
    console.log(event.target, event.target.textContent)  // 需要知道是谁触发的
  })

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  

5.4. 闭包是什么，有什么特性，有什么负面影响 ​

• 答案
  • 闭包是什么
    • 回顾作用域和自由变量
    • 回顾闭包应用场景
      • 函数作为参数被传入
      • 函数作为返回值被返回
    • 自由变量的查找，要在函数定义的地方(作用域)(不是执行的地方)
    js

    /**
     * 理解闭包
     *
     * 跨了自己的作用域的变量都叫自由变量
     * 
     * js链式作用域：子对象会一级一级向上寻找所有父对象的变量，反之不行
     * f2可以读取f1中的变量，只要把f2作为返回值，就可以在f1外读取f1内部变量
     * 
     * 即闭包可用理解为
     * 能够读取其他函数内部变量的函数。
     * 或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用
     * 
     * 闭包用途
     * 1、读取函数内部的变量
     * 2、让这些变量的值始终保持在内存中。不会在f1调用后被自动清除。
     * 3、方便调用上下文的局部变量。利于代码封装。
     * 原因：f1是f2的父函数，f2被赋给了一个全局变量，f2始终存在内存中，f2的存在依赖f1，因此f1也始终存在内存中，不会在调用结束后，被垃圾回收机制回收。
     */
    function f1(){
      let n = 123;
    
      function f2(){    // f2是一个闭包
        console.log(n)  // 根据自由变量定义，可以拿到f1的变量
      }    
    
      return f2;
    }
    
    let res = f1()  // res是一个方法
    console.log(res)
    res()  // 执行res可用获取f1变量值

    /**
     * 理解闭包
     *
     * 跨了自己的作用域的变量都叫自由变量
     * 
     * js链式作用域：子对象会一级一级向上寻找所有父对象的变量，反之不行
     * f2可以读取f1中的变量，只要把f2作为返回值，就可以在f1外读取f1内部变量
     * 
     * 即闭包可用理解为
     * 能够读取其他函数内部变量的函数。
     * 或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用
     * 
     * 闭包用途
     * 1、读取函数内部的变量
     * 2、让这些变量的值始终保持在内存中。不会在f1调用后被自动清除。
     * 3、方便调用上下文的局部变量。利于代码封装。
     * 原因：f1是f2的父函数，f2被赋给了一个全局变量，f2始终存在内存中，f2的存在依赖f1，因此f1也始终存在内存中，不会在调用结束后，被垃圾回收机制回收。
     */
    function f1(){
      let n = 123;
    
      function f2(){    // f2是一个闭包
        console.log(n)  // 根据自由变量定义，可以拿到f1的变量
      }    
    
      return f2;
    }
    
    let res = f1()  // res是一个方法
    console.log(res)
    res()  // 执行res可用获取f1变量值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    
  • 闭包有什么负面影响
    • 变量会常驻内存，得不到释放 => 闭包不能乱用
    • 变量会常驻内存，并不一定是内存泄漏，闭包有可能造成内存泄漏，但不是一定会造成内存泄漏
    • 内存泄漏指的是，变量或者数据，在内存中，没有用了，应该被释放，但没有被释放
  • 闭包特性
    • 变量或者对象，在闭包中，他有可能是会被用到的，我们判断不了他未来是不是会被用到，所以我们不去释放它
    • 这不是一个bug，内存泄漏一般都是由bug造成的，但闭包是我们没法判断那个闭包的变量未来是否可用
• 延伸
  • 手写demo传送门
  • 闭包与内存
  js

  /**
   * 闭包与内存
   */
  // 自由变量示例 - 内存会被释放
  // 这段代码执行完，所有的内存都释放了
  let a = 0 // fn1函数执行完，a变量和fn1就被释放
  function fn1() {
    let a1 = 100  // fn2函数执行完，a1变量和fn2被释放
  
    function fn2() {
      let a2 = 200  // fn3函数执行完，a2、a3变量、fn3被释放
  
      function fn3() {
        let a3 = 300
  
        // 在这一步，所有的变量和方法还没有被释放调
        // 因为这些变量都还没用过
        return a + a1 + a2 + a3
      }
      fn3()
    }
    fn2()
  }
  fn1()
  
  // 闭包 - 函数作为返回值 - 内存不会被释放
  const create = ()=> {
    let a = 100
  
    // 函数作为返回值被返回
    return function() {
      // a在父级作用域定义，在子方法作用域被使用，跨作用域，属于自由变量
      // 由于这里使用了a这个自由变量，那么父作用域的a就不能被释放了
      // 这个a的定义必须要和方法(闭包作用域)一起被return
      // 这个a已经是闭包的变量了
      console.log(a)  
    }
  }
  
  let fn = create()
  a = 200  // 这个没有人用它，可以被释放
  fn()  // 100
  
  // 闭包 - 函数作为参数被传入
  let print = fn2=> {
    let b = 200  // 这里没有使用，会被释放
    fn2()
  }
  let b = 100
  let fn2 = ()=> {
    console.log("b", b)
  }
  print(fn2)  // 100

  /**
   * 闭包与内存
   */
  // 自由变量示例 - 内存会被释放
  // 这段代码执行完，所有的内存都释放了
  let a = 0 // fn1函数执行完，a变量和fn1就被释放
  function fn1() {
    let a1 = 100  // fn2函数执行完，a1变量和fn2被释放
  
    function fn2() {
      let a2 = 200  // fn3函数执行完，a2、a3变量、fn3被释放
  
      function fn3() {
        let a3 = 300
  
        // 在这一步，所有的变量和方法还没有被释放调
        // 因为这些变量都还没用过
        return a + a1 + a2 + a3
      }
      fn3()
    }
    fn2()
  }
  fn1()
  
  // 闭包 - 函数作为返回值 - 内存不会被释放
  const create = ()=> {
    let a = 100
  
    // 函数作为返回值被返回
    return function() {
      // a在父级作用域定义，在子方法作用域被使用，跨作用域，属于自由变量
      // 由于这里使用了a这个自由变量，那么父作用域的a就不能被释放了
      // 这个a的定义必须要和方法(闭包作用域)一起被return
      // 这个a已经是闭包的变量了
      console.log(a)  
    }
  }
  
  let fn = create()
  a = 200  // 这个没有人用它，可以被释放
  fn()  // 100
  
  // 闭包 - 函数作为参数被传入
  let print = fn2=> {
    let b = 200  // 这里没有使用，会被释放
    fn2()
  }
  let b = 100
  let fn2 = ()=> {
    console.log("b", b)
  }
  print(fn2)  // 100

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  

6. 第5组面试题 ​

6.1. 题目 ​

• 如何阻止事件冒泡和默认行为
• 查找、添加、删除、移动DOM节点的方法
• 如何减少DOM操作

6.2. 如何阻止事件冒泡和默认行为 ​

• 答案
  • event => 事件对象
  • 阻止冒泡：event.stopPropagation()
  • 阻止默认行为event.preventDefault()
  • 手写demo传送门
  html

  <div id="div1">
      <a id="a1" href="#">a1</a><br>
      <a id="a2" href="https://www.baidu.com/">a2</a><br>
      <a href="#">a3</a><br>
      <a href="#">a4</a><br>
      <button>加载更多...</button>
  </div>
  
  <script>
    const body = document.body
    const div1 = document.getElementById('div1');
    const a1 = document.getElementById('a1');
    const a2 = document.getElementById('a2');
  
    body.addEventListener('click', e=> {
      // 即a1触发冒泡到div1上，这里的e.target.textContent为a1
      // 即div1触发冒泡到body上，这里的e.target.textContent为div1里面所有的元素
      console.log('body clicked =>', e.target.textContent)
    })
  
    div1.addEventListener('click', e=> {
      // 冒泡的事件对象为触发的元素
      // 即a1触发冒泡到div1上，这里的e.target.textContent为a1
      console.log("div1 click =>", e.target.textContent)
  
      // 在这里使用阻止冒泡，就不会触发body上的点击事件
      // 如果不加阻止冒泡，会触发body上的点击事件
      // 如果不加阻止冒泡，点击button按钮，会打印
      // div1 click => 加载更多...
      // body clicked => 加载更多...
      // 不加则只会打印一个
      e.stopPropagation()  // 阻止冒泡
  
      // 阻止默认行为
      e.preventDefault()  // 地址无法跳转
    })
  
    a1.addEventListener('click', e=> {
      // 在这里使用阻止冒泡，就不会触发a1和body上的点击事件
      e.stopPropagation()  // 阻止冒泡
  
      console.log("a2 click =>", e.target.textContent)  
    })
  
    a2.addEventListener('click', e=> {
      // 点击a2可以触发div1和body的点击事件
      // 即a2的事件会一层一层往上冒泡，直到body上
      // a2 click => a2
      // div1 click => a2
      // body clicked => a2
      // 在div1处阻止冒泡，body事件无法触发
      console.log("a2 click =>", e.target.textContent, e.target, "标签不会跳转")  
    })
  </script>

  <div id="div1">
      <a id="a1" href="#">a1</a><br>
      <a id="a2" href="https://www.baidu.com/">a2</a><br>
      <a href="#">a3</a><br>
      <a href="#">a4</a><br>
      <button>加载更多...</button>
  </div>
  
  <script>
    const body = document.body
    const div1 = document.getElementById('div1');
    const a1 = document.getElementById('a1');
    const a2 = document.getElementById('a2');
  
    body.addEventListener('click', e=> {
      // 即a1触发冒泡到div1上，这里的e.target.textContent为a1
      // 即div1触发冒泡到body上，这里的e.target.textContent为div1里面所有的元素
      console.log('body clicked =>', e.target.textContent)
    })
  
    div1.addEventListener('click', e=> {
      // 冒泡的事件对象为触发的元素
      // 即a1触发冒泡到div1上，这里的e.target.textContent为a1
      console.log("div1 click =>", e.target.textContent)
  
      // 在这里使用阻止冒泡，就不会触发body上的点击事件
      // 如果不加阻止冒泡，会触发body上的点击事件
      // 如果不加阻止冒泡，点击button按钮，会打印
      // div1 click => 加载更多...
      // body clicked => 加载更多...
      // 不加则只会打印一个
      e.stopPropagation()  // 阻止冒泡
  
      // 阻止默认行为
      e.preventDefault()  // 地址无法跳转
    })
  
    a1.addEventListener('click', e=> {
      // 在这里使用阻止冒泡，就不会触发a1和body上的点击事件
      e.stopPropagation()  // 阻止冒泡
  
      console.log("a2 click =>", e.target.textContent)  
    })
  
    a2.addEventListener('click', e=> {
      // 点击a2可以触发div1和body的点击事件
      // 即a2的事件会一层一层往上冒泡，直到body上
      // a2 click => a2
      // div1 click => a2
      // body clicked => a2
      // 在div1处阻止冒泡，body事件无法触发
      console.log("a2 click =>", e.target.textContent, e.target, "标签不会跳转")  
    })
  </script>

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  

6.3. 查找、添加、删除、移动DOM节点的方法 ​

• 答案
  • 手写demo传送门
  • 查找节点
    • 基本的查找
      • document.getElementById()
      • document.getElementsByTagName()
      • document.getElementsByClassName()
      • document.querySelector()
      • document.querySelectorAll()
    • 查找父子元素
      • xxx.parentNode => 查找父元素
      • xxx.childNodes => 查找子元素（会查到标签和文本元素）
      html

      <div id="div1" class="container">
          <p id="p1">111</p>
          <p>p222</p>
          <p>333</p>
      </div>
      
      <script>
        /**
        * 查找父子元素
        */
        // 查找父元素
        const p1 = document.getElementById('p1')
        console.log(p1.parentNode)
      
        // 查找子元素
        const div1 = document.getElementById('div1')
        console.log(div1.childNodes)  // 复数
      
        // 查找子元素里面非#text的元素，即所有的p标签
        // 我们可以使用nodeName和nodeType判断它是不是普通的p标签
        const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child=> {
          // 如果是普通p标签
          // console.log(child.nodeName)  // p #text
          // console.log(child.nodeType)  // 1 3
      
          // 普通dom节点类型为1
          // 文本类型为3
          if(child.nodeType === 1) {
            return true
          }
          return false
        })
        console.log(div1ChildNodesP)  // dom数组
        // console.log(div1ChildNodesP[0].nodeName)  // p
      </script>

      <div id="div1" class="container">
          <p id="p1">111</p>
          <p>p222</p>
          <p>333</p>
      </div>
      
      <script>
        /**
        * 查找父子元素
        */
        // 查找父元素
        const p1 = document.getElementById('p1')
        console.log(p1.parentNode)
      
        // 查找子元素
        const div1 = document.getElementById('div1')
        console.log(div1.childNodes)  // 复数
      
        // 查找子元素里面非#text的元素，即所有的p标签
        // 我们可以使用nodeName和nodeType判断它是不是普通的p标签
        const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child=> {
          // 如果是普通p标签
          // console.log(child.nodeName)  // p #text
          // console.log(child.nodeType)  // 1 3
      
          // 普通dom节点类型为1
          // 文本类型为3
          if(child.nodeType === 1) {
            return true
          }
          return false
        })
        console.log(div1ChildNodesP)  // dom数组
        // console.log(div1ChildNodesP[0].nodeName)  // p
      </script>

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      
  • 添加节点
    • document.createElement()
    • xxx.appendChild()
    html

    <div id="div2"></div>
    
    <script>
      const div2 = document.getElementById('div2')
      // 添加新节点
      const div2p1 = document.createElement('p')  // 此时还未插入，只是定义
      div2p1.innerHTML = 'this is div2p1'  // 给这个元素加点内容
      div2.appendChild(div2p1)  // 添加新创建的元素到dom节点
    </script>

    <div id="div2"></div>
    
    <script>
      const div2 = document.getElementById('div2')
      // 添加新节点
      const div2p1 = document.createElement('p')  // 此时还未插入，只是定义
      div2p1.innerHTML = 'this is div2p1'  // 给这个元素加点内容
      div2.appendChild(div2p1)  // 添加新创建的元素到dom节点
    </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
  • 删除节点
    • xxx.removeChild(xxxChild) => 删除子节点
    • xxx.remove() => 删除整个dom
    html

    <div id="div3">
      <a href="@">a1</a>
      <a href="@">a2</a>
    
      <div id="div3_1">
          div3_1内容
      </div>
    </div>
    
    <script>
      const div3 = document.getElementById('div3')
      const div3_a = div3.querySelector('a')  // 只获取第一个
      const div3_1 = div3.querySelector('#div3_1')
      // console.log(div3_a)
      console.log(div3_1)
    
      // 删除子节点
      div3.removeChild(div3_a)
    
      // 删除整个dom(div)
      div3_1.remove()
    </script>

    <div id="div3">
      <a href="@">a1</a>
      <a href="@">a2</a>
    
      <div id="div3_1">
          div3_1内容
      </div>
    </div>
    
    <script>
      const div3 = document.getElementById('div3')
      const div3_a = div3.querySelector('a')  // 只获取第一个
      const div3_1 = div3.querySelector('#div3_1')
      // console.log(div3_a)
      console.log(div3_1)
    
      // 删除子节点
      div3.removeChild(div3_a)
    
      // 删除整个dom(div)
      div3_1.remove()
    </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    
  • 移动DOM节点
    html

    <div id="div4">
      <p id="div4p">div4p</p>
    </div>
    <div id="div5">
      div5内容
    </div>
    
    <script>
      const div4 = document.getElementById('div4')
      const div4p = div4.getElementsByTagName('p')[0]  // 获取dom标签
      // console.log(div4p)  
    
      const div5 = document.getElementById('div5')
      div5.appendChild(div4p)
    </script>

    <div id="div4">
      <p id="div4p">div4p</p>
    </div>
    <div id="div5">
      div5内容
    </div>
    
    <script>
      const div4 = document.getElementById('div4')
      const div4p = div4.getElementsByTagName('p')[0]  // 获取dom标签
      // console.log(div4p)  
    
      const div5 = document.getElementById('div5')
      div5.appendChild(div4p)
    </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
• 注意事项
  • 插入和移动看似是两个方法，但实际上api是一样的

6.4. 如何减少DOM操作 ​

• 背景
  • dom操作非常消耗性能
• 答案
  • 手写demo传送门
  • 缓存dom查询结果
  html

  <div id="div1" class="container">
      <p>111</p>
      <p>222</p>
      <p>333</p>
  </div>
  
  <script>
    const div1 = document.getElementById('div1')
    const pList = div1.querySelectorAll('p')
    // console.log(pList)
  
    let length = pList.length
    for(let i=0; i<length; i++) {
      // 缓存length，只进行一次dom查询
      console.log("缓存dom查询结果", pList[i])
    }
  </script>

  <div id="div1" class="container">
      <p>111</p>
      <p>222</p>
      <p>333</p>
  </div>
  
  <script>
    const div1 = document.getElementById('div1')
    const pList = div1.querySelectorAll('p')
    // console.log(pList)
  
    let length = pList.length
    for(let i=0; i<length; i++) {
      // 缓存length，只进行一次dom查询
      console.log("缓存dom查询结果", pList[i])
    }
  </script>

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  
  • 多次dom操作，合并到一次插入(代码片段)
  html

  <ul id="list"></ul>
  
  <script>
    const list = document.getElementById('list')
    // console.log(list)
  
    // 创建一个文档片段，此时还没有插入到 DOM 结构中
    const frag = document.createDocumentFragment();
  
    // 执行插入
    for(let i=0; i<10; i++) {
      const li = document.createElement('li')
      li.innerHTML = "List item " + i
      // list.appendChild(li)  // 这样就会频繁操作dom
      frag.appendChild(li)  // 先在文档片段中插入
    }
  
    // 都完成之后，再统一插入到 DOM 结构树中
    list.appendChild(frag)
  </script>

  <ul id="list"></ul>
  
  <script>
    const list = document.getElementById('list')
    // console.log(list)
  
    // 创建一个文档片段，此时还没有插入到 DOM 结构中
    const frag = document.createDocumentFragment();
  
    // 执行插入
    for(let i=0; i<10; i++) {
      const li = document.createElement('li')
      li.innerHTML = "List item " + i
      // list.appendChild(li)  // 这样就会频繁操作dom
      frag.appendChild(li)  // 先在文档片段中插入
    }
  
    // 都完成之后，再统一插入到 DOM 结构树中
    list.appendChild(frag)
  </script>

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  

7. 第6组面试题 ​

7.1. 题目 ​

• 解释jsonp原理，为何他不是真正的ajax
• document load和ready的区别
• ==和===的不同

7.2. 解释jsonp原理，为何他不是真正的ajax ​

• 答案

  • ajax是通过XMLHttpRequest这个api实现的，而jsonp是通过script标签实现的
  • jsonp的原理就是，定义一个全局函数，去访问一段js
  • 通过这个就可以明白，他不是一个ajax，他没有去使用XMLHttpRequest这个api
  • 手写demo传送门
  html

  <script>
    // JSONP的callback是cbt，见下面src的cb
    window.cbt = function(data) {
      // 这是我们跨域得到的信息
      console.log("访问script的src获取数据", data)
    }
  </script>
  
  <script src="https://www.baidu.com/sugrec?&prod=pc&wd=mac笔记本&cb=cbt"></script>

  <script>
    // JSONP的callback是cbt，见下面src的cb
    window.cbt = function(data) {
      // 这是我们跨域得到的信息
      console.log("访问script的src获取数据", data)
    }
  </script>
  
  <script src="https://www.baidu.com/sugrec?&prod=pc&wd=mac笔记本&cb=cbt"></script>

  1
  2
  3
  4
  5
  6
  7
  8
  9
  

• 延伸

  • 浏览器的同源策略(服务端没有同源策略)
    • 后端用nginx代理也可以算是一个跨域的解决方式
    • nginx其实算是服务端，服务端没有同源策略，服务端其实没有跨域这个说法
    • 如果按严格来说，nginx代理其实可以算是后端转发
    • 后端没有同源策略，所以不能说是跨域，应该说转发
  • 跨域(协议、域名、端口有一个不同就是跨域)
    • 为什么后端没有同源策略，前端，浏览器有同源策略
      • 安全问题，不同域不能有资源的访问
      • 后端没有同源策略，但他可以自己做一些预防
      • 因为后端代码是运行在服务器上的，可以对他做一些控制
      • 前端代码是运行在浏览器上的，所以这个控制得浏览器去做安全性的控制即同源策略
    • 要实现跨域，必须要得到服务端的支持和允许，不然就是非法的，无法请求数据
  • 哪些html标签能绕过跨域
    • img、script
    • 他可能会去请求一些外域的图片，或者使用cdn，必须要可以跨域
  • 实现一个简易的百度搜索功能(百度搜索用的是jsonp)
    html

    <div class="search_box">
        <input type="text" id="input1">
        <ul id="todolist"></ul>
    </div>
    
    <script src="../../js/lib/jquery1.8.3.min.js"></script>
    <script>
      // ajax请求
      const reqAns = (words, fn)=> {
        $.ajax({
          url: "https://www.baidu.com/sugrec",
          type: 'GET',
          dataType:"jsonp",
          data: {
            prod: "pc",
            wd: words,
          },
          success(data) {
            // console.log("ajax请求", data);
    
            let res = data.g
    
            fn(res)
          }
        })
      }
    
      // 防抖
      const debounce = (fn, delay = 500)=> {
        let timer = null;
    
        return function() {
          if(timer) {
            clearTimeout(timer)
          }
    
          timer = setTimeout(()=> {
            fn.apply(this, arguments)  
    
            timer = null
          }, delay)
        }
      }
    
      // 去除所有空格 在api上添加
      String.prototype.NoSpace = function () {
        return this.replace(/\s+/g, "");
      };
    
      // 使用防抖，优化体验
      $('#input1').keyup(debounce(function(e) {
        // 使用箭头函数，this指向为window
        // console.log(e.target)
        // console.log($(this).val())
    
        let words = $(this).val()
    
          // 参数名可以和封装的传参不一样
        reqAns(words, res=> {
          // console.log("使用防抖获取的数据", res)
          let str = ""
    
          if(!res) {
            $('#todolist').html("")
            return
          }
    
          res.forEach(item=> {
            str += `
              <li>${item.q}<li>
            `
          })
          // 去除所有空格
          str = str.NoSpace()
          // console.log("str", str)
    
          $('#todolist').html(str)
    
          let liList = $('#todolist li')
          // console.log(liList)
    
          // 由于结果数据里面有空行，空行可能是方法，可能是空的dom，也可能是undefind
          for(item in liList) {
            // console.log(liList[item].nodeName)
    
            // 判断节点属性为li，并且它里面没有内容
            // remove不能删方法
            if(liList[item].nodeName == "LI" && !liList[item].textContent) {
              // 删除节点
              liList[item].remove()
            }
          }
    
          $('#todolist li').click((e)=> {
            $('#input1').val(e.target.textContent)
            console.log($('#input1').val())
          })
        })
      }))
    
      $('#input1').focus(()=> {
        $("#todolist").show()
      })
      $('#input1').blur(()=> {
        setTimeout(()=> {
          $("#todolist").hide()
        }, 1000)
      })
    </script>

    <div class="search_box">
        <input type="text" id="input1">
        <ul id="todolist"></ul>
    </div>
    
    <script src="../../js/lib/jquery1.8.3.min.js"></script>
    <script>
      // ajax请求
      const reqAns = (words, fn)=> {
        $.ajax({
          url: "https://www.baidu.com/sugrec",
          type: 'GET',
          dataType:"jsonp",
          data: {
            prod: "pc",
            wd: words,
          },
          success(data) {
            // console.log("ajax请求", data);
    
            let res = data.g
    
            fn(res)
          }
        })
      }
    
      // 防抖
      const debounce = (fn, delay = 500)=> {
        let timer = null;
    
        return function() {
          if(timer) {
            clearTimeout(timer)
          }
    
          timer = setTimeout(()=> {
            fn.apply(this, arguments)  
    
            timer = null
          }, delay)
        }
      }
    
      // 去除所有空格 在api上添加
      String.prototype.NoSpace = function () {
        return this.replace(/\s+/g, "");
      };
    
      // 使用防抖，优化体验
      $('#input1').keyup(debounce(function(e) {
        // 使用箭头函数，this指向为window
        // console.log(e.target)
        // console.log($(this).val())
    
        let words = $(this).val()
    
          // 参数名可以和封装的传参不一样
        reqAns(words, res=> {
          // console.log("使用防抖获取的数据", res)
          let str = ""
    
          if(!res) {
            $('#todolist').html("")
            return
          }
    
          res.forEach(item=> {
            str += `
              <li>${item.q}<li>
            `
          })
          // 去除所有空格
          str = str.NoSpace()
          // console.log("str", str)
    
          $('#todolist').html(str)
    
          let liList = $('#todolist li')
          // console.log(liList)
    
          // 由于结果数据里面有空行，空行可能是方法，可能是空的dom，也可能是undefind
          for(item in liList) {
            // console.log(liList[item].nodeName)
    
            // 判断节点属性为li，并且它里面没有内容
            // remove不能删方法
            if(liList[item].nodeName == "LI" && !liList[item].textContent) {
              // 删除节点
              liList[item].remove()
            }
          }
    
          $('#todolist li').click((e)=> {
            $('#input1').val(e.target.textContent)
            console.log($('#input1').val())
          })
        })
      }))
    
      $('#input1').focus(()=> {
        $("#todolist").show()
      })
      $('#input1').blur(()=> {
        setTimeout(()=> {
          $("#todolist").hide()
        }, 1000)
      })
    </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109