JavaScript 基础学习（个人笔记）

目录

本笔记内容主要来源于网络上的资料，经过我个人整理、归纳和总结。仅供个人学习参考，如有侵权，请联系删除

JavaScript 用法

中的 JavaScript

中的 JavaScript 函数

引入本地独立JS文件

引入网络来源文件 

JavaScript 输出

JavaScript 显示数据

使用 window.alert()

写到控制台

JavaScript 语法

JavaScript 字面量

JavaScript 变量

JavaScript 操作符

JavaScript 语句

JavaScript 关键字

JavaScript 数据类型

JavaScript 函数

JavaScript 注释

JavaScript 多行注释

在行末使用注释

JavaScript 变量

JavaScript 数据类型

声明（创建） JavaScript 变量

Value = undefined

 JavaScript 数据类型

JavaScript 拥有动态类型

字符串

数字

布尔

数组

JavaScript 对象

Undefined 和 Null

声明变量类型

JavaScript 作用域

JavaScript 局部作用域

JavaScript 全局变量

JavaScript 事件

HTML 事件

常见的HTML事件

JavaScript 模板字符串

语法

JavaScript 比较 和 逻辑运算符

比较运算符

比较运算符常见错误

逻辑运算符

条件运算符

语法

例子

JavaScript if...Else 语句

条件语句

if 语句

if...else 语句

语法

 if...else if...else 语句

语法

JavaScript switch 语句

switch 语句

JavaScript 循环

不同类型的循环

For 循环

For/In 循环

while 循环

do/while 循环

JavaScript typeof, null, 和 undefined

typeof 操作符

 null

undefined

JavaScript 类型转换

JavaScript 数据类型

typeof 操作符

JavaScript 类型转换

将数字转换为字符串

将布尔值转换为字符串

将日期转换为字符串

将字符串转换为数字

将布尔值转换为数字

将日期转换为数字

自动转换类型

JavaScript 错误 - throw、try 和 catch

 JavaScript 错误

JavaScript 抛出（throw）错误

try 和 catch

finally 语句

Throw 语句

JavaScript 表单

JavaScript 表单验证

HTML 表单自动验证

数据验证

HTML 约束验证

约束验证 HTML 输入属性

约束验证 CSS 伪类选择器

JavaScript 函数定义

函数声明

函数表达式

Function() 构造函数

箭头函数

函数显式参数(Parameters)与隐式参数(Arguments)

arguments 对象

---

 

本笔记内容主要来源于网络上的资料，经过我个人整理、归纳和总结。仅供个人学习参考，如有侵权，请联系删除

JavaScript 用法

HTML 中的 Javascript 脚本代码必须位于  标签之间。

Javascript 脚本代码可被放置在 HTML 页面的  和  部分中。

---

会告诉 JavaScript 在何处开始和结束。

---

中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 写文本：

实例

.
.

.
.

---

中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 部分。

实例

.
.

---

引入本地独立JS文件

实例

---

引入网络来源文件 

实例

---

JavaScript 输出

JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

---

使用 window.alert()

你可以弹出警告框来显示数据：

实例

---

写到控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。

---

JavaScript 语法

JavaScript 是一个脚本语言。

它是一个轻量级，但功能强大的编程语言。

---

JavaScript 字面量

在编程语言中，一般固定值称为字面量，如 3.14。

数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。

3.14

1001

123e5

字符串（String）字面量 可以使用单引号或双引号:

"John Doe"

'John Doe'

表达式字面量 用于计算：

5 + 6

数组（Array）字面量 定义一个数组：

[40, 100, 1, 5, 25, 10]

对象（Object）字面量 定义一个对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量 定义一个函数：

function myFunction(a, b) { return a * b;}

---

JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：

var x, length

x = 5

length = 6

变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。

---

JavaScript 操作符

JavaScript使用 算术运算符 来计算值:

(5 + 6) * 10

JavaScript使用赋值运算符给变量赋值：

