JS数据类型

数据类型－声明变量练习

// 声明一个变量a，值为：3
// 声明一个变量b，值为：null
// 声明一个变量c，值为："Hello!"
// 声明一个变量d，值为：true
// 声明一个变量e，不赋值
// 声明一个变量f，值为""
var a = 3;
var b = null;
var c = "hello";
var d = true;
var e ;
var f = "";
var g = [1,2,3,4];//数组
var h = function(){};//函数Copy to clipboardErrorCopied

typeof 操作符

我们需要有一种手段来检测给定变量的数据类型：

• typeof 就是负责提供这方面信息的操作符，格式为 typeof（a）或 typeof a ；
• 有些时候 typeof 操作符会返回一些令人迷惑但技术上却正确的值
  • 把null归为Object类型，而不是作为特殊的值
  • 把函数归为Function类型，而不是Object类型的一个子类

//检测上一个案例的变量
console.log(typeof a);//number
console.log(typeof (b));//object
console.log(typeof (c));//string
console.log(typeof (d));//boolean
console.log(typeof (e));//undefined
console.log(typeof (f));//string
console.log(typeof (g));//object
console.log(typeof (h));//function  Copy to clipboardErrorCopied

数据类型分类

• JS数据类型分为两种：简单的值（原始值）和复杂的数据结构（泛指对象）。
• 简单的值包含字符串、数字、布尔值。还有两个特殊的值 null（空值）和undefined（未定义）
• 对象包括狭义对象、数组和函数

数据类型         说明

null            空值、表示非对象

undefined       未定义的值,表示未赋值的初始化值

nunber          数字,数学运算的值

string          字符事,表示信息流

boolean         布尔值,逻辑运算的值

object          对象。表示复合结构的数据集Copy to clipboardErrorCopied

Undefined类型

什么是Undefined类型

• Undefined类型只有一个值，即undefined。比如在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined。
• 我们不会对一个值设置undefined，一般都是出现错误的时候，才会被我们打印出来

常见的Undefined环境

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

  //打印a的时候，找到a了 但是找不到a的值，所以返回一个undefined
  var a;
  console.log(a);
  console.log(a+1);//undefined+1  计算不了
  
  //不声明b，直接使用b，js直接报错  ReferenceError(引用错误)： b is not defined
  //说明完全没有找到b这个变量 代码报错停止运行
  console.log(b)Copy to clipboardErrorCopied

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

  // 声明函数使用function关键字 函数没有调用是完全不执行的
  function add(a,b) {
      console.log(a)
      console.log(b)
      alert(a+b);
  }
  // 调用函数 函数名+（）  传入参数
  add(1,2);
  
  //再次调用函数（没有给够参数）
  add(1);Copy to clipboardErrorCopied

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

  // 创建一个对象
  var yourGirlFriend={
      name:"lily",
      age:18,
      length:180
  }
  // console.log(yourGirlFriend.name);
  console.log(yourGirlFriend.color);Copy to clipboardErrorCopied

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

  function reduce(a,b) {
      // 函数只要不写return 就没有返回值
      alert(a-b);
      // return a-b;//返回a-b
  }
  // 调用函数
  var num1=reduce(4,2);
  console.log(num1)
  
  console.log(reduce(4,1));Copy to clipboardErrorCopied

• 检测一个变量是否初始化，如果没有，就为其赋值

  var a;
  if(typeof a === 'undefined'){
      a = 10;
  }
  console.log(a);Copy to clipboardErrorCopied

Null类型

Null类型解释

• null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。
• 从逻辑角度来看，null 值表示一个空对象指针，而这也正是使用 typeof 操作符检测null时会返回"object"的原因

常见的 null 环境

• 作为函数的参数，表示该函数的参数不是对象

  function fn(a,b) {
      alert(a+b);
  }
  // 需要传递参数，但是我们暂时不想传递，或者不需要传递，那么我们可以传一个空对象null
  fn(null,null)
  
  /*ajax有个方法send(),send方法参数是你要向服务器传递的值
          但是get方法是在地址栏拼接值，所以不需要send传递，所以我们在send中写一个参数null，告诉他我不想在这里传*/Copy to clipboardErrorCopied

