5.12 js基础（ 数据类型的分类，原始，引用，数据类型转换）

Js核心语法 day02

回顾：

• Js的特点

• Js用在何处？

• 怎么声明变量 var a = 5

• 为什么要有数据类型？

• 操作符

• 请判断以下代码是否有效？如果有效请给出结果，如果无效请说明原因。

  // 挑战一
  var class = 'person';
  console.log(class);
  // 挑战二
  var Class = 'person';
  console.log(class);  
  // 挑战三
  var True = false;
  console.log(True); 
  // 挑战四
  var true = false;
  console.log(True);     
  // 挑战五
  var $_$ = 'stone';
  console.log($_$);      
  // 挑战六
  var 00_name = 'stone';
  console.log(00_name);    
  // 挑战七
  var result = 1 + 2
  + 3 + 4
  console.log(result);    
  

目标：

• 掌握数据类型的分类（重点）
• 原始数据类型和引用设计类型的区别
• 数据类型的转换

一、数据类型的分类

javascript中有两种数据类型，分别是基本数据类型和引用数据类型；

基本数据（原始数据）类型指的是简单的数据段，而引用数据类型则指的是由多个值构成的对象。

typeof 运算符

JavaScript 的 typeof 来确定 JavaScript 变量的类型：typeof 运算符返回变量或表达式的类型：

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"          // 返回 "string"

1.1、原始数据类型

• Number
• string
• boolean
• null
• underfined

1.2、引用数据类型

• 对象 Object
• 数组 Array
• 函数 Function
• Date 日期
• 等

1.3、原始数据类型和引用数据类型的区别

• 声明变量时的存储分配
• 不同的内存分配机制也带来了不同的访问机制
• 复制变量时的不同

二、原始数据类型

2.1、JavaScript 字符串

字符串是存储字符（比如 “Bill Gates”）的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

Var str=”xiaoming”

字符串的变量内容一旦创建不可改变！如果要改变，只能创建新的字符串，抛弃旧的字符串

面试题：

 var str=“hello”;
 str=str+”world”

请问这里共创建了几个字符串？

字符串模板

//var text = `字符串字符串字${变量}符串字符串`

2.2、JavaScript 数字 number

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

2.3、JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

2.4、 undefined类型

表示一个变量只有声明，没有赋值，它的值默认就是undefined

2.5、null类型

空

怎么去理解typeof null==>Object

• 原理是这样的，不同的对象在底层都表示为二进制，在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型，null 的二进制表示是全 0，自然前三位也是 0，所以执行 typeof 时会返回“object”。
• 现在比较普遍的认知是，typeof null返回“object”是一个历史错误（JS的发明者Brendan Eich自己也是这样说的），只是因为要保持语言的兼容性而维持至今。从ES5制定开始就有动议将typeof null改为返回“null”（如启动node加上“–harmony_typeof”参数，即是如此），但是当前ES6标准草案仍然维持了原样。
• 也可在某种程度上理解为null实为object类型的一个特殊值。在诸如Java这样的语言中，一个变量若是primitive类型，均不可赋以null值，而若是 object，则均可赋以null值。因为在理解上来说，null实际是引用（reference）的特殊值（表示没有指向任何实际对象)
• ECMA是如何划分概念，主要是依据ECMA的逻辑，而不是其他标准。所以从ECMA的逻辑看，类型系统是这样划分的，也是合理的

可以通过将变量的值设置为 null 来清空变量。

Undefined 与 Null 的区别

Undefined 与 null 的值相等，但类型不相等：

目前，null和undefined基本是同义的。

**undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。**典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

var i;i // undefinedfunction f(x){console.log(x)}f() // undefinedvar  o = new Object();o.p // undefinedvar x = f();x // undefined

typeof undefined              // undefinedtypeof null                   // objectnull === undefined            // falsenull == undefined             // true

2.6、数据类型的转化

• 隐式转换：程序自动转换的数据类型
• 强制转换：通过js提供的方法去改变数类型（自己说了算）

2.6.1、隐式转换：

如果只考虑 + 的情况下：

• 只要有字符串参与的，一切都变成字符串

