横扫初级前端JavaScript面试---JS基础知识

三、JS基础知识

1. 变量类型和计算

经典题目：

• typeof能判断哪些类型
• 何时使用 === 何时使用 ==
• 值类型和引用类型的区别
• 为什么要分值类型和引用类型
• 手写深拷贝

知识点：

1.1 值类型和引用类型

由于存储数据量的不同，引擎将变量分为值类型和引用类型，这样做是为了避免存储大数据而浪费过多的存储空间。

值类型存储在栈中，随变量的赋值而开辟空间存储数据。

// 值类型：数据量小
let a = 100
let b = a
a = 200
console.log(b) // 100

// 常见值类型
let a // undefined
const s = 'string'
const n = 1
const b = true
const s = Symbol('s')

引用类型数据存储在堆中，不随变量赋值而开辟空间存储数据，只是在栈中进行指针的赋值。

// 引用类型：数据量大
let a = { age : 20 } // 存储在堆中
let b = a // 不随变量赋值而开辟空间存储数据,只是在栈中进行指针的赋值
a.age = 21
console.log(b.age) // 21

// 常见引用类型
const obj = { age:20 }
const arr = [1,2,3]
const fn = function(){}
const n = null // 特殊的引用类型，指针指向空地址（0x00）

1.2 typeof运算符

• 识别所有的值类型：undefined、string、number、boolean、symbol

  let a // undefined 		typeof a // 'undefined'
  const s = 'string'		typeof s // 'string'
  const n = 1				typeof n // 'number'
  const b = true			typeof b // 'boolean'
  const s = Symbol('s')	typeof s // 'symbol'
  

• 识别函数：function

  const f = function(){} 	typeof f // 'function'
  

• 判断是否是引用类型（不能在细分）：object

  const o = { age:20 }	typeof f // 'object'
  const a = [1,2,3]		typeof a // 'object'
  const n = null			typeof n // 'object'
  

  在JavaScript 最初的实现中，JavaScript中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null的类型标签是 0，typeof null 也因此返回 "object"

1.3 深拷贝

function isArray(val) {
  return Object.prototype.toString.call(val).includes('Array')
}

function deepClone(obj) {
  if (typeof obj !== 'object' || obj == null) return obj
  const result = isArray(obj) ? [] : {}

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key])
    }
  }
  return result
}

1.4 类型转换

产生场景：

• 字符串拼接

const a = 100 + 10 		// 110
const b = 100 + '10'	        // '10010'
const c = true + '10'	        // 'true10'

• ==

// 下列值在 === 下一律为false
100 == '100'			// true
0 == false		        // true
0 == ''				// true
false == ''			// true
null == undefined	        // true
null == 0			// false
null == ''			// false

何时用==何时用===：由此可见 == 的规则比较乱且容易混淆，所以很多技术大牛和Jquery源码只在下面情况下使用 ==，其他情况建议使用 ===

const obj = { x:100 }
if(obj.a == null){}
// 等效于
if(obj.a === null || obj.a === undefined){}

• if语句和逻辑运算

  truly变量（真值）： !!a === true的变量

  falsely变量（假值）: !!a === false的变量，

  除了0,NaN,'',null,undefined,false为falsely变量外，其他变量都为truly变量。

  if语句和逻辑运算都会自动转换为truly变量和falsely变量来进行判断

if(truly变量){
    // 执行
}
if(falsely变量){
    // 不执行
}

2. 原型和原型链

经典题目：

• 判断一个变量是数组
• 手写一个instanceof
• class定义转换为function定义
• new的过程

3. 作用域和闭包

经典题目：

• this的不同场景，如何取值
• call，bind，apply的区别
• 手写bind
• 实际开发中闭包的应用场景，举例
• 自由变量

四、JS-Web-API

五、开发环境

六、运行环境