2019-06-24JavaScript的数据类型

作者: 啊_6424 | 来源:发表于2019-06-25 10:23 被阅读0次

前头的话：

算是重学吧，以前只图快，加上不爱写博客，忘得差不多了！这一系列文章是跟着w3school文档撸的，只是为了让自己手抄一遍，加深记忆，非完全原创。

JavaScript语言与Java语言的关系：类似于雷锋与雷峰塔的关系。

什么是语言：

计算机是一个由人来控制的机器，人要他干啥它就得干啥。那么人如何告诉计算机该去干嘛呢？——语言
语言的发展：
纸带机：机器语言——汇编语言：符号语言——现代语言：高级语言

JavaScript简介

JavaScript诞生于1995年，用于网页的前端验证，所谓前端验证就是指检查用户输入的内容是否符合一定的规则（例如用户名或者密码的长度，邮箱的格式），但时至今日，网页上所有的动态效果全由JavaScript完成

image.png

有空看看书——《浪潮之巅》
ECMAScript只是定义了标准，由各大浏览器厂商去实现，每个厂商分别用不同的JS引擎去实现。以谷歌用的v8速度最快。

JavaScript的组成：BOM，DOM，ECMAScript。这三部分也是我们要学习的内容

JS的特点:

解释性语言：写完了直接运行，不用去编译
类似于 C 或Java的语法结构
动态语言：变量可以保存仁和类型的值
基于原型的面向对象：（学习的主要关注点）

JS编写位置

所有的语言都是在向计算机发命令，要么，我们JS的命令是写在哪儿的呢？
我们的JS代码写在网页中，用一个script标签包裹起来。script标签可以写在head标签中，可以写在body标签里面，也可以写在整个文档的最后面，也可以写在一些标签的一些属性（如button标签的onclick，a标签的href属性）里面（不推荐，属于行为和结构的耦合，不方便维护），也可以单独的建立一个script文件，在需要使用的html文件里通过<script type="text/javascript" src="url"></script>标签引入、也可以利用浏览器的缓存机制（推荐使用方式）。
script标签只要是用于引入外部script文件了，里面写的JavaScript代码浏览器不会解析。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap.css">
    <script></script>
</head>
<body>
    <div class="container">
        <script type="text/javascript"></script>
    </div>
    <a href="javascript:alert('点击事件')">这是一个超链接</a>
    <!--这种形式经常用到，点超链接不会刷新 / 跳转页面，我们通过JS代码再赋给它一些别的功能！-->
    <a href="javascript:;">这是一个超链接</a>
    <button onclick="alert('点击事件！')">这是一个Button</button>
</body>
</html>
<script>
    /**
     * 推荐这种写法
     * type属性可要，可不要
     */

//   这就是一句JS代码，让浏览器弹出弹框，弹框里的内容为"Hello World!"
     alert("Hello World!");
//     向  body标签  中输出一个内容！
    document.write("这是一串字符串！");
//    向控制台输出一个内容
    console.log(111,"8888");
    console.log("控制台里面输出一个内容！");
</script>

注意，JS代码是从上到下依次解析执行的。
我们上面的例子中的语句又可以叫做输出语句。

JS输出

JavaScript 不提供任何内建的打印或显示函数。

window.alert() 写入警告框
document.write() 写入 HTML 输出
在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
innerHTML 写入 HTML 元素
console.log() 写入浏览器控制台

基本语法

JavaScript 语句构成：值、运算符、表达式、关键词和注释。
JS注释：

//    JS语法
//    当行注释，快捷键：ctrl + /

    /**
     * 多行注释
     */

JS严格区分大小写
JS中每一条语句以;结尾。如果不写分号，浏览器会自动添加，这样会消耗一些系统资源，而有的时候，浏览器会加错分号。
JS中会忽略多个空格和换行，我们可以利用这一特点对我们的代码进行格式化

JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构（如何声明变量，如何赋值，如何计算值）
如何声明变量：var （关键词）
如何赋值：=（赋值运算符）
如何计算值：+ - * /（算数运算符）

字面量和变量

字面量，都是一些不可改变的值，比如：1,2,3，“hello”。
字面量都是可以直接去使用的，但我们一般都不会直接使用！因为有可能很多地方都会使用到它，而他有可能非常不好记忆与理解！
变量：可以用来保存我们的字面量。他的值可以改变。程序中使用他更方便！

JS声明一个变量：var关键字

var a;

这个时候，a变量的值为undifined，我们不能使用，除非我们给他赋值。

a = 123;

我们也可以这样写，通过变量对我们的字面量进行描述

var age = 80;

标识符

在JS中，所有的可以由我们自主命名的都可以称作标识符。
例如：变量名，函数名，属性名。

我们命名标识符是需要遵守的规则：

1.标识符中可以包含字母、数字、_ 、$
2.标识符不能以数字开头（为了轻松区分标识符和数值）
3.指标识符不能是ES中的关键字，或者保留字

