01 【基础语法与基本数据类型】

	语言	功能
结构层	HTML	搭建结构、放置部件、描述语义
样式层	CSS	美化网页、实现布局
行为层	JavaScript	实现交互效果、数据收发、表单验证等

1997 年，欧洲计算机制造商协会（ECMA）颁布了 JavaScript 的标准，命名为 ECMAScript。

ECMAScript 简称 ES，JavaScript 简称 JS。

JavaScript 实现了 ECMAScript
ECMAScript 规范了 JavaScript

JavaScript 的语言风格和特性

类 C 语言风格，容易上手
弱类型（动态类型），简单易学
丰富的功能，无敌的生态，强大的性能

1.基本使用

1.1 输出语句

alert("要输出的内容");

该语句会在浏览器窗口中弹出一个警告框

【功能】

在浏览器（JavaScript 引擎例如：Chrome V8）解析到 JS 文件中的 alert() 语句时，便会中断 JS 脚本的执行，同时弹出警告框，直到用户单击确定后，才继续执行后续的 JS 脚本。

document.write("要输出的内容");

该内容将会被写到body标签中，并在页面中显示

console.log("要输出的内容");

console：控制台

log：记录、日志

console 是 JS 的内置对象
通过对象 “打点” 可以调用其内部的 log 方法（所谓 “方法” 就是对象能够调用的函数）

F12 打开浏览器调试面板，点击 Console 控制台菜单。

【功能】

在浏览器（JavaScript 引擎例如：Chrome V8）解析到 JS 文件中的 console.log() 语句时，会直接在浏览器控制台输出语句，并自动继续执行后续的 JS 脚本。

输入语句

使用 prompt() 函数弹出浏览器输入框

由于 prompt() 函数输入的任何值都将默认为字符串

1.2 编写位置

在 <body> 中的 <script> 标签中书写 JS 代码
将 JS 代码单独保存为 .js 文件，然后在 HTML 文件中使用 <script src=""></script> 引入

JavaScript 不能脱离 HTML 网页运行！

（当然，今后学习 Node.js 后，JavaScript 可以独立成为一个运行平台）

1.可以编写到标签的指定属性中

<button onclick="alert('hello');">我是按钮</button>  
<a href="javascript:alert('aaa');">超链接</a>

2.可以编写到script标签中

<body>
    <!-- 在 HTML5 之前，必须要加上 type 属性，并且里面的内容一定要正确！-->
    <!-- 
    <script type="text/javascript">
    </script> 
    -->

    <!-- 目前都是使用 HTML5，所以不用写 type 属性，默认就是 JS -->
    <!-- 推荐把 script 文件写到 body 的末尾 -->
    <script>
        // 弹窗输出一句话
        // 每一句 JS 代码以分号结尾！
        alert("你好，JavaScript！");
    </script>
</body>

3.可以将代码编写到外部的js文件中，然后通过标签将其引入

script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略 ,如果需要则可以在创建一个新的script标签用于编写内部代码

<script type="text/javascript" src="文件路径"></script>

1.3 基本语法

js函数声明不需要；分号，但是赋值语句要加；分号

function functionName(arg0,arg1,arg2){  
//函数声明  
}  
var functionName=function(arg0,arg1,arg2){  
//函数表达式  
};(注意分号)

注释

单行注释

//注释内容

多行注释

/*  
注释内容  
*/

JS严格区分大小写

JS中每条语句以分号(;)结尾如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发中分号必须写

JS中会自动忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。

1.4 字面量(值)和变量

字面量

字面量实际上就是一些固定的值，比如 1 2 3 4 true false null NaN “hello”
字面量都是不可以改变的。

由于字面量不是很方便使用，所以在JS中很少直接使用字面量

变量

变量可以用来保存字面量，并且可以保存任意的字面量

一般都是通过变量来使用字面量，而不直接使用字面量，而且也可以通过变量来对字面量进行一个描述

声明变量

使用var关键字来声明一个变量

var a;

为变量赋值