• 如果没有字符串参与，都转为数字计算 （true–1 false—0）

  //除0之外的所有数字，转换为布尔型都为true        var x = 0;        var y = 1;        console.log(Boolean(x));//false        console.log(Boolean(y))//true//除""之外的所有字符，都转为布尔型都为true        var stringWords = "welcome";        var stringKong = "";//空的        var kongge = " ";        console.log(Boolean(stringKong));//false        console.log(Boolean(stringWords))//true        console.log(Boolean(kongge))//true  空格布尔型也是true//null和undefined转换为布尔型为false        var y;        var x = null;        console.log(Boolean(y))//false        console.log(Boolean(x))//false
  

2.6.2、强制转化：自己说了算

概念：调用专门的函数手动的转化类型（系统提供的 内置的函数）

• String x.toString() 转为字符串

  ​ 其中x可以是任何的数据类型

• Number number(x):将任意类型转为number

• 转为整数

  Var s=parseInt(“str”); 转为整数，读取字符串的整数部分

  从第一个字符往后面读取

  如果碰到第一个数字字符，开始获取数子，再次碰到不是数字的字符，停止读取。

  var topVal = parseInt("28px");console.log(topVal);//28
  

  如果开头碰到空格 忽略

  如果碰到第一个非空格的字符，不是数字说明不能转—NaN

  var z = parseInt("abc52");console.log(z);//NaN
  

• NaN:不是数字（内容）的数字（类型）

• parseFloat(“str”); 转为浮点型。用法和parseInt完全相同

  唯一的差别：parseFloat认识的小数点，但仅仅只认识一个小数点

2.7、数字 字符串 布尔（包装类型）

var str = 'hello'; //string 基本类型var s2 = str.charAt(0);在执行到这一句的时候 后台会自动完成以下动作 ：（  var _str = new String('hello'); // 1 找到对应的包装对象类型，然后通过包装对象创建出一个和基本类型值相同的对象 var s2 = _str.chaAt(0); // 2 然后这个对象就可以调用包装对象下的方法，并且返回结给s2. _str = null;  //    3 之后这个临时创建的对象就被销毁了， str =null;  ） alert(s2); // h

上面的string是一个基本类型，但是它却能召唤出一个 charAt() 的方法，主要是因为在基本类型中，有三个比较特殊的存在就是：String Number Boolean，这三个基本类型都有自己对应的包装对象。包装对象，其实就是对象，有相应的属性和方法。调用方法的过程，是在后台偷偷发生的。

对于自动创建的基本包装类型的对象，只存在于一行代码的执行瞬间，执行完毕就会立即被销毁。
如下：

var str = 'test'str.test = 'hhh'console.log(str.test) //undefined

上面第二行代码给自动创建的 String 实例对象添加了 test 属性，虽然此刻代码执行时他是生效的，但是在这行代码执行完毕后该 String 实例就会立刻被销毁，String 实例的 test 属性也就不存在了。
当执行第三行代码时，由于是读取模式， String 实例没有 test 属性，结果也就是 undefined。

三、引用数据类型

3.1、JavaScript 数组

JavaScript 数组用方括号书写。

数组的项目由逗号分隔。

下面的代码声明（创建）了名为 cars 的数组，包含三个项目（汽车品牌）：

实例

var cars = ["Porsche", "Volvo", "BMW"];

数组索引基于零，这意味着第一个项目是 [0]，第二个项目是 [1]，以此类推。

3.2、JavaScript 对象

JavaScript 对象用花括号来书写。

对象属性是 name:value 对，由逗号分隔。

实例

var person = {    Name:"张三",     age:62,     eyeColor:"black"};

上例中的对象（person）有三个属性：Name、age 以及 eyeColor。

练习题：

• 弹出一个输入提示框，请用户输入一行数字，控制台中输出该输入数据的类型。

• 尝试把用户的输入+1输出到控制台里面。

• 尝试把用户的输入数据解析为一个整数，将该整数值+1 输出到控制台里面。

• 尝试把用户的输入数据解析为一个浮点型，把浮点型数值+0.01 输出到控制台里面。

注意：用户体验