js 数据类型细节坑 ，前端进阶必备

你是一名合格的前端工程师吗？

之前看过一篇文章叫你一声前端工程师，你敢应么？浅谈前端工程师该如何定位！，觉得写的很好，里面提到

“到底所谓的前端都应该干些什么、会写什么呢? 本人身边有太多的人会切几张图, 会用jQuery做个特效, 会从bootstrap里复制粘贴,会用html游戏框架写个flappy bird, 会在Github里找各种模板自和库拼拼凑凑, 就口口声声大言不惭的称自己为前端工程师.”

文章中所说的这类前端工程师，着实不在少数，在公司面试前来应聘前端岗位的童鞋的时候发现，一些工作多年的前端连最基础的js数据类型都不清楚。为什么很多前端都处在这样一个层次水平上？其实想想和前端的工作内容，工作性质不无关系。

前端工作，围绕的主要语言无非3种，html、css、js：

其中html和css更加类似于其它语言中的UI库，html－超文本标记语言，负责搭建页面Dom结构，css-层叠样式表，负责页面样式展示，这两种语言对于小白用户都无比亲切，不需要具备基础编程思想，看个几小时，就可以自己写出静态页，页面加个背景，改个颜色，拼拼凑凑，怎么都能写出来。其实，这也是从事前端工作的一个优势，即：入门容易，最初学习难度不大，容易培养起web开发的兴趣。

负责页面行为的可以称之为编程语言的javascript(虽然到现在还有很多不明是非的人认为js就是个脚本语言，就是给页面加点特效，我只能说：“大哥，不懂的话，你还是别说了，啪啪打脸”)，学习曲线和其它高级程序语言不同，它的学习曲线是由缓到陡,简单来说，就是比较好入门，学个一天，就可以给页面加一些简单的动效，增加一些点击交互什么的。但是在大型工程中，该如何组织代码，如果进行封装，如果将js这种看似松散，异常灵活的语言好好组织，是需要一番功夫的。此外，js还有一些你认为是A的地方，其实是B，细节的小坑无数，如果不掌握好基础，怎么可能走的更远，想要进阶，基础必须打牢，万丈高楼平地起，打铁还需自身硬 。

好了，废话了那么多，让我们从基础开始，回到图解js犀牛书系列文章，继续前行。

写在前面

之前的文章Introduction to Javascript介绍了，js是一种非类型定义的动态的语言，变量类型无需提前指定，那么js里面有多少种数据类型呢？简单说来，可以分为两大阵营：基本数据类型（primitive type）+ 对象数据类型（object type）：

基本数据类型：number、string、boolean、null、undefined

对象数据类型：任何js value,只要不是primitive type ,就是object type，如：Function、Array、Date、RegExp、Error

数据类型这么多，先不说他们有何区别 ，先举几个简单的栗子：

null == undefined
"1" == true
NaN !== NaN
0 === -0
Infinity === -Infinity

这几个表达式哪些是true，哪些是false，你都知道吗？（答案，只有最后一个是false）

---

var a = {x :1};
var b = a;
b.x = 2;
a === b; //true or false

var a1 = 2;
var b1 = 2;
a1 === b1; //true or false

var a2 = {x: 1};
var b2 = {x: 1};
a2 === b2; //true or false

答案：true、true、false

---

var a = 1/0;

var a = -1/0;

var a = 0/0;

var a = Infinity/Infinity;

var a = 1/Infinity;

var a = -1/Infinity;

var a = Infinity/0;

答案： Infinity, -Infinity, NaN, NaN, 0, -0, Infinity

都答对了吗？
以上只是几个特别基础的点，但是在面试中，不少人竟然都答错了。。。。因此，沉下心来认真读书真的很重要。外行看热闹，内行看门道，真想成为一名前端工程师，就别天天沉迷在炫酷的页面特效上了（随便去国外网站上copy一下代码，觉得自己超厉害），而要打好基础，从软件工程的视角出发，先成为一名工程师。

js数据王国

js数据类型多样，每个细节琐碎，易忽略，不好记忆，针对这类知识点，我们采用图表法＋比喻法来帮助理解记忆。

前面提到js分为两大数据类型，基本数据类型primitive type和对象数据类型object type，如下图所示：

data type.png

基本数据类型属于值类型，对象数据类型属于引用类型。

基本数据类型－Number

Number

Number特殊值计算.png

基本数据类型－String

javascript使用“String”类型来表示Text。
String基本数据类型的特点：

• 不可以修改，immutable。举个栗子：

  eg: var a = "hello";

  a.toUpperCase(); //return "HELLO"

  console.log(a); //a is still "hello"

  拓展：

  这里可以引申一下，基本数据类型不可以添加属性，但是我们发现他们有很多的方法，比如上个例子中提到的toUpperCase,看起来很像是对象。并且这样写，也不会报错：

  var a = "hello";`
  a.len = 4;
  a.len // undefined
  

  为什么会有这样的行为？这里有个概念，叫做“包装对象 wrap objects”,后续文章会进行补充。

• 16bit

• 有序序列 ordered sequence

• 在ES5标准里，string可以视为只读数组。下标从0开始。

  拓展：

  既然字符串被视为数组，那么我们可以采用数组的方式读取字符串中的某一个位置的字母，eg:

  var a = "hello;"
  console.log(a[1]);  //"e"
  

基本数据类型－Boolean 布尔

• boolean类型只包括两个值： true、false；

• 在js程序中，当在条件判断中，如：if/else，变量会被隐式转换为boolean;

• js中，所有类型的变量都可以转换为boolean;

• 转换成boolean为false的值有：0, -0, "", undefined, null, NaN；

• 剩下其它所有数据类型，转换为boolean时，均为true。注意：所有的object都会转成true,甚至是空数组[];

• 同样不可以修改，immutable。举个栗子：

  eg: var b = true;

  b.toString(); //return "true"

  console.log(b); //b is still true

  注:boolean包装对象只有这一个方法：toString();

基本数据类型－null and undefined

null(表示无的对象)

• 意思是没有值，represent no value for a variable；表示没有对象；
• null是null这个数据类型里唯一的值；
• typeof null // "object"
• null是js里的一个关键词，keyword；
• Number(null) // 0
• 1 + null //1

undefined(表示无的原始值)

• undefined表示"缺少值",表示这里应该有一个值，但是还没有定义；
• undefined是undefined这个数据类型里唯一的值；
• typeof undefined //"undefined"
• undefined是一个全局变量
• Number(undefined) //NaN
• 1 + undefined //NaN

null 和 undefined转换为boolean时，都为false；
null == undefined //true

拓展

null 和 undefined的使用场景：

null表示"没有对象"，即该处不应该有值。典型用法是：

• 变量回收，将一个变量赋值为null.var a = null;
• 作为对象原型链的终点，Object.getPrototypeOf(Object.prototype) //null
• call, apply时，只是想借用一个函数功能，因此将上下文环境context设置为null,eg:Math.max.apply(null,[1,2,4]) //4
• ....

null表示"暂未赋值”，典型的用法是：

• 在js变量提升特性中，变量的定义会被提升至函数顶部，此时变量的值为undefined,eg:

  function foo() {
     console.log(a);  // undefined
     var a = 1;`
     console.log(a);  //1
   }
  

• 变量被声明了，但没有赋值时，就等于undefined;

• 调用函数时，应该提供的参数没有提供，该参数等于undefined;

• 对象没有赋值的属性，该属性的值为undefined;

• 函数没有返回值时，默认返回undefined;