a = 1;

声明和赋值同时进行

var a = 456;

1.5 标识符

在JS中所有的可以自主命名的内容，都可以认为是一个标识符，
是标识符就应该遵守标识符的规范。

函数、类名、对象的属性等也都要遵守这个标识符的命名规则。

1.6 推荐的变量命名风格

小驼峰命名法：mathTestScore （吐血推荐）
C 风格变量命名法：math_test_score

补充：

驼峰命名法：Java、JavaScript

下划线命名法：C、C++、Python、Golang、SQL

1.7 变量的默认值

一个变量只定义，但没有赋初值，默认值是 undefined（未阐明）
一个变量只有被 var 定义，并赋初值之后，才算正式初始化完成

var a;	// 只定义但没有赋初值
console.log(a);	// undefined
a = 24;
console.log(a);	// 24

1.8 变量的常见错误

不用 var 定义，而直接将值赋予它，虽然不引发报错，但会产生作用域问题。

请一律加上 var ！

a = 24; // 未使用 var 定义的变量默认为全局变量！成为 window 对象的属性。
console.log(a);	// 24
console.log(window.a);	// 24
console.log(window.a === a);	// true

关于作用域的问题，后期课程会介绍。

尝试使用一个既没有被 var 定义过，也没有赋过值的变量，就会产生引用错误。

console.log(c);
// index.js:1 Uncaught ReferenceError: c is not defined at index.js:1

使用 strict 严格模式

JavaScript 在设计之初，为了方便初学者学习，并不强制要求用 var 申明变量。这个设计错误带来了严重的后果：如果一个变量没有通过 var 申明就被使用，那么该变量就自动被申明为全局变量：
i = 10; // i 现在是全局变量
在同一个 HTML 页面的不同的 JavaScript 文件中，如果都不用 var 申明，恰好都使用了变量 i，将造成变量 i 互相影响，产生难以调试的错误结果。

使用 var 申明的变量则不是全局变量，它的范围被限制在该变量被申明的 JS 文件或函数体内（函数的概念将稍后讲解），同名变量在不同的函数体内互不冲突。

为了修补 JavaScript 这一严重设计缺陷，ECMA 在后续规范中推出了 strict 模式，在 strict 模式下运行的 JavaScript 代码，强制通过 var 申明变量，未使用 var 申明变量就使用的，将导致运行错误。

启用 strict 模式的方法是在 JavaScript 代码的第一行写上：
"use strict";
这是一个字符串，不支持 strict 模式的浏览器会把它当做一个字符串语句执行，支持 strict 模式的浏览器将开启 strict 模式运行 JavaScript。
"use strict";
abc = "Hello, world";
console.log(abc);
// 如果浏览器支持 strict 模式，
// 下面的代码将报 ReferenceError 错误：Uncaught ReferenceError: abc is not defined
不用 var 申明的变量会被视为全局变量，为了避免这一缺陷，所有的 JavaScript 代码都推荐使用 strict 模式。

提示："use strict"语句可以放在 JS 代码的任意一行上，并且它只对它所在作用域下方的代码起作用。

1.9 等号表示赋值

var a = 10;
a = a + 1;
console.log(a);	// 11
a = a - 1;
console.log(a);	// 10

1.10 同时声明多个变量

var a = 0, b = 1, c = 2;	// 建议每行只声明一个变量

1.11 变量声明提升

变量声明的提升：可以提前使用一个稍后才声明的变量，而不会引发异常
在执行所有代码前，JS 有预解析阶段，会预读所有变量的声明（不会提升赋值，只会提升定义）

// 变量声明提升的只是定义，不提升赋值！！！
// 先使用变量
console.log(a);	// undefined
var a = 10;
// 后定义变量
console.log(a);	// 10

实际的情况相当于：

var a;
console.log(a); // undefined
a = 10;
console.log(a); // 10

【注意事项】

变量声明提升是 JS 的独有特性！
在实际开发中，不要刻意使用变量提升的特性，一定要先定义再使用！
严格模式对变量提升没有检测作用（严格模式也搞不定变量提升这个老赖）！