• 作为对象原型链的终点

  //比如："123"--->String--->Object--->nullCopy to clipboardErrorCopied

• 如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值

  var a = null;
      function fn1() {
          a=2;
      }
      fn1();
      console.log(a);Copy to clipboardErrorCopied

Undefined和Null

• Undefined派生自Null，两者都是表示空缺值，转换成布尔值都是假值，可以相等
• 但是Undefined和Null属于两种不同的类型
• Undefined隐含着意外的空值，而Null隐含着意料之中的空值。因此设置一个变量、参数为空的时候，建议使用null而不是undefined

Number类型

什么是Number类型

数字（Number）也称为数值或者数

• 整数，浮点数值（数字直接量）
• 八进制数（010、025）
• 十六进制数（0xa、0x1c）
• 二进制数
• 科学计数法
• Number.MIN_VALUE
• Number.Max_VALUE
• Infinity
• NaN

整数，浮点数值（数字直接量）

当数字直接出现在程序中时候，被称为数字直接量 JS所有的数字都是以64位浮点数存储，所以2和2.0是同一个数字

var num1 = 19;//整数
console.log(num1);

var num2 = 18.11112;//浮点数
console.log(num2);Copy to clipboardErrorCopied

八进制数

数字前加一个0,代表8进制数

var num3 = 010;//数字前加一个0 代表8进制数
console.log(num3);//打印的是十进制  8Copy to clipboardErrorCopied

十六进制数

数字前加上0x,代表十六进制数

var num4 = 0xff;//数字前加上0x 代表十六进制数
console.log(num4);//255Copy to clipboardErrorCopied

二进制数(支持性不好，谨慎使用)

数字前加上0b,代表二进制数

var num5 = 0b11;//数字前加上0b 代表二进制数
console.log(num5);//3Copy to clipboardErrorCopied

科学计数法

用E代表底数10,后边跟E的指数,可以是正负值

//用E代表底数10  后边跟E的指数 可以是正负值
var num5 = 1.2E-7;
console.log(num5);//1.2E-7
console.log(num5+1);//1.00000012   运算以后 变成直接量显示Copy to clipboardErrorCopied

最大值最小值

在js中数字也是有最大值和最小值的支持的，如果超过最大值或最小值，就可能计算有误

// 在js中数字也是有最大值和最小值的支持的，如果超过最大值或最小值，就可能计算有误
console.log(Number.MIN_VALUE);//5e-324  支持数字的最小值
console.log(Number.MAX_VALUE);//1.7976931348623157e+308 支持数字的最大值Copy to clipboardErrorCopied

Infinity

• 计算超出范围会得到无穷大(infinity)或者无穷小(-infinity)

• 分母为0会构成无穷大Infinity 或负无穷大-Infinity

• 关于Infinity的运算， 无法计算 加减乘除一个数字都是Infinity，Infinity和Infinity计算，加法乘法为Infinity，其他为NaN

• Infinity和自身相等 其他比较正常

// 分母为0会构成无穷大Infinity 或负无穷大-Infinity
var num6 = 5/0;
console.log(num6);//Infinity

var num7 = -5/0;
console.log(num7);//-Infinity

console.log(typeof (Infinity));//无穷大和无穷小都是属于number类型

// 关于Infinity的运算， 无法计算 加减乘除一个数字都是Infinity，Infinity和Infinity计算，加法乘法为Infinity，其他为NaN
console.log(Infinity + 1);//Infinity
console.log(Infinity - 1);//Infinity
console.log(Infinity - 1000000000000000000000);//Infinity
console.log(Infinity - Infinity);//NaN
console.log(Infinity * Infinity);//Infinity
console.log(Infinity + Infinity);//Infinity
console.log(Infinity / Infinity);//NaN

//Infinity和自身相等  其他比较正常
console.log(Infinity > 1);//true
console.log(Infinity < 1);//false
console.log(Infinity == 1);//false
console.log(Infinity > Infinity);//false
console.log(Infinity == Infinity);//true
console.log(Infinity < Infinity);//false
console.log(Infinity > -Infinity);//trueCopy to clipboardErrorCopied

