JS万字整理JavaScript相关基础技术面试题总结 - 前端面试必备 - 基础知识总结 - 秋招冲鸭

Posted 2021-09-04 YK菌

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS万字整理JavaScript相关基础技术面试题总结 - 前端面试必备 - 基础知识总结 - 秋招冲鸭相关的知识，希望对你有一定的参考价值。

文章目录

之前也总结过一些前端面试题，推荐可以一起看看

【网络】计算机网络常见面试题 - 前端面试必备 - 吐血整理

【CSS】面试题总结 - 基础知识总结 - 复习专用 - 前端面试必备 - 吐血整理

【Vue】面试题总结 - 基础知识总结 - 复习专用 - 组件相关 - Vue家族 - 源码相关

这次是关于javascript的面试题有题目也有答案，想深入了解，可以看我之前的一些笔记博文（狠详细）。当然，每题有相关博文的我都会放链接~

持续更新中…

1. 变量声明与类型

1.1 var let const 区别

var是ES5语法，let、const是ES6的语法
var有变量提升
var、let是变量，可修改；const是常量，不可修改
let、const 块级作用域；var函数作用域

【ES6】变量声明-var-let-const-区别与联系-总结

1.2 数据类型

值类型（7个）：Undefined、Null、Number、String、Boolean、Symbol(ES6)、BigInt(ES10)
引用类型：Object：Array、Function

【JS】JavaScript-ES5数据类型-基本数据类型-引用数据类型-类型之间的转换-数据类型的判断

1.3 值类型与引用类型的区别

值类型存在栈内存中，变量拿到的就是它的值
引用类型存在堆内存中，变量拿到的只是它的一个引用，是它的地址

【JS】JavaScript-对象-Object-内建对象-宿主对象-自定义对象-操作对象-基本数据类型与引用数据类型区别

1.4 typeof 能判断哪些类型

undefined、string、number、boolean、symbol、bigint【除了null的基本类型】
function 【函数】
object (typeof null === ‘object’) 【所有引用类型只能到object这里】

1.5 判断数据类型的方式

typeof 【除了null的基本类型 + function】
instanceof 【引用类型】【从子类到父类直到object】【顺着原型链】
toString() 【任意类型】
Array.isArray() 【数组】

1.6 `===` 与 `==`

=== 严格的比较是否相等

== 会进行类型转换，再进行比较

以下都是成立的

100 == '100'
0 == ''
0 == false
fase == ''
null == undefined

有一个情况可以用下 ==

if(a == null) {}
// 等价于
if(a === null || a === undefined)()

1.7 truly变量与falsely变量

truly变量：!!a === true 的变量
falsely变量：!!b === false 的变量

以下是falsey变量，除了这六种情况，其余都是truely变量

!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false

1.8 强制类型转换和隐式类型转换

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

一定要看这个，狠详细
【JS】JavaScript-ES5数据类型-基本数据类型-引用数据类型-类型之间的转换-数据类型的判断

1.9 语句与表达式

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

a
a+b
demo(1)
x===y? 'a': 'b'

语句

if(){}
for(){}

2. 数组字符串相关

2.1 手写深拷贝

function deepClone(obj){
	if (typeof obj !== 'object' || obj === null){
		return obj
	}
	let result = Array.isArray(obj) ? []: {}
	for (let key in obj) {
		if(obj.hasOwnProperty(key)) {
			result[key] = deepClone(obj[key])
		}
	}
	return result
}

【JS】自定义JS工具函数库-自定义对象方法-new-instanceof-mergeObject-实现数组与对象的深拷贝与浅拷贝-封装字符串相关函数

2.2 手写深度比较

// 判断是否是对象或数组
function isObject(obj) {
  return typeof obj === object && obj !== null;
}

// 深度比较
function isEqual(obj1, obj2) {
  if (!isObject(obj1) || !isObject(obj2)) {
    // 值类型，直接判断【一般不会传函数，不考虑函数】
    return obj1 === obj2;
  }
  if (obj1 === obj2) {
    return true;
  }
  // 两个都是对象或数组，而且不相等
  // 1. 先判断键的个数是否相等，不相等一定返回false
  const obj1Keys = Object.keys(obj1);
  const obj2Keys = Objext.keys(obj2);
  if (obj1Keys.length !== obj2Keys.length) {
    return false;
  }
  // 2. 以obj1为基准，和obj2依次递归比较
  for (let key in obj1) {
    // 递归比较
    const res = isEqual(obj1[key], obj2[key]);
    if (!res) {
      return false;
    }
  }
  // 3. 全相等
  return true;
}

2.3 数组的API有哪些是纯函数

纯函数：①不改变原数组(没有副作用) ②返回一个新数组
concat、map、filter、slice

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

【JS】你不得不知道的JavaScript数组相关知识【全面总结】复习专用

2.4 `split()`和`join()`的区别

split() 是字符串的方法
join() 是数组的方法

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

2.5 数组`slice`与`splice`区别

slice 切片
splice 剪接

【JS】JavaScript数组-操作方法-concat-数组强制打平-slice-splice方法使用

2.6 手写字符串 trim

String.prototype.trim = function() {
	return this.replace(/^\\s+/, '').replace(/\\s+$/, '')
}

3. 函数相关

3.1 函数声明与函数表达式

函数声明式

function fn(a, b) {
  return a + b;
}

函数表达式

let fun = function(a, b){
  return a + b;
}

3.2 什么是JSON

JSON是一种数据格式，本质是一段字符串
JSON格式与JS对象结构一致，对JS语言更友好
window.JSON是一个全局对象，常用的两个方法 JSON.stringify 和JSON.parse

