js之变量和数据类型

在正式介绍js之前，我们先来了解一下编译型语言和解释型语言

首先，计算机是不能直接读取我们的编程语言的，需要先通过翻译器将编程语言解析成二进制的机器语言

翻译器翻译的形式有两种：一种是编译，一种是解析。两种方式之间的区别在于 翻译的时间不同

• 编译器：在代码执行之前，先通过编译器的编译，生成计算能读懂的二进制文件，之后每次运行该程序时，直接运行该二进制文件，而不需要再次重新编译
• 解析器：在代码执行时解析，并立即执行，属于边解析边执行

像C/C++ 、Java 、Go 都属于编译型语言，python、JavaScript 就属于解释性语言

举个很形象的栗子：

• 编译型语言：吃饭。等到所有饭菜都做好之后，再开饭
• 解释型语言：吃火锅。边刷边吃，同时进行

1、初始 js

关于js的历史就不介绍了，但是要记住它跟java没什么亲戚关系，从上面就知道了，一个是编译型语言，一个解释性语言

1. js是一门运行在客户端的脚本语言（解释型语言）
   1. 不需要编译，运行中有js解释器（js引擎）逐行来进行解析并运行
2. js还是一门弱类型的、动态语言
   1. 弱类型：可以使用同一个变量保存不同类型的值
   2. 动态：定义变量不需要指定变量的类型，运行时js引擎自己会计算出来

1.1 js的作用

之前说过，js可以让页面“动起来”，这个确实是js产生最初的目的，但是它可不仅仅有个功能

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

1.2 js的组成

Javascript 由三部分组成：

• ECMAScript
• DOM
• BOM

1、ECMAScript

ECMAScript 规定了js的编程语法和基础核心知识，是所有浏览器厂商遵守的一套js语法工业标准

2、DOM —— 文档对象模型

文档对象模型，是W3C组织推荐的处理可扩展编程语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作

总结：操作页面标签元素

3、BOM —— 浏览器对象模型

浏览器对象模型，是一种与浏览器窗口进行交互的对象结构。通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

总结：操作浏览器窗口

1.3 js初体验

js有3种书写的位置：行内、内嵌、外部

1、行内书写

// 点击弹框
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">

• 不推荐使用，特殊情况下使用

2、内嵌式写法

<script>
	alert('如果我是林俊杰')
</script>

• 写在html文件里面，适合代码简短

3、外部js文件

<script src='my.js'></script>

• 把大段JS代码独立到页面之外，然后再引入该js文件，有利于HTML页面代码结构化
• 引入js文件的 script标签中间不能写代码
• 适合js代码量比较大的情况

打印Hello world!

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

<script>
    // 弹出用户输入框
    prompt('请输入Hello world!:');
    
	// alert 弹出提示 展示给用户的
    alert('Hello world!');
    
	// console 控制台输出 给程序员测试用的
    console.log('Hello world!')
</script>

2、变量

2.1 什么是变量

变量就是用来存储数据的容器。我们可以通过变量名获取数据

变量的本质就是：程序在内存中申请一块用来存放数据的空间

2.2 变量的使用

变量的使用分两步：声明变量、赋值

1、声明变量

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

• varjs的一个关键字，用来声明变量。使用该关键字后，js引擎会自动为变量分配内存空间，不用我们管
• 只要声明变量，我们要给它赋什么类型的值都可以，因为js动态语言

2、赋值

// 把18赋给age
age = 18；

• 18就是变量值，是我们保存到变量空间的值

3、变量的初始化

// 声明一个变量并给它赋值就叫做变量的初始化
var age = 18;

2.3 变量语法扩展

1、更新变量

我们给age赋值18后，该变量仍然可以被重新赋值

我们还可以把数组、字符串、对象等赋值给它，因为js是弱类型语言

变量值以最后一次赋值为准

2、同时声明多个变量

var age = 18, namer = '老林'

3、声明变量的特殊情况

情况	说明	结果
var age; console.log(age);	只声明 不赋值	undefined
console.log(age);	不声明 不赋值 直接使用	报错
age = 10; console(age);	不声明 只赋值	正常打印；但是会变成全局变量，绝不提倡

2.4 变量命名规范

1. 由字母（A-Z、a-z）、数字、下划线、美元符号（$）组成
2. 严格区分大小，同个字母大小写的是两个不同的变量
3. 不能以数字开头、不能是关键字
4. 变量名必须有意义，不能是随便的几个字母或数字
5. 遵守驼峰命名法 ；首字母小写，后面单词的首字母需要大写。myFirstName

3、数据类型

上面说了，基于js是弱类型的、动态的特性，变量是不需要声明其数据类型，并且也可以被重新赋值其它的数据类型

注意：变量是没有类型的，值才有类型

这里我们先讨论前5个数据类型，对象Object 放到后面说，Symbol是ES6新增的类型，我们后面再说

前5个也就是：Number、String、Boolean、Undefined、Null，我们称其为简单数据类型

简单数据类型	说明	默认值
Number	数字型，包含 整型值和浮点型值，如 -1、0、1、0.1	0
Boolean	布尔值类型，如 ture、false，等价于 1 和 0	false
String	字符串类型，如 ‘cyf’，‘张三’，注意在js 中，字符串都是带引号的	‘’
Undefined	var a; 声明了变量a但是没有给值，此时 a = undefined	undefined
Null	var a = null; 声明了变量 a 为空值	null

3.1 数字型 Number

js 中数字类型即可以用来保存整数数值，也可以保存小数数值（浮点数）

var age = 3;  // 整数
var pi = 3.14；  // 浮点数