NaN

• NaN,即非数值(Not a Number)是一个特殊的数值

• 这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)

• aN特点：无论和谁比较都是fasle 无论和谁计算都是NaN

var num8 = "李沛华"-1;
console.log(num8)//NaN

// NaN特点：无论和谁比较都是fasle  无论和谁计算都是NaN
console.log(NaN+1);//NaN
console.log(NaN>1);//fasle
console.log(NaN==1);//fasle
console.log(NaN<1);//fasleCopy to clipboardErrorCopied

isNaN方法的使用

• isNaN方法检测一个值是不是非纯数字 , 如果非纯数字就返回true 如果是纯数字就返回false

• 案例：点击检测的时候，判断是不是全部是数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>isNaN</title>
</head>
<body>
    请输入您的电话号码：
    <input id="ipt" type="text">
    <button id="btn">检测</button>
    <script>
        /*
        *   1、点击按钮 (给按钮绑定点击事件)
        *   2、获取input的值ss
        *   3、使用isNaN检测
        *   4、判断检测的值是true还是false
        *   5、如果是true则 输入的值不是纯数字 如果为false 则是纯数字
         */

        // 0、获取标签
        /*document(文档)
        . 成员访问  访问文档里的属性或方法
        get是获取
        Element是元素
        By是通过
        Id  id名  括号里不是变量 要加上引号*/
        // 得到值 需要用一个变量保存这个元素
        // 命名规则 凡是获取DOM的元素的变量名 同意o开头，后边第一个字母大写
        var oIpt = document.getElementById("ipt");
        var oBtn = document.getElementById("btn");

        // 1、当点击btn的时候  onclick是点击事件  后边把一个匿名函数赋值给oBtn.onclick
        // 这个时候，当点击btn的时候，函数就会执行
        oBtn.onclick=function () {
            //2 获取input的值  并用变量保存
            var userCon = oIpt.value;
            // 3、判断是否纯数字 isTrue为true 则包含其他字符  为false则纯数字
            var isTrue = isNaN(userCon);
            //4、判断并执行
            //     如果isTrue为true 则弹出请重新输入，否则弹出输入正确
            if (isTrue == true) {
                alert("请重新输入");
            }else{
                alert("输入正确");
            }
        }



        /*// 上边代码优化如下
        var oIpt = document.getElementById("ipt");
        var oBtn = document.getElementById("btn");
        oBtn.onclick=function () {
            if (isNaN(oIpt.value)) {
                alert("请重新输入");
            }else{
                alert("输入正确");
            }
        }*/
    </script>
</body>
</html>Copy to clipboardErrorCopied

浮点数溢出

• 执行数值计算，要防止浮点数溢出，例如 0.1+0.2不等于0.3
• 因为js执行二进制浮点数算术标准而导致的问题。
• 解决方法：浮点数的证书运算是精确的，所以消除表现的问题可以通过指定精度来避免。比如（1+2）/10

类型转换之Number方法

Number()方法 将其他类型转换成number类型 Number方法会返回一个转换后的值

// 1、Number转  数字转数字  还是原来的值

// 2、字符串转数字
console.log(Number(""));//0 空字符串-->0
console.log(Number("   "));//0 都是空格的字符串-->0
console.log(Number("123"));//0 纯数字的字符串-->相对应的数字
console.log(Number("1a23"));//0 非纯数字的字符串-->NaN


//3、布尔值转数字
console.log(Number(true));//1  true-->1
console.log(Number(false));//0  false-->0

// 4、undefined转数字
console.log(Number(undefined));//NaN  undefined-->NaN

// 5、null转数字
console.log(Number(null));// 0   null--->0

// 6、object(数组和对象)转数字
console.log(Number([]));//0 空数组-->0
console.log(Number([1,2,3]));//NaN 一般非空数组-->NaN
console.log(Number([1]));//1 数字只有一个值，并且是数字-->当前数字
console.log(Number(["1"]));//1 数字只有一个值，并且是数字值的字符串-->当前数字
console.log(Number(["a"]));//0 数字只有一个值，并且是非数字-->NaN

