前言 完整的分析我还正在赶工中，希望大家到时候可以来支持一下。 因此我决定整理JavaScript中容易忽视或者混淆的知识点，写一系列篇文章，以灵魂拷问的方式，系统且完整的带大家遨游原生 JavaScript 的世界，希望能给大家带来一些收获。JS类型之问——概念与检测篇 1.JS中的数据类型有哪些？ 引用数据类型：1种Object对象(包括普通Object、Function、Array、Date、RegExp、Math)2.你真的懂typeof吗？ typeof的作用？ typeof 能正确区分数据类型吗？ typeof 注意事项typeof 返回值为 string 格式，注意类似这种考题: typeof(typeof(undefined)) -> "string" typeof 未定义的变量不会报错，返回 "undefiend" typeof(null) -> "object": 遗留已久的 bug typeof无法区别数组与普通对象: typeof([]) -> "object" typeof(NaN) -> "number" 习题console.log(typeof(b));
console.log(typeof(undefined));
console.log(typeof(NaN));
console.log(typeof(null));
var a = '123abc';
console.log(typeof(+a));
console.log(typeof(!!a));
console.log(typeof(a + ""));
console.log(typeof(typeof(null)));
console.log(typeof(typeof({})));答案 undefined // b未定义，返回undefined
undefined
number // NaN 为number类型
object
number // +a 类型转换为NaN
boolean
string
string // typeof(null) -> "object"; typeof("object") -> "string"
string3.什么是instanceof？你能模拟实现一个instanceof吗？ instanceof 判断对象的原型链上是否存在构造函数的原型。只能判断引用类型。 instanceof 常用来判断 A 是否为 B 的实例 // A是B的实例，返回true，否则返回false
// 判断A的原型链上是否有B的原型
A instaceof Bfunction instance_of(Case, Constructor) {
// 基本数据类型返回false
// 兼容一下函数对象
if ((typeof(Case) != 'object' && typeof(Case) != 'function') || Case == 'null') return false;
let CaseProto = Object.getPrototypeOf(Case);
while (true) {
// 查到原型链顶端，仍未查到，返回false
if (CaseProto == null) return false;
// 找到相同的原型
if (CaseProto === Constructor.prototype) return true;
CaseProto = Object.getPrototypeOf(CaseProto);
}
}console.log(instance_of(Array, Object)) // true
function User(name){
this.name = name;
}
const user = new User('zc');
const vipUser = Object.create(user);
console.log(instance_of(vipUser, User)) // true4.如何区分数组与对象？使用instanceof判断数组可靠吗？ // 如果为true，则arr为数组
arr instanceof Array5.如何判断一个数是否为NaN？ NaN === NaN // false
NaN == NaN // falsefunction isNaN(x) {
return x != x;
}全局函数 isNaN 方法：不推荐使用。MDN 对它的介绍是：isNaN 函数内包含一些非常有趣的规则。 // 为什么对象会带来三种不同的结果
// 是不是很有趣
// 具体原因可以参考类型转换篇
console.log(isNaN([])) // false
console.log(isNaN([1])) // false
console.log(isNaN([1, 2])) // true
console.log(isNaN(null)) // false
console.log(isNaN(undefined)) // true6.如何实现一个功能完善的类型判断函数？ toString.call(()=>{}) // [object Function]
toString.call({}) // [object Object]
toString.call([]) // [object Array]
toString.call('') // [object String]
toString.call(22) // [object Number]
toString.call(undefined) // [object undefined]
toString.call(null) // [object null]
toString.call(new Date) // [object Date]
toString.call(Math) // [object Math]
toString.call(window) // [object Window]JS类型之问——类型转换篇 7.toString 和 valueOf 方法有什么区别？ 基础：这两个方法属于 Object 对象，是为了解决 JavaScript 值运算与显示的问题。为了更适合自身功能，很多 JavaScript 内置对象都重写了这两个方法。 toString(): 返回当前对象的字符串形式；valueOf() : 返回该对象的原始值 各个类型下两个方法返回值情况对比 调用优先级隐式转换时会自动调用 toString 和 valueOf 方法 ，两者优先级如下：强制转化为字符串类型时，优先调用 toString 方法 强制转换为数值类型时，优先调用 valueOf 方法 使用运算符操作符情况下，valueOf 优先级高于 toStirng 对象的类型转换见下一问。 8.你知道对象转换成原始值是什么流程吗 (ToPrimitive)？ ToPrimitive 方法接受两个参数，一个是输入的值 input，一个是期望转换的类型 PreferredType如果未传入 PreferredType 参数，让 hint 等于 'default'，后面会将 hint 修改为 'number' 如果 PreferredType 是 hint String，让 hint 等于 'string' 如果 PreferredType 是 hint Number，让 hint 等于 'number' 返回 OrdinaryToPrimitive(input, hint) OrdinaryToPrimitive(input, hint)如果 hint 是 'string'，那么就将 methodNames 设置为 toString、valueOf 如果 hint 是 'number'，那么就将 methodNames 设置为 valueOf、toString methodName 存储的就是当前 preferredType 下的调用优先级，如果全部调用完毕仍然未转化为原始值，会发生报错。9.你能做出下面这个题吗？ const a = {x:1};
const b = {x:2};
const obj = {};
obj[a] = 100;
obj[b] = 200; console.log(obj[a]););有了第七问和第八问的知识，这个题目就不难了。 `JavaScript` 对象的键必须是字符串，因此分别需要将对象 `a` 和 `b` 转换为 `string` 类型。具体转换流程：
```js
// 1.执行ToPrimitive
// hint 为 string
ToPrimitive(a, 'hint String')
// 2.执行OrdinaryToPrimitive
OrdinaryToPrimitive(a, 'string')
// 3.返回methodNames
methodNames = ['toString', 'valueOf']
// 4.调用methodNames里方法
// 调用toString
a.toString() // 返回[object Object]答案 200
20010.你能理清类型转换吗？ 三种类型 的转换转换为Number类型: Number() / parseFloat() / parseInt() 转化为String类型:String() / toString() 转化为Boolean类型: Boolean() 什么场景 之下转换成那种类型 即可。转换为boolean 0,-0,null,NaN,undefined,或空字符串（""） 为 false 外，其余全为 true转化为string 显式：String 方法可以显式将值转换为字符串 隐式：+ 运算符有一侧操作数为 string 类型时 需要转换为string的部分调用自身的toString方法(null/undefined返回字符串格式的null和undefined) 当被转换值为对象时，相当于执行 ToPrimitive(input, 'hint String') String([1,2,3]) // 1,2,3
String({x:1}) // [object Object]
1 + '1' // 11
1 + {} // 1[object Object]转化为number 显式：Number 方法可以显式将值转化为数字类型 隐式：number的隐式类型转换比较复杂，对需要隐式转换的部分执行 Number：比较操作(<, >, <=, >=) 按位操作(| & ^ ~) 算数操作(+ - * / %) 注意：+的操作数存在字符串时，为string转换 一元 +- 操作 11.== 的隐式转换规则 ==: 只需要值相等，无需类型相等；null, undefined 在 == 下互相等且自身等 == 的转换规则: 12.1 + {} 与 {} + 1的输出结果分别是什么？ 执行 toPrimitive，未传入 PreferredType，methodNames 为 [valueOf, toString] 执行 ({}).valueOf，返回对象本身 {}，不是原始值 继续执行 ({}).toString()，返回 "[object Object]"，返回结果为原始值，转换结束 注意 ： {} + 1 输出的结果会和 1 + {} 一样吗？1个代码块和1个+1 ，最终输出结果为 1答案 1[object Object]
113.[]与{}的相加的结果是多少？ [] + {} 执行 toPrimitive，未传入 PreferredType，methodNames 为 [valueOf, toString] 执行 [].valueOf，返回数组本身 执行 [].toString，返回空字符串 '' 答案 "[object Object]"[] + [] 答案 ""{} + [] 答案 0{} + {} 答案 [object Object][object Object]疑问 友情提示：由于 {} 可以解释为代码块的形式，有些需要注意的地方，举个栗子:空对象调用方法时：{}.toString() 会报错 箭头函数返回对象时：let getTempItem = id => { id: id, name: "Temp" } 会报错14.你能灵活运用 parseInt 与 parseFloat 吗 网红题：['1','2','3'].map(parseInt) // ele 遍历的元素
// index 遍历的元素索引
// arr 数组
arr.map(function(ele, index, arr){})parseInt('1', 0, ['1','2','3'])
parseInt('2', 1, ['1','2','3'])
parseInt('3', 2, ['1','2','3'])parseInt('1', 0, ['1','2','3']): radix为0时，默认取10，最后返回1 parseInt('2', 1, ['1','2','3']): radix取值为2~36，返回NaN parseInt('3', 2, ['1','2','3']): radix取值为2，二进制只包括0，1，返回NaN 15.如何让 if(a == 1 && a == 2) 条件成立？ var a = {
value: 0,
valueOf: function() {
this.value++;
return this.value;
}
};
console.log(a == 1 && a == 2); //true 
开发技术
发布于：2021-12-30 19:03
|
阅读数：288
|
评论：0
QQ好友和群
QQ空间