3.3 将URL参数解析成JS对象

传统方法，分析search

function queryToObj() {
	const res = {}
	const search = location.search.substr(1)
	search.split('&').forEach(paramStr => {
		const arr = paramStr.split('=')
		const key = arr[0]
		const val = arr[1]
		res[key] = val
	})
	return res
}

使用URLSearchParams

function queryToObj() {
	const res = {}
	const pList = new URLSearchParams(location.search)
	pList.forEach((val, key) => {
		res[key] = val
	})
	return res
}

4. 原型与原型链

4.1 解释一下原型与原型链

每个函数对象都有显式原型 prototype
每个实例对象都有隐式原型 __proto__
实例对象的__proto__指向函数对象的prototype

（之前博文中的图）

原型链：实例对象在获取对象上的属性和方法时，先在自身找，找不到就去隐式原型上面找

（之前博文中的图）

4.2 class的原型本质

class是ES6语法规范，由ECMA委员会发布【构造函数、继承】
ECMA只规定语法规则，不规定如何实现

下面博文具体介绍了class语法，以及具体的原生实现【构造函数、继承】

【ES6】JavaScript面向对象-面向对象与面向过程的对比-类class-继承extends-构造函数-super

【JS】JavaScript创建对象 - 工厂模式 - 构造函数模式 - 原型模式 - 原型链 - 组合模式

【JS】JavaScript继承 - 原型链 - 盗用构造函数 - 组合继承 -原型式继承 - 寄生式继承 - 寄生式组合继承

4.3 new Object() 与 Object.create()的区别

{} 等同于 new Object()，原型为Object.prototype
Object.create(null) 没有原型
Object.create({...}) 可以指定原型

4.4 用class语法写一个简单的jQuery

class jQuery {
  constructor(selector) {
    const result = document.querySelectorAll(selector);
    const length = result.length;
    for (let i = 0; i < length; i++) {
      this[i] = result[i];
    }
    this.length = length;
    this.selector = selector;
  }

  get(index) {
    return this[index];
  }

  each(fn) {
    for (let i = 0; i < this.length; i++) {
      const elem = this[i];
      fn(elem);
    }
  }
  
  on(type, fn) {
    return this.each((elem) => {
      elem.addEventListener(type, fn, false);
    });
  }
}

// 插件
jQuery.prototype.dialog = function(info){
	console.log(info);
}

// 拓展性
class myjQuery extends jQuery{
	constructor(selector){
		super(selector)
	}
	// 扩展自己的方法
	addClass(className){}
	addStyle(data){}
}

5. 作用域与闭包

【JS】函数定义与调用方式-函数this指向问题-call-apply-bind方法使用与自定义

【JS】你不知道的JavaScript笔记（二）- this - 四种绑定规则 - 绑定优先级 - 绑定例外 - 箭头函数

5.1 作用域

一个变量合法的使用范围，JS中采用的是词法作用域（静态作用域）
【变量的查找，取决于在哪里定义，而不是在哪里执行】

全局作用域 - 函数作用域 - 块级作用域

自由变量：一个变量在当前作用域没有定义，但是被使用了。这时就向上级作用域一层一层依次查找，直到找到为止，最后在全局作用域都没找到就报错 ReferenceError：xxx is not defiend

5.2 this不同场景下如何取值

this查找采用的是动态作用域
【this的指向，取决于在哪里执行，而不是在哪里定义】

例题

const User = {
	count: 1,
	getCount: function() {
		return this.count
	}
}
console.log(User.getCount()) // 1
const func = User.getCount
console.log( func() ) // undefined

【JS】你不知道的JavaScript笔记（二）- this - 四种绑定规则 - 绑定优先级 - 绑定例外 - 箭头函数

5.3 手写bind

【JS】函数定义与调用方式-函数this指向问题-call-apply-bind方法使用与自定义

Function.prototype.myBind = function() {
	// 将参数拆解为数组
	const args = Array.prototype.slice.call(arguments)  
	// 获取this
	const t = args.shift()
	// fn1.bind(...)中的 fn1
	const self = this
	return function() {
		return self.apply(t, args)
	}
}

使用

function fn1(a, b, c) {
	console.log('this', this)
	console.log(a, b, c)
	return 'this is fn1'
}
const fn2 = fn1.myBind({x: 100}, 10, 20, 30)
const result = fn2() 
console.log(result)

5.4 闭包

当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包

① 函数作为参数被传递 ② 函数作为返回值被返回

【JS】你不知道的JavaScript 笔记（一）—— 作用域与闭包 - 编译原理 - LHS - RHS - 循环与闭包 - 模块 - 词法作用域 - 动态作用域

5.5 闭包的应用场景

隐藏数据，只提供API

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

const cache = createCache()
c.set('a', 100)
console.log(c.get('a'))

6. ES6新特性

【ES6】变量声明-var-let-const-区别与联系-总结

【ES6】Symbol基本使用及常用内置符号

【ES6】JavaScript函数-箭头函数-this指向-简写

【ES6】JavaScript-变量的解构赋值-数组解构-对象解构-对象的属性-对象的方法

【ES6】JavaScript对象-增强的对象语法-属性值简写-可计算属性-简写方法名

【ES6】JavaScript函数-参数的默认值-与解构赋值的结合使用-对arguments的影响-默认参数作用域与暂时性死区

【ES6】JavaScript数组-数组的创建-构造函数-字面量-Array.from()-Array.of()静态方法

【ES6】JavaScript数组-迭代器方法-keys()-values()-entries()-迭代方法-every()-some()-filter()-map()-forEach()