devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Javascript 基础知识学习_javascript学习

作者：羊村懒王 | 2024-02-11 19:33:22

赞

踩

javascript学习

文章目录

Javascript 基础知识学习

参考自：https://www.w3cschool.cn/javascript/

javascript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

JavaScript 知识图谱

JavaScript 数组

在这里插入图片描述

Javascript 基本操作

在这里插入图片描述

JavaScript 变量

在这里插入图片描述

JavaScript 函数基础

在这里插入图片描述

JavaScript 运算符

在这里插入图片描述

JavaScript 流程语句

在这里插入图片描述

JavaScript 数据类型

在这里插入图片描述

JavaScript 正则表达式

在这里插入图片描述

JavaScript 字符串函数

在这里插入图片描述

Window 对象

在这里插入图片描述

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script> 和 </script> 之间的代码行包含了 JavaScript:

<script>
    alert("我的第一个 JavaScript");
</script>
// 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

  • 1
  • 2
  • 3
  • 4

<body> 中的 JavaScript

<!DOCTYPE html>
<html>
<body>
		<script>
		document.write("<h1>这是一个标题</h1>");
		document.write("<p>这是一个段落</p>");
		</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head> 中的 JavaScript 函数

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

该函数会在点击按钮时被调用

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

<body> 中的 JavaScript 函数

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

该函数会在点击按钮时被调用：

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
    <script src="myScript.js"></script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

你可以将脚本放置于 <head> 或者 <body>中 实际运行效果与您在 <script> 标签中编写脚本完全一致。

myScript.js 文件代码如下：

function myFunction() {
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; 
}
// 外部脚本不能包含 <script> 标签。

  • 1
  • 2
  • 3
  • 4

JavaScript 浏览器中执行

https://www.w3cschool.cn/javascript/javascript-5oi33l66.html

JavaScript 输出

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

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

严格来说，JavaScript 没有任何打印或者输出的函数，以上几种方式都只不过是一种数据展示的方法，最接近输出的方法应该是console，但这种方法只是一种调试辅助工具。

使用 window.alert()

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

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(*id*) 方法。

请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<!DOCTYPE html>
<html>
	<body>
		<h1>我的第一个 Web 页面</h1>
		<p id="demo">我的第一个段落</p>
		<script>
			document.getElementById("demo").innerHTML = "段落已修改。";
		</script>
	</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

以上 JavaScript 语句（在 <script> 标签中）可以在 web 浏览器中执行：

document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。该方法是 HTML DOM 中定义的。

innerHTML = “Paragraph changed.” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

写到 HTML 文档

使用 document.write() 方法将内容写到 HTML 文档中。此功能可用于写入文本和HTML。

出于测试目的，您可以将JavaScript直接写在HTML 文档中：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
	
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() 
{
    document.write(Date());
}
</script>
	
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

写到控制台

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

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head>
<body>
	
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
alert(c)
</script>
	
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

console.log() 方法能够让你看到你在页面中的输出内容，让你更容易调试javascript；与alert相比，console不会打断你页面的操作，console里面的内容非常丰富，你可以在控制台输入 console。程序中调试是测试，查找及减少bug(错误)的过程。

JavaScript 语法

JavaScript 字面量

在编程语言中，一个字面量是一个常量，如 3.14。

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

3.14
1001
123e5

  • 1
  • 2
  • 3

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

"John Doe"
'John Doe'

  • 1
  • 2

表达式字面量 用于计算：

5 + 6
5 * 10

  • 1
  • 2

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

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

  • 1

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

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

  • 1

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

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

  • 1
  • 2
  • 3

JavaScript 变量

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

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

var x, length
x = 5
length = 6

  • 1
  • 2
  • 3

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

JavaScript 操作符

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

(5 + 6) * 10

  • 1

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

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

  • 1
  • 2
  • 3

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

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

JavaScript 语句

在 HTML 中，JavaScript 语句向浏览器发出的命令。浏览器通过 JavaScript 语句明白要执行什么操作。

语句是用分号分隔：

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

  • 1
  • 2

JavaScript 关键词

JavaScript 语句通常以关键词为开头。 var 关键词告诉浏览器创建一个新的变量：

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

  • 1
  • 2

JavaScript 标识符

和其他任何编程语言一样，JavaScript 保留了一些标识符为自己所用。

JavaScript 同样保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。

JavaScript 标识符必须以字母、下划线（_）或美元符（$）开始。

后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开标识符和数字）。

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

abstractelseinstanceofsuper
booleanenumintswitch
breakexportinterfacesynchronized
byteextendsletthis
casefalselongthrow
catchfinalnativethrows
charfinallynewtransient
classfloatnulltrue
constforpackagetry
continuefunctionprivatetypeof
debuggergotoprotectedvar
defaultifpublicvoid
deleteimplementsreturnvolatile
doimportshortwhile
doubleinstaticwith

JavaScript 注释

不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略：

// 我不会执行

  • 1

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 通过对象字面量赋值

  • 1
  • 2
  • 3
  • 4
  • 5

数据类型的概念

编程语言中，数据类型是一个非常重要的内容。

为了可以操作变量，了解数据类型的概念非常重要。

如果没有使用数据类型，以下实例将无法执行：

16 + "Volvo"
// 16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢？
"16Volvo"

  • 1
  • 2
  • 3

你可以在浏览器尝试执行以上代码查看效果。

在接下来的章节中你将学到更多关于数据类型的知识。

JavaScript 函数

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

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

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

  • 1
  • 2
  • 3

JavaScript 对大小写敏感

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时，请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样，变量 myVariable 与 MyVariable 也是不同的。

**提示：**在本站的编程实战中，你可以通过练习理解JavaScript变量的大小写敏感性。

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符，包含标点等字符。

如需进一步了解，请学习我们的 完整 Unicode 参考手册。

JavaScript 中，常见的是驼峰法的命名规则，如 lastName (而不是lastname)。

JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “Hello Dolly” ：

document.getElementById("demo").innerHTML = "你好 Dolly.";

  • 1

分号 ;

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

例如:

a = 5;
b = 6;
c = a + b;

  • 1
  • 2
  • 3

下面这种写法同上:

a = 5; b = 6; c = a + b;

  • 1

您也可能看到不带有分号的案例。 在 JavaScript 中，用分号来结束语句是可选的。

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

浏览器按照编写顺序依次执行每条语句。

本例向网页输出一个标题和两个段落：

document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";

  • 1
  • 2

JavaScript 代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

本例向网页输出一个标题和两个段落：