x = 5
y = 6
z = (x + y) * 10

JavaScript语言有多种类型的运算符：

类型	实例	描述
赋值，算术和位运算符	=  +  -  *  /	在 JS 运算符中描述
条件，比较及逻辑运算符	==  != <  >	在 JS 比较运算符中描述

---

JavaScript 语句

在 HTML 中，JavaScript 语句用于向浏览器发出命令。

语句是用分号分隔：

x = 5 + 6;
y = x * 10;

---

JavaScript 关键字

JavaScript 关键字用于标识要执行的操作。

var 关键字告诉浏览器创建一个新的变量：

var x = 5 + 6;
var y = x * 10;

以下是 JavaScript 中最​​重要的保留关键字（按字母顺序）：

abstract	else	instanceof	super
boolean	enum	int	switch
break	export	interface	synchronized
byte	extends	let	this
case	false	long	throw
catch	final	native	throws
char	finally	new	transient
class	float	null	true
const	for	package	try
continue	function	private	typeof
debugger	goto	protected	var
default	if	public	void
delete	implements	return	volatile
do	import	short	while
double	in	static	with

---

JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

---

JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用：

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

---

JavaScript 注释

单行注释以 // 开头。

本例用单行注释来解释代码：

//单行注释

---

JavaScript 多行注释

多行注释以 /* 开始，以 */ 结尾。

下面的例子使用多行注释来解释代码：

/*
这是
多行
注释
*/

---

在行末使用注释

在下面的例子中，我们把注释放到代码行的结尾处：

var x=5; // 声明 x 并把 5 赋值给它 
var y=x+2; // 声明 y 并把 x+2 赋值给它

JavaScript 变量

---

变量是用于存储信息的"容器"。

实例

var x=5; var y=6; var z=x+y;

---

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）

---

JavaScript 数据类型

JavaScript 变量还能保存其他数据类型，比如文本值 (name="Bill Gates")。

在 JavaScript 中，类似 "Bill Gates" 这样一条文本被称为字符串。

JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。

当您向变量分配文本值时，应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

---

声明（创建） JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。

我们使用 var 关键词来声明变量：

var carname;

变量声明之后，该变量是空的（它没有值）。

如需向变量赋值，请使用等号：

carname="Volvo";

不过，您也可以在声明变量时对其赋值：

var carname="Volvo";

---

Value = undefined

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

在执行过以下语句后，变量 carname 的值将是 undefined：

var carname;

---

 JavaScript 数据类型

---

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

​

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

---

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

实例

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

变量的数据类型可以使用 typeof 操作符来查看：

实例

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

---

字符串

字符串是存储字符（比如 "Bill Gates"）的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

实例

var carname="Volvo XC60";
var carname='Volvo XC60';

您可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

实例

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

字符串断行需要使用反斜杠(\)，如下所示:

var x = "Hello 
\World!";

---

数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

实例

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

实例

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

---

布尔

布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

---

数组

下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者:

var cars=new Array("Saab","Volvo","BMW");

或者:

var cars=["Saab","Volvo","BMW"];

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

---

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

下面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

对象属性有两种寻址方式：

实例

name=person.lastname;
name=person["lastname"];

---

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

实例

cars=null;
person=null;

---

声明变量类型

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

局部变量：在函数中通过var声明的变量。

全局变量：在函数外通过var声明的变量。

没有声明就使用的变量，默认为全局变量，不论这个变量在哪被使用

在 ES6 中，提供了 let 关键字和 const 关键字。

let 的声明方式与 var 相同，用 let 来代替 var 来声明变量，就可以把变量限制在当前代码块中。

使用 const 声明的是常量，其值一旦被设定便不可被更改。

JavaScript 作用域

---

作用域是可访问变量的集合。

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

---

JavaScript 局部作用域

变量在函数内声明，变量为局部变量，具有局部作用域。

局部变量：只能在函数内部访问。

实例

