JS几种数据类型转换（内含练习题）

关于数据类型转换的几道经典题目

首先我先给大家展示几道题目，大家尝试做一下。后面会有讲解，

题目：

question：

 //题目1
 let result = 100 + true + 21.1 + null + undefined + "Tencent" + [] + null + 9 + false;
 console.log(result);
 //题目2
 console.log([]==false);
 //题目3
 console.log(![]==false);

answer：

题目解析：

• 题目1 遇到这种运算先找 + 加号两边的字符串还有对象 会按照字符串拼接处理，字符串我们很好理解，但是对象是为什么呢? 因为遇到对象会先转换为字符串然后转为数字（会经历valueOf转为原始值、toString方法）
• 题目2：==作比较规则参照下面的总结（此处是将==两边的内容转为数字进行比较）0==0 --> true

• 题目3：==的优先级比较低，肯定是先算左边 ![] 然后与后面进行比较，[]转为布尔值为true 取反 false false==false

易错点：[] 空数组转为字符串为空字符串'',转为数字(会经历转为空字符串的过程)为0

---

---

JS当中的数据类型

---

---

1. 基本数据类型： number string boolean null undefined symbol bigint

2. 引用数据类型：object function（解释一下：我们一般会把function归于object，但是也可以把这个归于单独一个类型，因为typeof 检测出来确实是function）

接下来我将介绍几种数据类型转换的规则 （牢记重点）：以后关于数据类型的问题肯定能够得心应手，一定手到擒来。

1. 任何数据类型转为Number类型

null--->0

任何数 + undefined =NaN

[]-->0（原因：对象转为数字先将数字转为字符串再转为数字 []-->''-->0）

对与Number()   将字符串转为数字时 有任何非有效数字就会转为 NaN ,可以识别第一个小数点，但是出现第二个就会转为NaN

对于parseInt 整数 ，parseFloat 小数   将字符串转为数字时 他是从左到右依次查找有效数字字符，直到遇到非有效数字字符停止查找(一个一个的找)

2. 任何数据类型转为String类型

3. 在==比较的过程中，数据转换的规则

4. 任何数据类型转为Boolean类型

---

---

练习题：

---

---

接下来的几道题大家可以练练手

1. a为什么值时可以输出OK

解析：以下有几种解决方案，每种解题方案都是不同的思路，供大家参考。

第一种思想：

• if的条件是 == 数字，所以我们要想到把a转换为数字
• 对象转换为数字的时候会经历 对象-->字符串-->数字 对象转换为字符串:valueof( ) tostring()

• a.toString 会调用 0bject.prototype.toString() 但这个是检测数据类型的
• 所以要想到自己重写toString()

var a = {
  i: 0,
  toString() {
    return ++this.i;
  },
};
if (a == 1 && a == 2 && a == 3) {
  console.log("OK");
}

第二种思想：

• vue2.0 MVVM原理
• 给window添加一个属性 触发get拦截器(数据劫持)

var i = 0;
Object.defineProperty(window, "a", {
  get() {
    return ++i;
  },
});
if (a == 1 && a == 2 && a == 3) {
  console.log("OK");
}

第三种思想： 

var a = [1, 2, 3];
a.join = a.shift;   //join将数组转换为字符串   shift删除数组的第一项返回删除的内容
if (a == 1 && a == 2 && a == 3) {
  console.log("OK");
}

let arr = [10.18, 0, 10, 25, 23];
arr = arr.map(parseInt);
console.log(arr);

答案：[10,NaN,2,2,11]

分析：我们先看到这道题的时候首先要知道两个知识点 map 以及 parseInt用法

          + map : map里面是一个回调函数，函数有两个参数 分别是当前的循环项以及对应的索引值，题是将这个函数替换成了parseInt

arr = arr.map((item,index)=>{
  return item * 10;
});

        + parseInt

      

解题过程：

•