JS基础总结

JavaScript简介

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

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

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件。

JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

JavaScript 显示数据

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

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

请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

JavaScript 语法

JavaScript 字面量

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

数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)。
字符串（String）字面量可以使用单引号或双引号。
表达式字面量用于计算。
数组（Array）字面量定义一个数组。
对象（Object）字面量定义一个对象。
函数（Function）字面量定义一个函数。

JavaScript 变量

在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量（ES6出现let，在ES6部分详细说明），使用等号来为变量赋值。

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

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

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

JavaScript 操作符

JavaScript使用算术运算符来计算值
JavaScript使用赋值运算符给变量赋值

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

JavaScript 语句

在 HTML 中，JavaScript 语句向浏览器发出的命令。
语句是用分号分隔;

JavaScript 注释

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

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

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

Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。

对象定义

你可以使用字符来定义和创建 JavaScript 对象:

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

对象属性

可以说 "JavaScript 对象是变量的容器"。
但是，我们通常认为 "JavaScript 对象是键值对的容器"。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为对象属性。

访问对象属性

person.lastName;
person["lastName"];

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。

name = person.fullName();

JavaScript 函数

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

JavaScript 函数语法

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

function functionname()
{
    // 执行代码
}

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

调用带参数的函数

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

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。

JavaScript 作用域

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

JavaScript 局部作用域

变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有全局作用域: 网页中所有脚本和函数均可使用。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
以下实例中 carName 在函数内，但是为全局变量。

JavaScript 变量的生存期

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

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

这条语句：

carname="Volvo";

将声明 window 的一个属性 carname。

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

JavaScript 事件

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

HTML 事件

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

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

常见的HTML事件

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

JavaScript 字符串

JavaScript 字符串用于存储和处理文本。

字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号
可以使用索引位置来访问字符串中的每个字符
字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。
可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同,也可以在字符串添加转义字符（反斜杠 \）来使用引号。

字符串长度

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

特殊字符

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

字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"
但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")

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

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

var x = "John";             
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

字符串属性

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

字符串方法

方法	描述
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 算术运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	自增
--	自减

JavaScript 赋值运算符

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

=、+=、-=、*=、/=、%=

用于字符串的 + 运算符

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

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

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

JavaScript 比较和逻辑运算符

比较运算符

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

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

逻辑运算符

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

运算符	描述
&&	and
\|\|	or
!	not

JavaScript 循环

JavaScript 支持不同类型的循环：

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

For 循环

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

语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行

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

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

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

语句 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++;
}

For/In 循环

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

while 循环

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

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

do/while 循环

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

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

JavaScript break 和 continue 语句

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

JavaScript 标签

如需标记 JavaScript 语句，请在语句之前加上冒号：
break 和 continue 语句仅仅是能够跳出代码块的语句。

continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

JavaScript typeof, null, 和 undefined

typeof 操作符

typeof 操作符来检测变量的数据类型。

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 Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是返回 object。

null

在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。
当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。

用 typeof 检测 null 返回是object。

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

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

undefined

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

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

任何变量都可以通过设置值为 undefined 来清空。类型为 undefined。

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

undefined 和 null 的区别

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

不同点：

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

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

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

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

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

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

null 和 undefined 的值相等，但类型不等：

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

JavaScript 类型转换

JavaScript 数据类型

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

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

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

null
undefined

constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

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

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

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

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

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()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

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

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

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()	解析一个字符串，并返回一个整数。

一元运算符 +

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

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

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

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

将布尔值转换为数字

全局方法 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 会自动调用变量的 toString() 方法：

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

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

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

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