// 此处不能调用 carName 变量 
function myFunction() { 
    var carName = "Volvo"; // 函数内可调用 carName 变量 
}

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

---

JavaScript 全局变量

变量在函数外定义，即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。 

实例

var carName = " Volvo"; 
// 此处可调用 carName 变量 
function myFunction() { 
    // 函数内可调用 carName 变量 
}

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

以下实例中 carName 在函数内，但是为全局变量。

实例

// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。

让我们认真看个例子就能明白之间的区别：

var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar();

// 结果是 1

假设JavaScript采用静态作用域，让我们分析下执行过程：

执行 foo 函数，先从 foo 函数内部查找是否有局部变量 value，如果没有，就根据书写的位置，查找上面一层的代码，也就是 value 等于 1，所以结果会打印 1。

假设JavaScript采用动态作用域，让我们分析下执行过程：

执行 foo 函数，依然是从 foo 函数内部查找是否有局部变量 value。如果没有，就从调用函数的作用域，也就是 bar 函数内部查找 value 变量，所以结果会打印 2。

前面我们已经说了，JavaScript采用的是静态作用域，所以这个例子的结果是 1。 

---

JavaScript 事件

---

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

---

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

• HTML 页面完成加载
• HTML input 字段改变时
• HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

实例

现在的时间是?

以上实例中，JavaScript 代码将修改 id="demo" 元素的内容。

在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

实例

现在的时间是?

不推荐使用 HTML 元素中可以添加事件属性的方式来添加属性。

注意，当在 JS 文件中为相关元素设置事件时，其写法与 HTML 事件属性写法相同，例如：

更换内容

在 JS 中则需要这样写：

var test = document.getElementById("test");
test.onclick = function changeContent(){
    //......
}

注意：在为元素添加事件句柄或者删除元素事件句柄的过程中，不要将 event 参数设置为 onclick，而必须写成 click，去掉事件名称中的 on 即可。

添加事件句柄函数原型:

element.addEventListener(event, function, [useCapture])

删除事件句柄的函数原型:

element.removeEventListener(event, function, [useCapture])

---

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

---

JavaScript 模板字符串

JavaScript 的模板字符串（Template Literals）是一种可以嵌入表达式的字符串字面量语法。它们使用反引号（```）来包围字符串，而不是常见的单引号（'）或双引号（"）。模板字符串提供了一种更简洁、更可读的方式来创建包含变量或表达式的字符串。

语法

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

参数

• string text：将成为模板字面量的一部分的字符串文本。几乎允许所有字符，包括换行符和其他空白字符。但是，除非使用了标签函数，否则无效的转义序列将导致语法错误。

• expression：要插入当前位置的表达式，其值被转换为字符串或传递给 tagFunction。

实例

let variable = `这是一个模板字符串。  
它可以跨越多行，并且可以包含${expression}来嵌入表达式。`;

在模板字符串中，${expression} 语法用于嵌入 JavaScript 表达式。当模板字符串被处理时，${expression} 会被其计算结果替换。 

模板字符串中可以同时使用单引号和双引号：

实例

let text = `He's often called "Runoob"`;

示例：

let name = "Alice"; 
let age = 25; 


let greeting = `你好, ${name}! 你今年 ${age} 岁了。`; 


console.log(greeting); // 输出: 你好, Alice! 你今年 25 岁了。

在这个示例中，${name} 和 ${age} 分别是变量 name 和 age 的值。当 greeting 变量被处理时，这些表达式会被它们各自的值替换。

模板字符串还可以嵌套其他字符串和表达式：

let items = ["苹果", "香蕉", "橙子"]; 


let list = `水果列表： 
${items[0]}, 
${items[1]}, 
${items[2]}`; 


console.log(list); 
// 输出: 
// 水果列表： 
// 苹果, 
// 香蕉, 
// 橙子

模板字符串提供了一种强大而灵活的方式来创建和操作字符串，特别是在需要嵌入变量或执行简单计算时。

