数据类型（基础）

AVIC_501

已于 2023-05-19 09:20:39 修改

阅读量793

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2023-05-17 17:46:40 首次发布

本文链接：https://blog.csdn.net/li5306/article/details/130731496

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

顾名思义，数据类型就是数据的种类。不同数据拥有不同的作用.

数据类型 => 数据种类

数据总共 => ES5有6种,ES6新增了一种.

ES5的这6种:

1：number（数字）

2：string（字符串）

3：boolean（布尔值）（用于表示true 和 false）

4：undefined （空的值）（用于表示空的值）

5：null（不存在的对象）（用于描述一个不存在的对象）

6：object（对象）（描述一组数据）

其中object细分，又分为数组（array），函数（function）和纯对象（plain object）3种。

1.0 number(数字类型)

<script>

// 声明一个num变量,赋值10.这个num变量是数字类型.
    // 一个变量是什么数据类型,只看它的值是什么.
    let num = 10;
    // 检查一个变量的数据类型.
    console.log(typeof num);

</script>

1.1 string(字符串)

<script>

// 字符串 (文字)
    let str = '你好';
    // 字符串.string
    console.log(typeof str);

</script>

1.2 boolean（布尔值）

<script>

     let flag = true;
    console.log(typeof flag);

</script>

1.3 undefined

<script>
    let flag;
    // 声明了没有赋值,数据类型就是undefined
    console.log(typeof flag);
</script>

1.4 object(对象)

<script>
// object类型分三小类
   //  function(函数), array(数组), plain object(纯对象)

     alert('你好');
    function
     console.log(typeof alert);

     const arr = [11, 22, 33];
     object
     console.log(typeof arr);

     const obj = { name: '幂幂' };
     object
     console.log(typeof obj);

     const obj = null;
     object
     console.log(typeof obj);

    // typeof 检查数组,纯对象还有null的时候,结果都是object.(typeof 的确定就是这样)
</script>

其中：

number，string，boolean，undefined，null为基本类型（简单类型）。（不是对象，理论不能添加属性）

object（包括array，function，plain object以及其他对象）为引用类型（复杂类型）。（是对象，可添加属性）

1.5 NaN

<script>

    // NaN => not a number => 不是一个数字
     let num = NaN;
    // num的数据类型是number.
     console.log( typeof num );

    // NaN表示没有具体值的数字.
    
    // 注意,NaN不是无穷大的意思.

    // 无穷大是Infinity;
    let n = Infinity;
    // number
    console.log( typeof n );
</script>

1.6 字符串

字符串用于在编程中描述文字。
字符串需要使用引号括起。单引号双引号都可以，但是不能混用。
ES6中也可以使用字符串模板来表示字符串。符号是反引号 ``.

关于反引号的操作：

<script>

    // 字符串 => 文字
    // 文字都需要加引号.单引号双引号,反引号都可以.


    // 反引号。(英文输入状态下的波浪按键)
    let msg = `你好`;
    console.log(typeof msg);

    // 什么时候用单引号，双引号，反引号？
    // 字符串容本身就带双引号,则字符串需要单引号
    let str = '小李最帅"不接受反驳"';

    // 字符串容本身就带单引号,则字符串需要双引号
    let str = "小李最帅'不接受反驳'";
    console.log(str);

    // 不管字符串内容本身有没有引号,最外面都可以使用反引号
    let str = `小李最帅'开挂了'`;
    let str = `小李最帅"不接受反驳"`;

  </script>

1.7 字符串拼接：

两个字符都可以通过 + 拼接连城一个新的字符串

<script>
  // 拼接两个字符串常量
let x = '你' + '好';

// 拼接两个字符串变量
let str1 = '你';
let str2 = '好';
let word = str1 + str2;

// 在字符串常量中拼接变量
let word = str1 + str2 + '吗？';
let word = '现在' + str1 + str2 + '吗？';

// 使用ES6的字符串模板拼接字符串常量和变量
let word = `现在${str1}${str2}吗？`;      
</script>

难点：

1：要不要写引号.

2：字符串拼接如果使用es5的 + 进行拼接，如何写 + 和 ''.

空字符串

<script>

    // NaN => 没有具体值的数字。
    // '' => 空字符串 => 没有字符的字符串

    // 初始化一个不知道具体字符的字符串.
    // let str = '';
    // console.log(typeof str);

    // 通过拼接空字符串,可以把一个数组转换为字符串.
    let num = 100 + '';
    // string
    console.log(typeof num);

    // 1:怎么写字符串.(用什么引号)
    // 2:字符串拼接.(+或者${})
    // 3:空字符串.

    // 难点: 要不要加引号.
    let str = '你好';
    // 写什么弹什么
    alert('str');
    // 弹一个变量str的值.
    alert(str);

  </script>

