数据类型概括

划分数据类型的原因

• 不同的的数据类型具有不同的运算方式与存储方式
• 计算机并不能识别数字和字符(计算机不能够识别不同的数据)；
• 需要加以划分；

1. 简单数据类型

[1]特点：只能存储一个值；

[2]分类-5中+es6新增1个

(1)number数据类型

• 数据：整数、小数(浮点数)、正数、负数

• 注意问题：

  • 不要比较小数的大小

  • 原因：计算机内部所有的数据都是以二进制进行存储的，所以小数(由于精度问题)在转化时可能存在丢失，造成结果不准确

  • 举例说明

    • console.log(0.3==(0.1+0.2)); //false
      console.log(0.1+0.2) //0.30000000000000004
      1
      2

    • 解决办法：将小数转化为整数，再进行计算/比较

      • console.log(0.1 * 10 + 0.2 * 10 == 0.3 * 10) //true
        1

number数据类型中两个特殊的数据类型(NaN,Infinity)

[1]NaN

• NaN属于number数据类型，但是并不是一个数值；

• 当进行数学运算的时候，若是达不到正确的结果，一般值就为NaN

  • eg:

    let a = 100;
    let b = 'string';
    let sum = a * b;
    console.log(sum);//---输出NaN
    1
    2
    3
    4

• NaN的特点

  • 1、与任何值进行计算都是NaN；
  • 2、与任何值相比都不相等（包括自身）；

• 举例说明：

  • console.log(NaN == NaN)// false
    console.log(NaN != NaN)// true
    1
    2

[2]Infinity

• Infinity值为无穷大,-Infinity值为无穷小

  • eg:分母为0时

        console.log(1/0);// Infinity
    1

isNaN方法

• 作用

  • [1]用于判断一个数是否为NaN(因为任何数与NaN比较都不想等，即使是他本身)

    • let a = 1111
      console.log(isNaN(a)) //false
      1
      2

  • [2]用于判断一个字符串是否是全数字组成(is not a number)

    • 是全数字，则返回false

    • 不是全数字，则返回true

    • let a = '1111a'
      console.log(isNaN(a)) //true
      1
      2

  • 注：isNaN方法是Window的方法；

(2)string数据类型

• 数据：使用引号括起来的就是字符串—使用单引号或双引号括起来的0个或多个字符即为字符串

• 注意问题：

  • 默认，单引号内不能再包含单引号，但可以包含双引号

  • 默认，双引号内不能再包含双引号，但可以包含单引号

  • 原因:在遇到单/双引号时，默认会向后寻找 另一个单/双引号，若是找到默认此字符串结束；

  • eg:

     let str='1233'1'
    // 此时就会报错，原因因为str字符串到3就结束了
    1
    2

(3)Boolean数据类型

• 布尔类型的值常用于表示现实中的"矛盾态"，相互对应的两种状态
• 数据：
  • true
  • false
• 注意点：平时没有意义，只有在和条件控制语句结合使用时才有意义；

(4)undefeind数据类型

• 数据：undefined
• 什么时候数据为undefined
  • [1]在定义了变量但是没有赋值时，变量的值为undefiend
  • [2]在访问对象中没有定义的属性时，属性值为undefiend
  • [3]在访问数组的超出下标的值的时候，值为undefined

(5)null数据类型

• 数据：null
• 什么时候的值为null
  • 在使用prompt获取用户输入的数据，用户点击取消的时候，获取的数据为null

(6)es6新增的简单数据类型symbol

https://www.jianshu.com/p/cad25435f5a4

[1]作用：用于防止属性名冲突而产生的数据类型;

[2]特点

• (1)Symbol数据类型不能使用 new关键字；

  • 原因：Symbol数据类型没有基本包装对象；

  • Symbol可以修改this指向

     function editthis () {
            console.log(this)
          }
    
    editthis.call(Symbol('xx')) // {Symbol(xx)}
    1
    2
    3
    4
    5

• (2)使用Symbol方法生成数据，即使是参数相同 生成的数据也不相等

  • eg:

  • let sy = Symbol('xx')
        let sy1 = Symbol('xx')
    console.log(sy == sy1) //false
    1
    2
    3

