学习笔记之JavaScript——知识点（3）

JavaScript 函数语法

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

function functionname()
{
    执行代码
}

当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

---

调用带参数的函数

在调用函数时，可以向其传递值，这些值被称为参数。
这些参数可以在函数中使用。
可以发送任意多的参数，由逗号 (,) 分隔。

function myFunction(var1,var2)
{
    代码
}

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

---

带有返回值的函数

通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。

语法
function myFunction()
{
    var x=5;
    return x;
}
上面的函数会返回值 5。

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

局部 JavaScript 变量

- 在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
- 可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除。

全局 JavaScript 变量

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

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。
- 局部变量会在函数运行以后被删除。
- 全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

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

---

JavaScript 作用域

在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。

JavaScript 局部作用域
变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。
*因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。*
函数参数
函数参数只在函数内起作用，是局部变量。

JavaScript 全局变量
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。 


JavaScript 变量生命周期
JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。

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

---

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

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

  以下是 HTML 事件的实例：
  - HTML 页面完成加载
  - HTML input 字段改变时
  - HTML 按钮被点击
  通常，当事件发生时，你可以做些事情。
  

  在事件触发时 JavaScript 可以执行一些代码。
  HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

  单引号:
  <some-HTML-element some-event='some JavaScript'>
  双引号:
  <some-HTML-element some-event="some JavaScript">

  通过使用 this.innerHTML，代码将修改自身元素的内容 。
  JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用。

常见的HTML事件

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

---

JavaScript 字符串

• 使用单引号或双引号。
• 可以使用索引位置来访问字符串中的每个字符。
• 字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。
  可以在字符串中使用引号，字符串中的引号不能与字符串的引号相同。
• 字符串长度
  通过使用内置属性 length 来计算字符串的长度。

可以在字符串添加转义字符来使用引号。
- 反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符。

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

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

• 也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String(“John”)

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

• === 为绝对相等，即数据类型与值都必须相等。

字符串属性和方法

• 原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。
• 原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

字符串属性

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

字符串方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
replace()	在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白
valueOf()	返回某个字符串对象的原始值。

---

JavaScript 运算符

**运算符 = 用于赋值。**
**运算符 + 用于加值。**

JavaScript 算术运算符

y=5:

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y	6	6
		x=y++	5	6
–	自减	x=–y	4	4
		x=y–	5	4

JavaScript 赋值运算符

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

x=10 和 y=5：

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

用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串变量连接起来，请使用 + 运算符。
要想在两个字符串之间增加空格，需要把空格插入一个字符串之中。

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

• 两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串。

JavaScript 比较 和 逻辑 运算符

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

x=5:

运算符	描述	比较	返回值
==	等于	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

逻辑运算符

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

x=6 以及 y=3:

条件运算符

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

语法
variablename=(condition)?value1:value2 

---

JavaScript 条件语句

为不同的决定来执行不同的动作,可以在代码中使用条件语句来完成该任务。

在 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 时执行的代码
}

JavaScript switch 语句

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

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

工作原理： 
首先设置表达式 n（通常是一个变量）。 
随后表达式的值会与结构中的每个 case 的值做比较。 
如果存在匹配，则与该 case 关联的代码块会被执行。使用 break 来阻止代码自动地向下一个 case 运行。

default 关键词
请使用 default 关键词来规定匹配不存在时做的事情：

---

JavaScript 循环

JavaScript 支持不同类型的循环：
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块

For 循环

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}
语句 1 （代码块）开始前执行 starts.
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行

***语句1***
通常使用 语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的，也就是说不使用语句 1 也可以。
可以在语句 1 中初始化任意（或者多个）值。

***语句2***
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。 
*如果省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。*

***语句3***
通常语句 3 会增加初始变量的值。
语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。
语句 3 也可以省略（比如当循环内部有相应的代码时）

For/In 循环

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

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

while 循环

只要指定条件为 true，循环就可以一直执行代码块。
【while 循环会在指定条件为真时循环执行代码块。】

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

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

do/while 循环

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

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

该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行。

Break 和 Continue 语句

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

JavaScript 标签

如需标记 JavaScript 语句，需要在语句之前加上冒号：
label:
statements

break 和 continue 语句仅仅是能够跳出代码块的语句。
语法:
break labelname; 
continue labelname;
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。

---

typeof, null, 和 undefined

typeof 操作符

通过使用 typeof 操作符来检测变量的数据类型。
在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。 

Null

在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是object。
可以设置为 null 来清空对象，也可以设置为 undefined 来清空对象。

Undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
任何变量都可以通过设置值为 undefined 来清空，类型为 undefined

**Undefined 和 Null 的区别**
null 和 underfined 的值相等，但类型不等。

JavaScript 类型转换

JavaScript 数据类型：
    在 JavaScript 中有 5 种不同的数据类型：
    string
    number
    boolean
    object
    function
    3 种对象类型：
    Object
    Date
    Array
    2 个不包含任何值的数据类型：
    null
    undefined

constructor 属性

constructor 属性返回其相应 JavaScript 变量的构造函数。

JavaScript 类型转换

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

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

将数字转换为字符串

• 全局方法 String() 可以将数字转换为字符串。
  该方法可用于任何类型的数字，字母，变量，表达式。

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

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

将布尔值转换为字符串

• 全局方法 String() 可以将布尔值转换为字符串。
• Boolean 方法 toString() 也有相同的效果。

将日期转换为字符串

• Date() 返回字符串。
  全局方法 String() 可以将日期对象转换为字符串。
• Date 方法 toString() 也有相同的效果。

方法	描述
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 (不是个数字)。

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

一元运算符 +

• Operator + 可用于将变量转换为数字。
• 如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字)。

将布尔值转换为数字

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

将日期转换为数字

• 全局方法 Number() 可将日期转换为数字。
• 日期方法 getTime() 也有相同的效果。

自动转换类型

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

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

数字和布尔值也经常相互转换：
// if myVar = 123             // toString 转换为 "123"
// if myVar = true            // toString 转换为 "true"
// if myVar = false           // toString 转换为 "false"

---

JavaScript 正则表达式

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

什么是正则表达式？
正则表达式是由一个字符序列形成的搜索模式。
当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符，或一个更复杂的模式。
正则表达式可用于所有文本搜索和文本替换的操作。

语法
/正则表达式主体/修饰符(可选)
其中修饰符是可选的。

实例：
var patt = /runoob/i
实例解析：
/runoob/i  是一个正则表达式。
runoob  是一个正则表达式主体 (用于检索)。
i  是一个修饰符 (搜索不区分大小写)。

使用字符串方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

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

search() 方法使用字符串

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

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

使用正则表达式且不区分大小写将字符串替换。

replace() 方法使用字符串

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

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

正则表达式修饰符

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

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

正则表达式模式

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

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

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。



量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

使用 RegExp 对象

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

使用 test()

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

使用 exec()

exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。