console.log(Number({}));//NaN  空对象-->NaN
console.log(Number({name:"lily"}));//NaN  非空对象-->NaNzCopy to clipboardErrorCopied

类型转换之parseInt()

parseInt是一个全局方法,它可以把值转换为整数

• 第1步,先解析位置0处的字符,如果不是有效数字,则直接返回 NaN。
• 第2步,如果位置0处的字符是数字,或者可以转换为有效数字,则继续解析位置1处的字符,如果不是有效数字,则直接返回位置0处的有效数字。
• 第3步,以此类推,按从左到右的顺序,逐个分析每个字符,直到发现非数字字符为止。
• 第4步,parseInt()将把前面分析合法的数字字符全部转换为数值并返回。

注意： 浮点数中的点号对于parseInt来说属于非法字符,因此不会转换小数部分值。 如果是以0开头的数字字符串,则parseInt()不会把它作为八进制数字处理 如果是以0x 开头的数字字符串,则 parseInt()会把它作为十六进制数字处理:先把它转换为十六进 制数值,然后再转换为十进制的数字返回。

parsInt也支持基模式，可以把不同进制的数字字符串转换为整数

console.log(parseInt(123));//123
console.log(parseInt("a123"));//NaN
console.log(parseInt("1a123"));//1
console.log(parseInt("10a23"));//10
console.log(parseInt("100px"));//100
console.log(parseInt(12.3));//12
console.log(parseInt("0xa"));//12

console.log(parseInt(null));//NaN
console.log(parseInt(true));//NaN


/*
    * parseInt 支持基模式，把不同进制的数字字符串转换为整数
* */
var a = "abc123";
console.log(parseInt(a,16));//11256099 把a当成16进制，转化为10进制输出
var b = "111";
console.log(parseInt(b,2));//7

console.log(parseInt(5,3));//NaN  因为3进制没有5这个字符

// 特殊情况如下：
console.log(parseInt(1,1));//NaN
console.log(parseInt(0,1));//NaN
console.log(parseInt(0,0));//0Copy to clipboardErrorCopied

类型转换之parseFloat()

• parseFloat()也是一个全局方法，它可以把值转换成浮点数，即它能够识别第一个出现的小数点，而第二个小数点视为非法。解析过程和parseInt相同。

• parseFloat()的参数必须是十进制的字符串，对十六进制和八进制前的0进行忽略或返回0。

console.log(parseFloat(123));//123
console.log(parseFloat(12.3));//12.3
console.log(parseFloat("12.3.3"));//12.3
console.log(parseFloat("a12.1"));//NaNCopy to clipboardErrorCopied

类型转换之乘号运算符

如果变量乘以1，则变量会被JS自动转换成数值，如果无法转换成合法数值，则返回NaN

/*
    *   如果说变量乘以1  变量就会被自动隐式转换为数字类型，如果转不了就变成NaN
* */
var a = "1";
console.log(a * 1);//number类型的  1

var b = "1a";
console.log(b * 1);//NaN


/*
    *   减法也可以
* */
var c = "1";
console.log(c - 0);//number类型的  1

var d = "1a";
console.log(d - 0);//NaN


/*除1也可以*/
var e = "1";
console.log(e / 1);//number类型的  1

var f = "1a";
console.log(f / 1);//NaN    Copy to clipboardErrorCopied

string类型

JavaScript字符串(String)就是由零个或多个Unicode字符组成的字符序列。零个字符表示空字符串。

字符串直接量

• 子行串必须包含在单引号或双引号中
• 如果字符串包含在双引号中,则字符串内可以包含单引号;反之,也可以在单引号中包含双引号
• 在ECMAScript 3中,字符串必须在一行内表示,换行表示是不允许的，如果要换行显示字符串,可以在字符串中添加换行符(\n)
• 在ECMAScript 5中,字符串允许多行表示.实现方法:在换行结尾处添加反斜杠(\).反斜杠和换行符不作为字符串直接量的内容
• 在字符串中插入特殊字符,需要使用转义字符,如单引号,双引号等
• 字符串中每个字符都有固定的位置.第1个子符的下标位置为0,第2个字符的下标位置为1...···以此类推,最后一个字符的下标位置是字符串长度减1

