3.数据类型

3.1.数据类型学习重点

前面我们通俗的讲了，数据类型其实就是对数据进行了分类，那么，在js中到底把数据分成了几类？这些类的名称叫什么？每个分类下面有那些值？这些问题是需要记清楚的，例如：值 8，我们把它分到数字类里面，数字类有个特点就是它下面的值都是数字，如果像上面这样能够记住类名，能够分辨出常见的某个值属于哪个类型，那么数据类型这块知识就算掌握了

3.2.Number-数字类型

var number1 = 15;

var number2 = 15.0

在其他语言中，有整型和浮点型的说法，通俗的说就是整数和带小数的数字分成了两种不同的类型，而在js中没有严格区分开，那就意味着，15 === 15.0

console.log(15 === 15.0) //true

这里需要注意的是，当你使用浮点数（小数）进行运算的时候，它并不是很精确，使用的时候要小心谨慎，例如：

console.log(1 - 0.7)  //0.30000000000000004

console.log(1 - 0.9) //0.09999999999999998

3.2.String-字符串类型

使用""或者‘‘括起来的数据就是字符串类型的数据。例如：

var userName = "张三";

var sex = "女";

字符串类型特点：

1.单引号中不可直接嵌套单引号，双引号中不可直接嵌套双引号，但是它们可以相互嵌套使用，例如：

var html_template = '<div style="color:red">螺钉课堂，nodeing.com</div>'

2.字符串有长度属性

console.log(html_template.length)

3.字符串包含0个或者多个字符，如果引号内什么都不写表示空字符串,例如：

var str = ''

console.log(str.length)

3.3.Boolean-布尔类型

布尔值指代真和假、开或关、是或否，这个类型只有两个值，关键字true和false。JavaScript中比较语句的结果通常都是布尔值。例如：

var a＝5;

a==4;

开关应用举例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            body{

                text-align: center;

            }

            #box{

                width: 100px;

                height: 100px;

                background-color: red;

                margin: 30px auto;

                display: none;

            }

        </style>

    </head>

    <body>

        <button id="btn">开关</button>

        <div id="box"></div>

        <script type="text/javascript">

            var oBtn = document.getElementById('btn')

            var oBox = document.getElementById('box')

            var flag = true

            oBtn.onclick = function(){

                if(flag === false){

                    oBox.style.display = "none"

                    flag = true

                }else{

                    oBox.style.display = "block"

                    flag = false

                }

            }

        </script>

    </body>

</html>

3.4.null

null是一个表明 null 值的特殊关键字。 JavaScript 是大小写敏感的，因此 null 与 Null、NULL或其他变量完全不同。

null通常表示“没有对象”，即该处不应该有值，

3.5.undefined

undefined表示变量未定义时的属性，可以理解为未定义，即"缺少值"，就是此处应该有一个值，但是还没有定义，例如：

var a ;

console.log(a)

3.6.类型转换

3.6.1.为什么要进行类型转换？

将一种类型转换成另一种数据类型，就是类型转换，例如：将字符串的“3” 转换成数字类型的 3 。类型既然已经划分，那么为什么还需要进行类型之间的转换呢？数据之间的运算，只有同类型的数据之间进行运算才有意义，例如“a”＋13 属于字符串和数字类型相加，如果不进行转换的话，那结果到底应该等于什么呢？因此，如果要进行数据之间的运算，不同类型的数据需要转换成同一类型进行运算。数据类型转换分为两种，一种是强制类型转换，一种是自动类型转换

3.6.2.强制类型转换

强制类型转换就是使用固定的方法强制把某种类型转换成另一种类型。

1.强制转换成数字类型

var a="13";

a = parseInt(a); //使用函数parseInt 将字符串“13”，转换成数字类型13

console.log(typeof a)  //Number

var a = "13.123";

a = parseInt(a);

console.log(a); //输出结果 13

var a＝“13absdf123”;

a=parseInt(a);

console.log(a);  //输出结果 13；

var  a＝“a13” ;

a=parseInt(a);

console.log(a);  //输出 NaN 表示不是一个数字

