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

随机推荐

Java实现 LeetCode 738 单调递增的数字（暴力）
738. 单调递增的数字给定一个非负整数 N,找出小于或等于 N 的最大的整数,同时这个整数需要满足其各个位数上的数字是单调递增. (当且仅当每个相邻位数上的数字 x 和 y 满足 x <= ...
Java实现 LeetCode 649 Dota2 参议院（暴力大法）
649. Dota2 参议院 Dota2 的世界里有两个阵营:Radiant(天辉)和 Dire(夜魇) Dota2 参议院由来自两派的参议员组成.现在参议院希望对一个 Dota2 游戏里的改变作出决 ...
Java实现 LeetCode 479 最大回文数乘积
479. 最大回文数乘积你需要找到由两个 n 位数的乘积组成的最大回文数. 由于结果会很大,你只需返回最大回文数 mod 1337得到的结果. 示例: 输入: 2 输出: 987 解释: 99 x ...
Java实现 LeetCode 211 添加与搜索单词 - 数据结构设计
211. 添加与搜索单词 - 数据结构设计设计一个支持以下两种操作的数据结构: void addWord(word) bool search(word) search(word) 可以搜索文字或正则 ...
Java实现洛谷 P1085 不高兴的津津
import java.io.*; import java.util.*; class Main{ public static void main(String args[]) { Scanner s ...
tensorflow2.0学习笔记第一章第四节
1.4神经网络实现鸢尾花分类 import tensorflow as tf from sklearn import datasets import pandas as pd import numpy ...
Java虚拟机性能调优（一）
Java虚拟机监控与调优,借助Java自带分析工具. jps:JVM Process Status Tool,显示指定系统内所有的HotSpot虚拟机进程 jstat:JVM Statistics M ...
MySQL查询优化利刃-EXPLAIN
有一个 ? 遇到这样一个疑问:当where中In一个索引字段,那么在查询中还会使用到索引吗? SELECT * FROM table_name WHERE column_index in (expr) ...
无监督LDA、PCA、k-means三种方法之间的的联系及推导
\(LDA\)是一种比较常见的有监督分类方法,常用于降维和分类任务中:而\(PCA\)是一种无监督降维技术:\(k\)-means则是一种在聚类任务中应用非常广泛的数据预处理方法. 本文的 ...
render props的运用
2020-04-03 render props的运用术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术通常的这个值为函数的prop ...

js语法基础入门（3）