JavaScript 比较 和 逻辑运算符

---

比较和逻辑运算符用于测试 true 或者 false。

---

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

运算符	描述	比较	返回值
==	等于	x==8	false
		x==5	true
===	绝对等于（值和类型均相等）	x==="5"	false
		x===5	true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true
		x!==5	false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

JavaScript中有两种相等运算符：==和===。它们的比较规则如下：

• ==是抽象相等运算符，它会在比较之前，尝试将两个操作数转换成相同的类型，然后再比较它们的值是否相等。例如，1 == "1"会返回true，因为字符串"1"会被转换成数字1，然后再比较。
• ===是严格相等运算符，它不会进行类型转换，而是直接比较两个操作数的类型和值是否完全相同。例如，1 === "1"会返回false，因为数字1和字符串"1"的类型不同，就算它们的值相同也不会返回true。

一般来说，建议使用===来进行比较，因为它可以避免一些意想不到的结果，例如：

• null == undefined会返回true，但是null === undefined会返回false。
• 0 == false会返回true，但是0 === false会返回false。
• NaN == NaN会返回false，但是NaN === NaN也会返回false。

抽象相等运算符在尝试将两个操作数转换成相同的类型时，会遵循以下的规则：

• 如果两个操作数都是原始类型，那么会按照以下的顺序进行类型转换：
  • 如果一个操作数是布尔值，那么会把它转换成数字，true转换成1，false转换成0。
  • 如果一个操作数是字符串，另一个操作数是数字，那么会把字符串转换成数字。
  • 如果一个操作数是null，另一个操作数是undefined，那么不进行类型转换，直接返回true。
  • 如果一个操作数是null或undefined，另一个操作数是非null或非undefined的原始值，那么不进行类型转换，直接返回false。
  • 如果两个操作数都是字符串，那么不进行类型转换，直接比较它们的字面值是否相等。
  • 如果两个操作数都是数字，那么不进行类型转换，直接比较它们的数值是否相等（注意NaN和任何值都不相等）。

例如："1" == true会返回true，因为true会转换成1，然后字符串"1"也会转换成1，所以两个1相等；同理，"0" == false也会返回true

• 如果两个操作数中有一个是对象类型，另一个是原始类型，那么会把对象类型的操作数转换成原始类型，然后再进行比较。对象类型的操作数会调用它的valueOf()方法或toString()方法（如果valueOf()方法不存在或返回的不是原始值），来得到一个原始值。例如，[1,2,3] == "1,2,3"会返回true，因为数组会调用toString()方法返回字符串"1,2,3"。
• 如果两个操作数都是对象类型，那么不进行类型转换，直接比较它们的引用是否相同。也就是说，只有当两个对象指向同一个内存地址时，才会返回true。例如，[1,2,3] == [1,2,3]会返回false，因为它们是两个不同的数组对象。

---

比较运算符常见错误

在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true：

var x = 10;
var y = "10";
if (x == y)

在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false：

var x = 10;
var y = "10";
if (x === y)

---

这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较:

以下实例会执行 alert 弹窗：

var x = 10;switch(x) {    
    case 10: alert("Hello");
}

以下实例由于类型不一致不会执行 alert 弹窗：

var x = 10;switch(x) {    
    case "10": alert("Hello");
}

---

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
||	or	(x==5 || y==5) 为 false
!	not	!(x==y) 为 true

---

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法

variablename=(condition)?value1:value2 

例子

实例

如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。

voteable=(age<18)?"年龄太小":"年龄已达到";

JavaScript if...Else 语句

---

条件语句用于基于不同的条件来执行不同的动作。

---

条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中，我们可使用以下条件语句：

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句 - 使用该语句来选择多个代码块之一来执行

---

if 语句

只有当指定条件为 true 时，该语句才会执行代码。

语法

if (condition)
{
    //当条件为 true 时执行的代码
}

---

if...else 语句

请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

语法