• (3)数据类型为symbol

  • console.log(typeof sy) // symbol数据类型
    1

• (4)其主要作用是为了 避免对象属性名相同 而创建的

  • eg1：若是在对象中使用相同的属性名，后面的属性会把前面属性的值覆盖

  • let person = {
           111: '111',
           111: '222'
         }
         console.log(person) //{111：‘222’}
    1
    2
    3
    4
    5

  • eg2：若是使用symbol数据类型作为属性就不用担心数据被覆盖的问题

  • let sy2 = Symbol('xx')
         let person2 = {
           [sy2]: '111',
           [Symbol('xx')]: '222'
         }
         console.log(person2) //{Symbol(xx):'111',Symbol(xx):'222'}
    1
    2
    3
    4
    5
    6

• (5)注意点：

  • 在使用symbol数据类型的值作为对象属性的时候不要使用点语法(原因：symbol没有基本包装类型)
  • eg:

• let sy2 = Symbol('xx')
        let person2 = {
          [sy2]: '111',
          [Symbol('xx')]: '222'
        }
        console.log(person2) //{Symbol(xx):'111',Symbol(xx):'222'}
  
        // 在使用Symbol数据类型时不能够使用. 符号要用 []
        console.log(person2[sy2]) //111
        console.log(person2[Symbol('xx')]) // 这样获取---由于symbol生成的数据各不相同，所以值为undefiend
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

简单数据类型的相互转化

1.定义：数据类型的转化是将一种数据类型转化为另一种数据类型；

2.为什么要进行数据类型的转化：因为在js中 只有相同数据类型才可以进行直接计算；

[1]数据类型的隐式转化

1.定义：JS在进行计算时，数据类型不同自行转换；

[1]number类型的隐式转化触发点

• (除了+ +=外的算术运算符)算数运算符会触发number类型的隐式转换；
• 易错点1
  • null==undefined的结果
  • 在个人看来，==触发隐式转化(null转化为0，undefiend转化为NaN,比较不应该是false)
  • 但是实际并不是这样，而是(在js规范中提到：在比较相等性之前，不能将null与undeined转化为其他任何值，并规定undefined与null是相等的，null与undefiend都代表无效的值)
• 易错点2
  • true==10的结果
  • true==1的结果
  • 实际上在进行比较的时候，会触发unmber隐式转化，先将true转化为数字1—所以true10的结果为false而true1的结果为true

[2]string类型的触发点

• 当在进行+ 、+=进行运算–当其中一个值(只要有string类型就会触发)为string类型，会触发隐式转换

• 举例说明2：结果为NaN —因为即使是+运算，没有string类型的参数也不会触发string的隐式转化

  • function add (n1, n2) {
       console.log(n1 + n2)  // NaN
    }
    add(1) 
    1
    2
    3
    4

  • 结果为NaN

    • 1和undefined在遇到“+”运算符时会触发unmder数据类型隐士转化(没有字符串)
    • undefined转化为NaN
    • NaN与任何值计算结果都为NaN

• 举例说明2 :计算 从左向右 进性计算 ；

  • let res=100+5+'10'
    console.log(res); //10510
    1
    2

  • [1]100+5 （没有字符串不会触发隐式转化）值为105；

  • [2]105+‘10’ (‘10’为字符串会触发隐士转化) ‘105’+‘10’=10510—字符串拼接

[3]boolean类型的触发点

• 当一个数据作为条件表达式时，会触发boolean隐式转换

  • 例题1

    • let i = 0
      let j = 0
      i++ ? i++ : j = i
      console.log(i)
      console.log(j)
      1
      2
      3
      4
      5

    • (1)i++ —先进行运算，再自加(不是进性完整个式子运算，而是当前这步)

    • (2)i=0 作为条件触发boolean的隐士转化为false； i=1

    • (3)执行j=i

    • (4)打印 1，1

• 例题2

  • console.log(!10)
    1

  • 10转化为boolean为true,取反为false

[2]强制数据类型转化

1.使用场景：当隐士转换不符合我们的需求时使用强制转换—一般是+ +=时；

[1]number类型的强制转换

