【面试真题】

面试真题

• 搜集网上的高频JS初级面试题
• 验证和复习之前学过的知识
• 补充其他技能，如正则表达式、数组 API

温馨提示：

• 题目未按照知识点或者难度排序，是混排的
• 只筛选了初级面试题，即本课程体系之内的

题目 - 1

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

var 和 let const 的区别

• var 是 ES5 语法，let const 是 ES6 语法；var 有变量提升
• var 和 let 是变量，可修改；const 是常量，不可修改
• let const 有块级作用域，var 没有

typeof 返回哪些类型

• undefined string number boolean symbol
• object（注意，typeof null === ‘object’）
• function

列举强制类型转换和隐式类型转换

• 强制：parseInt parseFloat toString 等
• 隐式：if、逻辑运算、==、+ 拼接字符串

题目 - 2

• 手写深度比较，模拟 lodash.isEqual
• split() 和 join() 的区别
• 数组的 pop push unshift shift 分别做什么

手写深度比较，模拟 lodash.isEqual

具体代码如下：

// 判断是否是对象或数组
function isObject(obj) {
   
    return typeof obj === 'object' && obj !== null
}
// 全相等（深度）
function isEqual(obj1, obj2) {
   
    if (!isObject(obj1) || !isObject(obj2)) {
   
        // 值类型（注意，参与 equal 的一般不会是函数）
        return obj1 === obj2
    }
    if (obj1 === obj2) {
   
        return true
    }
    // 两个都是对象或数组，而且不相等
    // 1. 先取出 obj1 和 obj2 的 keys ，比较个数
    const obj1Keys = Object.keys(obj1)
    const obj2Keys = Object.keys(obj2)
    if (obj1Keys.length !== obj2Keys.length) {
   
        return false
    }
    // 2. 以 obj1 为基准，和 obj2 依次递归比较
    for (let key in obj1) {
   
        // 比较当前 key 的 val —— 递归！！！
        const res = isEqual(obj1[key], obj2[key])
        if (!res) {
   
            return false
        }
    }
    // 3. 全相等
    return true
}

split() 和 join() 的区别

split 通过指定符号拆分为一个数组；

join 通过指定符号拼接为字符串

数组的 pop push unshift shift 分别做什么？

回答基准：

• 功能是什么？

• 返回值是什么？

• 是否会对原数组造成影响？

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

// pop  删除最后一个
const popRes = arr.pop() 
console.log(popRes, arr) // 40 [10,20,30]

// shift  删除最前面一个
const shiftRes = arr.shift()
console.log(shiftRes, arr) // 10 [20,30,40]

// push  在最后面添加一个
const pushRes = arr.push(50) // 返回 length
console.log(pushRes, arr) // 5 [10,20,30,40,50]

// unshift  在最前面添加一个
const unshiftRes = arr.unshift(5) // 返回 length
console.log(unshiftRes, arr) // 5 [5,10,20,30,40]

纯函数：1. 不改变源数组（没有副作用）；2. 返回一个数组

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

// concat  [10,20,30,40,50,60,70]
const arr1 = arr.concat([50, 60, 70])
// map  [100,200,300,400]
const arr2 = arr.map(num => num * 10)
// filter  [30,40]
const arr3 = arr.filter(num => num > 25)
// slice 类似于做了一个深拷贝
const arr4 = arr.slice()

非纯函数

// push pop shift unshift

// forEach

// some every

// reduce

题目 - 3

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

数组 slice 和 splice 的区别

• 功能区别（slice — 切片， splice— 剪接）
• 参数和返回值
• 是否是纯函数？

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

// slice 纯函数
const arr1 = arr.slice() // 不传参数相当于深拷贝一份arr [10, 20, 30, 40, 50]
const arr2 = arr.slice(1, 4) // 截取索引1-4的元素 [20,30,40]
const arr3 = arr.slice(2) // 截取索引2及之后的元素 [30,40,50]
const arr4 = arr.slice(-3) // 截取最后三个 [30,40,50]

// splice 非纯函数
const spliceRes = arr.splice(1, 2, 'a', 'b', 'c')
// const spliceRes1 = arr.splice(1, 2) // 只剪切不增加内容
// const spliceRes2 = arr.splice(1, 0, 'a', 'b', 'c') // 只增加内容不剪切
console.log(spliceRes, arr)

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

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

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

// 拆解
[10, 20, 30].map((num, index) => {
   
    return parseInt(num, index)
})

剖析使用的方法和参数：

• map的参数和返回值

  map() 方法定义在JavaScript的Array中， 它返回一个新的数组， 数组中的元素为原始数组调用函数处理后的值。
  array.map(function (currentValue, index, arr), thisIndex).
  currentValue： 必须。 当前元素的的值。
  index： 可选。 当前元素的索引。
  arr： 可选。 当前元素属于的数组对象。
  thisIndex可选。 对象作为该执行回调时使用， 传递给函数， 用作 "this"的值。

• parseInt参数和返回值

  parseInt() 函数可解析一个字符串， 并返回一个整数。
  parseInt(string, radix).
  string 要被解析的字符串。
  radix 表示要解析的数字的基数。 该值介于 2~36 之间。如果省略该参数或其值为 0， 则数字将以 10 为基础来解析。 如果它以“ 0x” 或“ 0X” 开头， 将以 16 为基数。
  如果该参数小于 2 或者大于 36， 则 parseInt() 将返回 NaN

问题解析：

parseInt方法有两个参数，默认接受了来自map方法的前两个参数，map的前两个参数分别是遍历的值和索引；
所以parseInt接收到的三个组值得情况分别是：

parseInt(10,0)：数字基数为0，数字以 10进制解析，故结果为 10；
parseInt(20,1)：数字基数为1，数字以 1进制解析，1进制出现了2，1进制无法解析，结果返回NaN；
parseInt(30,2)：数字基数为2，数字以 2进制解析，2进制出现了3，3进制无法解析，结果返回NaN；

所以最终结果为：[10, NaN, NaN]

ajax 请求 get 和额post 的区别？

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

题目 - 4

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

函数 call 和 apply 的区别

fn.call(this,p1,p2