1、数字型进制

最常见的有二进制、八进制、十进制、十六进制

// 在程序前面加 0，表示八进制
var x = 010;
console.log(x); // 8，八进制转换为十进制

// 十六进制 0~9、a~f（A~F） 在数字前面加 0x
var y = 0xb;
console.log(y);  // 转换为十进制 11

var z = 0x12
console.log(z);  // 18

总结：八进制：0 ； 十六进制：0x；

2、数字型是三个特殊值

• Infinity，无穷大，大于任何值
• -Infinity，无穷小，小于任何值
• NaN，Not a number，非数值

// 数字类型的最大值
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
// 数字类型的最小正值
console.log(Number.MIN_VALUE); // 5e-324

// 无穷大
console.log(Number.MAX_VALUE * 2); // Infinity
// 无穷小
console.log(-Number.MAX_VALUE * 2); // -Infinity

// 非数字
console.log('pink老师' - 100); // NaN

3、判断是否是数字型 —— isNaN

console.log(isNaN(12));  // false
console.log(isNaN('老林'));  // ture

3.2 字符串型 String

引号中的任意文本内容，就是字符串型，不管是单引号还是双引号

var str = '老林'；  // 字符串
var x = "123";   // 字符串

1、字符串转义符

转义符都是以 \ 开头的

• \n ：换行符（n就是newline的意思）
• \\：斜杆 \
• \'：单引号
• \"：双引号
• \t：缩进（tab）
• \b：空格（b就是blank的意思）

2、字符串的长度

字符串是由若干个字符组成的，这些字符的数量就是字符串的长度，通过 length属性可以获取字符串的长度

// 检测获取字符串的长度
var str = 'my idol is 老林'; 
console.log(str.length);  // 13

扩展一下：

属性是对象才有的，字符串又不是对象，为什么会拥有该属性？

• js引擎首先会在嘎字符串上面找，但是没有找到，便沿着原型链继续往上找，最终在内置对象的String.prototype对象中找到了length属性，故字符串可以通过length属性来获取本身的长度

3、字符串的拼接

可以用 + 号来拼接多个字符串，从而形成一个新的字符串

• 字符串与其它类型的数据进行拼接，首先会先将该数据转化为字符串，之后再进行拼接

console.log('你被写在' + '我的歌里' + 18);

3.3 布尔值

布尔类型有两个值：

• true：表示真（1）
• false：表示假（0）

布尔型与数字相加，true的值为1，false的值为0

consele.log(ture + 1);  // 2
console.log(false + 1);  // 1

3.4 Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined

var age;
console.log(age); // 没有定义， 返回undefined

var undefined1 = undefined;
console.log(undefined1); // undefined

console.log(undefined1 + ' cyf'); // undefined cyf
console.log(undefined1 + 1); // NaN

一个声明变量给null值，里面存的值为空

// 定义一个空值
var space = null;
console.log(space); // null
console.log(space + 1); // 1

null常用于表示无值或无对象，可以简单把它理解为数字型中的0，字符串型中的空字符串

3.5 获取数据类型

typeof 可用来获取变量的数据类型

var num = 10;
console.log(typeof num); // number

var str = 'cyf';
console.log(typeof str); // string

var flag = true;
console.log(typeof flag); // boolean

var vari = undefined;
console.log(typeof vari); // undefined

var timer = null;
console.log(typeof timer); // object

注意：

• typeof判断结果返回的是一个字符串
• typeof null 判断结果是一个对象，这是一个bug；但是由于修复这个错误，会导致很多问题，所以就一直没有被修复

判断 null 的正确方式：

var timer = null;
if (!timer && typeof timer === 'object') {
	console.log(true)
}

3.6 数据类型的转换

我们通常会用到的3种转换；

1. 数字型转字符串
2. 字符串转数字型
3. 其它类型转换为布尔值

1、数字型转字符串

方式	说明	案例
toString()	转成字符串	var num = 1; alert(num.toString());
String()	转成字符串（强制转换）	var num = 1; alert(String(num));
加号拼接字符串	和字符串拼接的结果就是字符串	var num = 1; alert(num + '');
toFixed()	返回包含指定小数点位数的数值字符串（也可不指定）	var num = 1; alert(num.toFixed(2)); // 1.00

• 平常更常用第三种加号拼接字符串的转换方式，这种方式也被称为 隐式转换

2、字符串转数字类型（重点）

方式	说明	案例
parselnt(string) 函数	将 string 类型转成整数数值型	parselnt('3.14')
parseFloat(string) 函数	将 string 类型转成浮点数数值型	parseFlaot('3.14')
Number() 强制转换函数	将string类型转换为数值型	Number('3.14')
js 隐式转换 (- * /)	利用算术隐式转换为数值型	3.14 - 0

console.log(parseInt('3.14')); // 取整，3
console.log(parseFloat('3.14')); // 浮点型整数 3.14

console.log(parseInt('120px')); // 120, 会去除px
console.log(parseFloat('120px')); // 120

console.log(parseInt('rem120px')); // NaN
console.log(parseFloat('rem120px')); // NaN

// 强制转换为数字型
console.log(Number('12')); // 12

// 利用算术运算 隐式转换
// 唯独不能是相加 +，仍然是字符串
console.log('12' - 0);
console.log('12' * 1);
console.log('12' / 1);

3、转换为布尔型

方式	说明	案例
Boolean() 函数	其它类型转成布尔值	Boolean('true')

• 代表空、否定的值会被转化为false，如：0、''、NaN、null、undefined
• 其余值都会被转换为true