function myFunction()
{
document.getElementById("demo").innerHTML="你好Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

  • 1
  • 2
  • 3
  • 4
  • 5

您将在稍后的章节学到更多有关函数的知识。

JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。

语句标识符是保留关键字不能作为变量名使用。

下表列出了 JavaScript 语句标识符 (关键字) ：

语句描述
break用于跳出循环。
catch语句块，在 try 语句块执行出错时执行 catch 语句块。
continue跳过循环中的一个迭代。
do … while执行一个语句块，在条件语句为 true 时继续执行该语句块。
for在条件语句为 true 时，可以将代码块执行指定的次数。
for … in用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function定义一个函数
if … else用于基于不同的条件来执行不同的动作。
return退出函数
switch用于基于不同的条件来执行不同的动作。
throw抛出（生成）错误 。
try实现错误处理，与 catch 一同使用。
var声明一个变量。
while当条件语句为 true 时，执行语句块。

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

var person="Hege";
var person = "Hege";

  • 1
  • 2

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行,是指一行代码过长不利于阅读。下面的例子会正确地显示：

document.write("你好 \ W3Cschool!");

  • 1

不过，您不能像这样折行：

document.write \ ("你好W3Cschool!");

  • 1

JavaScript 注释

JavaScript 注释可用于提高代码的可读性。

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

JavaScript 单行注释

单行注释以 // 开头。

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

// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落：
document.getElementById("myP").innerHTML="这是我的第一个段落。";

  • 1
  • 2
  • 3
  • 4

JavaScript 多行注释

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

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

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

JavaScript 变量

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

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

  • 1
  • 2
  • 3

就像代数那样

x=5
y=6
z=x+y

  • 1
  • 2
  • 3

在代数中，我们使用字母（比如 x）来保存值（比如 5）。

通过上面的表达式 z=x+y，我们能够计算出 z 的值为 11。

在 JavaScript 中，这些字母被称为变量。可以把变量看做存储数据的容器。

JavaScript 变量设置规则

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

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

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

JavaScript 数据类型

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

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

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

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

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

var pi=3.14;
var person="John Doe";
var answer='Yes I am!';

  • 1
  • 2
  • 3

声明（创建） JavaScript 变量

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

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

var carname;

  • 1

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

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

carname="Volvo";

  • 1

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

var carname="Volvo";

  • 1

在下面的例子中，我们创建了名为 carname 的变量，并向其赋值 “Volvo”，然后把它放入 id=“demo” 的 HTML 段落中：

<p id="demo"></p> var carname="Volvo"; document.getElementById("demo").innerHTML=carname;

  • 1

**提示：**你可以通过本站的JavaScript编程实战部分来练习如何声明JavaScript变量。

一条语句，多个变量

您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var lastname="Doe", age=30, job="carpenter";

  • 1

声明也可横跨多行：

var lastname="Doe",
age=30,
job="carpenter";

  • 1
  • 2
  • 3

Value = undefined

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

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

var carname;

  • 1

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失：

在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：

var carname="Volvo";
var carname;

  • 1
  • 2

JavaScript 算数

您可以通过 JavaScript 变量来做算数，使用的是 = 和 + 这类运算符：

y=5;
x=y+2;

  • 1
  • 2

JavaScript 数据类型

JavaScript有以下几种类型：字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

JavaScript 拥有动态类型

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

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

  • 1
  • 2
  • 3

JavaScript 字符串

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

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

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

  • 1
  • 2

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

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

  • 1
  • 2
  • 3

JavaScript 数字

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

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

  • 1
  • 2

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

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

  • 1
  • 2

JavaScript 布尔

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

 var x=true;
 var y=false;

  • 1
  • 2

布尔常用在条件测试中。

JavaScript 数组

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

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

  • 1
  • 2
  • 3
  • 4

或者 (condensed array):

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

  • 1

或者 (literal array):

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

  • 1

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

JavaScript 对象

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

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

  • 1

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

空格和折行无关紧要。声明可横跨多行：

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

  • 1
  • 2
  • 3
  • 4
  • 5

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

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

  • 1
  • 2

Undefined 和 Null

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

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

cars=null;
person=null;

  • 1
  • 2

声明变量类型

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

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

  • 1
  • 2
  • 3
  • 4
  • 5

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

**提示：**JavaScript具有隐含的全局概念，意味着你不声明的任何变量都会成为一个全局对象属性。

JavaScript 函数

在JavaScript中，函数即对象，可以随意地被程序操控，函数可以嵌套在其他函数中定义，这样可以访问它们被定义时所处的作用域中的任何变量。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>

<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

 function functionname() {
执行代码
 }

  • 1
  • 2
  • 3

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

**提示：**function 中的花括号是必需的，即使函数体内只包含一条语句，仍然必须使用花括号将其括起来。

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用。

您可以发送任意多的参数，由逗号 (,) 分隔：

 myFunction(argument1,argument2)

  • 1

当您声明函数时，请把参数作为变量来声明：

 function myFunction(var1,var2){
代码
 }

  • 1
  • 2
  • 3

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

上面的函数在按钮被点击时会提示 “Welcome Harry Potter, the Wizard”。

函数很灵活，您可以使用不同的参数来调用该函数，这样就会给出不同的消息：

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<button onclick="myFunction('Bob','Builder')">Try it</button>

  • 1
  • 2

根据您点击的不同的按钮，上面的例子会提示 “Welcome Harry Potter, the Wizard” 或 “Welcome Bob, the Builder”。

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值。

 function myFunction(){
var x=5;
return x;
}

  • 1
  • 2
  • 3
  • 4

上面的函数会返回值 5。

注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

函数调用将被返回值取代：

 var myVar=myFunction();

  • 1

myVar 变量的值是 5，也就是函数 “myFunction()” 所返回的值。

即使不把它保存为变量，您也可以使用返回值：

document.getElementById("demo").innerHTML=myFunction();

  • 1

“demo” 元素的 innerHTML 将成为 5，也就是函数 “myFunction()” 所返回的值。

您可以使返回值基于传递到函数中的参数：

计算两个数字的乘积，并返回结果：

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

document.getElementById("demo").innerHTML=myFunction(4,3);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

“demo” 元素的 innerHTML 将是：

12

  • 1

在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：

function myFunction(a,b){
    if (a>b){
        return;
    }
    x=a+b
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和。

局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

局部变量比同名全局变量的优先级高，所以局部变量会隐藏同名的全局变量。

全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

这条语句：

 carname="Volvo";

  • 1

将声明一个全局变量 carname，即使它在函数内执行。

JavaScript 作用域

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

在JavaScript中，能够定义全局作用域或者局部作用域。

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

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

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

JavaScript 局部作用域

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

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

// 此处不能调用 carName 变量

function myFunction() {
  var carName = "Volvo";

  // 函数内可调用 carName 变量

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

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

JavaScript 全局变量

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

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

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

  • 1
  • 2
  • 3
  • 4
  • 5

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

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

// 此处可调用 carName 变量

function myFunction() {
  carName = "Volvo";

  // 此处可调用 carName 变量

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

函数参数

函数参数只在函数内起作用，是局部变量。

HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

//此处可使用 window.carName

function myFunction() {
  carName = "Volvo";
}

  • 1
  • 2
  • 3
  • 4
  • 5

你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。 局部变量，包括 window 对象可以覆盖全局变量和函数。

在 ES6 中，提供了 let 关键字和 const 关键字。let 的声明方式与 var 相同，用 let 来代替 var 来声明变量，就可以把变量限制在当前代码块中。使用 const 声明的是常量，其值一旦被设定便不可被更改。

<script>
        const man="ta"
        document.write(man)
        man="nihao"
        document.write(man)
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

结果如下：

ta

  • 1

JavaScript 事件

事件是可以被 JavaScript 侦测到的行为。

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

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

HTML 事件

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

HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。

以下是 HTML 事件的实例：

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

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

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

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

单引号:

 <some-HTML-element some-event='some JavaScript'>

  • 1

双引号:

 <some-HTML-element some-event="some JavaScript">

  • 1

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

<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>

  • 1

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

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

<button onclick="this.innerHTML=Date()">The time is?</button>

  • 1

JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用：

<button onclick="displayDate()">The time is?</button>

  • 1

常见的HTML事件

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

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

更多事件列表: JavaScript 参考手册 - HTML DOM 事件。

JavaScript 可以做什么?

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 …

可以使用多种方法来执行 JavaScript 事件代码：

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 …

JavaScript 字符串

JavaScript 字符串用于存储和处理文本。
字符串可以存储一系列字符，如 “John Doe”。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：

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

  • 1
  • 2

你可以使用索引位置来访问字符串中的每个字符：

var character = carname[7];

  • 1

字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。

你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:

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

  • 1
  • 2
  • 3

你也可以在字符串添加转义字符来使用引号：

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

  • 1
  • 2

字符串长度

可以使用内置属性 length 来计算字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

  • 1
  • 2

特殊字符

在 JavaScript 中，字符串写在单引号或双引号中。

因为这样，以下实例 JavaScript 无法解析：

"We are the so-called "Vikings" from the north."

  • 1

字符串 "We are the so-called " 被截断。

如何解决以上的问题呢？可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号，如下:

"We are the so-called \"Vikings\" from the north." 

  • 1

反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：

转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符：

代码输出
’单引号
"双引号
\反斜杠
\n换行
\r回车
\ttab(制表符)
\b退格符
\f换页符

字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")

var x = "John";
var y = new String("John");
typeof x // returns String
typeof y // returns Object

  • 1
  • 2
  • 3
  • 4

不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：

var x = "John";
var y = new String("John");
(x === y) // is false because x is a string and y is an object.

  • 1
  • 2
  • 3

字符串属性和方法

原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。

原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

字符串方法我们将在下一章节中介绍。

字符串属性
属性描述
constructor返回创建字符串属性的函数
length返回字符串的长度
prototype允许您向对象添加属性和方法
字符串方法
Method描述
charAt()返回指定索引位置的字符
charCodeAt()返回指定索引位置字符的 Unicode 值
concat()连接两个或多个字符串，返回连接后的字符串
fromCharCode()将指定的 Unicode 值转换为字符串
indexOf()返回字符串中检索指定字符第一次出现的位置
lastIndexOf()返回字符串中检索指定字符最后一次出现的位置
localeCompare()用本地特定的顺序来比较两个字符串
match()找到一个或多个正则表达式的匹配
replace()替换与正则表达式匹配的子串
search()检索与正则表达式相匹配的值
slice()提取字符串的片断，并在新的字符串中返回被提取的部分
split()把字符串分割为子字符串数组
substr()从起始索引号提取字符串中指定数目的字符
substring()提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()把字符串转换为小写
toString()返回字符串对象值
toUpperCase()把字符串转换为大写
trim()移除字符串首尾空白
valueOf()返回某个字符串对象的原始值

JavaScript 运算符

本节将介绍JavaScript中的三种类型的运算符：算术运算符、赋值运算符以及字符串连接运算符。

  • 运算符 = 用于赋值。

  • 运算符 + 用于加值。

指定变量值，并将值相加：

y=5;
z=2;
x=y+z;

  • 1
  • 2
  • 3

在以上语句执行后，x 的值是：

7

  • 1

JavaScript 算术运算符

算术运算符用于执行变量与/或值之间的算术运算。 给定 x和y=5，下面的表格解释了这些算术运算符：

运算符描述例子x运算结果y运算结果
+加法x=y+275
-减法x=y-235
*乘法x=y*2105
/除法x=y/22.55
%取模（余数）x=y%215
++自增x=++y66
x=y++56
--自减x=--y44
x=y--54

JavaScript 赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

运算符例子等同于运算结果
=x=yx=5
+=x+=yx=x+yx=15
-=x-=yx=x-yx=5
*=x*=yx=x*yx=50
/=x/=yx=x/yx=2
%=x%=yx=x%yx=0

用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来（连接起来）

  • 1

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;

  • 1
  • 2
  • 3

txt3 运算结果如下:

What a verynice day

  • 1

要想在两个字符串之间增加空格，需要把空格插入一个字符串之中：

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;

  • 1
  • 2
  • 3

在以上语句执行后，变量 txt3包含的值是：

What a very nice day

  • 1

或者把空格插入表达式中：:

txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;

  • 1
  • 2
  • 3

在以上语句执行后，变量txt3 包含的值是：

What a very nice day

  • 1

对字符串和数字进行加法运算

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：

x=5+5;
y="5"+5;
z="Hello"+5;

  • 1
  • 2
  • 3

x,y, 和 z 输出结果为:

10
55
Hello5

  • 1
  • 2
  • 3

规则:如果把数字与字符串相加，结果将成为字符串！

JavaScript 比较和逻辑运算符

比较和逻辑运算符用于变量（或一些数据类型）之间的比较和逻辑推断。并返回比较或推断结果（返回真（True）或假（False））。

比较运算符

比较运算符在逻辑语句中使用，以测定变量或值是否相等。
给定x=5，下面的表格解释了比较运算符：

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

如何使用:可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动

if (age<18) x="Too young";

  • 1

逻辑运算符

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

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

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

提示：JavaScript逻辑运算符的优先级是：！、&& 、||。

条件运算符

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

语法

variablename=(condition)?value1:value2

  • 1

例子

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

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

  • 1

JavaScript 位运算符

JavaScript提供了一组位运算符，可以用来做简单的位运算。
与Java等语言不同，JavaScript的数值型默认是浮点型，在进行位运算的时候需要先转换为整型才能运算，所以JavaScript的位运算效率比较低。

运算符

运算符名称描述
&AND如果两位都是 1 则设置每位为 1
|OR如果两位之一为 1 则设置每位为 1
^XOR如果两位只有一位为 1 则设置每位为 1
~NOT反转所有位
<<零填充左位移通过从右推入零向左位移，并使最左边的位脱落。
>>有符号右位移通过从左推入最左位的拷贝来向右位移，并使最右边的位脱落。
>>>零填充右位移通过从左推入零来向右位移，并使最右边的位脱落。

实例:

操作结果等同于结果
5 & 110101 & 00010001
5150101
5 ^ 140101 ^ 00010100
~ 5-6~01011010
5 << 1100101 << 11010
5 >> 120101 >> 10010
5 >>> 120101 >>> 10010

JavaScript 使用 32 位按位运算数

JavaScript 将数字存储为 64 位浮点数，但所有按位运算都以 32 位二进制数执行。

在执行位运算之前，JavaScript 将数字转换为 32 位有符号整数。

执行按位操作后，结果将转换回 64 位 JavaScript 数。

上面的例子使用 4 位无符号二进制数。所以 ~ 5 返回 10。

由于 JavaScript 使用 32 位有符号整数，JavaScript 将返回 -6。

00000000000000000000000000000101 (5)

11111111111111111111111111111010 (~5 = -6)

有符号整数使用最左边的位作为减号。

位运算 AND

当对一对数位执行位运算 AND 时，如果数位均为 1 则返回 1。

单位示例：

运算结果
0 & 00
0 & 10
1 & 00
1 & 11

四位示例：

运算结果
1111 & 00000000
1111 & 00010001
1111 & 00100010
1111 & 01000100

位运算 OR

当对一对数位执行位运算 OR 时，如果其中一位是 1 则返回 1：

单位示例

运算结果
0 | 00
0 | 11
1 | 01
1 | 11

四位运算：

操作结果
1111 | 00001111
1111 | 00011111
1111 | 00101111
1111 | 01001111

位运算 XOR

当对一对数位进行位运算 XOR 时，如果数位是不同的则返回 1：

单位示例：

运算结果
0 ^ 00
0 ^ 11
1 ^ 01
1 ^ 10

四位示例：

运算结果
1111 ^ 00001111
1111 ^ 00011110
1111 ^ 00101101
1111 ^ 01001011

JavaScript 位运算 AND (&)

如果位数都是 1，则位运算 AND 返回 1：

十进制二进制
500000000000000000000000000000101
100000000000000000000000000000001
5 & 100000000000000000000000000000001 (1)

实例:

var x = 5 & 1;

  • 1

JavaScript 位运算 OR (|)

如果数位之一是 1，则位运算 OR 返回 1：

十进制二进制
500000000000000000000000000000101
100000000000000000000000000000001
5 | 100000000000000000000000000000101 (5)

实例:

var x = 5 | 1;

  • 1

JavaScript 位运算 XOR (^)

如果数位是不同的，则 XOR 返回 1：

十进制二进制数
500000000000000000000000000000101
100000000000000000000000000000001
5 ^ 100000000000000000000000000000100 (4)

实例:

var x = 5 ^ 1;

  • 1

JavaScript 位运算 NOT (~)

十进制二进制
500000000000000000000000000000101
~511111111111111111111111111111010 (-6)

实例:

var x = ~5;

  • 1

JavaScript（零填充）位运算左移（<<）

这是零填充的左移。一个或多个零数位从右被推入，最左侧的数位被移除：

十进制二进制
500000000000000000000000000000101
5 << 100000000000000000000000000001010 (10)

实例:

var x = 5 << 1;

  • 1

JavaScript（有符号）位运算右移（>>）

这是保留符号的右移。最左侧的数位被从左侧推入，最右侧的数位被移出：

十进制二进制
-511111111111111111111111111111011
-5 >> 111111111111111111111111111111101 (-3)

实例:

var x = -5 >> 1;

  • 1

JavaScript（零填充）右移（>>>）

这是零填充的右移。一个或多个零数位从左侧被推入，最右侧的数位被移出：

十进制二进制数
500000000000000000000000000000101
5 >>> 100000000000000000000000000000010 (2)

实例:

var x = 5 >>> 1;

  • 1

32-bit 有符号整数（二进制数）

仅设置一位的 32 位整数很好理解：

二进制表示十进制值
000000000000000000000000000000011
000000000000000000000000000000102
000000000000000000000000000001004
000000000000000000000000000010008
0000000000000000000000000001000016
0000000000000000000000000010000032
0000000000000000000000000100000064
多设置一些数位揭示了二进制的模式：
二进制表示十进制值
000000000000000000000000000001015 (4 + 1)
0000000000000000000000000010100040 (32 + 8)
0000000000000000000000000010110145 (32 + 8 + 4 + 1)
负数是正数的二进制补码加 1：
二进制表示十进制值
000000000000000000000000000001015
11111111111111111111111111111011-5
0000000000000000000000000010100040
11111111111111111111111111011000-40
11111111111111111111111111011001-41

把十进制转换为二进制

function dec2bin(dec){
    return (dec >>> 0).toString(2);
}

  • 1
  • 2
  • 3

把二进制转换为十进制

function bin2dec(bin){
    return parseInt(bin, 2).toString(10);
}

  • 1
  • 2
  • 3

JavaScript if…else 语句

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

条件语句

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

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

If 语句

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

语法:

if (condition){
 当条件为 true 时执行的代码 
}
// 请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

  • 1
  • 2
  • 3
  • 4

实例:
当时间小于 20:00 时，生成问候 “Good day”：

if (time<20){
  x="Good day";
}

  • 1
  • 2
  • 3

x 的结果是：

Good day

  • 1

请注意，在这个语法中，没有 …else…。您已经告诉浏览器只有在指定条件为 true 时才执行代码。

if…else 语句

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

语法:

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

实例:
当时间小于 20:00 时，生成问候 “Good day”，否则生成问候 “Good evening”。

if (time<20){
  x="Good day";
}
else{
  x="Good evening";
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

x 的结果是：

Good day

  • 1

Javascript三目运算（三元运算） 语句

与其他语言类似，JavaScript存在一个用于条件判断的三目(三元）运算符，它的基本使用方式是这样的：对于条件表达式b ? x : y，先计算条件b，然后进行判断。如果b的值为true，计算x的值，运算结果为x的值；否则，计算y的值，运算结果为y的值。一个条件表达式绝不会既计算x，又计算y。条件运算符是右结合的，也就是说，从右向左分组计算。例如，a ? b : c ? d : e将按a ? b : (c ? d : e)执行。

5 > 3 ? alert("5大于3") : alert("5小于3");

  • 1

注意：if…else与三目运算这两者的区别，总结为一句话：三目运算有返回值，if else没有返回值
例子1：

var n=1;
if(n>1){
    n=0;
}else{
    n++;
}
console.log(n);
//输出结果：2

var n=1;
n = n>1?0 : n++;
console.log(n);
//输出结果为：1

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

例子2：

var n=1;
if(n>1){
    n=0;
}else{
    ++n;
}
console.log(n);
//输出结果：2

var n=1;
n = n>1?0 : ++n; 
console.log(n); 
//输出结果为：2

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

if…else if…else 语句

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

语法:

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

实例:
如果时间小于 10:00，则生成问候 “Good morning”，如果时间大于 10:00 小于 20:00，则生成问候 “Good day”，否则生成问候 “Good evening”：

if (time<10){
  x="Good morning";
}
else if (time>=10 && time<20){
  x="Good day";
}
else{
  x="Good evening";
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

x 的结果是：

Good morning

  • 1

提示：在使用if、else if语句的时候需要注意它们中代码的执行顺序

JavaScript switch 语句

switch 语句用于在不同的条件执行不同的动作。搭配case和default使用（default可以认为是一个特殊的case，case对应一种或多种（default）情况，Switch语句没有case是没有办法体现其功能的）。

JavaScript switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。你可以在JavaScript编程实战中了解怎么使用switch语句进行多选项选择。

语法:

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

代码解释：

  • 计算一次 switch 表达式
  • 把表达式的值与每个case的值进行对比
  • 如果存在匹配，则执行关联代码

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行,因为默认情况下Switch会按顺序将所有匹配的case（default）执行完毕！

实例:
显示今天的星期名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等：

var day=new Date().getDay();
switch (day){
    case 0:
        x="Today it's Sunday";
        break;
    case 1:
        x="Today it's Monday";
        break;
    case 2:
        x="Today it's Tuesday";
        break;
    case 3:
        x="Today it's Wednesday";
        break;
    case 4:
        x="Today it's Thursday";
        break;
    case 5:
        x="Today it's Friday";
        break;
    case 6:
        x="Today it's Saturday";
        break;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

x 的运行结果：

Today it's Tuesday

  • 1

break 关键词

如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。

此举将停止代码块中更多代码的执行以及 case 测试。

如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。

break 能够节省大量执行时间，因为它会"忽略" switch 代码块中的其他代码的执行。

不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

default 关键词

请使用 default 关键词来规定匹配不存在时做的事情（default也是case，是一类特殊的case，即已有case情况外的case）：

实例:
如果今天不是星期六或星期日，则会输出默认的消息：

var day=new Date().getDay();
switch (day){
    case 6:
        x="Today it's Saturday";
        break;
    case 0:
        x="Today it's Sunday";
        break;
    default:
        x="Looking forward to the Weekend";
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

default不必是 switch 代码块中最后一个 case：

实例:

switch (new Date().getDay()){

    default: 
        text = "期待周末！";
        break;
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 default。

常见的代码块

有时您会需要不同的 case 来使用相同的代码。

在本例中，case 4 和 5 分享相同的代码块，而 0 和 6 分享另一段代码块：

实例:

switch (new Date().getDay()) {

    case 4:
    case 5:
        text = "周末快到了：）";
        break; 
    case 0:
    case 6:
        text = "今天是周末~";
         break;
    default: 
        text = "期待周末！";
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

Switching 的细节

  • 如果多种 case 匹配一个 case 值，则选择第一个 case。

  • 如果未找到匹配的 case，程序将继续使用默认 label。

  • 如果未找到默认 label，程序将继续 switch 后的语句。

严格的比较

Switch case 使用严格比较===。

值必须与要匹配的类型相同。

只有操作数属于同一类型时，严格比较才能为 true。

在这个例子中，x 将不匹配：

实例:

var x = "0";

switch (x) {
    case 0:
        text = "Off";
        break;
    case 1:
        text = "On";
        break;
    default:
        text = "No value found";
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

JavaScript for 循环

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

JavaScript 循环

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
我们可以这样输出数组的值：

一般写法：

document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

使用for循环

for (var i=0;i<cars.length;i++){
    document.write(cars[i] + "<br>");
}

  • 1
  • 2
  • 3

不同类型的循环

JavaScript 支持不同类型的循环：

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

for 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法：

for (语句 1; 语句 2; 语句 3){        
  被执行的代码块        
}

语句 1 -（代码块）开始前执行 starts.

语句 2 - 定义运行循环（代码块）的条件

语句 3 - 在循环（代码块）已被执行之后执行

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

实例:

for (var i=0; i<5; i++){
  x=x + "The number is " + i + "<br>";
}

  • 1
  • 2
  • 3

从上面的例子中，您可以看到：

  • 语句 1 在循环开始之前设置变量 (var i=0)。

  • 语句 2 定义循环运行的条件（i 必须小于 5）。

  • 语句 3 在每次代码块已被执行后增加一个值 (i++)。

语句 1

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。

语句 1 是可选的，也就是说不使用语句 1 也可以。

您可以在语句 1 中初始化任意（或者多个）值：

实例:

for (var i=0,len=cars.length; i<len; i++){
    document.write(cars[i] + "<br>");
}

  • 1
  • 2
  • 3

同时您还可以省略语句 1（比如在循环开始前已经设置了值时）：
实例:

var i=2,len=cars.length;
for (; i<len; i++){
    document.write(cars[i] + "<br>");
}

  • 1
  • 2
  • 3
  • 4

语句 2

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。

如果您省略了语句2，那么必须在循环内提供break。否则循环就无法停下来。这样有可能令浏览器崩溃。

语句 3

通常语句 3 会增加初始变量的值。

语句 3 也是可选的。

语句 3 有多种用法。增量可以是负数 (i–)，或者更大 (i=i+15)。

语句 3 也可以省略（比如当循环内部有相应的代码时）：

实例:

var i=0,len=cars.length;
for (; i<len; ){
    document.write(cars[i] + "<br>");
    i++;
}

  • 1
  • 2
  • 3
  • 4
  • 5

for/In 循环

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

实例:

var person={fname:"John",lname:"Doe",age:25};
for (x in person){
  txt=txt + person[x];
}

  • 1
  • 2
  • 3
  • 4

在JavaScript中，for in循环不仅可以遍历对象的属性，还可以遍历数组。

JavaScript while 循环

JavaScript while 循环的目的是为了反复执行语句或代码块。

只要指定条件为 true，循环就可以一直执行代码块。

while 循环

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

语法：

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

  • 1
  • 2
  • 3

实例:
本例中的循环将继续运行，只要变量 i 小于 5：

while (i<5){
  x=x + "The number is " + i + "<br>";
  i++;
}

  • 1
  • 2
  • 3
  • 4

如果您忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。

do/while 循环

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

语法:

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

  • 1
  • 2
  • 3

实例:
下面的例子使用 do/while 循环。该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行：

do{
  x=x + "The number is " + i + "<br>";
  i++;
}while (i<5);

  • 1
  • 2
  • 3
  • 4

别忘记增加条件中所用变量的值，否则循环永远不会结束！

比较 for 和 while

如果您已经阅读了前面那一章关于 for 循环的内容，您会发现 while 循环与 for 循环很像。

本例中的循环使用 for 循环来显示 cars 数组中的所有值：

实例:

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];){
    document.write(cars[i] + "<br>");
    i++;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

本例中的循环使用 while 循环来显示 cars 数组中的所有值：

实例:

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i]){
    document.write(cars[i] + "<br>");
    i++;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

JavaScript Break 和 Continue 语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

Break 语句

我们已经在本教程之前的章节中见到过 break 语句。它用于跳出 switch() 语句。

break 语句可用于跳出循环。

continue 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：

实例:

for (i=0;i<10;i++){
  if (i==3){
    break;
  }
  x=x + "The number is " + i + "<br>";
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

由于这个 if 语句只有一行代码，所以可以省略花括号：

for (i=0;i<10;i++){
  if (i==3) break;
  x=x + "The number is " + i + "<br>";
}

  • 1
  • 2
  • 3
  • 4

Continue 语句

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。 该例子跳过了值 3：

实例:

for (i=0;i<=10;i++){
    if (i==3) continue;
    x=x + "The number is " + i + "<br>";
}

  • 1
  • 2
  • 3
  • 4

注意：由于 break 语句的作用是跳出代码块，所以 break 可以使用于循环和 switch 等；而 continue 语句的作用是进入下一个迭代，所以 continue 只能用于循环的代码块。

JavaScript 标签

正如您在 switch 语句那一章中看到的，可以对 JavaScript 语句进行标记。

如需标记 JavaScript 语句，请在语句之前加上冒号：

label:
statements

  • 1
  • 2

break 和 continue 语句仅仅是能够跳出代码块的语句。

语法:

break labelname;
continue labelname;

  • 1
  • 2

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

实例:

cars=["BMW","Volvo","Saab","Ford"];
list:{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

JavaScript 类型转换

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

JavaScript 数据类型

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

  • string
  • number
  • boolean
  • object
  • function

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

请注意：

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

如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是 返回 Object。

你可以使用 constructor 属性来查看对象是否为数组 (包含字符串 “Array”):

<!DOCTYPE html>
<html>
<body>

<p>判断是否为数组。</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到匹配的字符串则返回 -1。
注意： indexOf() 方法区分大小写。

  • 1
  • 2
  • 3

你可以使用 constructor 属性来查看是对象是否为日期 (包含字符串 “Date”):

<!DOCTYPE html>
<html>
<body>

<p>判断是否为日期。</p>
<p id="demo"></p>
<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
document.write(myDate);  // Wed Nov 30 2022 11:33:32 GMT+0800 (中国标准时间)
document.write("<br></br>");
document.write(myDate.constructor); // function Date() { [native code] }
document.write("<br></br>");
document.write(myDate.constructor.toString().indexOf("Date")); // 9
document.write("<br></br>");
document.write(myDate.constructor.toString().indexOf("f")); // 0
function isDate(myDate) {
    document.write("<br></br>")
    return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

JavaScript 类型转换

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

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

将数字转换为字符串

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

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

<!DOCTYPE html>
<html>
<body>

<p> String() 方法可以将数字转换为字符串。</p>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
    String(x) + "<br>" +    // 将变量 x 转换为字符串并返回
    String(123) + "<br>" +  // 将数字 123 转换为字符串并返回
    String(100 + 23);       // 将数字表达式转换为字符串并返回
document.write(String(3.14));    // 3.14
document.write("<br></br>");     
document.write(String(3.14).constructor)   // function String() { [native code] }
document.write("<br></br>");
document.write(String(2e5));               // 200000
document.write("<br></br>");
document.write(String(2e5).constructor)    // function String() { [native code] }
</script>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

Number 方法 toString() 也是有同样的效果
实例：

<!DOCTYPE html>
<html>
<body>

<p>toString() 方法将数字转换为字符串。</p>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
    x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
document.write((3.14).toString());    // 3.14
document.write("<br></br>");     
document.write((3.14).toString().constructor) // function String() { [native code] }  
document.write("<br></br>");
document.write((2e5).toString());               // 200000
document.write("<br></br>");
document.write((2e5).toString().constructor)  // function String() { [native code] }  
</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

在 Number 方法 章节中，你可以找到更多数字转换为字符串的方法：

方法描述
toExponential()把对象的值转换为指数计数法。
toFixed()把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()把数字格式化为指定的长度。
document.write((3.14156).toPrecision())   // 3.14156 数字格式化，不指定保留长度为自身
document.write("<br></br>");
document.write((3.14156).toPrecision(4))  // 3.142 数字格式化，指定保留长度
document.write("<br></br>");
document.write((200000).toExponential())  // 2e+5 把对象的值转换为指数计数法。
document.write("<br></br>");
document.write((3.14156).toFixed())       // 3 数字格式化，不指定保留长度保留整数部分
document.write("<br></br>");
document.write((3.14156).toFixed(4))      // 3.1416 数字格式化，指定保留长度

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

将布尔值转换为字符串

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

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

  • 1
  • 2

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

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

  • 1
  • 2

将日期转换为字符串

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

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

  • 1

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

实例:

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

  • 1

在 Date 方法 章节中，你可以查看更多关于日期转换为字符串的函数：

方法描述
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

  • 1
  • 2
  • 3
  • 4

在 Number 方法 章节中，你可以查看到更多关于字符串转为数字的方法：

方法描述
parseFloat()解析一个字符串，并返回一个浮点数。
parseInt()解析一个字符串，并返回一个整数。
document.write(Number("3.14156"))   // 3.14156 
document.write("<br></br>");
document.write(Number("2e5"))  // 200000
document.write("<br></br>");
document.write(Number("88 99"))  // NaN
document.write("<br></br>");
document.write(Number("  "))       // 0
document.write("<br></br>");
document.write(parseFloat("3.14156")); // 3.14156 
document.write("<br></br>");
document.write(parseInt("3.14156")); // 3
document.write("<br></br>");
document.write(Number(false))       // 0
document.write("<br></br>");
document.write(Number(true))       // 1

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

一元运算符 +

Operator + 可用于将变量转换为数字：

实例:

var y = "5";      // y 是一个字符串
var x = + y;      // x 是一个数字

  • 1
  • 2

如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):

实例:

var y = "John";   // y 是一个字符串
var x = + y;      // x 是一个数字 (NaN)

  • 1
  • 2

将布尔值转换为数字

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

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

  • 1
  • 2

将日期转换为数字

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

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

  • 1
  • 2

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

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

  • 1
  • 2

自动转换类型 Type Conversion

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

以下输出结果不是你所期望的：

5 + null    // 返回 5         because null is converted to 0
"5" + null  // 返回"5null"   because null is converted to "null"
"5" + 1     // 返回 "51"      because 1 is converted to "1" 
"5" - 1     // 返回 4         because "5" is converted to 5

  • 1
  • 2
  • 3
  • 4

自动转换为字符串

当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
// if myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
// if myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

  • 1
  • 2
  • 3
  • 4
  • 5

数字和布尔值也经常相互转换：

// if myVar = 123             // toString 转换为 "123"
// if myVar = true            // toString 转换为 "true"
// if myVar = false           // toString 转换为 "false"

  • 1
  • 2
  • 3

null

在 JavaScript 中 null 表示 “什么都没有”，是一个只有一个值的特殊类型，表示一个空对象引用。

当设置为“null”时，可以用来清空对象：

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

  • 1

提示：你可以使用 typeof 检测 null 返回是object。

undefined

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

如果一个变量没有设置值的话，就会返回 undefined：

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

  • 1

JavaScript 正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换。

什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

语法
实例：

var patt = /w3cschool/i

  • 1

实例解析：

/w3cschool/i  是一个正则表达式。

w3cschool  是一个模式 (用于检索)。

i  是一个修饰符 (搜索不区分大小写)。

  • 1
  • 2
  • 3
  • 4
  • 5

使用字符串方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置。

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串。

search() 方法使用正则表达式

实例:
使用正则表达式搜索 “w3cschool” 字符串，且不区分大小写：

<!DOCTYPE html>
<html>
<body>

<p>搜索字符串 "w3cSchool", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "Visit W3cSchool!"; 
    var n = str.search(/w3cSchool/i);
    document.getElementById("demo").innerHTML = n;
}

document.write('=============')
document.write('<br> </br>')
var str01 = "nihao weilai";
var n1 = str01.search(/hao/i);
document.write(n1);    // 2
document.write('<br> </br>')
var n2 = str01.search(/ao/i);
document.write(n2);  // 3
</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

search() 方法使用字符串

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

实例:

var str01 = "nihao weilai";
document.write('<br> </br>')
var n3 = str01.search("hao");
document.write(n3);
document.write('<br> </br>')
var n4 = str01.search("ao");
document.write(n4);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

replace() 方法使用正则表达式

实例:
使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 w3cschool :

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "w3cschool");

  • 1
  • 2

结果输出为:

Visit w3cschool!

  • 1

replace() 方法使用字符串

replace() 方法将接收字符串作为参数：

var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "w3cschool");

  • 1
  • 2

正则表达式参数可用在以上方法中 (替代字符串参数)。
正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m执行多行匹配。

正则表达式模式

方括号用于查找某个范围内的字符：

表达式描述
[abc]查找方括号之间的任何字符。
[0-9]查找任何从 0 至 9 的数字。
`(xy)`

元字符是拥有特殊含义的字符：

元字符描述
\d查找数字。
\s查找空白字符。
\b匹配单词边界。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。
量词:
量词描述
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。

使用 RegExp 对象

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

使用 test()

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 “e”：

<!DOCTYPE html>
<html>
<body>

<script>
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));  // true
document.write("<br> </br>")
document.write(/e/.test("The best things in life are free!"));  // true
document.write("<br> </br>")
document.write(patt1.test("thingd"));   // false
</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

使用 exec()

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

以下实例用于搜索字符串中的字母 “e”:

<!DOCTYPE html>
<html>
<body>

<script>
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free")); // e
document.write("<br> </br>");
document.write(/e/.exec("The best things in life are free!"));  // e
document.write("<br> </br>");
document.write(patt1.exec("zzzz"));    // null
</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

使用 compile()

compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

<!DOCTYPE html>
<html>
<body>

<script>
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); // true
document.write("<br> </br>");
patt1.compile("z")  // 匹配字母"e" 改为匹配字母"z"
document.write(patt1.test("The best things in life are free")); // false
</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

完整的 RegExp 参考手册

https://www.w3cschool.cn/jsref/jsref-obj-regexp.html

JavaScript正则表达式在线测试工具

https://www.w3cschool.cn/tools/index?name=javascriptregex

JavaScript 错误处理（Throw、Try 和 Catch）

throw、try 和 catch

  • try 语句测试代码块的错误。

  • catch 语句处理错误。

  • throw 语句创建自定义错误。

JavaScript 错误

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

可能是语法错误，通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
可能是由于来自服务器或用户的错误输出而导致的错误。
当然，也可能是由于许多其他不可预知的因素。

  • 1
  • 2
  • 3
  • 4

JavaScript 抛出（throw）错误

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

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

JavaScript try 和 catch

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

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

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

语法:

 try{
   //在这里运行代码
}catch(err){
   //在这里处理错误
}

  • 1
  • 2
  • 3
  • 4
  • 5

实例:
在下面的例子中，我们故意在 try 块的代码中写了一个错字。

catch 块会捕捉到 try 块中的错误，并执行代码来处理它。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var txt="";
function message(){
	try {
		adddlert("Welcome guest!");
	}
	catch(err) {
		txt="本页有一个错误。\n\n";
		txt+="错误描述：" + err.message + "\n\n";
		txt+="点击确定继续。\n\n";
		alert(txt);
	}
}
</script>
</head>
<body>
<script>
    try {
        document.write(n)
    }
    catch(err) {
        document.write(err.message) // n is not defined
        document.write("<br> </br>")
    }
</script>
<input type="button" value="查看消息" onclick="message()" />

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

Throw 语句

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

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

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

语法:

throw exception 

  • 1

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function myFunction(){
	try{ 
		var x=document.getElementById("demo").value;
		if(x=="")    throw "值为空";
		if(isNaN(x)) throw "不是数字";
		if(x>10)     throw "太大";
		if(x<5)      throw "太小";
		if(x>=5 && x<=10) throw "合适";
	}
	catch(err){
		var y=document.getElementById("mess");
		if (err === "合适") {
		   y.innerHTML="正确：" + err + "。";
		}
		else {
		   y.innerHTML="错误：" + err + "。";
		}
	}
}
</script>
</head>
<body>

<h1>我的第一个 JavaScript</h1>
<p>请输出一个 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="mess"></p>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

JavaScript 调试

在编写 JavaScript 时，如果没有调试工具将是一件很痛苦的事情。

JavaScript 调试

没有调试工具是很难去编写 JavaScript 程序的。

你的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现。

通常，如果 JavaScript 出现错误，是不会有提示信息，这样你就无法找到代码错误的位置。

JavaScript 调试工具

在程序代码中寻找错误叫做代码调试。

调试很难，但幸运的是，很多浏览器都内置了调试工具。

内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。

有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。

浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 “Console” 。

console.log() 方法

如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：

实例:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

设置断点

在调试窗口中，你可以设置 JavaScript 代码的断点。

在每个断点上，都会停止执行 JavaScript 代码，以便于我们检查 JavaScript 变量的值。

在检查完毕后，可以重新执行代码（如播放按钮）。

debugger 关键字

debugger 关键字用于停止执行 JavaScript，并调用调试函数。

这个关键字与在调试工具中设置断点的效果是一样的。

如果没有调试可用，debugger 语句将无法工作。

开启 debugger ，代码在第三行前停止执行。

实例:

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

  • 1
  • 2
  • 3

主要浏览器的调试工具

通常，浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 “Console” 。

各浏览器的步骤如下:

Chrome 浏览器

打开浏览器。
在菜单中选择工具。
在工具中选择开发者工具。
最后，选择 Console。

Firefox 浏览器

打开浏览器。
访问页面:
http://www.getfirebug.com。
按照说明 :
安装 Firebug。

Internet Explorer 浏览器。

打开浏览器。
在菜单中选择工具。
在工具中选择开发者工具。
最后，选择 Console。

Opera

打开浏览器。
Opera 的内置调试工具为 Dragonfly，详细说明可访问页面:
http://www.opera.com/dragonfly/。

Safari

打开浏览器。
访问页面:
http://extentions.apple.com。
按说明操作：
install Firebug Lite。

扩展阅读
Firebug教程：使用Firebug调试JavaScript:https://www.w3cschool.cn/firebug/firebug-javascript-debug.html

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用 JavaScript 来验证其正确性：

  • 验证表单数据是否为空？
  • 验证输入是否是一个正确的email地址？
  • 验证日期是否输入正确？
  • 验证表单输入内容是否为数字型？

必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
alert(x.length)
if (x==null || x==""){
  alert("姓必须填写");
  return false;
  }
else if (x.length > 5) {
  alert("姓超长");
  return false;
  }
else {
    return true;
}
}
</script>
</head>
<body>
	
<form name="myForm" action="/statics/demosource/demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
	
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function validateForm(){
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
		alert("不是一个有效的 e-mail 地址");
  		return false;
	}
	else{
  	    alert("email 地址有效");
  	    return true;
  	   }
}
</script>
</head>
<body>
	
<form name="myForm" action="demo-form" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
	
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

数字验证

下面的函数检查输入的数据是否是1~10之间的数字。假如输入的不为数字或不是，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post"> 
    <strong>请输入1到10之间的数字：</strong>
    <input id="number">
    <button type="button" onclick="myFunction()">提交</button>
  </form>

  <script type="text/javascript">
    function myFunction() {


      var x = document.getElementById("number").value;//获取id="number"的值
      //如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误
      if (isNaN(x) || x < 1 || x > 10) {
        alert("您输入有误，请输入1到10之间的数字！！！");
        return false;
      } else {
        alert("您输入正确");
        return true;
      }
    }

  </script>
</body>

</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

JavaScript 保留关键字

保留关键字在意思上表达成为将来的关键字而保留的单词。

在 JavaScript 中，一些标识符是保留关键字，不能用作变量名或函数名。

JavaScript 标准

所有的现代浏览器完全支持 ECMAScript 3（ES3，JavaScript 的第三版，从 1999 年开始）。

ECMAScript 4（ES4）未通过。

ECMAScript 5（ES5，2009 年发布），是 JavaScript 最新的官方版本。

随着时间的推移，我们开始看到，所有的现代浏览器已经完全支持 ES5。

JavaScript 保留关键字

Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

abstractargumentsbooleanbreakbyte
casecatchcharclass*const
continuedebuggerdefaultdeletedo
doubleelseenum*evalexport*
extends*falsefinalfinallyfloat
forfunctiongotoifimplements
import*ininstanceofintinterface
letlongnativenewnull
packageprivateprotectedpublicreturn
shortstaticsuper*switchsynchronized
thisthrowthrowstransienttrue
trytypeofvarvoidvolatile
whilewithyield

* 标记的关键字是 ECMAScript5 中新添加的。

JavaScript 对象、属性和方法

您也应该避免使用 JavaScript 内置的对象、属性和方法的名称作为 Javascript 的变量或函数名：

ArrayDateevalfunctionhasOwnProperty
InfinityisFiniteisNaNisPrototypeOflength
MathNaNnameNumberObject
prototypeStringtoStringundefinedvalueOf

Java 保留关键字

JavaScript 经常与 Java 一起使用。您应该避免使用一些 Java 对象和属性作为 JavaScript 标识符：

getClassjavaJavaArrayjavaClassJavaObjectJavaPackage

Windows 保留关键字

JavaScript 可以在 HTML 外部使用。它可在许多其他应用程序中作为编程语言使用。

在 HTML 中，您必须（为了可移植性，您也应该这么做）避免使用 HTML 和 Windows 对象和属性的名称作为 Javascript 的变量及函数名：

alertallanchoranchorsarea
assignblurbuttoncheckboxclearInterval
clearTimeoutclientInformationcloseclosedconfirm
constructorcryptodecodeURIdecodeURIComponentdefaultStatus
documentelementelementsembedembeds
encodeURIencodeURIComponentescapeeventfileUpload
focusformformsframeinnerHeight
innerWidthlayerlayerslinklocation
mimeTypesnavigatenavigatorframesframeRate
hiddenhistoryimageimagesoffscreenBuffering
openopeneroptionouterHeightouterWidth
packagespageXOffsetpageYOffsetparentparseFloat
parseIntpasswordpkcs11pluginprompt
propertyIsEnumradioresetscreenXscreenY
scrollsecureselectselfsetInterval
setTimeoutstatussubmittainttext
textareatopunescapeuntaintwindow

HTML 事件句柄

除此之外，您还应该避免使用 HTML 事件句柄的名称作为 Javascript 的变量及函数名。

实例：

onbluronclickonerroronfocus
onkeydownonkeypressonkeyuponmouseover
onloadonmouseuponmousedownonsubmit

注意：在JavaScript中关键字不能用作变量名或者函数名，否则可能会得到错误消息，例如 ““Identifier Expected”（应该有标识符、期望标识符）”。

非标准 JavaScript

除了保留关键字，在 JavaScript 实现中也有一些非标准的关键字。

一个实例是 const 关键字，用于定义变量。 一些 JavaScript 引擎把 const 当作 var 的同义词。另一些引擎则把 const 当作只读变量的定义。

Const 是 JavaScript 的扩展。JavaScript 引擎支持它用在 Firefox 和 Chrome 中。但是它并不是 JavaScript 标准 ES3 或 ES5 的组成部分。建议：不要使用它。

JavaScript JSON

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

什么是 JSON?

  • JSON 英文全称 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言 *
  • JSON 易于理解。

JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。

JSON 实例

以下 JSON 语法定义了 employees 对象: 3 条员工记录（对象）的数组:

JSON Example

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

  • 1
  • 2
  • 3
  • 4
  • 5

JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

JSON 语法规则

  • 数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组

JSON 数据 - 一个名称对应一个值

JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。

键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"firstName":"John"

  • 1

JSON 对象

JSON 对象保存在大括号内。

就像在 JavaScript 中, 对象可以保存多个 键/值 对：

{"firstName":"John", "lastName":"Doe"}

  • 1

JSON 数组

JSON 数组保存在中括号内。

就像在 JavaScript 中, 数组可以包含对象：

"employees":[        
    {"firstName":"John", "lastName":"Doe"},        
    {"firstName":"Anna", "lastName":"Smith"},     
    {"firstName":"Peter", "lastName":"Jones"}        
]

  • 1
  • 2
  • 3
  • 4
  • 5

在以上实例中，对象 “employees” 是一个数组。包含了三个对象。

每个为个对象为员工的记录（姓和名）。

JSON 字符串转换为 JavaScript 对象

通常我们从服务器中读取 JSON 数据，并在网页中显示数据。

简单起见，我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):

首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

  • 1
  • 2
  • 3
  • 4

然后，使用 JavaScript 内置函数 JSON.parse()将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

  • 1

最后，在你的页面中使用新的 JavaScript 对象：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h2>为 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script>
var text = '{"employees":[' +
	'{"firstName":"John","lastName":"Doe" },' +
	'{"firstName":"Anna","lastName":"Smith" },' +
	'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
	obj.employees[1].firstName + " " + obj.employees[1].lastName;
document.write(obj.employees[0].firstName);
</script>

</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

javascript:void(0) 含义

我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

下面的代码创建了一个超级链接，当用户点击以后不会发生任何事。

实例:

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
</head> 
<body>
	
    <a href="javascript:void(0)">单此处什么也不会发生</a>
    <br> </br>
    <a href="https://www.w3cschool.cn/javascript/js-form-validation.html">跳转js 表单教程</a>
	
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。

以下实例中，在用户点击链接后显示警告信息：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
	
<p>点击以下链接查看结果：</p>
<a href="javascript:void(alert('Warning!!!'))">1.点我!</a>  <!-- 1 --> 
<br> </br>
<a href="javascript:(alert('Warning!!!'))">2.点我!</a>  <!--与1 效果一样 -->
<br> </br>
<a href="alert('Warning!!!')">3.点我!</a>  <!-- 不起作用 -->
	
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

以下实例中参数 a 将返回 undefined :

实例:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<script type="text/javascript">
function getValue(){
   var a,b,c;
   a = void ( b = 5, c = 7 );
   d = (b = 5, c = 7);
   document.write('a = ' + a + ' b = ' + b +' c = ' + c );
   document.write('<br> </br>');
   document.write('d = ' + d + ' b = ' + b +' c = ' + c );
   e = (4,5);
   document.write('<br> </br>');
   document.write(e);
   document.write('<br> </br>');
   document.write("!!!注意这种写法（）从左往右执行")
}
</script>
</head>
<body>
	
<p>点击以下按钮查看结果：</p>
<form>
<input type="button" value="点我" onclick="getValue();" />
</form>
	
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>点击以下链接查看不同效果：</p>
<a href="javascript:void(0);">点我没有反应的!</a>
<br>
<a href="#pos">点我定位到指定位置!</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="pos">尾部定位点</p>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

注意：void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行

JavaScript 代码规范

2022-04-06 15:08 更新
所有的 JavaScript 项目适用同一种规范。

JavaScript 代码规范
代码规范通常包括以下几个方面:

  • 变量和函数的命名规则
  • 空格，缩进，注释的使用规则。
  • 其他常用规范……

规范的代码可以更易于阅读与维护。
代码规范一般在开发前规定，可以跟你的团队成员来协商设置。

变量名

变量名推荐使用驼峰法来命名(camelCase):

firstName = "John";
lastName = "Doe";

price = 19.90;
tax = 0.20;

fullPrice = price + (price * tax);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在JavaScript中定义变量名时，还应该注意以下事项：

  • 变量名应该区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号；
  • 变量命名长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型；
  • 变量名的命名应该是有意义的；
  • 变量名不能为JavaScript中的关键词、保留字全名；
  • 变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法。

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格:

实例:

var x = y + z;
var values = ["Volvo", "Saab", "Fiat"];

  • 1
  • 2

代码缩进

通常使用 4 个空格符号来缩进代码块：

函数:

function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}

  • 1
  • 2
  • 3

注意:不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。

语句规则

简单语句的通用规则:

  • 一条语句通常以分号作为结束符。
    实例:
var values = ["Volvo", "Saab", "Fiat"];

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

复杂语句的通用规则:

  • 将左花括号放在第一行的结尾。
  • 左花括号前添加一空格。
  • 将右花括号独立放在一行。
  • 不要忘记以分号结束一个复杂的声明。
 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

  • 1
函数:
function toCelsius(fahrenheit) {
    return (5 / 9) * (fahrenheit - 32);
}
循环:
for (i = 0; i < 5; i++) {
    x += i;
}
条件语句:
if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

对象规则

对象定义的规则:

  • 将左花括号与类名放在同一行。
  • 冒号与属性值间有个空格。
  • 字符串使用双引号，数字不需要。
  • 最后一个属性-值对后面不要添加逗号。
  • 将右花括号独立放在一行，并以分号作为结束符号。

实例:

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

短的对象代码可以直接写成一行:

实例:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

  • 1

每行代码字符小于 80

为了便于阅读每行字符建议小于数 80 个。

如果一个 JavaScript 语句超过了 80 个字符，建议在运算符或者逗号后换行。

实例:

document.getElementById("demo").innerHTML =
    "Hello W3Cschool.";

  • 1
  • 2

注意：在函数声明、函数表达式、函数调用、对象创建、数组创建、for 语句等场景中，不允许在 , 或 ; 前换行。

命名规则

一般很多代码语言的命名规则都是类似的，例如:

  • 变量和函数为驼峰法（ camelCase）
  • 全局变量为大写 (UPPERCASE )
  • 常量 (如 PI) 为大写 (UPPERCASE )

变量命名你是否使用这几种规则： hyp-hens, camelCase, 或under_scores ?

HTML 和 CSS 的横杠(-)字符:

HTML5 属性可以以 data- (如：data-quantity, data-price) 作为前缀。

CSS 使用 - 来连接属性名 (font-size)。

注意:- 通常在 JavaScript 中被认为是减法，所以不允许使用.

下划线:

很多程序员比较喜欢使用下划线(如：date_of_birth), 特别是在 SQL 数据库中。

PHP 语言通常都使用下划线。

帕斯卡拼写法(PascalCase):

主要的特点是将描述变量作用所有单词的首字母大写,然后直接连接起来,单词之间没有连接符。也称大骆驼拼写法。
帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。

驼峰法：

骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母，例如：myFirstName、myLastName，这样的变量名看上去就像骆驼峰一样此起彼伏，故得名。
JavaScript 中通常推荐使用驼峰法，jQuery 及其他 JavaScript 库都使用驼峰法。

注意:变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。

HTML 载入外部 JavaScript 文件

使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):

<script src="myscript.js">

  • 1

使用 JavaScript 访问 HTML 元素

一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

以下两个 JavaScript 语句会输出不同结果:

实例:

var obj =getElementById("Demo")
var obj = getElementById("demo")

  • 1
  • 2

HTML 与 JavaScript 尽量使用相同的命名规则。

文件扩展名

HTML 文件后缀可以是 .html (或r .htm)。

CSS 文件后缀是 .css 。

JavaScript 文件后缀是 .js 。

使用小写文件名

大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。

你必须保持统一的风格，我们建议统一使用小写的文件名。

JavaScript 格式化整理工具

在线JavaScript 格式化整理工具:https://www.w3cschool.cn/tools/index?name=Jsdecoder

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/76697
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号