【WEB学习】Day09 - JavaScript 的数据类型

【WEB学习】Day09 - JavaScript 的数据类型

---

---

一、JavaScript 是什么

• JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Scrpit 是脚本的意思）
• 脚本语言：不需要编译，运行过程中由 js 解释器（js引擎）逐行来进行解释并执行。
• 现在也可以基于 Node.js 技术进行服务器端编程。

1.1 JS 的作用

• 表单动态校验（密码强度检测）
• 网页特效
• 服务端开发（Node.js）
• 桌面程序（Electron）
• App（Cordova）
• 控制硬件-物联网（Ruff）
• 游戏开发（cocos2d-js）

1.2 浏览器执行 JS 的原理

浏览器实际上分成两部分：渲染引擎 和 JS 引擎。

• 渲染引擎：用来解析 HTML 和 CSS，俗称内核，比如 chrome 浏览器的 blink，老版本的 webkit。
• JS 引擎：也称 JS 解释器。用来读取网页中的 JavaScript 代码，对其处理后运行，比如 chrome 浏览器的 V8。

浏览器本身不会执行 JS 代码，而是通过内置 JavaScript 引擎（解释器）来执行 JS 代码。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 被归类为脚本语言，会逐行解释执行。

1.2 JS 的组成

JavaScript 由三部分组成：
ECMAScript 、DOM 、BOM。

1.ECMAScript：
这是由ECMA国际进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript 或 JScript，实际上后两者是 ECMAScript 语言的实现与扩展。

正是 ECMAScript 规定了 JS 的编程语法和基础核心知识，所有浏览器厂商必须共同遵守该工业标准。

2.DOM —— 文档对象模型：
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

3.BOM —— 浏览器对象模型：
浏览器对象模型（Browser Object Model，简称 BOM），它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过 BOM 可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

1.3 JS 初体验

行内式的 js 直接写道元素的内部即可。

<input type="button" value="按钮" onlick="alert('按钮被点了')">

内嵌式的 js 在 <script></scrpit>中写。

<script>
	alert('我内嵌');
</script>

外部 js 可以导入外部的 js 文件来导入。

<script src="tset.js"></script>

这样就可以引入。
1.行内式 JS：

• 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性），如：onclick。
• 注意单双引号使用：在 HTML 中推荐使用双引号，JS 中推荐使用单引号
• 特殊情况下再使用。

2.内嵌 JS：

• 可以将多行 JS 代码写到 <script> 标签中。
• 常用。

3.外部 JS：

• 利于 HTML 页面代码结构化，美观。
• 引用外部 JS 文件的 script 标签中间不可以写代码：

<script src="tset.js"></script>

• 适用于 JS 文本量大的情况。

1.4 JS 注释

js 注释有多种，有单行、多行。
单行注释：

//

多行注释：

/* 注释内容 */

二、JavaScript 的数据类型

2.1 JavaScript 输入输出语句

为了方便信息的输入输出，JS 提供了以下语句：

输入框：

    <script>
       //输入框
       prompt('请输入您的年龄');
    </script>

警示框：

    <script>
       //警示框
       alert('警告！');
    </script>

控制台输出：

    <script>
       //控制台输出
       console.log('程序员才能看到我！');
    </script>

2.2 变量

2.2.1 什么是变量

变量就是用于存储数据的容器，我们可以通过变量名获取数据和修改数据。

2.2.2 如何使用变量

首先要，声明一个变量，然后赋值。
声明变量：

//声明变量
var age; //声明一个名称为 age 的变量

var 是 variable 的缩写，用来声明变量，声明变量后，计算机会自动为变量分配内存空间。
age 是变量名，我们通过变量名访问内存中分配的空间。
赋值：

age = 10; //给 age 这个变量赋值为 10

测试：输出结果

console.log(age);

声明和赋值可以同时进行，是为初始化：

var myname = '马力欧';

我们输入的信息可以被变量存储：

var myname = prompt('输入你的名字');
console.log(myname);

同时声明多个变量，可以用逗号隔开：

var age = 10, name = 'duo', sex = 2;

使用变量有三种特殊情况：

虽然没有声明变量，直接赋值使用了，但是没报错，这在 JS 是允许的，但是这个变量将会成为一个全局变量，看后面内容。

2.2.3 变量命名规范

2.3 数据类型

2.3.1 变量的数据类型

变量的数据类型是不确定的，只有在运行的时候，才能确定一个 var 的数据类型，它是根据值来确定的。
JS 是动态语言，其变量的数据类型是可以变化的。

var x = 10; //x 是数字型
x = 'pink'; //x 变成了字符串型

2.3.2 数据类型的分类

JS 把数据类型分为两类：
1.简单数据类型:

（1）数字型 Number：

• JS 数字类型即可保存整数，也可以保存小数（浮点数）。

var num = 10;
var Pi = 3.14;

• 数字型也可以存储为八进制：

var num1 = 010;

数字前面加 0 就表示八进制。

• 数字型也可以存储为十六进制：

var num2 = 0xa

数字前面加 0x 就表示十六进制。

• 数字类型数据的存储范围是这样的：

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

JS 中的数字范围上下界限如上所示。

• 数字型还有三个特殊的值：

alert(Infinity);  //Infinity
alert(-Infinity); //-Infinity
alert(NaN);		  // NaN

