JavaScript基础知识（变量、数据类型）

记录自学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很像）

1. 行内式JS

<input type="button" value="点我试试" onclick="alert('hello world')"

ps:在html常使用双引号，在JS常使用单引号。

2. 内嵌式

<script>
    alert('hello world');
</script>

3. 外部文件

<script scr="..."></script>

优点：方便文件复用，便于管理

ps:引用外部文件的script标签中间不能写代码！

JS注释

1. 单行注释：

//

2. 多行注释

/**/

输入输出语句

方法	作用
alert	浏览器弹出警示框 （返回给用户看到）
console.log	浏览器控制台打印输出信息(返回给程序员看到)
prompt	浏览器弹出输入框，用户可以输入

JS变量

1.变量的声明和赋值

JS中用var来声明变量

//声明
var age;
//赋值
age = 10;
//可同时声明多个变量
var age = 10, name = 'xiao', sex = 'female';

2.变量的初始化

同时进行变量声明和赋值称为初始化

var age = 10;

3.变量命名规范

1. 由字母，数字，下划线，$组成；
2. 不以数字开头；
3. 区分大小写；
4. 不为保留字，关键字；

ps : name不做变量名。

3.声明变量的特殊情况

情况	说明	结果
var age ; console.log(age);	只声明不赋值	undefined
age = 10 ; console.log(age);	只赋值不声明	10（可以使用但不建议）
console.log(age);	不声明不赋值	报错

数据类型

1.变量的数据类型

JavaScript 是一种弱类型或者说动态语言。不用提前声明变量的类型，在程序运行过程中，类型根据变量的值来自动确定。同时，经过多次赋值，同一变量可以用作不同的类型。（与java不同）

//声明age为数值型
var age = 8;
//通过赋值将age改为字符型
age = 'hello';

2.数据类型的分类

• 简单数据类型（Number,String,Boolean,Undefined,Null）
• 复杂数据类型（object)

简单数据类型（基本数据类型）

类型	说明	默认值
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。

相关练习

相关代码见：
变量与数据类型的练习