1.12 学会处理报错

JS 一但发生语句错误，那么后续的语句也就不执行了！

浏览器控制台会检测错误的类型及行号（行号不一定正确，但可以确定范围）

现代 IDE 一般具备智能自动检查功能，最智能的 JavaScript IDE：WebStorm

Uncaught SyntaxError: Invalid or unexpected token

未捕获的语法错误：不合法或错误的符号。

（中文符号错误、……）

Uncaught ReferenceError: jerry is not defined

未捕获的引用错误：jerry 没有被定义。

（字符串没有加引号、名称拼写错误、……）

2. 数据类型简介和检测

2.1 JavaScript 中两大数据类型

（1）基本数据类型

JS 没有字符型，JS 的 String 是基本类型！

Number
String
Boolean
Undefined
Null

（2）复杂数据类型

Object
Array
Function
RegExp（正则表达式）
Date
Map
Set
Symbol
……

2.2 typeof 运算符

使用 typeof 运算符可以检测值或者变量的类型。语法：typeof 变量
它会返回一个用于描述类型的字符串作为结果

typeof 是一个运算符，而不是内置函数，所以不用加 ()，如果加了也不会报错，但是并不推荐。

typeof 5;		  // number
typeof 'ds';	// string

利用浏览器控制台进行交互测试。

console.log(typeof 5);
console.log(typeof "ds");
var a = "5";
console.log(typeof a);

从以上测试也可以看出，JS 是一个弱类型的语言，变量值是什么类型，那么变量就是什么类型，而不用显式地指出类型。

2.3 5种基本类型的 typeof 结果

类型名	typeof 检测结果	值举例
数字类型	number	`5`、`2.5`
字符串类型	string	`'慕课网'`
布尔类型	boolean	`true`、`false`
undefined 类型	undefined	`undefined`
null 类型	object（可以理解为空对象）	`null`

2.4 复杂数据类型简介

除基本类型值外，JS 的世界中还有复杂数据类型。

举例：

[1, 2, 3]

{ a: 1, b: 2 }

function() {
}

在 JS 中普通类型也可以包装为复杂类型（对象）

str01 = "zjr";
str02 = new String("zjr");
str03 = String("zjr");
console.log(typeof str01);		// string
console.log(typeof str02);		// object
console.log(typeof str03);		// string
console.log(str01 === str02);	// false
console.log(str02 === str03);	// false
console.log(str01 === str03);	// true
// Number、Boolean 同理

复杂数据类型都是 “引用类型”（type: object），将在后续课程中介绍。

3.String（字符串）类型

3.1 字符串的表示

字符串要用引号包裹，双引号或者单引号均可。

typeof "ds";	// string
typeof 'ds';	// string

数字 10 和字符串 "10" 在语义上是不同的，前者表示一个数量，后者是一个文本。

3.2 字符串的拼接

加号可以用来拼接多个字符串。

"d" + "s";	// "ds"
"abc" + "d" + "ef";	// "abcdef"

3.3 字符串和变量的拼接

要将一个变量的值 “插入” 到字符串中，要满足变量左右两边至少有一边 + 字符串。

var year = 2022;
var str = "北京冬奥会在" + year + "年召开";	// "北京冬奥会在2022年召开"

var a = 24;
var str1 = 54 + a;		// 78
var str2 = "54" + a;	// "5424"

1 + "10"; // "110"

2 + "";	// "2"