一些常见的关键字和保留字
4.标识符一般采用驼峰式命名法（首字母小写，每个单词的开头字母大写，其他字母小写。如：myAge）

ES底层保存标识符时实际上是采用的Unicode编码，所以理论上讲，所有的UTF-8中含有的内容都可以作为标准！

    var 我的年龄 = 12;
    console.log(我的年龄);

这么写，会正常执行，但强烈不建议这么写！

JS中进制的表示

二进制： 0b开头
八进制：0开头
十六进制：0x开头

JS中的数据类型

数据类型指的就是字面量的数据类型！
JS中的数据类型有6种：String（字符串），Boolean（布尔值），Number（数值），Object（对象），Null（空值），Undefined（未定义），Object（对象）。
String，Boolean，Number，Null，Undefined属于基本数据类型。Object属于引用数据类型。

ECMAScript 的 Boolean 值、数字和字符串的原始值是伪对象，具有属性和方法。
ECMAScript 定义所有对象都有 toString() 方法，无论它是伪对象，还是真对象。

String

属性：length
方法：toString()
将字符串“我是一个字符串！”赋值给str变量。

    var str = "我是一个字符串！";
    var words = "我说：'今天天气真好啊！'";
    var words = '我说："今天天气真好啊！"';

注意：
字符串需要通过引号（单引号或者双引号）引起来。
不要混用单引号与双引号
引号不能嵌套：单引号里面不能嵌套单引号，双引号里面不能嵌套双引号！
但是双引号里面嵌套单引号。

在字符串中，我们可以使用\作为转义字符
即是，当你就想要在双引号里面嵌套双引号的时候，可以这么做：

    var str = "我说：\"今天天气真好啊！\""

常用的转义字符：

\":   "
\':   '
\n:   换行
\t:   制表符
\\:   \

Number

属性：
方法：toString()
在JS中，所有的数值都是Number类型，包括整数和浮点数。

    var str = "123";
    var num1 = 123;
    var num2 = 1.1
    console.log(typeof (str));  //string
    console.log(typeof (num1));  //number
    console.log(typeof num2);  //number
    console.log(str == num1);   // true
    console.log(str === num1);  //false

typeof 运算符来检查一个变量的类型
语法：typeof 变量
问题：
通过输出可以看到，str与num1是不同的数据类型，但使用==的时候却返回true
===则返回了false
回答：
==涉及到了类型转换，后面会详细介绍

Number中的某些特殊数字

Number.MAX_VALUE
Number.MIN_VALUE

    console.log(Number.MAX_VALUE);// 1.7976931348623157e+308
    console.log(Number.MIN_VALUE);  //5e-324

如果使用Number表示的数字超过了JS的最大值，会返回Infinity

Infinity：正无穷，是一个字面量
-Infinity：负无穷
使用 typeof 返回 number
NaN
NaN 也是一个数字，表示Not a Number，也是个字面量
NaN不等于他本身

    var a = "abc" * 10;
    console.log("a",a);  //a NaN
    console.log(typeof a);  //number

说到了数字，就离不开运算，来看看JS中Number的运算吧！

整数之间的运算基本不会出错
浮点数运算可能得到一个不精确的结果，所以不要用JS来进行对精确度要求比较高的运算
所有的语言都有这个问题，原因就是二进制没办法完全正确的表示一些浮点数（有些语言自己会有一套解决方案，但JS没有）。

Boolean

布尔值只有两个值，主要用来做逻辑判断
true：真
false：假

    var bool = true;
    var str = "true";
    console.log(typeof bool);  //boolean
    console.log(bool == str);  //false
    console.log(bool === str);  //false

需要注意的是，这里使用==返回了false

Null

Null类型的值就只有一个——null
null常用于表示一个为空的对象

    console.log(typeof  null);  //object

Undefined

Undefined的值只有一个——undefined
表示未定义的。
undefined 实际上是从值 null 派生来 undefined == null 返回true

    var a;
    console.log(a);  //undefined
    console.log(typeof a); //undefined

Object

类型转换：(暂不讨论Object)

指将一个数据类型强制转换为其他数据类型。
类型转换主要指将其他的数据类型转换为 String ， Number， Boolean 类型

其他数据类型转换为 String 类型：

调用 toString()方法
toString()方法不会影响原数据，返回一个新数据
Number 类型的 toString() 方法两种模式，即默认模式和基模式。
null和undefined没有toString方法，调用时会报错。

    var a = 0.01;
    console.log(typeof a);  //number
    // a.toString(); 这样写的话不会转换成功
    a = a.toString();
    console.log(a);  //0.01
    console.log(typeof a);  //string

var iNum = 10;
alert(iNum.toString(2));    // "1010"
alert(iNum.toString(8));    // "12"
alert(iNum.toString(16));   // "A"
var iNum1 = 10;
var iNum2 = 10.0;
alert(iNum1.toString());    // "10"
alert(iNum2.toString());    // "10"

