js面试题1

JS面试题部分一：

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.var和let、const的区别？

（1）var是ES5语法，let const是ES6语法；var有变量提升
（2）var和let是定义变量的，可以修改；const是常量，不可以修改；
（3）let const有块级所用域，var没有

代码如下（示例）：

//1.下面方式就是undefined  变量提升 ES5
console.log(a)
var a = 100

// 与上面一样
// var a
// console.log(a)
// a = 200
// 下面方法是表示b没声明Cannot access 'b' before initialization
console.log(b)
let b = 20

// 2.块级作用域
// for(var i =0;i<10;i++){
//   var j = i + 1
// }
//let有块级作用域
for(let i =0;i<10;i++){
  let j = i + 1
}
console.log(i,j)

注：
【1】JavaScript块级作用域 块作用域{ } JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域，使用let声明的变量只能在块级作用域里访问，有“暂时性死区”的特性（也就是说声明前不可用）

2.typeof返回哪些类型？

（1）undefined、string、number、boolean、symbol
（2）object（注意，typeof null === ‘object’）
（3）function

代码如下（示例）：

// 3.typeof能判断那些类型
console.log(typeof null) // object
console.log(typeof null === 'object') // true

3.列举强制类型转换和隐式类型转换？

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

---

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

实现如下效果：

const obj1 = {a: 10, b:{ x: 100, y: 200 }}
const obj2 = {a: 10, b:{ x: 100, y: 200 }}
isEqual(obj1,obj2) === true

// 判断对象
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(obj1)
  if (obj1Keys.length !== obj2Keys.length) {
    return false
  }
  //结果：
  // Object.keys([10,30,40,50])
  // (4) ['0', '1', '2', '3']
  // Object.keys({a:10,c:20})
  // (2) ['a', 'c']

  // 2.以obj1为基准，和obj2一次递归比较
  for (let key in obj1) {
    // 比较当前key的val---- 递归
    const res = isEqual(obj1[key],obj2[key])
    if(!res){
      return false
    }
  }
  // 3.全相等
  return true
}

// 测试
const obj1 = {
  a: 100,
  b: {
    x: 100,
    y: 200
  }
}

const obj2 = {
  a: 100,
  b: {
    x: 100,
    y: 100
  }
}

console.log(obj1 === obj2)
console.log(isEqual(obj1, obj2))

5.split()和join()的区别?

split()是以逗号形式拆分
join()是拆分开后以给定的符号拼接

console.log('1-2-3'.split('-')) // ['1','2','3']
console.log([1,2,3].join('-')) // '1-2-3'

6.数组的pop push unshift shift分别做什么?

（1）功能是什么？
（2）返回值是什么？
（3）是否会对原数组造成影响？（会影响）

// pop push unshift  shift
const arr = [1,2,3,4]

//pop抛出数组最后的元素，并且返回抛出的元素
const popRes = arr.pop()
console.log(popRes,arr)// 4 [1,2,3]

// push 向数组末尾插入元素，并返回数组插入元素后的长度length
const pushRes = arr.push(20)
console.log(pushRes,arr)// 5  [1,2,3,4,20]

// unshift 从前插入元素，返回length
const unshiftRes = arr.unshift(5) 
console.log(unshiftRes,arr)// 5 [5,1,2,3,4]

// shift 把数组最前面元素抛出，并且返回抛出的元素
const shiftRes = arr.shift()
console.log(shiftRes,arr)// 1 [2,3,4]

7、数组的API,有哪些是纯函数？

纯函数是什么:
（1）不改变原数组（没有副作用）
（2）返回一个数组

纯函数有哪些：
concat、map、filter、slice
作用：
concat():

map():

filter():把 Array 的某些元素过滤掉，然后返回剩下的元素。 和 map () 类似， Array 的 filter () 也接收一个函数。 和 map () 不同的是， filter () 把传入的函数依次作用于每个元素，然后根据返回值是 true 还是 false 决定保留还是丢弃该元素。

slice():

const arr = [1,2,3,4]

//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()

非纯函数有哪些：
push、pop、unshift、shift
forEach
some、every
reduce

8.数组slice和splice的区别？

（1）功能区别（slice-切片，splice-剪接）
（2）参数和返回值(slice返回切片的元素，splice返回剪掉的元素)
（3）是否纯函数？(slice是纯函数 splice不是纯函数)

		const arr = [10,20,30,40,50]
        // 1.slice和splice的区别
        // (1).slice纯函数-切片
        const arr1 = arr.slice(1,4) // [20,30,40]   从下标一开始切片，不包括下标4
        const arr2 = arr.slice(1) //[20,30,40,50]
        const arr3 = arr.slice(-3) //[30,40,50]
        console.log(arr1,arr2,arr3)

        // (2)splice不是纯函数-剪接===>返回剪掉的元素
        const spliceRes = arr.splice(1,2,'a','b','c') // 从下标1，开始剪接，步长为2
        console.log(spliceRes,arr)// [20,30] ===> [10,a,b,c,40,50]

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

（1）map参数和返回值
（2）parsetIn参数和返回值

 //   2.[10,20,30].map(parseInt)
        const res = [10,20,30].map(parseInt)
        console.log(res)
		// 10 0  返回10; 20  1  ===》识别不了NAN 30; 2 ==>二进制只能是0和1所以识别不了返回NAN

      // 上面代码可以拆分成如下代码
      [10,20,30].map((num, index) => {
             return parseInt(num,index)
      })

注：
【1】map()函数根据一个回调函数创建一个新的函数，它会遍历数组中的每一个值
【2】parseInt()第二参数作为基数，告诉函数需要用多少进制进行转换，0默认是10进制转换 识别不了返回NAN
parseInt() 函数可解析一个字符串，并返回一个整数。
parseInt 可以接受 2 个函数。parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

10.ajax请求get和post的区别？

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