ES6 中增加了反引号 ( ` ) 表示法，可以更方便进行变量插值，后续课程将进行介绍。

3.4 空字符串

一些时候需要使用空字符串，直接书写闭合的引号对即可。

var str = "";

空字符串可以用于将变量变为字符串！

var a = 24;
console.log(typeof a);	// number
a = a + "";
console.log(a);	// "24"
console.log(typeof a);	// string

3.5 字符串的 length 属性

通过对 String 类型 “打点” 的方式，可以调用其内置属性。

注意：在 JS 中，String 是基本类型，之所以 String 可以 “打点” 调用属性和方法，那是因为 JS 的解释器会自动将基本类型包装成对应的对象类型。

字符串的 length 属性表示字符串的长度。

"我喜欢JS".length;	// 5
"我喜欢JS，我也喜欢NODE".length;	// 14
"".length;	// 0

3.6 转义字符

在字符串中使用\作为转义字符

\'  ==> '  
\"  ==> "  
\n  ==> 换行  
\t  ==> 制表符  
\\  ==> \

4.Number（数字）类型

4.1 一切数都是数字类型

在 JS 中，所有数字不分大小、不分整浮、不分正负，都是数字类型。

typeof 925; // number
typeof 0.5; // number
typeof -24; // number

4.2 小数中 0 可以省略

在表达小数的时候，整数个位的 0 可以省略。

4.3 科学计数法

较大数或较小数（绝对值较小）可以写成科学计数法。

3e8;			// 300000000
typeof 3e8;		// number

3e-4;			// 0.0003
typeof 3e-4;	// number

4.4 不同进制的数字

（1）二进制数值以 0b 开头

0b10;	// 2
0b1111;	// 15

（2）八进制数值以 0 开头

017;	// 15

（3）十六进制数值以 0x 开头

0xf;	// 15

4.5 一个特殊的数字型值 NaN

NaN 是 “not a number” 的意思，即 “不是一个数”，但它是一个数字类型的值。

typeof NaN;	// number

0 除以 0 的结果是 NaN，事实上，在数学运算中，若结果不能得到数字，其结果往往都是 NaN
NaN 有一个 “奇怪” 的性质：不自等（这个知识点将在后续课程中讲解）

0 / 0;	// NaN
5 - 3;	// 2
"我" - "你";	// NaN
"我" * "你";	// NaN
"我" / "你";	// NaN
"我" + "你";	// "我你"
NaN == NaN;   // false

再次强调：NaN 是一个值（特殊的值），不是类型。

唯一能判断 NaN 的方法是通过 isNaN() 函数：
isNaN(NaN); // true

5.Boolean（布尔）类型

在计算机领域，几乎所有的 “真” 和 “假” 都归为布尔类型值。

布尔类型值只有两个：true 和 false，分别表示 真 和 假。

typeof true;	// boolean
typeof false;	// boolean

布尔类型在关系运算和逻辑运算中广泛运用。

3 < 5;	 // true
5 > 3; 	 // true
5 >= 100; // false

注意：在 JS 中，1 可以 “代表” true，0或-0 可以 “代表” false，原理是类型的自动转换，但非常不建议以数字来代替布尔值！

6.Null 类型

null 表示 “空”，可以理解为它是 “空对象”。

当我们需要将对象销毁、数组销毁或者删除事件监听时，通常将它们设置为 null。

box.onclick = null;
// 删除点击事件

用 typeof 检测 null 结果为 object。

typeof null;	// object

狭义上，null 可以理解为 “空对象”，这样可以合理的解释为什么 null 的类型为 object。

但是准确的来说，null 不是一个 “对象”，它是一个独立的 “基本数据类型”。

7.Undefined 类型

一个没有赋值的变量的默认值是 undefined，而 undefined 的类型也是 undefined。

即：undefined 既是类型，又是值（且这种类型只有它自身一个值）。

typeof undefined;	// undefined

实际开发中，一般不会给某个变量赋值为 undefined，但是我们会检查一个变量的值是否为 undefined。

在变量声明提升的时候，会出现 undefined，要注意！

 *	null == undefined true
 *	null === undefined false

8.类型转换

8.1转成String

String()和toString()除了对于null和undefined的处理方式不一样，其它一样

使用 String() 函数

String() 函数是 JS 内置函数。

由于 String() 属于内置构造函数，所以 String() 的首字母 S 要大写。

（1）数字——>字符串

变为 “长得相同” 的字符串。

科学计数法和非 10 进制数字会转为 10 进制的标准值。

String(123);		// '123'
String(123.4);		// '123.4'
String(2e3);		// '2000'
Stiing(NaN);		// 'NaN'
String(Infinity);	// 'Infinity'
String(0xf);		// '15'

（2）布尔值——>字符串

变为 “长得相同” 的字符串。

String(true);		// 'true'
String(false);		// 'false'

（3）undefined 和 null——>字符串

变为 “长得相同” 的字符串。

String(undefined);	// 'undefined'
String(null);		// 'null'

使用 toString() 方法

toString() 是几乎所有值都有的方法，功能是将值转为字符串。

纯数字不能直接 “打点” 调用 toString() 方法，要把纯数字用 () 包裹起来，此时 JS 会提升该数字为一个对象（包装为对象）。

toString() 方法依旧是返回一个字符串，并不改变变量原有的类型！

8.2 转成Number

使用 Number() 函数

Number() 函数是 JS 内置函数。

由于 Number() 属于内置构造函数，所以 Number() 的首字母 N 要大写。

（1）字符串——>数字

Number('123');			 // 123
Number('123.45');		 // 123.45
Number('-123');			 // -123
Number('-123.45');		 // -123.45
// 字符串中不支持有非数值字符
Number('123年');	    	// NaN
Number('2e3');			// 2000
Number('');				// 0

// 字符串不支持是数学表达式
Number('1+1');			// NaN
// 除了字符串外，还可以直接放一个表达式
Number(1+1);			// 2

（2）布尔值——>数字

Number(true);			// 1
Number(false);			// 0

（3）undefined和null——>数字

Number(undefined);		// NaN
Number(null);			// 0

使用 parseInt() 函数

parseInt() 函数的功能是将 字符串 或 浮点数 转为 整数。

自动截掉第一个非数字字符之后的所有字符

parseInt('3.14');		  // 3
parseInt('-3.14');		  // -3
parseInt('3瓜皮.14');	// 3
parseInt(3.14);		  	  // 3
parseInt(-3.14);		  // -3

所有文字都将被截掉

parseInt('3.14是圆周率');	// 3

如果字符串以非数字开头，则转为 NaN

parseInt('圆周率是3.14');	// NaN
parseInt('一二三');		 // NaN

不存在 “四舍五入”

parseInt('3.99');		  // 3

true、false、undefined、null 转为 NaN

之所以会出现这种情况的原因是，parseInt() 的原理是，先将参数转换为字符串，再将字符串转为整数。

所以，true 等会先被转为 'true'。

parseInt(true);			// NaN
parseInt(false);		// NaN	
parseInt(undefined);	// NaN
parseInt(null);			// NaN

parseInt() 函数的特性会用于处理数字的净化。
parseInt('24px');	// 24
// 去除了单位，保留数值！

使用 parseFloat() 函数

parseFloat() 函数的功能是将字符串转为浮点数。

绝大部分原理与 parseInt() 类似。

parseFloat('3.14');		// 3.14
parseFloat(3.14);		// 3.14

parseFloat('3.14是圆周率');		// 3.14
parseFloat('3.14.15');		   // 3.14

parseFloat('3.99');			// 3.99
parseFloat('-3.99');		// -3.99

8.3 其他值——>布尔值

Boolean() 函数是 JS 内置函数。

由于 Boolean() 属于内置构造函数，所以 Boolean() 的首字母 B 要大写。

（1）数字——>布尔值

0 和 NaN 转为 false，其他数字都转为 true。

Boolean(123);			// true
Boolean(0);				// false
Boolean(NaN);			// false
Boolean(Infinity);		// true
Boolean(-Infinity);		// true

Infinity 属性用于存放表示正无穷大的数值。

（2）字符串——>布尔值

空字符串变为 false，其他都转为 true。

Boolean('');				// false
Boolean('abc');				// true
Boolean('false');			// true

（3）undefined和null——>布尔值

转为 false。

Boolean(undefined);				// false
Boolean(null);					// false