Infinity，代表无穷大，大于任何数值。
-Infinity，代表无穷小，小于任何数值。
NaN，Not a number，代表一个非数值。

• 我们可以通过 isNan( ) 方法判断非数字，并且返回一个值，如果是数字，返回 false，如果不是数字，返回 true。

console.log(isNaN(12));   		// false
console.log(isNaN('字符串'));	// true

（2）字符串型 String：
字符串型可以是引号中的任意文本，其语法为 双引号 " " 和 单引号 ’ ’ 引起来的内容。因为 HTML 标签里的属性使用的是双引号，所以 JS 里更推荐使用单引号。

• JS 的字符串可以嵌套，它可以用单引号嵌套双引号，也可以用双引号嵌套单引号，即——外双内单，外单内双。

var strMsg1 = '我是"程序猿"'; // ''包""
var strMsg2 = "我是'程序猿'"; // ""包''

我们可以根据字符串里需要加引号的内容的单双，来确定外部字符串用的引号。

• JS 里也有类似 HTML 的特殊转义符，它们如下：
  
  转义符都是 \ 开头的。

• 字符串有计算长度的方法和拼接方法：

// 1. 检测获取字符串的长度 length
var str = 'my name is Rosalina,';
console.log(str.length(str.length);

// 2. 多个字符串之间可以使用 + 进行拼接，其拼接方式为： 字符串 + 任何类型 = 拼接之后的新字符串，在拼接之前，会把所有与字符串相加的任何类型都转成字符串。
console.log('沙漠' + '骆驼');  //沙漠骆驼
console.log('我今年方' + 28);  //我今年方28
console.log('我是' + true);	  //我是true
console.log('12' + 12);		  //1212

字符串也可以和变量相加：

var age = 18;
console.log('我今年' + age + '岁啦！');

（3）布尔型 Boolean：
布尔类型有两个值：true 和 false，其中 true 表示真（对），而 false 表示假（错）。
但是，布尔类型和数值类型可以互通参与运算：

var flag1 = true; 		// flag1 布尔型
var flag0 = false; 		// flag0 布尔型
console.log(flag1 + 1);	// true 参与加法运算当1来看
console.log(flag0 + 1); // false 参与加法运算当0来看

（4）Undefined 和 Null：

• 前者是声明后没有赋值的变量会有一个默认值 undefined。表示未定义数据类型。
  如果把一个 undefined 数据类型的数据和其他类型变量相加，也是可以的，结果要注意一下。

var variable = undefined;   //手动定义了一个 undefined 类型的变量 variable
console.log(variable + 'name'); // undefined + 字符串，结果为：undefinedname
console.log(variable + 1);		// undefined + 数字，结果为：NaN

undefined 和 字符串 相加，undefined 自己会转化成字符串，内容就是 ‘undefined’。
undefined 和 数字 相加，结果不是一个数字，所以是 NaN。

• 后者是空值 null ，意思就是这个变量值就是空值。

var space = null;
console.log(space + 'name'); // nullname
console.log(space + 1);		// 1

null 和 字符串 相加，null 自己会转化成 ‘null’ 字符串。
null 和 数字 相加，因为 null 是什么也没有，所以相加后还是后面那个数字本身。

2.3.3 获取检测变量的数据类型

typeof 可以用来获取检测变量的数据类型。

var num = 10;
var str = '你好';
var nul = null;
var und = undefined;
var bool = true;
console.log(typeof num);	//number
console.log(typeof str);	//string
console.log(typeof nul);	//object
console.log(typeof und);	//undefined
console.log(typeof bool);	//boolean

null 是 object 类型，注意下。
通过 typeof，我们可以发现，通过 prompt 输入的数字，竟然是 string 类型。

var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);   // string

在浏览器控制台里，我们可以通过字符颜色判断是什么类型。

蓝色的数字是数值型，黑色的文字是字符串类型，蓝色的 true 或 false，则是布尔类型。

2.3.4 数据类型的转换

由于输入框默认是字符串类型，我们需要学会类型转换。

1.转换为字符串类型：

// 1. 把数字型转换为字符串类型 toString()
var num = 10;
var str = num.toString();
console.log(typeof str);   // string
// 2. 把数字型转换为字符串类型 String()
console.log(String(num));
// 3. 加号拼接字符串
console.log(num + '');   // num加一个空串变成字符串类型

2.转换为数字类型：

// 1. 利用 parseInt() 把字符串转换为整数
var age = prompt('请输入你的年龄');
console.log(parseInt(age));
// 利用 parseInt() 还可以把像素单位去掉
console.log(parseInt('120px'));	//120
// 2. 利用 parseFloat() 把字符串转换为浮点数
var f = prompt('请输入一个小数');
console.log(parseFloat(f));
// 3. 利用 Number() 函数可以强制把字符串类型转换为数值型
var str = '123';
console.log(Number(str));
// 4. 利用算术运算 - * 可以实现隐式的转换
console.log('12' - 0);			// 12
console.log('123' - '120');		// 3
console.log('123' * 1);			// 123

3.转换为布尔类型：
转换为布尔型只有一个方法，Boolean()函数。

• 代表空、否定的值会被转换为 false，如 ‘’、0、NaN、null、undefined。
• 其他值都会被转换为 true。