• 语法：

  Number(数据)

  • 若是不传值默认为0
  • 易错点
    • undefiend强制转化为number类型的结果为NaN
    • 注：在number类型进行强制转化时，只有字符串与undefined会转化为NaN

• 转化结果： 能合理转换就进行转换，转换不了就转换为NaN(NaN设计的目标就是用于接收这种无法转换的情况)

• 举例说明

  • console.log(Number()) // 0
    console.log(Number('0')) // 0
    console.log(Number(true)) //1
    console.log(Number(false)) //0
    console.log(Number(undefined)) //NaN
    console.log(Number(null)) //0
    console.log(Number('a')) // NaN
    1
    2
    3
    4
    5
    6
    7

[2]string类型的强制转换

• 语法：

  String(数据)

  • 若是不传值默认为’'(空字符串)

• 转化结果： 基本全部加‘’变为字符串

• 举例说明

  • console.log(String()) // ''
    console.log(String(0)) // '0'
    console.log(String(true)) //'true'
    console.log(String(false)) //'false'
    console.log(String(undefined)) //'undefined'
    console.log(String(null)) //'null'
    1
    2
    3
    4
    5
    6

[3]boolean类型的强制转换(比较常用)

• 语法：

  Boolean(数据)

  • 若是不传值默认为false
  • 易错点
    • 字符串：空字符串转化为false,只要不是空字符串(带空格、0、、、、都是true)
      • ‘’—false
      • ’ '—true
      • ‘0’—true
      • ‘\n’—true
    • 数字：除了0都是true
    • undefined、null都是false
    • 复杂数据类型：true
      • []:true
      • {}:true

• 转化结果： 有意义的转化为true，没有意义的转化为false

• 举例说明

  • <script>
        console.log(Boolean()) //false
         console.log(Boolean(0)) // false
         console.log(Boolean('0')) //true
         console.log(Boolean('')) //flase
         console.log(Boolean(NaN)) //false
         console.log(Boolean(undefined)) //false
         console.log(Boolean(null)) //false
         console.log(Boolean(''))
         console.log(Boolean(' '))
         console.log(Boolean([]))
         console.log(Boolean('\n'))
       </script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

基本包装对象

[1]前提：.操作符是对象用来添加/访问属性值的

注：function,array本质也是对象

eg:

 <script>
      let obj = {
        a: '111'
      }
      obj.b = '222'
      console.log(obj.a, obj.b) // 111 222
    </script>![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)
1
2
3
4
5
6
7

[2]但是作为一个简单数据类型，为什么使用.操作符也不会报错呢

eg:

let a=10;
a.num=22
console.log(a); //10
1
2
3

[3]原因：当JS通过.访问符进行访问时，如果不是对象，JS会将数据封装成一个对象，封装成对象之后就可以使用.访问符进行访问了

• number简单数据类型通过Number构造函数将数据封装为对象
• string简单数据类型通过String构造函数将数据封装为对象
• boolean简单数据类型通过Boolean构造函数将数据封装为对象
• null和undefined ，js没有为其提供相应的的构造函数(也就是说null和undefined没有包装类型)

[4]基本包装类型的执行原理：

• 1)在基本数据类型进行点操作时，JS会使用当前数据临时包装一个对象，再在这个对象上使用点语法

• 2）当本次的点操作结束后，会马上销毁临时包装的对象；

• 3）看起来什么都没有改变；

• 举例说明1

  • [1]定义了一个变量a

  • [2]a使用了点语法，js内部使用基本包装类型将a封装为1个对象调用点语法；

  • [3]使用结束，销毁基本包装类型，此时 a=10

  • [4]打印a.num时又使用了点语法，又封装为基本包装类型，但是这个包装类型中a对象的num属性没有被赋值，所以值为undefined

  • let a = 10  
    console.log(typeof a)  // number
    a.num = 22 
    console.log(typeof a); // number
    console.log(a.num);  //undefined
    1
    2
    3
    4
    5

• 举例说明2

  • let a = 10
    console.log(typeof a)  //number
    let objA = new Number(a)
    console.log(typeof objA) // Object
    1
    2
    3
    4