var str1 = '093284yrc091708)(*&(^&(*&T';
var str2 = "kajhx  askjh &*(";
var str3 = `9287O&*b`;
var str4 = "小王他妈妈说：'他要把翠花嫁给我'";
console.log(str4);

var str5 = "今天天气\n真好"
console.log(str5);

var str6 = "今天天气\
    真好";
console.log(str6);  Copy to clipboardErrorCopied

转义字符

• 转义字符是字符的一种间接表示方式。在特殊语境中,无法直接使用字符自身

  var str = "请看\"这个是一个双引号";
  console.log(str);//请看"这个是一个双引号Copy to clipboardErrorCopied

• 一些字符加上反斜杠后会表示特殊字符,而不是原字符本身,这些特殊转义字符被称为转义序列

  \0 Null字符(\u0000)

  \b 退格符(\u0008)

  \t 水平制表符(lu0009)

  \n 换行符(lu000A)

  \v 垂直制表符(\u000B)

  \f 换页符(\u000C)

  \r 回车符(\u000D)

• 如果在一个正常字符前添加反斜杠,JavaScript会忽略该反斜杠

  var str = "小明妈妈说:\"今天天气真好\"";
  console.log(str);//小明妈妈说:"今天天气真好"
  var str2 = "小明妈妈说:\"\今\天\天\气\真\好\"";
  console.log(str2);//小明妈妈说:"今天天气真好"
  var str3 = "看我斜杠：\\"
  console.log(str3);//看我斜杠：\Copy to clipboardErrorCopied

字符串操作

• 借助String类型的原型方法,可以灵活操作字符串（后面各章节中详细介绍）

• 在JavaScript中,可以使用加号(+)运算符连接两个字符串

