1 - 数据类型

1.1 数据类型简介

  • 为什么需要数据类型 

    1.  在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利            用存储空间，于是定义了不同的数据类型。
    2.  简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

  • 变量的数据类型 

    1.      在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：
  1.       变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：
  1. var age = 10;        // 这是一个数字型
  2. var areYouOk = '是的';   // 这是一个字符串

在代码运行时，变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型。JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

  1. var x = 6;           // x 为数字
  2. var x = "Bill";      // x 为字符串

  • 数据类型的分类 ``` JS 把数据类型分为两类：

  • 简单数据类型 （Number,String,Boolean,Undefined,Null）

  • 复杂数据类型 （object) 

    1. <a name="adIGP"></a>
    2. ### 1.2 简单数据类型
    3. <a name="YvQ1o"></a>
    4. #### 简单数据类型（基本数据类型）
    5. JavaScript 中的简单数据类型及其说明如下：<br />![图片18.png](https://cdn.nlark.com/yuque/0/2021/png/12695178/1620655546613-a47acc8e-fc32-45bf-bcbf-363f1fa36a69.png#clientId=u8644edcd-07de-4&crop=0&crop=0&crop=1&crop=1&from=ui&height=197&id=u851b8743&margin=%5Bobject%20Object%5D&name=%E5%9B%BE%E7%89%8718.png&originHeight=197&originWidth=664&originalType=binary&ratio=1&rotation=0&showTitle=false&size=32670&status=done&style=none&taskId=u6171a1cf-4ced-459c-bfc3-19be14f8d5f&title=&width=664)
    6. <a name="pj56M"></a>
    7. ##### 数字型 Number
    8. JavaScript 数字类型既可以保存整数，也可以保存小数(浮点数）。  
    9. ```javascript
    10. var age = 21;       // 整数
    11. var Age = 21.3747;  // 小数

  1. 数字型进制
    最常见的进制有二进制、八进制、十进制、十六进制。 

    1. // 1.八进制数字序列范围：0~7
    2. var num1 = 07;   // 对应十进制的7
    3. var num2 = 019;  // 对应十进制的19
    4. var num3 = 08;   // 对应十进制的8
    5. // 2.十六进制数字序列范围：0~9以及A~F
    6. var num = 0xA;

    现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

  2. 数字型范围
    JavaScript中数值的最大和最小值

    • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
    • 最小值：Number.MIN_VALUE，这个值为：5e-32

  3. 数字型三个特殊值

    • Infinity ，代表无穷大，大于任何数值
    • -Infinity ，代表无穷小，小于任何数值
    • NaN ，Not a number，代表一个非数值
  1. isNaN
    用来判断一个变量是否为非数字的类型，返回 true 或者 false

图片17.png

  1. var usrAge = 21;
  2. var isOk = isNaN(userAge);
  3.   console.log(isNum);          // false ，21 不是一个非数字
  4. var usrName = "andy";
  5.   console.log(isNaN(userName));// true ，"andy"是一个非数字

字符串型 String

字符串型可以是引号中的任意文本，其语法为 双引号 “” 和 单引号’’ 

  1. var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
  2. var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
  3. // 常见错误
  4. var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

  1. 字符串引号嵌套
    JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双) 

    1. var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
    2. var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
    3. //  常见错误
    4. var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

  2. 字符串转义符
    类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
    转义符都是 \ 开头的，常用的转义符及其说明如下：
    | 转义符 | 解释说明 | | —- | —- | | \n | 换行符，n 是 newline 的意思 | | \ \ | 斜杠 \ | | ‘ | ‘ 单引号 | | “ | ”双引号 | | \t | tab 缩进 | | \b | 空格 ，b 是 blank 的意思 |

  3. 字符串长度 

    1. 字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
    1. var strMsg = "我是帅气多金的程序猿！";
    2. alert(strMsg.length); // 显示 11

  4. 字符串拼接

    • 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串

    • 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串 

      1. //1.1 字符串 "相加"
      2. alert('hello' + ' ' + 'world'); // hello world
      3. //1.2 数值字符串 "相加"
      4. alert('100' + '100'); // 100100
      5. //1.3 数值字符串 + 数值
      6. alert('11' + 12);     // 1112
      • + 号总结口诀：数值相加 ，字符相连

  1. 字符串拼接加强 

    1. console.log('pink老师' + 18);        // 只要有字符就会相连 
    2. var age = 18;
    3. console.log('pink老师age岁啦');      // 这样不行哦
    4. console.log('pink老师' + age);         // pink老师18
    5. console.log('pink老师' + age + '岁啦'); // pink老师18岁啦
    • 经常会将字符串和变量来拼接，变量可以很方便地修改里面的值
    • 变量是不能添加引号的，因为加引号的变量会变成字符串
    • 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

布尔型Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。 

  1. console.log(true + 1);  // 2
  2. console.log(false + 1); // 1

Undefined和 Null