原始值	转换为数字	转换为字符串	转换为布尔值
false	0	"false"	false
true	1	"true"	true
0	0	"0"	false
1	1	"1"	true
"0"	0	"0"	true
"000"	0	"000"	true
"1"	1	"1"	true
NaN	NaN	"NaN"	false
Infinity	Infinity	"Infinity"	true
-Infinity	-Infinity	"-Infinity"	true
""	0	""	false
"20"	20	"20"	true
"Runoob"	NaN	"Runoob"	true
[ ]	0	""	true
[20]	20	"20"	true
[10,20]	NaN	"10,20"	true
["Runoob"]	NaN	"Runoob"	true
["Runoob","Google"]	NaN	"Runoob,Google"	true
function(){}	NaN	"function(){}"	true
{ }	NaN	"[object Object]"	true
null	0	"null"	false
undefined	NaN	"undefined"	false

JavaScript 正则表达式

使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。

什么是正则表达式？

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

/正则表达式主体/修饰符(可选)

/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。

使用字符串方法

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

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

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

正则表达式修饰符

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

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

正则表达式模式
方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

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

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

量词:

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

使用 RegExp 对象

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

使用 test()

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

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

使用 exec()

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

JavaScript 变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
JavaScript 只有声明的变量会提升，初始化的不会,也就是赋值不会提升。

JavaScript 严格模式(strict mode)不允许使用未声明的变量。

JavaScript 严格模式(use strict)

JavaScript 严格模式（strict mode）即在严格的条件下运行。

使用 "use strict" 指令

"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
"use strict" 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。

严格模式声明

严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明。

实例中我们可以在浏览器按下 F12 (或点击"工具>更多工具>开发者工具") 开启调试模式，查看报错信息。

为什么使用严格模式

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。

严格模式的限制

不允许使用未声明的变量

"use strict";
x = 3.14;                // 报错 (x 未定义)

对象也是一个变量。

不允许删除变量或对象。

"use strict";
var x = 3.14;
delete x;                // 报错

不允许删除函数。

"use strict";
function x(p1, p2) {};
delete x;                // 报错

不允许变量重名

"use strict";
function x(p1, p1) {};   // 报错

不允许使用八进制。

"use strict";
var x = 010;             // 报错

不允许使用转义字符。

"use strict";
var x = \010;            // 报错

不允许对只读属性赋值。

"use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});

obj.x = 3.14;            // 报错

不允许对一个使用getter方法读取的属性进行赋值。

"use strict";
var obj = {get x() {return 0} };

obj.x = 3.14;            // 报错

不允许删除一个不允许删除的属性。

"use strict";
delete Object.prototype; // 报错

变量名不能使用 "eval" 字符串。

"use strict";
var eval = 3.14;         // 报错

变量名不能使用 "arguments" 字符串。

"use strict";
var arguments = 3.14;    // 报错

由于一些安全原因，在作用域 eval() 创建的变量不能被调用

"use strict";
eval ("var x = 2");
alert (x);               // 报错

禁止this关键字指向全局对象。

function f(){
    return !this;
} 
// 返回false，因为"this"指向全局对象，"!this"就是false

function f(){ 
    "use strict";
    return !this;
} 
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

因此，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。

function f(){
    "use strict";
    this.a = 1;
};
f();// 报错，this未定义

"use strict" 指令只允许出现在脚本或函数的开头。

JavaScript 使用误区

赋值运算符应用错误

在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。

比较运算符常见错误

在常规的比较中，数据类型是被忽略的，在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型。

加法与连接注意事项

加法是两个数字相加。
连接是两个字符串连接。
JavaScript 的加法和连接都使用 + 运算符。

浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.30000000000000004
if (z == 0.3)            // 返回 false

定义数组元素，最后不能添加逗号

数组最后一个值的后面添加逗号虽然语法没有问题，但是在不同的浏览器可能得到不同的结果。

var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。

正确的定义方式：

points = [40, 100, 1, 5, 25, 10];

Undefined 不是 Null

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。
对象只有被定义才有可能为 null，否则为 undefined。
如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。

错误的使用方式：

if (myObj !== null && typeof myObj !== "undefined")

正确的方式是我们需要先使用 typeof 来检测对象是否已定义：

if (typeof myObj !== "undefined" && myObj !== null)

JavaScript 表单