if (condition)
{
    //当条件为 true 时执行的代码
}
else
{
    //当条件不为 true 时执行的代码
}

---

 if...else if...else 语句

使用 if....else if...else 语句来选择多个代码块之一来执行。

语法

if (condition1)
{
    //当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    //当条件 2 为 true 时执行的代码
}
else
{
    //当条件 1 和 条件 2 都不为 true 时执行的代码
}

一个优化 if 的方法

可以这样写：

const condition = condition1
let obj = {
  'condition1' : () => { ... },
  'condition2' : () => { ... },
  'condition3' : () => { ... },
}
obj[condition]()

实例：

const condition = 2
let obj = {
  '1' : () => { document.write(1) },
  '2' : () => { document.write(2) },
  '3' : () => { document.write(3) },
}

obj[condition]()

---

JavaScript switch 语句

switch 语句用于基于不同的条件来执行不同的动作。

---

switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。

语法

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

JavaScript 循环

---

循环可以将代码块执行指定的次数。

---

不同类型的循环

JavaScript 支持不同类型的循环：

• for ：循环代码块一定的次数
• for/in ：循环遍历对象的属性
• while ：当指定的条件为 true 时循环指定的代码块
• do/while：同样当指定的条件为 true 时循环指定的代码块

4 种循环的适用场景：

•  for : 比较适合遍历数组,字符串等等。
•  for/in : 比较适合遍历对象，遍历对象时使用这个再合适不过了。
•  while : while 的话，与 for 的使用场景差不多。唯一不同的是，遍历的条件必须满足。
•  do/while : 至少执行一边的循环，遍历数组和字符串也是很方便。

---

For 循环

下面是 for 循环的语法：

for (初始化表达式; 条件; 迭代因子)
{
    被执行的代码块
}

实例

var size=[1,2,3,4,5,6,7] //申明一个数组