一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）
一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null) 

  1. var variable;
  2. console.log(variable);           // undefined
  3. console.log('你好' + variable);  // 你好undefined
  4. console.log(11 + variable);     // NaN
  5. console.log(true + variable);   //  NaN
  1. var vari = null;
  2. console.log('你好' + vari);  // 你好null
  3. console.log(11 + vari);     // 11
  4. console.log(true + vari);   //  1

Symbol数据类型

引入数据类型

object

普通对象

  • 由大括号包裹起来
  • 由零到多组键值对组成

属性是用来描述当前对象特征的，属性名是当前具备这个特征，属性值是对这个特征的描述。

专业术语：属性名为键 [key]，属性值为值 [value]，一组属性名和属性值为一组键值对。

  1. var obj = {
  2.   name: 'aa', //=>属性名也可以直接写成字符串 'name': 'aa'
  3.   age: 15
  4. }
  6. // 对象的操作：对键值对的增删改查
  8. [获取]
  9. 语法：对象.属性 / 对象['属性']
  10. obj.name
  11. obj['name'] 一般来说，对象的属性名都是字符串格式的
  12. 使用方括号语法就可以通过变量来访问对象属性
  14. 获取属性值的时候，如果当前对象有这个属性名，则可以正常获取到值（哪怕是 null），但是如果没有这个属性名，则获取的结果是 undefined
  15. obj.friends //=> undefined
  17. [增/改]
  18. JS 对象中属性名是不允许重复的，是唯一的
  19. obj.name = 'bb'; //=> 原有对象中存在 name 属性，此处属于修改属性值
  20. obj.sex = "man"; //=> 原有对象不存在 sex 属性，此处属于新增一个属性
  21. obj['age'] = 28;
  23. [删]
  24. 彻底删除，对象中不存在这个属性
  25. delete obj.age;
  26. 假删除，并没有移出这个属性，只是让当前属性的值为空
  27. obj.sex = null;

思考题：

  1. var obj = {
  2.   name: 'aa',
  3.   age: 9
  4. };
  5. var name = 'age';
  7. obj.name //=> 'aa'
  8. obj['name'] //=> 'aa'
  9. obj[name] //=> 9
  11. ----
  12. 'name' 和 name 的区别？
  13.   => 'name' 是一个字符串，代表本身
  14.   => name 是一个变量，代表的是存储的值

一个对象的属性名不仅仅是字符串格式的，还有可能是数字格式的（数组）。

  1. var obj = {
  2.   name: 'aa'
  3.   0: 12
  4. };
  5. obj[0] //=> 12
  6. obj['0'] //=> 12
  7. obj.0 //=> Uncaught SyntaxError: Unexpected number
  8. SyntaxError 语法错误

当我们存储的属性名不是字符串也不是数字的时候，浏览器会把这个值转换为字符串（String），然后再进行存储

  1. obj[{}] = 300; 
  2. //=> 先把 ({}).toString()后的结果作为对象的属性名存储起来 obj['[object Object]'] //=> 300
  4. obj[{}] //=> 获取的时候也是先装换为字符串 '[object Object]'，然后获取之前存储的 300

数组对象

  1. var arr = [12, 23]; //=> 12 和 23 都是属性值
  2. arr[0] //=> 12
  3. arr['age'] = 23;
  4. arr //=>[12, 23, age: 23]

通过控制台观察结果，数组对象的属性名是数字，我们把数字属性名称为当前对象的索引

1.3 获取变量数据类型

  • 获取检测变量的数据类型
    typeof 可用来获取检测变量的数据类型
    不同类型的返回值
    图片18.png

    1. var num = 18;
    2. console.log(typeof num) // 结果 number

  • 字面量
    字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

    • 数字字面量：8, 9, 10
    • 字符串字面量：’黑马程序员’, “大前端”
    • 布尔字面量：true，false

1.4 数据类型转换

什么是数据类型转换？

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型，通常会实现3种方式的转换：

  • 转换为字符串类型
  • 转换为数字型
  • 转换为布尔型

转换为字符串
图片19.png

  • toString() 和 String() 使用方式不一样。
  • 三种转换方式，更多第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换。

转换为数字型（重点）
图片20.png

  • 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
  • 如果字符串并不是数字内容，那么会得到NaN。除非以数字开头的话，那么parseInt或parseFloat可以将开头的那些数字提取出来，Number()还是NaN。
    • console.log(parseInt('120px111'));//120
    • console.log(Number('120px111'));//NaN
  • 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

  • Number和parseFloat的区别

    • Number可以将除了字符串以外的类型的数据也可以转为数字
    • parseFloat只针对字符串，其他类型的数据会得到NaN

      转换为布尔型
      图片21.png

  • 代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined

  • 其余值都会被转换为 true 
    1. console.log(Boolean('')); // false
    2. console.log(Boolean(0)); // false
    3. console.log(Boolean(NaN)); // false
    4. console.log(Boolean(null)); // false
    5. console.log(Boolean(undefined)); // false
    6. console.log(Boolean('小白')); // true
    7. console.log(Boolean(12)); // true