JavaScript 表单验证

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

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

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 输入属性

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

约束验证 CSS 伪类选择器

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

JavaScript 验证 API

约束验证	DOM 方法
Property	Description
checkValidity()	如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()	设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity 总是会返回false。如果要重新判断需要取消自定义提示。

约束验证 DOM 属性

属性	描述
validity	布尔属性值，返回 input 输入值是否合法
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证

Validity 属性

input 元素的 validity 属性包含一系列关于 validity 数据属性:

属性	描述
customError	设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值。
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing	设置为 true，如果元素 (required 属性) 没有值。
valid	设置为 true，如果元素的值是合法的。

JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

方法中的 this

在对象方法中， this 指向调用它所在方法的对象。

单独使用 this

单独使用 this，则它指向全局(Global)对象。

在浏览器中，window 就是该全局对象为 [object Window]:
严格模式下，如果单独使用，this 也是指向全局(Global)对象。

函数中使用 this（默认）

在函数中，函数的所属者默认绑定到 this 上。

在浏览器中，window 就是该全局对象为 [object Window]:

函数中使用 this（严格模式）

严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

事件中的 this

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：

对象方法中绑定

下面实例中，this 是 person 对象，person 对象是函数的所有者

var person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;
  }
};

显式函数绑定

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"

JavaScript JSON

JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据。

什么是 JSON?

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

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

JSON 格式化后为 JavaScript 对象

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

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

JSON 语法规则

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

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

JSON 数据格式为键/值对，就像 JavaScript 对象属性。
键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"name":"joel"

JSON 对象

JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个键/值对：

{"name":"Runoob", "url":"www.runoob.com"}

JSON 数组

JSON 数组保存在中括号内。

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

JSON 字符串转换为 JavaScript 对象

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

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

javascript:void(0) 含义

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

当用户点击以后不会发生任何事。

<a href="javascript:void(0)">单击此处什么也不会发生</a>

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

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

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
</body>

 a = void ( b = 5, c = 7 );

a 将返回 undefined

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

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。

JS基础总结

JavaScript简介

JavaScript用法

外部的 JavaScript

JavaScript 输出

JavaScript 显示数据

JavaScript 语法

JavaScript 字面量

JavaScript 变量

JavaScript 操作符

JavaScript 语句

JavaScript 注释

JavaScript 数据类型

JavaScript 对象

对象定义

对象属性

访问对象属性

对象方法

JavaScript 函数

JavaScript 函数语法

调用带参数的函数

带有返回值的函数

JavaScript 作用域

JavaScript 局部作用域

JavaScript 全局变量

JavaScript 变量的生存期

向未声明的 JavaScript 变量分配值

JavaScript 事件

HTML 事件

常见的HTML事件

JavaScript 字符串

字符串长度

特殊字符

字符串可以是对象

字符串属性

字符串方法

JavaScript 运算符

JavaScript 算术运算符

JavaScript 赋值运算符

用于字符串的 + 运算符

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

JavaScript 比较 和 逻辑运算符

比较运算符

逻辑运算符

JavaScript 循环

For 循环

For/In 循环

while 循环

do/while 循环

JavaScript break 和 continue 语句

JavaScript 标签

JavaScript typeof, null, 和 undefined

typeof 操作符

null

undefined

undefined 和 null 的区别

JavaScript 类型转换

JavaScript 数据类型

constructor 属性

JavaScript 类型转换

将数字转换为字符串

将布尔值转换为字符串

将日期转换为字符串

将字符串转换为数字

一元运算符 +

将布尔值转换为数字

将日期转换为数字

自动转换类型

自动转换为字符串

JavaScript 正则表达式

什么是正则表达式？

使用字符串方法

正则表达式修饰符

使用 RegExp 对象

使用 test()

使用 exec()

JavaScript 变量提升

JavaScript 严格模式(use strict)

使用 "use strict" 指令

严格模式声明

JavaScript 比较和逻辑运算符