记录自学JavaScript的过程。这一篇记录的是变量和数据类型。
JavaScript基础知识
编程语言
- 编程语言：（JS）具有很强的逻辑和行为能力
- 标记语言：（html）被动的，不用于向计算机发出指令，常用于格式化和链接。
解释型语言和编译型语言
- 解释型语言的解释器是在运行时进行及时解释，并立即执行
- 编译型语言的编译器是在代码执行之前进行编译，并生成中间代码文件
html/css/JS
html决定网页结构和内容，css决定样式，而js实现业务逻辑和页面控制
JS是什么
JS是一种运行在客户端的脚本语言（不用像java安装运行环境，直接可以在浏览器运行）。不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行。
浏览器如何执行js
浏览器分为：渲染引擎和JS引擎
- 渲染引擎：用于解析html和css，俗称内核。
- JS引擎：（JS）解释器，用于读取JS代码，对其处理后运行。
浏览器本身不执行JS代码，而是通过JS引擎来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行。
因为JS逐行解释执行的特点，一旦有一行报错便不再执行下面的代码。
JS的组成
- ECMAScript:规定了JS编程语法和核心知识。
- DOM：文档对象模型
- BOM：浏览器对象模型
JS书写位置
JS书写位置分为行内、内嵌、外部。（跟css很像）
- 行内式JS
<input type="button" value="点我试试" onclick="alert('hello world')"
ps:在html常使用双引号，在JS常使用单引号。
- 内嵌式
<script>
alert('hello world');
</script>
- 外部文件
<script scr="..."></script>
优点：方便文件复用，便于管理
ps:引用外部文件的script标签中间不能写代码！
JS注释
- 单行注释：
//
- 多行注释
/**/
输入输出语句
| 方法 | 作用 |
|---|---|
| alert | 浏览器弹出警示框 （返回给用户看到） |
| console.log | 浏览器控制台打印输出信息(返回给程序员看到) |
| prompt | 浏览器弹出输入框，用户可以输入 |
JS变量
1.变量的声明和赋值
JS中用var来声明变量
//声明
var age;
//赋值
age = 10;
//可同时声明多个变量
var age = 10, name = 'xiao', sex = 'female';
2.变量的初始化
同时进行变量声明和赋值称为初始化
var age = 10;
3.变量命名规范
- 由字母，数字，下划线，$组成；
- 不以数字开头；
- 区分大小写；
- 不为保留字，关键字；
ps : name不做变量名。
4.声明变量的特殊情况
| 情况 | 说明 | 结果 |
|---|---|---|
| var age ; console.log(age); | 只声明不赋值 | undefined |
| age = 10 ; console.log(age); | 只赋值不声明 | 10（可以使用但不建议） |
| console.log(age); | 不声明不赋值 | 报错 |
数据类型
JavaScript 是一种弱类型或者说动态语言。不用提前声明变量的类型，在程序运行过程中，类型根据变量的值来自动确定。同时，经过多次赋值，同一变量可以用作不同的类型。（与java不同）
//声明age为数值型
var age = 8;
//通过赋值将age改为字符型
age = 'hello';
数据类型的分类
- 简单数据类型（Number,String,Boolean,Undefined,Null），在存储变量时存储的是值本身。
- 复杂数据类型（object)，在存储变量时存储的是地址。
通过栈和堆理解简单和复杂数据类型的存储方式
JavaScript中没有栈堆的概念，是为了理解才通过栈和堆来解释。
- 简单数据类型：存放到栈里，直接在栈里开辟空间存放值；
- 复杂数据类型：先在栈里存放一个地址，这个地址指向堆里面的数据，堆里存放的才是真正的数据。
复杂数据类型存储方式：
简单\复杂数据类型传递参数
- 简单数据类型的传参：将值复制一份进行传递，对复制之后值的操作对原值没有影响；
//结果：2 1（因为形参a指向的是被复制一份的值1，a的改变并不影响b）
function fn(a){
a++;
console.log(a);
}
var b = 1;
fn(b);
console.log(b);
2. 复杂数据类型的传参：直接传递栈里存储的地址，由于地址指向的是堆里相同的数据，传参之后进行的操作对原数据有影响；
function f1(age){
this.age = age;
}
function f2(a){
console.log(a.age);
a.age = 20;
console.log(a.age);
}
var person = new f1(10);
// 10
console.log(person.age);
// 10 20
f2(person);
// 20(a指向的为person的地址，对a的操作会影响person)
console.log(person.age);
简单数据类型（基本数据类型/值类型）
| 类型 | 说明 | 默认值 |
|---|---|---|
| number | 包括整型和浮点型 | 0 |
| boolean | -- | false |
| string | -- | "" |
| undefined | 声明了但没给值 | undefined |
| null | var a = null;直接声明了变量为null | null |
数字型number
数字型包括整型和浮点型，在JS中八进制前面加0，十六进制前面加 0x。
//JavaScript中数值的最大和最小值
alert(Number.MAX_VALUE);
alert(Number.MIN_VALUE);
数字型的三个特殊值：
- infinity，无穷大
- -infinity，无穷小
- NaN，代表非数值
isNaN(): 用来判断一个变量是否为非数字的类型，返回 true 或者 false。
var age = 10;
//false
console.log(isNaN(age));
字符串型string
字符串嵌套: JS中可用双引号嵌套单引号，或用单引号嵌套双引号。
转义字符：
| 转义符 | 说明 |
|---|---|
| \ | 斜杠 | |
| ' | ' |
| " | " |
| \t | tab |
| \b | 空格 |
获取字符串长度： 通过length属性
var myname = 'xiaoxaio';
//显示8
alert(myname.length);
字符串拼接： 字符串 + 任何类型 = 拼接之后的新字符串
//hello12
alert('hello'+12);
//helloundefined
alert('hello'+undefined);
//hello
alert('hello'+null);
var age = 10;
//helloage
alert('hello'+age);
布尔型boolean
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0
undefined和null
undefined,null和数字型，字符型进行相加时注意结果
var age;
//helloage
console.log('hello'+age);
//NaN
console.log(2 + age);
var a = null;
//hellonull
console.log('hello'+null);
//1
console.log(1 + null);
检测数据类型的方法typeof
typeof 可用来获取检测变量的数据类型,null类型返回的是object。
var age = 18;
//number
console.log(typeof age);
数据类型转换
将数据类型转换为字符串型
var age = 1;
//方式一
console.log(age.toString());
//方式二
console.log(String(age));
//方式三(隐式转换)
console.log(age + '');
将数据类型转换为数字型
用户输入获得的都是字符型，使用之前可能需要转换。
var age = '18.4';
//18
console.log(parseInt(age));
//18.4
console.log(parseInt('18.4px'));
//18.4
console.log(parseFloat(age));
//18.4
console.log(Number(age));
//18.4(隐式转换，利用- * /)
console.log(age - 0);
转换为boolean
代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined;
其他的会被转换成true。
相关练习
相关代码见： 变量与数据类型的练习
