前端面试之JS基础——变量类型和计算
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了前端面试之JS基础——变量类型和计算，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3496字，纯文字阅读大概需要5分钟。
内容图文
先从几道题目引入。
题目(答案在最后一节)
- typeof能判断哪些类型？
- 何时使用
===？何时使用==？ - 值类型和引用类型的区别？
- 手写深拷贝（涉及递归）
知识点
-
变量类型
-
变量计算
变量类型相关知识点
- 值类型vs引用类型
- typeof运算符
- 深拷贝
1. 值类型vs引用类型
? 深入分析：
? 值类型都是在栈中存储的。
? 引用类型的值会存储在堆中。
? 图中代码把a赋值为age=20的一个对象，这样会在堆中申请一个地址，然后把age=20放在堆中，把对应的key值存为这个内存地址，然后让变量a指向这个内存地址。也就是说，此时变量a中存储的并不是{age: 20}这个对象，而是一个内存地址，这个地址指向{age: 20}这个对象。紧接着，把b赋值为a，其实就是把地址赋值给了b。此时a和b指向了同一个内存地址，也就是指向了同一个对象。
-
常见值类型：undefined, string, number, boolean, symbol
// 常见值类型 let a; // undefined const str = "abc"; // string const n = 100; // number const b = true; // boolean const s = Symbol("s"); //symbol -
常见引用类型：对象，数组，null（特殊引用类型，指针指向为空地址），函数（特殊引用类型，但不用于数据存储，没有复制、拷贝一说）
// 常见引用类型 const obj = { x: 100 }; const arr = ["a", "b", "c"]; const n = null; // 特殊引用类型，指针指向为空地址 function fn() {} // 特殊引用类型，但不用于存储数据，所以没有“拷贝”、“复制”一说
2. typeof运算符
typeof能用来做什么：
- 识别所有值类型
- 识别函数
- 判断是否是引用类型（不可再细分）
3. 手写深拷贝
先来看浅拷贝：
/**
* 浅拷贝
*/
const obj1 = {
age: 20,
name: "xxx",
address: {
city: "beijing",
},
skill: ["html", "css", "javascript"],
};
const obj2 = obj1;
obj2.address.city = "shanghai";
console.log(obj1);
以下是深拷贝：（?????要会默写）
/**
* 深拷贝
* @param {*} obj 要拷贝的对象
* @returns result 拷贝后的结果
*/
function deepClone(obj = {}) {
// 首先排除不是对象或者数组的情况
// obj是null，或不是对象或者数组，直接返回
if (typeof obj !== "object" || obj == null) return obj;
// 初始化返回结果
let result;
if (obj instanceof Array) {
result = [];
} else {
result = {};
}
for (let key in obj) {
// 保证key不是原型的属性
if (obj.hasOwnProperty(key)) {
// 递归调用
result[key] = deepClone(obj[key]);
}
}
return result;
}
变量计算相关知识点
- 类型转换
类型转换（这里有坑）
以下场景发生类型转换较多：
- 字符串拼接
- ==
- if语句和逻辑运算
知识点：
-
除了
==null之外，其他一律都用===
-
truly变量和falsely变量
- truly变量：
!!a === true的变量 - falsely变量：
!!a === false的变量
- truly变量：
-
在if语句中判断的就是truly变量和falsely变量
// truly变量 const a = true; if (a) { console.log("a是truly变量"); } const b = 100; if (b) { console.log("b是truly变量"); }// falsely变量 const c = ""; if (c) { console.log("这个if无法执行"); } const d = null; if (d) { console.log("这个if无法执行"); } let e; if (e) { console.log("这个if无法执行"); } -
逻辑运算同理
console.log(10 && 0); // 0 console.log("" || "abc"); //'abc' console.log(!window.abc); // true
第一节题目答案
-
typeof能判断哪些类型？
- 识别所有值类型
- 识别函数
- 判断是否是引用类型（不可再细分）
-
何时使用
===？何时使用==？==会隐式地做类型转换，让两个值尝试相等。一般情况下，除了
==null之外，其他一律都用=== -
值类型和引用类型的区别？
在内存中，值类型存在栈中，引用类型存在堆中。复制的时候，值类型直接复制，引用类型复制的是地址。
-
手写深拷贝（涉及递归）
- 注意点：
- 注意判断值类型和引用类型
- 注意判断是数组还是对象
- 递归
- 注意点：
/**
* 深拷贝
* @param {*} obj 要拷贝的对象
* @returns result 拷贝后的结果
*/
function deepClone(obj = {}) {
// 首先排除不是对象或者数组的情况
// obj是null，或不是对象或者数组，直接返回
if (typeof obj !== "object" || obj == null) return obj;
// 初始化返回结果
let result;
if (obj instanceof Array) {
result = [];
} else {
result = {};
}
for (let key in obj) {
// 保证key不是原型的属性
if (obj.hasOwnProperty(key)) {
// 递归调用
result[key] = deepClone(obj[key]);
}
}
return result;
}
内容总结
以上是互联网集市为您收集整理的前端面试之JS基础——变量类型和计算全部内容，希望文章能够帮你解决前端面试之JS基础——变量类型和计算所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。