总结：parseInt函数将变量转换成一个整数，如果变量值为字符串数字，直接转换成整数，如果变量值既有数字又有字符串，那么转换的时候会把前面的字符串数字转换成整数，并且舍去后面的字符串，例如：13adf 会把adf去掉，直接返回13.如果字符串数字在中间包含，例如：a23a，那么最终转换成NaN.NaN是一个数字类型的值，表示转换的结果不是一个数字

var a = "13.123";

a = parseFloat(a);

console.log(a); //输出结果 13.123

总结：parseFloat和parseInt的用法一样，不同的是parseFloat是把变量转换为小数

var a = "13.123";

a = Number(a);

console.log(a); //输出结果 13.123

var a = "13.123a";

a = parseFloat(a);

console.log(a); //输出结果 NaN

总结：Number函数也是将变量转换成数字，与上面两个函数不同的是，Number只能转纯字符数字，如果字符串中只要是带有其他字符的，都会被转换成NaN.

2.强制转换成字符串类型

var a=12;

a= String(a);

console.log(typeof a);  //输出string

总结：转换成字符串比较简单，只需要用String(变量名)就可以了

3.强制转换成布尔值类型

因为布尔值非真即假，大多数转换结果都是真，只有少部分特殊的数据转换成假，所以布尔值转换，只需要记住哪些转换成假值就行了

var a=12;

var b=0

a= Boolean(a);

b= Boolean(b);

console.log( a);  //true

console.log(b);   //false

总结：转换成假值（flase）的情况不多，有数字的0、－0、‘’空字符串、null、undefined、NaN,其他的数据都会被转换成true

3.6.3.自动类型转换

自动类型转换就是JavaScript程序在运行的过程中，根据上下文的环境，自动将类型转换成统一类型进行运算。例如：

<script type="text/javascript">

    var value1 = "2";

    var value2 = "1" 

    //减法的语意： 将会按照数字进行运算

    var value3 = value1 - value2;

    console.log(value3); // 输出1

    //加法： 将会按照数字进行运算

    var value4 = true;

    var value5 = value1 - value4;

    console.debug(value5); //输出1

</script>

总结：以上代码中，当value1-value2的时候是做减法运算，所以会把字符串value1和字符串value2都转换成数字进行运算，同理，value1-value4也是一样，都转换成了数字进行运算，并且是自动转换的，转换的依据就是正在做减法运算，减法运算两边必须是数字才能进行，自动类型转换的使用场景还很多，比如后面要学的条件判断语句if（）括号里面的内容就是进行自动转换了的

3.7.作业

1、将变量命名规范手写5遍-10遍

2、本章学了几种数据类型？分别有哪些特点？请用自己的话归纳总结

3、类型转换后布尔值为false的情况有哪些？

4、数字类型转换的几种方法，各自有什么特点？

5、将以下各数据分别转成数值型、布尔型、字符型

var a=“abc”

var a = “123”

var a = true;

var a = undefined;

var a = null

6、将以下数据转换成数值型（使用两种方法进行转换）

var a = “10px”

var a = “.123”;

var a = “a45px”;

螺钉课堂视频课程地址：http://edu.nodeing.com

js语法基础入门（3）的更多相关文章

