JavaScript的数据类型问题总结

一 JS中有哪些数据类型？

-- 共 6 种数据类型，其中 5 种基本数据类型Undefined，Null，Boolean，Number和 String，1 种复杂数据类型Object。因为ECMAScript不支持创建任何自定义的类型，所以最终所有的类型都是其中 6 种数据类型之一。（ES6中新增了第七种数据类型Symbol）

1-1　原始类型/值类型（传递值）：Number，String，Boolean + 合成类型/引用类型（传递指针）：Object + 特殊类型：Undefined，Null

1-2　object：狭义对象-object + 数组-array + 函数-function

二　JS如何识别值的类型？

-- 3种方法：typeof，instanceof，Object.prototype.toString

2-1　typeof（检测基本数据类型）返回number，string，boolean，function，undefined + 其余的都是object（array，null，object，window，等等）

2-1eg：

<body>

  <p id = "demo"></p>

  <script>

    document.getElementById("demo").innerHTML =

    typeof 1 + "<br>" +               //number

    typeof NaN + "<br>" +            //number

    typeof "hello" + "<br>" +       //string

    typeof false + "<br>" +        //boolean

    typeof function () {} + "<br>" +  //function

    typeof myCar + "<br>" +     //undefined

    typeof [1,2,3] + "<br>" +    //object

    typeof {name:'fermin', age:22} + "<br>" +  //object

    typeof new Date() + "<br>" +  //object

    typeof null;                 //object

  </script>

</body>

2-1-1　用typeof获取变量是否存在， if(typeof a!="undefined"){}

2-2　incetanceof（检测引用数据类型，非引用数据返回false）对应的引用类型数据返回true

2-2eg：

<body>

  <p id = "demo"></p>

  <script>

    var reg = new RegExp;

    document.getElementById("demo").innerHTML =

    ({} instanceof Array) + "<br>" +    //false

    ([] instanceof Array) + "<br>" +   //true

    (reg instanceof RegExp) + "<br>" + //true

    ("hello" instanceof String);       //false 非引用数据都返回false

  </script>

</body>

2-3　Object.prototype.toString精确判断对象的类型

2-3eg：

<body>

  <p id = "demo"></p>

  <script>

    document.getElementById("demo").innerHTML =

    Object.prototype.toString.call(123) + "<br>" +      //[object  Number]

    Object.prototype.toString.call('123') + "<br>" +   //[object String]

    Object.prototype.toString.call(true) + "<br>" +   //[object Boolean]

    Object.prototype.toString.call(undefined) + "<br>" + //[object Undefined]

    Object.prototype.toString.call({}) + "<br>" +     //[object Object]

    Object.prototype.toString.call([]) + "<br>" +    //[object Array]

    Object.prototype.toString.call(function () {});  //[object Function]

  </script>

</body>

三　JS的类型转换

-- JavaScript 变量可以转换为新变量或其他数据类型，有两种类型转换方式，强制（显示）类型转换（String(), toString(), Number(), parseInt(string,radix), parseFloat(string), Boolean() ）和自动（隐式）类型转换（isNaN()，一元操作符，算术运算符，逻辑运算符，比较运算符，if语句）

3-1　JS的强制类型转换

3-1-1　强制转换为数值类型：Number()，parseInt(string,radix)，parseFloat(string)

转换规则　

（1）Number()转换规则，整体转换字符串类型

（a）数值：转换为十进制数

（b）字符串：空字符串 -> 0     只包含数字/有效浮点格式 -> 十进制/浮点格式，忽略前导0，其余转成NaN

（c）布尔值：true-> 1     false-> 0

（d）undefined：转成NaN

（e）对象：会调用自身valueOf()，返回原始类型值后用上述方法，否则再调用toString。若返回了原始类型再用上述转换规则，否则系统报错

（f）null： 转成0

（1）eg

<body>

  <p id = "demo"></p>

  <script>

    document.getElementById("demo").innerHTML =

    Number(011) + "<br>" +      // 9 识别了前导0转换成八进制

    Number('011') + "<br>" +    // 11

    Number('0') + "<br>" +    // 0

    Number('1a') + "<br>" +   // NaN

    Number('') + "<br>" +     //  0

    Number(true) + "<br>" +   // 1

    Number(undefined) + "<br>" + // NaN

    Number({}) + "<br>" +       //NaN

    Number(null) + "<br>" +    // 0

    Number([]) + "<br>" +     // 0

    Number(function () {});  // NaN

  </script>

</body>

（2）Number()与parseInt(string,radix)，parseFloat(string)的转换规则异同

　　 Number整体转换字符串类型，parseInt和parseFloat逐个解析字符，只把数字转换出来，其余都转换为NaN

（2）eg：

<body>

  <p id = "demo"></p>

  <script>

    document.getElementById("demo").innerHTML =

    parseInt(011) + "<br>" +       // 9

    parseInt('01') + "<br>" +     // 01

    parseInt('1a') + "<br>" +   // 1

    parseInt('1a2b') + "<br>" +   // 1

    parseInt('') + "<br>" +     //  NaN 与Number不同

    parseInt(true) + "<br>" +   // NaN 与Number不同

    parseInt(undefined) + "<br>" + // NaN

    parseInt({}) + "<br>" +       //NaN

    parseInt(null) + "<br>" +    // NaN

    parseInt([]) + "<br>" +     // NaN

    parseInt(function () {});  // NaN

  </script>

</body>

3-1-2　强制转换为字符串类型：String（）

