导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

null 和 undefined 的区别

• 语义上
  • null： 表示一个对象是“没有值”的值，也就是值为“空”
  • undefined： 表示一个变量声明了没有初始化(赋值)
• 检测上
  • typeof null === "object"
  • typeof undefined === "undefined"
• 隐式类型转换上
  • Number(null) => 0
  • Number(undefined) => NaN
• 双等 与 全等
  • null == undefined // true
  • null === undefined // false
• 其他角度
  • 函数的默认返回值是 undefined
  • 原型链的终点是 null
  • JS 底层中的对象机器码是以 000 开头，而 null 的机器码全都是0

undeclared 与 undefined 的区别？

• undefined：声明了变量，但是没有赋值
• undecalared：没有声明变量就直接使用

var a; // undefined
b;    // b is not defined

⭐ {} 和 [] 的 valueOf 和 toString 的结果是什么？

{} 的 valueOf 结果为 {} ，toString 的结果为 "[object Object]"
[] 的 valueOf 结果为 [] ，toString 的结果为 ""

⭐ typof 没定义的变量会报错吗？typeof let 定义了的呢？

未声明的变量使用 typeof 返回字符串 "undefined"

typeof 一个 let 定义的变量会因为暂时性死区报错 ReferenceError（前提：let/const未声明之前赋值或使用）

var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError: tmp is not defined
  let tmp;
}

console.log(typeof tmp); // ReferenceError: tmp is not defined
let tmp;

let tmp;
console.log(typeof tmp); // undefind 不会报错

typeof 能判断哪些类型 ？

typeof 能判断的类型有：string、number、boolean、undefined、symbol、function、bigint、object

• typeof 判断基本数据类型时，除了 null 的输出结果为 'object' 其它类型都能正确判断
• typeof 判断引用数据类型时，除了判断函数会输出 'function' 其它都输出 'object'

typeof(null) 为什么返回的是 'object'

• typeof(null) = object 是 JS 在诞生设计之初留下的历史遗留 BUG 问题
• 在 JS 中进行数据底层存储的时候是用二进制存储的，这是一定的，而且它的前三位是代表存储的数据类型，而 000 是代表 object 类型也就是引用类型的数据。
• 而 null 正好全是 0，所以它恰好符合 object 类型的存储格式，所以在 typeof 检测的时候，它才会输出 object。

⭐ 封装自己的 typeof

Object.prototype.toString.call()

• typeof 返回类型：number、string、boolean、object、function、undefined、symbol、bigint
• 注意
  • 单拎 null 出来
  • array 属于 object

function myTypeof(val) {
	var type = typeof(val);
  var toStr = Object.prototype.toString;
  var map = {
  	'[object Object]': 'object-object',
    '[object Array]': 'object-array',
    '[object String]': 'object-string',
    '[object Number]': 'object-number',
    '[object Boolean]': 'object-boolean'
  }
  
  if (val === null) {
  	return 'null';
  } else if (type === 'object') {
  	var ret = toStr.call(val);
    return map[ret];
  } else {
  	return type;
  }
}

console.log(myTypeof(function () {}));
console.log(myTypeof(1));
console.log(myTypeof([]));
console.log(myTypeof(true));
console.log(myTypeof(null));
console.log(myTypeof(new String('233')));
console.log(myTypeof(BigInt(123)));
console.log(myTypeof(Symbol(456)));

== 与 === 的区别？

• ==：比较过程会进行隐式转换
• ===：值相同，类型相同才会为 true

讲一讲 JavaScript 的装箱和拆箱？

装箱：把基本数据类型转化为对应的引用数据类型的操作

看以下代码，s1 只是一个基本数据类型，他是怎么能调用 indexOf 的呢？

const s1 = 'Sunshine_Lin'
const index = s1.indexOf('_')
console.log(index) // 8

原来是 JavaScript 内部进行了装箱操作

1. 创建String类型的一个实例；
2. 在实例上调用指定的方法；
3. 销毁这个实例；

var temp = new String('Sunshine_Lin')
const index = temp.indexOf('_')
temp = null
console.log(index) // 8

拆箱：将引用数据类型转化为对应的基本数据类型的操作

通过 valueOf 或者 toString 方法实现拆箱操作

var objNum = new Number(123);  
var objStr = new String("123");
console.log( typeof objNum ); // object
console.log( typeof objStr ); // object 
console.log( typeof objNum.valueOf() ); // number
console.log( typeof objStr.valueOf() ); // string

console.log( typeof objNum.toString() ); // string 
console.log( typeof objStr.toString() ); // string

以下两种方式的区别？及 typeof 得到的结果

const str1 = "abc";
const str2 = new String("abc");

str1 是基本数据类型

• 存储在在栈内存中，用 typeof 检测的结果为 string。
• 当我们把 str1 赋值给别一个变量时，是把 str1 中的值复制一份来赋值。

str2 是引用数据类型

• 存储在堆内存中，不过变量 str2 中存的是指向堆内存中的地址，用 typeof 检测 str2 结果为 Object。
• 当我们把 str2 赋值给另一个变量时，是把 str2 中存入的地址复制一分给到了变量。

Math 的常用方法有哪些？

BOM 和 DOM 的关系

• BOM 全称 Browser Object Model，即浏览器对象模型，主要处理浏览器窗口和框架。
• DOM 全称 Document Object Model，即文档对象模型，是 HTML 和XML 的应用程序接口（API），遵循 W3C 的标准，所有浏览器公共遵守的标准。

JS 是通过访问 BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM的根节点。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

如何在JS中编码和解码 URL

• 编码：encodeURI()
• 解码：decodeURI()