js语法基础入门（1）
1.基础入门 1.1.hello world 1.1.1.JavaScript是什么? JavaScript是一门跨平台.面向对象的轻量级脚本语言,在web开发中被广泛应用 1.1.2.JavaScr ...
js语法基础入门（7）
7.数组 7.1.什么是数组以及相关概念? 什么是数组?是一组数据有序排列的集合.将一组数据按一定顺序组织为一个组合,并对这个组合命名,这样便构成了数组. 什么是数组元素?组成数组的每一个数据称为数组 ...
js语法基础入门（6）
6.函数 6.1.函数是什么? 函数就是具有名称和一定功能点代码块,这段代码块被封装起来,由一组语句组成,它们是JavaScript的基础模块单元,用于代码复用.信息隐藏和组合调用.一般来说,所谓编程 ...
js语法基础入门（1.2）
1.4.查找元素的方法 1.4.1.查找元素的方法 JavaScript可以去操作html元素,要实现对html元素的操作,首选应该找到这个元素,有点类似于css中的选择器 html代码: <d ...
js语法基础入门（5.2）
5.2.循环结构当一段代码被重复调用多次的时候,可以用循环结构来实现,就像第一个实例中出现的场景一样,需要重复询问对方是否有空,这样就可以使用循环结构来搞定 5.2.1.for循环语句 //语法结构 ...
js语法基础入门（5.1）
5.流程控制 5.1.选择结构程序流程图图例: 椭圆: 开始/结束矩形: 操作菱形: 判断连接线: 走向可以根据程序流程图,理清楚程序执行的流程 5.2.1.if语句 //if语句语法结构 ...
js语法基础入门（4）
4.运算符 4.1.什么是运算符? 运算符就是用来表示具体运算规则的符号,例如数学计算中的加减乘除就是具体的运算规则,我们分别用"+ - * /"等符号来表示 4.2.运算符的分类 ...
js语法基础入门（2）
2.变量 2.1.变量的声明声明变量的时候没有赋值,默认输出undefined //通过var 声明一个变量 var user: //默认输出undefined 可以同时声明多个变量 var use ...
Swift语法基础入门三(函数, 闭包)
Swift语法基础入门三(函数, 闭包) 函数: 函数是用来完成特定任务的独立的代码块.你给一个函数起一个合适的名字,用来标识函数做什么,并且当函数需要执行的时候,这个名字会被用于“调用”函数格式: ...

随机推荐

分布式事务专题笔记（二）分布式事务解决方案之 2PC（两阶段提交）
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 前面已经了解了分布式事务的基础理论,以理论为基础,针对不同的分布式场景业界常见的解决方案有2PC.TCC ...
高性能可扩展mysql 笔记（四）项目分区表演示
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 登录日志的分区如何为Customer_login_log表分区? 从以下两个业务场景入手: 用户每次登 ...
ASP.NET中IHttpHandler与IHttpModule的区别（带样例说明）
IHttpModule相对来说,是一个网页的添加 IHttpHandler相对来说,却是网页的替换先建一个HandlerDemo的类 using System; using System.Colle ...
Java实现蓝桥杯算法提高队列操作
算法提高队列操作时间限制:1.0s 内存限制:256.0MB 提交此题问题描述队列操作题.根据输入的操作命令,操作队列(1)入队.(2)出队并输出.(3)计算队中元素个数并输出. 输入格式 ...
Java实现 LeetCode 222 完全二叉树的节点个数
222. 完全二叉树的节点个数给出一个完全二叉树,求出该树的节点个数. 说明: 完全二叉树的定义如下:在完全二叉树中,除了最底层节点可能没填满外,其余每层节点数都达到最大值,并且最下面一层的节点都集 ...
JavaScript使用for循环和splice删除数组指定元素的注意点
在JavaScript里可以结合for循环和splice来删除数组指定的元素.但是要注意删除元素后,数组索引会发生改变示例 var arr = ["a","b" ...
Python3 源码阅读-深入了解Python GIL
今日得到: 三人行,必有我师焉,择其善者而从之,其不善者而改之. 今日看源码才理解到现在已经是2020年了,而在2010年的时候,大佬David Beazley就做了讲座讲解Python GIL的设计 ...
Java复习目录
还是寒假用了十多天的时间在b站把基础部分学习完了,现在刚开学开始上Java课,以博客的方式复习前面学习的内容. 总结: ①吸取前面MySQL学习的教训,每天固定学习的内容,学习效果很有提升,但临近开学 ...
（七）logback 异步输出日志
 <appender name="ASYNC-INFO" class="ch.qos.logback.classic.Asyn ...
（十一）Maven运行TestNG的testcase 两种方式：testng.xml和testngCase.java
原文:https://blog.csdn.net/wwhrestarting/article/details/46596869?utm_source=copy 1.通过maven-surefire-p ...

js语法基础入门（3）