1.9undefined

表示没有值的默认值。
一个变量声明后没有赋值，这时候这个变量中的值是什么呢？
这时候这个变量没有值，那如何表示这个没有值的状态呢？使用undefined表示

<script>
 // 声明变量 => 增
    let x;
    // 赋值 => 改
    // x = 10;
    // 查找x的值.
    // 一个变量没有赋值,则它默认的值就是undefined
    console.log(x);
</script>

其实很多时候，本该有值的地方没有值，都显示undefined。

2.0 null

null和undefined很像。一般我们都只用null来表示一个暂时还不存在的对象。
例如：获取一个标签，这个标签在页面上不存在，如何描述这个不存在的标签呢？用null表示。

2.1 object

对象 => 看得见摸得着的东西.
面向对象 => 把看不见摸不着的东西,也想象成看得见摸得着的东西.(抽象的过程).
纯对象是一种无序的数据结构.
纯对象都通过一个{}包裹
{}内书写的都是对象的属性.
属性由属性名和属性值组成.
age: 35 => age是属性名, 35属性值.
属性都是键值对(key-value).
age: 35 => age是key(键), 35就是value(值)
多个属性之间,用,隔开.
属性名和属性值之间是:链接.不是=

<script>
let obj = {
      cname: '李唐',
      ename: 'Li Tan，tang',
      nickName: '赵五、王六、顺溜',
      age: 35,
      height: '166.5 cm',
    }

     console.log(obj);
     // . => 对象的属性访问操作符.(的)
    // 打印obj对象的age属性值。
    console.log(obj.age);
    // 修改obj的age属性值。
    obj.age = 100;
    console.log(obj.age);

    // 删除age属性。
    delete obj.age;
    console.log(obj);

    // 新增一个一开始不存在的属性country。
    obj.country = '中国';
    console.log(obj);
</script>

2.2 对象里面的对象（Object）

<script>

    // 一个对象的属性可以是别的对象
    // oYm的exhusband属性就是另一个对象.
    let oYm = {
      cname: '杨幂',
      age: 35,
      // 前夫
      exhusband: {
        name: '凯威',
        age: 42,
        brother: {
          name: '开挂'
        }
      }
    }

    // 打印oYm的exhusband属性的name属性
    console.log(oYm.exhusband.name);
    // 删除凯威的age
    delete oYm.exhusband.age
    // 新增属性
    oYm.exhusband.height = '170cm';

  </script>

2.3 Object大括号嵌套

<script>

    // 1:属性在{}中药缩进一个制表符。
    // 2:同级属性要左对齐.
    // 3:属性: 后面要有空格.

    // BracketPair Colorizer 2 插件可以帮助我们识别匹配的{}

    let obj = {
      name: '小李',
      age: 32,
      exhusband: {
        name: '京京',
      },
    }

  </script>

2.4 Object里不存在的对象

<script>

    const oYm = {
      name: '幂幂',
    }
    
    // 访问一个不存在的属性,得到undefinded
    // console.log(oYm.age);

    // 不能读取undefined的x属性.
    // Cannot read property 'x' of undefined
    // console.log(oYm.age.x);

    // 不能修改undefined的x属性.
    // Cannot set property 'x' of undefined
    oYm.age.x = 100;

    // undefined和null后面是不能接.的.接了就报错

  </script>

注意：

万物皆对象。

js的6种数据类型中，只有object类型才是对象，理论只有object类型才可以添加和访问属性。
但是js中，number,string以及boolean虽然不是object类型，但是他们可以访问属性，但是添加属性会失败。
js中，唯一不能访问属性和添加属性的是undefined和null。

程序的步骤：

程序后面的代码按照前面的代码来进行计算.
如何分析程序的步骤,哪个步骤发送了什么事情,各种变量的值是什么,如何分析?
如何调试代码?
断点分析.(按步骤断点);
2种断点.
利用浏览器的功能来断点.
利用debugger命令来断点.(运行到debugger时,程序会暂时停止)

<script>

    let num = 10;
    debugger;
    // num的值+1
    num = num + 1;// 11
    debugger;
    num = num + 1;// 12
    debugger;
    num = num + 1;// 13
    debugger;
    num = num + 1;// 14
    debugger;

    console.log(num);

  </script>

2.5 检测数据类型：