转换规则　

（1）String()转换规则，任意类型转化成字符串

（a）布尔，undefined，null都是两边加""转化为字符串，数值会转换成十进制数再加""转换为字符串，而字符串本身不变

（b）对象调用toString()，若返回原始类型值，再使用String()转换，否则再调用valueOf(),若返回原始类型，再使用String()转换，在否报错

（1）eg：

<body>

  <p id = "demo"></p>

  <script>

    document.getElementById("demo").innerHTML =

    String(011) + "<br>" +       // "9"

    String('011') + "<br>" +       // "011"

    String(true) + "<br>" +   // "true"

    String(undefined) + "<br>" + // "undefined"

    String({}) + "<br>" +       //"[object Object]"

    String(null) + "<br>" +    // "null"

    String([]) + "<br>" +     // ""

    String(function () {});  // "function () {}"

  </script>

</body>

3-1-2　强制转换为字符串类型：Boolean（）

转换规则　

（1）Boolean()转换规则，任意类型转化成布尔值

undefined，null，-0，+0，NaN，""(空字符串)这六个值转换为false，其它的都转换为ture，注意对象(new Boolean(false))转换后对应的也是true

（1）eg：

<body>

  <p id = "demo"></p>

  <script>

    document.getElementById("demo").innerHTML =

    Boolean(011) + "<br>" +          // true

    Boolean('011') + "<br>" +       // true

    Boolean(false) + "<br>" +      // false

    Boolean(new Boolean(false)) + "<br>" +   // true

    Boolean(undefined) + "<br>" + // false

    Boolean({}) + "<br>" +       //true

    Boolean(null) + "<br>" +    // false

    Boolean([]) + "<br>" +     // true

    Boolean(function () {});  // true

  </script>

</body>

3-2　JS的自动类型转换

3-2-1　js何时自动转换

（a）不同类型数据互相运算，多个非数值相加时，将非字符串自动强制转换为字符串，再相加成字符串，其余自动强制转换为十进制数值再运算

（b）非布尔值类型数据求布尔值，如if中的条件，自动强制转换为布尔类型

（c）非数值类型数据用一元运算符（"+"和"-"），自动强制转换为十进制类型

（d）使用相等或不相等操作符时，会自动强制转换操作数，再比较他们的相等性。将非整数类型自动强制转换为整数类型，但是undefined和null不改变，
     且undefined==null返回true，NaN==NaN返回false

3-2-2　自动转换为数值Number类型

eg：

<body>

  <p id = "demo"></p>

  <script>

    document.getElementById("demo").innerHTML =

    ("2" - "1") + "<br>" +   // 1

    ("2" + "1")+ "<br>" +    // 21

    (true + 1) + "<br>" +    // 2

    ("1" * []) + "<br>" +    // 0

    ("a" - 1 ) + "<br>" +     // NaN

    (+"a") + "<br>" +      // NaN

    (+false) + "<br>";     // 0

  </script>

</body>

3-2-3　自动转换为字符串String类型

eg：

<body>

  <p id = "demo"></p>

  <script>

    document.getElementById("demo").innerHTML =

    ("2" + "1")+ "<br>" +       // "21"

    (true + "1") + "<br>" +     // "true1"

    ("1" + {}) + "<br>" +       // "1[object Object]"

    ("1" + []) + "<br>" +       // "1"

    ("1" + [1.2]) + "<br>" +       // "11.2"

    ("1" + function () {}) + "<br>" + // "1function () {}"

    ("1"+ undefined) + "<br>" + // "1undefined"

    ("1"+ null) + "<br>";       // "1null"

  </script>

</body>

3-2-3　自动转换为布尔值Boolean类型

eg：

 <script>

    if (!undefined && !null && !0 && !NaN && !"") {

      console.log("true");

    } // true

  </script>

ps：自动转换类型有很大不确定性，不易去除错误，在预期为原始数据数值，字符串，布尔值时全部使用显示转换方法，Number()，String()，Boolean()比较好。

3-2-4　有相等与不相等操作符的自动转换

eg：

<body>

  <p id = "demo"></p>

  <script>

    document.getElementById("demo").innerHTML =

    (null == undefined)+ "<br>" +    // true

    (null == 0) + "<br>" +           // false

    (NaN == NaN) + "<br>" +          // false

    (NaN != NaN) + "<br>" +          // true

    ("3" == 3)                       // true

  </script>

</body>

ps：由于相等和不相等操作符存在类型转换问题，而为了保持代码中数据类型的完整性，除了使用(obj.a === null || obj.a === undefined)简化为(obj.a == null)外，别的都使用全等和不全等操作符

3-3　一些转换的特殊情况

1 + {a: 1} // "1[object Object]"

{a: 1} + 1 // "1" 此种对象在前的情况，JS引擎将其视为代码块，不看作对象，由于无返回值，被忽略掉

({a: 1}) + 1 // "[object Object]1"

[ ] + [ ] // " "

[ ] + { } // "[object Object]"

{ } + [ ] // 0 // +[ ] -> Number([ ]) -> Number([ ].toString()) -> Number(" ") -> 0

({ }) + [ ] // "[object Object]"

{ } + { } // "[object Object]" // +{ }

({ }) + { } / console.log({ } + { }) / var a = { } + { }; a // "[object Object] [object Object]"

小结：+[ ] 会强制转化十进制数值0，多个不是数值数相加，会强制转化为字符串，对象在前没有被括号包起来，会被当作代码块处理，没有返回值就被忽略掉。