• 举例说明3

  • [1]由于使用点语法但是undefined没有基本包装类型，所以会报错

  • let a = undefined
    a.num = 10
    console.log(a)
    1
    2
    3

2.引用数据类型

[1]Array

js-数据类型(数组)_乖女子@@@的博客-CSDN博客

[2]Function

js-数据类型(函数)_乖女子@@@的博客-CSDN博客

[3]Object

js-数据类型(对象)_乖女子@@@的博客-CSDN博客

4.检测数据类型

[1]简单数据类型的检测

(1)语法：

• typeof(数据)
• typeof 数据

(2)缺点：

• 结果具有不准确性；
  • 对于null 检测数据类型为object
  • 注：若是检测复杂数据类型(array结果为object)

(3)举例说明

console.log(typeof 0) // number
console.log(typeof '0') // string
console.log(typeof true) // boolean
console.log(typeof undefined) // undefined
console.log(typeof null) //object

let sy=Symbol('xx')
console.log(typeof sy); //symbol
1
2
3
4
5
6
7
8

检测是否为数字

isNaN(111) // false
1

[2]检测复杂数据类型

(1)语法: 数据 instanceof 构造函数

(2)执行原理(本质):检测右面构造函数的原型对象是否在左侧数据地原型链上；

(3)缺点：结果存在不准确性；

(4)以检测数组为例(前提：数组的构造函数为Array)

 console.log([111] instanceof Array); // true
 console.log([111] instanceof Function); // false
 console.log([111] instanceof Object); // rue
1
2
3

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FVMwvLla-1655886457869)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]

• [1]当检测[111]是否为数组----true(原因是因为Array.prototype==[111].proto)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-weTmdHMg-1655886457870)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]编辑

• [2]当检测[111]是否为函数—false
  • 因为[111]的原型链上没有Function.prototype
• [3]当检测[111]是否为对象–true(结果错误)
  • [111].proto.protp=Object.prototype

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w7j9njmK-1655886457871)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]编辑

(5)案例

• 注：先画一个左侧对象向上寻找
• console.log(Object instanceof Object);// true
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-43dYOsOF-1655886457871)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]编辑
• console.log(Object instanceof Function);// true
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CvBvh6KZ-1655886457872)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]编辑
• console.log(Function instanceof Object);// true
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E7KSETrj-1655886457872)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]编辑
  • 注：Function创建的自己！
• console.log(Function instanceof Function);// true
  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pTA3n8D9-1655886457872)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]

检测是否为数组

(1)语法：Array.isArray(数据)

(2)举例说明：

console.log(Array.isArray([111])) //true
console.log(Array.isArray({ 1: '111' })) //false
1
2

[3]万能检测数据类型

(1)语法：Object.prototype.toString.call(数据)

(2)优点：

• (1)对于任何数据都适用；
• (2)没有错误情况；

(3)原理:

• 前提：
  • 很多构造函数的原型对象都具有toString方法，eg:Array.toString();
  • 但是只有Object构造函数的toString方法的作用是检测数据类型的；
• 执行原理：
  • 检测数据类型，修改toString方法的this指向；
  • 相当于此数据去调用Object原型对象上的toString方法；
  • 这样就检测出此数据的数据类型了！
• 注意点：
  • 原理上null与undefined是不能够修改this指向的(修改是失败的)；
  • 但js是弱语言，很多地方不太完整(很多时候null,undefined是当作对象的)

（4）举例说明

 console.log(Object.prototype.toString.call(1)) // [object Number]
      console.log(Object.prototype.toString.call('1')) // [object String]
      console.log(Object.prototype.toString.call(true)) // [object Boolean]
      console.log(Object.prototype.toString.call(null)) // // [object Null]
      console.log(Object.prototype.toString.call(undefined)) // [object Undefined]
      console.log(Object.prototype.toString.call(Symbol('xx')))// [object Symbol]
      console.log(Object.prototype.toString.call([111])) // [object Array]
      console.log(Object.prototype.toString.call({ 1: '11' }))// [object Object]
      console.log(
        Object.prototype.toString.call(function a () {
          console.log('11')
        })
      ) // [object Function]
1
2
3
4
5
6
7
8
9
10
11
12
13

5.数据赋值