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

随机推荐

Spring （四）Spring的AOP动态代理、切面编程
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.AOP切面编程 1.什么是AOP AOP是面向切面编程.全称:Aspect Oriented Pro ...
Java实现蓝桥杯算法提高套正方形（暴力）
试题算法提高套正方形问题描述给定正方形边长width,如图按规律输出层层嵌套的正方形图形. 注意,为让选手方便观看,下图和样例输出均使用""代替空格,请选手输出的时候使用空 ...
第十届蓝桥杯JavaB组省赛真题
试题 A: 组队本题总分:5 分 [问题描述] 作为篮球队教练,你需要从以下名单中选出 1 号位至 5 号位各一名球员, 组成球队的首发阵容. 每位球员担任 1 号位至 5 号位时的评分如下表所示. ...
Java实现 LeetCode 606 根据二叉树创建字符串（遍历树）
606. 根据二叉树创建字符串你需要采用前序遍历的方式,将一个二叉树转换成一个由括号和整数组成的字符串. 空节点则用一对空括号 "()" 表示.而且你需要省略所有不影响字符串与原 ...
Java实现蓝桥杯VIP 算法训练字符串逆序
问题描述给定一个字符串,将这个串的所有字母逆序后输出. 输入格式输入包含一个字符串,长度不超过100,字符串中不含空格. 输出格式输出包含一个字符串,为上面字符串的逆序. 样例输入 tsinse ...
Java实现 LeetCode 306 累加数
306. 累加数累加数是一个字符串,组成它的数字可以形成累加序列. 一个有效的累加序列必须至少包含 3 个数.除了最开始的两个数以外,字符串中的其他数都等于它之前两个数相加的和. 给定一个只包含数字 ...
Java实现第八届蓝桥杯最大公共子串
最大公共子串最大公共子串长度问题就是: 求两个串的所有子串中能够匹配上的最大长度是多少. 比如:"abcdkkk" 和 "baabcdadabc", 可以找到 ...
转载：windows下安装mac虚拟机（Vmvare+mac）
体验Mac的高效与思想,每个技术人都应该去了解和体验,本文转载自网络,使用Vmvare,虚拟Mac系统 https://blog.csdn.net/qq_31867709/article/detail ...
在scrapy的spiders文件中设置请求时间间隔
设置某个spider单独使用的设置项等等. 在spiders文件中写如下: custom_settings = { 'DOWNLOAD_DELAY': 0.2, 'CONCURRENT_REQUEST ...
Ubuntu16.04安装完成后首先更换源地址，加速下载
也可以,sudo pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple临时改变源地址下载先备份源文件sudo cp sources ...

js语法基础入门（3）