• 使用字符串的length属性获取字符串的字符个数(长度）

• 在ES5中，字符串可以作为只读数组使用，可以通过中括号运算符添加下标访问某一个值。下标从0开始，最大位置的下标是length-1

  var str = "老师说";
  var say = "你好啊";
  console.log(str+say);//老师说你好啊
  console.log(str + 1);//老师说1
  console.log(str + 1);//老师说1
  console.log(1 + 1);//2
  console.log("1" + 1);//11
  console.log(1 + "1");//11
  var str1 = "今天是个好天气123 b5";
  console.log(str1.length);//13
  console.log(str1[0]);//今
  //获取最后一个字符
  console.log(str1[str1.length-1]);//5Copy to clipboardErrorCopied

字符串小练习

用户提交账号密码的时候，判断是否正确 已知账号是lipeihua 密码是1234561

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串练习</title>
</head>
<body>
<!--
    用户提交账号密码的时候，判断是否正确 已知账号是lipeihua  密码是1234561
-->
请输入账号名：
<input type="text" id="user" autofocus>
请输入密码：
<input type="password" id="pass">
<button id="btn">登录</button>
<script>
    /*
    * 1.获取元素
    * 2.点击事件
    * 3.判断账号是否正确(点击以后可以直接获取账号密码)
    * 4.判断密码是否正确
    * 5.如果不正确 清空重新输入  正确则返回登陆成功
    * */
    var oUser = document.getElementById("user");
    var oPass = document.getElementById("pass");
    var oBtn = document.getElementById("btn");

    oBtn.onclick = function () {
        //用userUser 保存点击的时候，用户输入的用户名
        var userUser = oUser.value;
        //用userPass 保存点击的时候，用户输入的密码
        var userPass = oPass.value;

        // 判断
        if(userUser == "lipeihua"){
            if (userPass == 1234561) {
                alert("送你一个小发发");
            }else{
                alert("小伙子 你的密码不对哦")
                oPass.value = "";
                oPass.focus();
            }
        }else{
            alert("用户名错误");
            // userUser = "";//千万不要只改变变量 因为这个只是对变量重新赋值，没有操作value值
            oUser.value = "";

            // 让表单获取焦点
            oUser.focus();
        }

    }

</script>
</body>
</html>Copy to clipboardErrorCopied

String方法

String方法是可以将其他类型转换成字符串类型

//1.null类型的转换
console.log(String(null));//字符串的 'null'

//2.undefined转换
console.log(String(undefined));//字符串的'undefined'

//3.number类型的转换
//转换规则：普通数字直接变成字符串  其他进制先转换成10进制然后在转换成相应的字符串 无穷大无穷小NaN都直接变成字符串
console.log(String(123));//'123'
console.log(String(-123));//'-123'
console.log(String(010));//'8'
console.log(String(0xff));//'255'
console.log(String(4E-5));//'0.00004'
console.log(String(Infinity));//'Infinity'
console.log(String(-Infinity));//'-Infinity'
console.log(String(12.3));//'12.3'
console.log(String(NaN));//'NaN'

//4.布尔值的转换
console.log(String(true));//'true'
console.log(String(false));//'false'

//5.对象的转换
console.log(String([]));//空字符串 ''
console.log(String([1]));//'1'
console.log(String([1,2,3]));//'1,2,3'
console.log(String({}));//[object object]
console.log(String({name:"lily"}));//[object object]Copy to clipboardErrorCopied

toString()方法

• 我们的代码中有+（加号）运算符等情况下，它在这种情况下（字符串 + 其它什么东西），会调用toString()方法，将其它类型的东西转化为字符串，再和原始字符串拼接成一个字符串

• 除了null和undefined之外，其他的类型(数值、布尔、字符串、对象)都有toString()方法，它返回相应值的字符串表现(并不修改原变量)。

• 每个对象都有一个toString()方法。

• 当该对象被表示为一个文本值时，或者一个对象以预期的字符串方式引用时自动调用。

    (1).toString()      // "1"
  
    [1,2].toString()    // "1, 2"
  
    ({}).toString()     // [object Object]
  
    true.toString()     // "true"
  
    null.toString()     // Uncaught TypeError: Cannot read property 'toString' of null
  
    undefined.toString()  // Uncaught TypeError: Cannot read property 'toString' of nullCopy to clipboardErrorCopied

Boolean类型

布尔类型仅包含两个固定的值：true和false。其中true代表真，false代表假。

在一些判断等操作中，需要使用布尔值

类型转化之Boolean方法

//1、null
console.log(Boolean(null));//false

//2.undefined
console.log(Boolean(undefined));//false

//3.number
//数字转布尔值   非0为true  0为false NaN为false
console.log(Boolean(123));//true
console.log(Boolean(-123));//true
console.log(Boolean(0));//false
console.log(Boolean(1.23));//true
console.log(Boolean(NaN));//false
console.log(Boolean(Infinity));//true
console.log(Boolean(010));//true
console.log(Boolean(0xa));//true


//4.string

//空为false  非空为true
console.log(Boolean("123"));//true
console.log(Boolean(""));//false
console.log(Boolean("    "));//true


//5.object
//对象类型都转换成true
console.log(Boolean([]));//true
console.log(Boolean([1,2,3]));//true
console.log(Boolean([0]));//true
console.log(Boolean({}));//true
console.log(Boolean({name:"lily"}));//trueCopy to clipboardErrorCopied

类型转化之双重逻辑非

一个逻辑非运算符（!）可以把值转换为布尔值并取反，两个就是转换成正确的布尔值

console.log(!!0);   Copy to clipboardErrorCopied

Boolea练习

点击按钮的时候，当input为空，则把input边框变红，否则是黑的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Boolean类型</title>
    <style>
        #ipt{
            border:1px solid #000;
        }
    </style>
</head>
<body>
<input type="text" id="ipt">
<button id="btn">按钮</button>
<script>
    /*
    * 点击按钮的时候，当input为空，则把input边框变红，否则是黑的
    * */
    var oBtn = document.getElementById("btn");
    var oIpt = document.getElementById("ipt");
    oBtn.onclick = function () {
        var oIptValue = oIpt.value;
        //第一种判断 oIptValue == ""
        //第二种判断 oIptValue.length == 0
        //第三种判断 直接使用 if可以隐式转换的
        if(oIptValue){//oIptValue为非空
            oIpt.style.borderColor = "#000";
        }else{//oIptValue为空
            // 改变元素的行内样式
            oIpt.style.borderColor = "red";
        }
    }
</script>
</body>
</html>