调用String()函数，将要转换的数据作为参数传入
String()函数不会影响原数据，返回一个新数据
对于Boolean和Number，调用toString()方法
对于null和undefined，分别返回“null”和“undefined”的字符串形式

    var b = true;
    b = String(b);
    console.log(typeof b); //string
    b = null;
    b = String(b);
    console.log(typeof  b);  //string

使用+ 操作符
是一种隐式转换，由浏览器完成，实际上是使用了String()函数。

    console.log(undefined + ""); //"undefined"
    console.log(1 + "");   //"1"

其他数据类型转换为 Number类型：

有很多种情况，纯数字的字符串，完全没有数字的字符串，以数字开头的不是纯数字的字符串，不是以数字开头的不是纯数字的字符串，true，false，null，undefined等等等等。

使用Number函数

我们可以直接在控制台写JS代码

空字符串

转换为0

    var a = Number("");
    var b = Number("    1");
    var c = Number("    ");
    console.log(a,typeof a);  //0 number
    console.log(b,typeof b);  //1 number
    console.log(c, typeof c);  //0 number

纯数字字符串转为数字：

不管是整数，还是浮点数，都能正确转换

    // 纯数字的字符串
    var a = Number("123.456");
    console.log(a);  //123.456
    console.log(typeof a);  //number
    var b = Number("123");
    console.log(b);  //123
    console.log(typeof b);  //number

完全没有数字的字符串转为数字：

转换为NaN

//    完全没有数字的字符串
    var a = Number("adb.c%");
    var b = Number("$%^*)(");
    var c = Number("          w12");
    console.log(a);  //NaN
    console.log(b);  //NaN
    console.log(c);  //NaN
    console.log(typeof a);  //number
    console.log(typeof b);  //number

以数字开头的不是纯数字的字符串：

转换为NaN
注意，c不是一个数字，因为一个数字只能有一个小数点。

//    以数字开头的不是纯数字的字符串
    var a = Number("123.0adg");
    var b = Number("123.456asd");
    var c = Number("456.123.2");
    console.log(a,b,c); //NaN NaN NaN

不是数字开头的不是纯数字的字符串：

可以预见，也是转换为NaN

    var a = Number(".adg123");
    var b = Number("asd123.456");
    var c = Number("uio.123");
    console.log(a,b,c); //NaN NaN NaN

true和false：

true:转换为1
false:转换为0

图片.png

null 和 undefined：

null：0
undefined: NaN

    var a = Number(undefined);
    var b = Number(null)
    console.log(a,typeof a)  //NaN number
    console.log(b,typeof b)  //0 number

使用parseInt() 和parseFloat()函数转为Number

parseInt()：将一串字符串从左到右解析，直到找到一个字符是无效数字为止，小数点也是无效数字。
parseFloat()：将一串字符串从左到右解析，直到找到一个字符是无效数字为止，第一个小数点是有效的，第二个小数点是无效数字。
parseInt() 方法有基模式，parseFloat()则没有。
对于parseInt("010")，有的浏览器会当成10进制去解析，有的会当成八进制解析，最好采用基模式

    console.log(parseInt("12345red"));  //12345
    console.log(parseInt("0xA"));   //10
    console.log(parseInt("56.9"));  //56
    console.log(parseInt(""));  //NaN
    console.log(parseInt("010"), parseInt("010",8), parseInt("010",10));  //10 8 10
//对于parseInt("010")，有的浏览器会当成10进制去解析，有的会当成八进制解析，最好采用基模式

    console.log(parseFloat("12345red"));    // 12345
    console.log(parseFloat("0xA")); // 0
    console.log(parseFloat("11.2"));    // 11.2
    console.log(parseFloat("11.22.33"));    // 11.22
    console.log(parseFloat("0102"));    // 102
    console.log(parseFloat("red")); // NaN
    console.log(parseFloat(" "));  // NaN

总结：

1.使用Number函数

纯数字的字符串转为对应数字

非纯数字的字符串转为NaN

空串或者全是空格的字符串，转换为0

true转为 1，false 转为 0

null转为0，undefined:转为NaN

2.parseInt()

3.parseFloat()

4.隐式的转换：A-0，A/1，A*1 ，+A（一元运算符的加号）
相当于调用了Number()函数

其他数据类型转换为 Boolean类型：

总的规则：

除了空字符串，其余都是true
除了0 和NaN，其余都是true
null和undefined，转为false
对象转换为true

   var a = "";  //false
    var b = "  ";  //true
    var c = 0;  //false
    var d = 1;  //true
    var e = "0";  //true
    var f = "1p";  //true
    var g = "eee"; //true
    var h = true;  //true
    var i = Infinity;  //true
    var j = NaN;  //false
    var k = {};  //true
    var l = null;  //false
    var m = undefined;  //false
    console.log(Boolean(a), Boolean(b), Boolean(c), Boolean(d), Boolean(e),
    Boolean(f), Boolean(g),Boolean(h), Boolean(i), Boolean(j), Boolean(k), Boolean(l), Boolean(m));