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语法基础入门三(函数, 闭包) 函数: 函数是用来完成特定任务的独立的代码块.你给一个函数起一个合适的名字,用来标识函数做什么,并且当函数需要执行的时候,这个名字会被用于“调用”函数格式: ...

随机推荐

Rocket - diplomacy - NodeHandle相关类
https://mp.weixin.qq.com/s/GWL41P1G1BXm2sTeLmckdA 介绍NodeHandle相关的类. 1. NoHandle 顶层类(tra ...
【Storm】编程模型
元祖(tuple) 元组(Tuple),是消息传递的基本单元,是一个命名的值列表,元组中的字段可以是任何类型的对象. Storm使用元组作为其数据模型,元组支持所有的基本类型.字符串和字节数组作为字 ...
Java实现蓝桥杯VIP 算法提高乘法运算
算法提高乘法运算时间限制:1.0s 内存限制:512.0MB 问题描述编制一个乘法运算的程序. 从键盘读入2个100以内的正整数,进行乘法运算并以竖式输出. 输入格式输入只有一行,是两个用空格 ...
Android studio环境配置（运行报错）
报错的种类有很多,下面的方法能解决大多数: 所有路径不能用中文,不能有空格,逗号句号也不能用中文,项目文件路径也不行首先要配置Java环境,这个就不多说了, 这里有以下JAVA_HOME的配置,下图 ...
Java实现字符串的全排列
1 问题描述输入一个字符串,打印出该字符串的所有排列.例如,输入字符串"abc",则输出有字符'a','b','c'所能排列出来的所有字符串"abc",&qu ...
【大厂面试04期】讲讲一条MySQL更新语句是怎么执行的？
流程图这是在网上找到的一张流程图,写的比较好,大家可以先看图,然后看详细阅读下面的各个步骤. 执行流程: 1.连接验证及解析客户端与MySQL Server建立连接,发送语句给MySQL Serv ...
@Transactional 事务的底层原理
最近同事发现一个业务状态部分更新的bug,这个bug会导致两张表的数据一致性问题.花了些时间去查问题的原因,现在总结下里面遇到的知识点原理. 问题一:事务没生效我们先看一段实例代码,来说明下问题: ...
温故知新-多线程-Cache Line存在验证
文章目录简述缓存行Cache Line 验证CacehLine存在? 参考你的鼓励也是我创作的动力 Posted by 微博@Yangsc_o 原创文章,版权声明:自由转载-非商用-非衍生-保持 ...
Uber基于Apache Hudi构建PB级数据湖实践
1. 引言从确保准确预计到达时间到预测最佳交通路线,在Uber平台上提供安全.无缝的运输和交付体验需要可靠.高性能的大规模数据存储和分析.2016年,Uber开发了增量处理框架Apache Hudi ...
flutter pdf 文件浏览
说明 flutter_full_pdf_viewer 可以实现从网络上下载 pdf 文件并且显示出来. 包地址:flutter_full_pdf_viewer: ^1.0.6 使用方法 1.在 pub ...

js语法基础入门（3）