//for循环
for(var i=0; i

---

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

实例

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

---

while 循环

while 循环会在指定条件为真时循环执行代码块。

语法

while (条件)
{
    需要执行的代码
}

---

do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法

do
{
    需要执行的代码
}
while (条件);

实例

while 使用 length 属性循环数组

while 和 do/while 的区别 : do/while至少会执行一遍

var size=[1,2,3,4,5,6,7] ; //申明一个数组
var i=0;

//while循环
while( i < size.length ) { 
    document.write(size[i] + " ");
    i++;
}

document.write("
---------------
");

//do…..while循环
j=0
do{
    document.write(size[j] + " ");
    j++;
}
while( j

定义了数组后对数组进行赋值，中间如有某些下标未被使用（即未被赋值），在遍历的时候，采用一般的 for 循环和 for...in 循环得到的结果不同。

for...in 循环会自动跳过那些没被赋值的元素，而 for 循环则不会，它会显示出 undefined。

点击下面的按钮，循环遍历

点击这里

while遍历数组的例子中，如果数组中有 0，null，false，undefined 或者空字符串等在 js 中被认为等价于 false 的值，会提前结束遍历。改成判断数组长度即可避免该问题：

原代码：

while (cars[i])
{
    document.write(cars[i] + "
");
    i++;
}

更改为：

while (i < cars.length)
{
    document.write(cars[i] + "
");
    i++;
}

JavaScript typeof, null, 和 undefined

---

typeof 操作符

你可以使用 typeof 操作符来检测变量的数据类型。

实例

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。   

---

 null

在 JavaScript 中 null 表示 "什么都没有"。

null是一个只有一个值的特殊类型。表示一个空对象引用。

用 typeof 检测 null 返回是object。

你可以设置为 null 来清空对象:

实例

var person = null;           // 值为 null(空), 但类型为对象

---

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

实例

var person;                  // 值为 undefined(空), 类型是undefined

你可以设置为 undefined 来清空对象:

实例

var person = undefined;     // 值为 undefined, 类型为 undefined

---

 1、定义

•  （1）undefined：是所有没有赋值变量的默认值，自动赋值。
•  （2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。

2、何时使用null?

当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。

3、null 与 undefined 的异同点是什么呢？

共同点：都是原始类型，保存在栈中变量本地。

不同点：

（1）undefined——表示变量声明过但并未赋过值。

它是所有未赋值变量默认值，例如：

var a;    // a 自动被赋值为 undefined

（2）null——表示一个变量将来可能指向一个对象。

一般用于主动释放指向对象的引用，例如：

var emps = ['ss','nn'];
emps = null;     // 释放指向数组的引用

4、延伸——垃圾回收站

它是专门释放对象内存的一个程序。

•  （1）在底层，后台伴随当前程序同时运行；引擎会定时自动调用垃圾回收期；
•  （2）总有一个对象不再被任何变量引用时，才释放。

JavaScript 类型转换

---

Number() 转换为数字， String() 转换为字符串， Boolean() 转换为布尔值。

---

JavaScript 数据类型

在 JavaScript 中有 6 种不同的数据类型：

• string
• number
• boolean
• object
• function
• symbol

3 种对象类型：

• Object
• Date
• Array

2 个不包含任何值的数据类型：

• null
• undefined

---

typeof 操作符

你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

实例

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

请注意：

• NaN 的数据类型是 number
• 数组(Array)的数据类型是 object
• 日期(Date)的数据类型为 object
• null 的数据类型是 object
• 未定义变量的数据类型为 undefined

---

JavaScript 类型转换

JavaScript 变量可以转换为新变量或其他数据类型：

• 通过使用 JavaScript 函数
• 通过 JavaScript 自身自动转换

---

将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。

该方法可用于任何类型的数字，字母，变量，表达式：

实例

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回

Number 方法 toString() 也是有同样的效果。

实例

x.toString()
(123).toString()
(100 + 23).toString()

方法	描述
toExponential()	把对象的值转换为指数计数法。
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()	把数字格式化为指定的长度。

---

将布尔值转换为字符串

全局方法 String() 可以将布尔值转换为字符串。

String(false)        // 返回 "false"
String(true)         // 返回 "true"

Boolean 方法 toString() 也有相同的效果。

false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

---

将日期转换为字符串

Date() 返回字符串。

Date()      // 返回 Tue Feb 13 2024 20:09:31 GMT+0800 (中国标准时间)

全局方法 String() 可以将日期对象转换为字符串。

String(new Date())      // 返回 Tue Feb 13 2024 20:09:31 GMT+0800 (中国标准时间)

Date 方法 toString() 也有相同的效果。

实例

obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

---

将字符串转换为数字

全局方法 Number() 可以将字符串转换为数字。

字符串包含数字(如 "3.14") 转换为数字 (如 3.14).

空字符串转换为 0。

其他的字符串会转换为 NaN (不是个数字)。

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

方法	描述
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数。

---

将布尔值转换为数字

全局方法 Number() 可将布尔值转换为数字。

Number(false)     // 返回 0
Number(true)      // 返回 1

---

将日期转换为数字

全局方法 Number() 可将日期转换为数字。

d = new Date();
Number(d)          // 返回 1404568027739

日期方法 getTime() 也有相同的效果。

d = new Date();
d.getTime()        // 返回 1404568027739

---

自动转换类型

当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1" 
"5" - 1     // 返回 4         "5" 转换为 5

---

JavaScript 错误 - throw、try 和 catch

---

• try 语句测试代码块的错误。
• catch 语句处理错误。
• throw 语句创建自定义错误。
• finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

---

 JavaScript 错误

当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。

可能是语法错误，通常是程序员造成的编码错误或错别字。

可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。

可能是由于来自服务器或用户的错误输出而导致的错误。

当然，也可能是由于许多其他不可预知的因素。

---

JavaScript 抛出（throw）错误

当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

描述这种情况的技术术语是：JavaScript 将抛出一个错误。

---

try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

语法

try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

实例

var txt=""; 
function message() 
{ 
    try { 
        adddlert("Welcome guest!"); //故意在 try 块的代码中写了一个错字
    } catch(err) { 
        txt="本页有一个错误。\n\n"; 
        txt+="错误描述：" + err.message + "\n\n"; 
        txt+="点击确定继续。\n\n"; 
        alert(txt); 
    } 
}

finally 语句

finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

实例

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}

---

Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

语法

throw exception

异常可以是 JavaScript 字符串、数字、逻辑值或对象。

实例

本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：

function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

JavaScript 表单

---

JavaScript 表单验证

HTML 表单实例

名字: 

HTML 表单验证可以通过 JavaScript 来完成。

以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：

JavaScript 实例

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

---

HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：

实例

数据验证

数据验证用于确保用户输入的数据是有效的。

典型的数据验证有：

• 必需字段是否有输入?
• 用户是否输入了合法的数据?
• 在数字字段是否输入了文本?

大多数情况下，数据验证用于确保用户正确输入数据。

数据验证可以使用不同方法来定义，并通过多种方式来调用。

服务端数据验证是在数据提交到服务器上后再验证。

客户端数据验证是在数据发送到服务器前，在浏览器上完成验证。

---

HTML 约束验证

HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。

约束验证是表单被提交时浏览器用来实现验证的一种算法。

HTML 约束验证基于：

• HTML 输入属性
• CSS 伪类选择器
• DOM 属性和方法

约束验证 HTML 输入属性

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type	规定输入元素的类型

约束验证 CSS 伪类选择器

选择器	描述
:disabled	选取属性为 "disabled" 属性的 input 元素
:invalid	选取无效的 input 元素
:optional	选择没有"optional"属性的 input 元素
:required	选择有"required"属性的 input 元素
:valid	选取有效值的 input 元素

JavaScript 函数定义

---

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义，也可以是一个表达式。

---

函数声明

在之前的教程中，你已经了解了函数声明的语法 :

function functionName(parameters) {
  执行的代码
}

函数声明后不会立即执行，会在我们需要的时候调用到。

实例

function myFunction(a, b) {
    return a * b;
}

---

函数表达式

JavaScript 函数可以通过一个表达式定义。

函数表达式可以存储在变量中：

实例

var x = function (a, b) {return a * b};
var z = x(4, 3);

以上函数实际上是一个 匿名函数 (函数没有名称)。

函数存储在变量中，不需要函数名称，通常通过变量名来调用。

---

Function() 构造函数

在以上实例中，我们了解到函数通过关键字 function 定义。

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。

实例

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

---

函数可以在声明之前调用：

myFunction(5);

function myFunction(y) {
    return y * y;
}

使用表达式定义函数时无法提升。

---

箭头函数

ES6 新增了箭头函数。

箭头函数表达式的语法比普通函数表达式更简洁。

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

没有参数的函数应该写成一对圆括号:

() => {函数声明}

实例

// ES5 
var x = function(x, y) { return x * y; } 
// ES6 
const x = (x, y) => x * y;

有的箭头函数都没有自己的 this。 不适合定义一个 对象的方法。

当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

箭头函数是不能提升的，所以需要在使用之前定义。

使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。

如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯:

函数显式参数(Parameters)与隐式参数(Arguments)

在先前的教程中，我们已经学习了函数的显式参数:

functionName(parameter1, parameter2, parameter3) 
{ // 要执行的代码…… }

函数显式参数在函数定义时列出。

函数隐式参数在函数调用时传递给函数真正的值。

 

---

arguments 对象

JavaScript 函数有个内置的对象 arguments 对象。

arguments 对象包含了函数调用的参数数组。

通过这种方式你可以很方便的找到最大的一个参数的值：

实例

x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

或者创建一个函数用来统计所有数值的和：

实例

x = sumAll(1, 123, 500, 115, 44, 88);
 
function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}