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

随机推荐

超干货！为了让你彻底弄懂MySQL事务日志，我通宵肝出了这份图解！
还记得刚上研究生的时候,导师常挂在嘴边的一句话,"科研的基础不过就是数据而已."如今看来,无论是人文社科,还是自然科学,或许都可在一定程度上看作是数据的科学. 倘若剥开研究领域的外 ...
Java并发编程 (五) 线程安全性
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.安全发布对象-发布与逸出 1.发布与逸出定义发布对象 : 使一个对象能够被当前范围之外的代码所使用 ...
Java实现指定年份月份的日历表
输入指定的年份与月份,看这个月的日历表 package Xueying_Liu; import java.util.Scanner; public class rilibiao { public st ...
Android中如何使用单选对话框
给Button设置OnClick事件设置 int id=0; final String [] s={"单选A","单选B","单选C",&q ...
java实现第七届蓝桥杯愤怒小鸟
愤怒小鸟题目描述 X星球愤怒的小鸟喜欢撞火车! 一根平直的铁轨上两火车间相距 1000 米两火车 (不妨称A和B) 以时速 10米/秒相对行驶. 愤怒的小鸟从A车出发,时速50米/秒,撞向B车, ...
c#发布补丁
日常开发维护项目中,可能会遇到发布后出现bug,或者忘记改配置文件等等问题,这个时候,可能就需要重新进行下发布,有的开发小伙伴可能会把编译后的代码文件整个替换.这样做虽然也可以实现发布,但是有几个弊端 ...
Python学习之计算机基础
计算机基础: (1)计算机俗称电脑,是现代用于高速计算的电子计算器,可以进行数值计算也可以进行逻辑计算,还有存储记忆功能.是能够按照程序运行,自动,高速处理海量数据的现代化智能电子设备. (2)物理 ...
LeetCode 75，90%的人想不出最佳解的简单题
本文始发于个人公众号:TechFlow,原创不易,求个关注今天是LeetCode专题的44篇文章,我们一起来看下LeetCode的75题,颜色排序 Sort Colors. 这题的官方难度是Medi ...
HttpClient 常用方法封装
简介在平时写代码中,经常需要对接口进行访问,对于 http 协议 rest 风格的接口请求,大多使用 HttpClient 工具进行编写,想着方便就寻思着把一些常用的方法进行封装,便于平时快速的使用 ...
[TopCoder]Seatfriends
题目点这里看题目. 分析可以想到用 DP 解决. 由于把空位放到状态里面太麻烦了,因此我们单独将 " 组 " 提出来进行 DP . \(f(i,j)\):前\( ...

js语法基础入门（3）