JavaScript整理笔记

本文主要是介绍JavaScript整理笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JavaScript笔记

JavaScript
- JavaScript简介
- 快速入门
- - JavaScript用法
  - 基础语法
  - - 注释
    - 关键字
    - 显示数据输出
    - innerHTML innerText属性返回值的区别
    - 调试
  - 数据类型和变量
  - - 数据类型
    - - 数字(Number)
      - 字符串(String)
      - 布尔值(Boolean)
      - null(空值)和undefined(未定义)
      - 数组(Array)
      - 对象(Object)
      - 函数(Function)
    - 变量
    - - 全局变量
      - 变量作用域与结构解析
      - 变量提升
      - 全局作用域
      - 名字空间
      - 局部作用域(let)
      - 常量(const)
      - 解构赋值
  - 条件判断
  - - if...else if
    - switch
  - 循环
  - - for
    - for...in
    - while
    - do...while
    - break和continue
  - Map和Set
  - - 检验是否支持
    - Map
    - Set
    - Iterable
    - - for...of
      - forEach
- 函数
- - 函数定义与调用
  - - 函数定义
    - 函数调用
  - arguments参数
  - rest参数
  - 全局函数
  - 方法
  - 高阶函数
  - - 过滤(filter)
    - 排序(sort)
  - 函数作为返回值
  - 闭包
  - 箭头函数(Arrow Function)
  - generator
  - void
- 标准对象
- - 数据类型
  - 对象类型
  - - Date
    - Math
    - RegExp
    - - 基础：
      - 进阶
  - Json
  - - 定义
    - 序列化
    - 反序列化
- 面向对象编程
- - 创建对象
  - 原型继承
  - class继承
- 浏览器
- - 浏览器对象
  - - 浏览器窗口(window)
    - 浏览器的信息(navigator)
    - 屏幕信息(screen)
    - 当前页面URL信息(location)
    - 当前页面(document)
    - 浏览器历史记录(history)
    - 定时器(setInterval和setTimeout)
    - Cookie
  - 操作DOM
  - - 获取DOM
    - DOM事件
    - - onload和onunload事件
      - onchange事件
      - onmouseover 和 onmouseout 事件
      - onmousedown、onmouseup 以及 onclick 事件
    - 更新DOM
    - 创建节点
    - 插入DOM
    - - insertBefore
    - 删除DOM
  - 操作表单
  - 操作文件
  - AJAX
  - - JSOUP
    - CORS
  - Promise
  - 绘图
- 错误处理
- - try ... catch ... finally
  - - 语法
    - 示例
- 教程参考与笔记

JavaScript

JavaScript简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
提示： JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

快速入门

JavaScript用法

JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到<head>中：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script>
// 严格模式下你不能使用未声明的变量。
"use strict";
alert("我的第一个 JavaScript");
</script>    
</head><body>
文档内容......
</body>
</html>

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

第二种方法是把JavaScript代码放到一个单独的.js文件，然后在HTML中通过<script src="..."></script>引入这个文件：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="myScript.js"></script>   
</head><body>
文档内容......
</body>
</html>

myScript.js文件内容:

// 严格模式下你不能使用未声明的变量。
"use strict";
alert("我的第一个 JavaScript");

针对 "use strict"详细介绍见

基础语法

JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{...}。但是，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 通过对象字面量赋值

注释

// 这是一行注释
alert('hello'); // 这也是注释/* 从这里开始是块注释
仍然是注释
仍然是注释
注释结束 */

关键字

注意：不必刻意去背。

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

显示数据输出

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

// 弹出警告框
window.alert(5 + 6);
// 简写
alert(5 + 6);// 操作 HTML 元素
document.getElementById("demo").innerHTML = "段落已修改。";// 测试目的
document.write(Date());// 写到控制台
console.log(5 + 6);

innerHTML innerText属性返回值的区别

HTML代码	innerHTML返回值	innerText返回值
`<div>绿叶学习网</div>`	“绿叶学习网”	“绿叶学习网”
`<div><b>绿叶学习网</b></div>`	`"<b>绿叶学习网</b>"`	“绿叶学习网”
`<div><b></b></div>`	`"<b></b>"`	“”（空字符串）

调试

// console.log();
a = 5;
b = 6;
c = a + b;
console.log(c);// 设置断点
debugger；

数据类型和变量

数据类型

数字(Number)

JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：

123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity// 运算
1 + 2; // 3
(1 + 2) * 5 / 2; // 7.5
2 / 0; // Infinity
0 / 0; // NaN
10 % 3; // 1
10.5 % 3; // 1.5

字符串(String)

字符串是以单引号'或双引号"括起来的任意文本，比如'abc'，"xyz"等等。请注意，''或""本身只是一种表示方式，不是字符串的一部分，因此，字符串'abc'只有a，b，c这3个字符。

// 字符串内部既包含'又包含"怎么办？可以用转义字符\来标识:I'm "OK"!
var str = 'I\'m \"OK\"!';// 转义字符
// \n表示换行，\t表示制表符，字符\本身也要转义，所以\\表示的字符就是\// 多行字符串：由于多行字符串用\n写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反引号 ` ... ` 表示：
str = `这是一个
多行
字符串
`;// 模板字符串
// 要把多个字符串连接起来，可以用+号连接:
var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
// 如果有很多变量需要连接，用+号就比较麻烦。ES6新增了一种模板字符串，表示方法和上面的多行字符串一样，但是它会自动替换字符串中的变量：
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);// 操作字符串
var s = 'Hello, world!';
// 字符串长度: length
s.length; // 13
// 获取字符串某个指定位置的字符
s[0]; // 'H'
s[6]; // ' '
s[7]; // 'w'
s[12]; // '!'
s[13]; // undefined 超出范围的索引不会报错，但一律返回undefined// 需要特别注意的是，字符串是不可变的，如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果
var s = 'Test';
s[0] = 'X';
alert(s); // s仍然为'Test'// 变成大写: toUpperCase()
var s = 'Hello';
s.toUpperCase(); // 返回'HELLO'// 变成小写: toLowerCase()
var s = 'Hello';
var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower
lower; // 'hello'// 搜索指定字符串出现的位置: indexOf()
var s = 'hello, world';
s.indexOf('world'); // 返回7
s.indexOf('World'); // 没有找到指定的子串，返回-1// 返回在指定位置的字符。charAt()
var str = "HELLO WORLD";
var n = str.charAt(2); // 2// 连接两个或更多字符串，并返回新的字符串。concat()
var str1 = "Hello ";
var str2 = "world!";
var n = str1.concat(str2); // Hello world!// 返回指定索引区间的子串: substring()
var s = 'hello, world';
s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'
s.substring(7); // 从索引7开始到结束，返回'world'// 查找找到一个或多个正则表达式的匹配。：match()
var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/g); // ain,ain,ain// 查找与正则表达式相匹配的值：search()
var str="Visit Runoob!"; 
var n=str.search("Runoob"); // 6 找到返回起始位置；如果没有找到任何匹配的子串，则返回 -1。// 在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","Runoob");

详细参考方法

布尔值(Boolean)

布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值，要么是true，要么是false，可以直接用true、false表示布尔值，也可以通过布尔运算计算出来：

true; // 这是一个true值
false; // 这是一个false值
2 > 1; // 这是一个true值
2 >= 3; // 这是一个false值// &&运算是与运算，只有所有都为true，&&运算结果才是true：
true && true; // 这个&&语句计算结果为true
true && false; // 这个&&语句计算结果为false
false && true && false; // 这个&&语句计算结果为false// ||运算是或运算，只要其中有一个为true，||运算结果就是true：
false || false; // 这个||语句计算结果为false
true || false; // 这个||语句计算结果为true
false || true || false; // 这个||语句计算结果为true// !运算是非运算(取反)，它是一个单目运算符，把true变成false，false变成true：
! true; // 结果为false
! false; // 结果为true
! (2 > 5); // 结果为true// 布尔值经常用在条件判断中，比如：
var age = 15;
if (age >= 18) {alert('adult');
} else {alert('teenager');
}// 比较运算符
2 > 5; // false
5 >= 2; // true
7 == 7; // true// 它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
false == 0; // true
// 它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
false === 0; // false// 这个特殊的Number与所有其他值都不相等，包括它自己
NaN === NaN; // false// 唯一能判断NaN的方法是通过isNaN()函数:
isNaN(NaN); // true// 浮点数的相等比较
1 / 3 === (1 - 2 / 3); // false
// 这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

注意： 由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

null(空值)和undefined(未定义)

null表示一个“空”的值，它和0以及空字符串''不同，0是一个数值，''表示长度为0的字符串，而null表示“空”。它表示“未定义”。
JavaScript的设计者希望用null表示一个空的值，而undefined表示值未定义。事实证明，这并没有什么卵用，区分两者的意义不大。大多数情况下，我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。

数组(Array)

数组是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。

// 数组用[]表示，元素之间用,分隔。出于代码的可读性考虑，强烈建议直接使用[]。
[1, 2, 3.14, 'Hello', null, true];// 另一种创建数组的方法是通过Array()函数实现。出于代码的可读性考虑，强烈建议直接使用[]。
new Array(1, 2, 3); // 创建了数组[1, 2, 3]// 数组的元素可以通过索引来访问。请注意，索引的起始值为0：
var arr = [1, 2, 3.14, 'Hello', null, true];
arr[0]; // 返回索引为0的元素，即1
arr[5]; // 返回索引为5的元素，即true
arr[6]; // 索引超出了范围，返回undefined// 数组长度: length
var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6/********************************************************************/
// 大多数其他编程语言不允许直接改变数组的大小，越界访问索引会报错。然而，JavaScript的Array却不会有任何错误。在编写代码时，不建议直接修改Array的大小，访问索引时要确保索引不会越界。
// 请注意，直接给Array的length赋一个新的值会导致Array大小的变化：
var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]// 通过索引把对应的元素修改为新的值,对Array的索引进行赋值会直接修改这个Array
var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr现在变为['A', 99, 'C']// 如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化
var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']
/********************************************************************/// 获取指定的元素的位置: indexOf()
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
// 数字30和字符串'30'是不同的元素
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2// 截取部分元素:slice()就是对应String的substring()，它截取Array的部分元素，然后返回一个新的Array
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
arr.slice(); // 不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array// 末尾添加元素: push() 最后一个元素删除掉: pop()
var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
arr; // []// 头部添加元素:unshift() 第一个元素删掉:shift()
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []// 排序：sort() :它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序
var arr = ['B', 'C', 'A'];
arr.sort();
arr; // ['A', 'B', 'C']
// 让人大吃一惊的排序
// 看上去正常的结果:
['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];
// apple排在了最后:因为字符串根据ASCII码进行排序，而小写字母a的ASCII码在大写字母之后。
['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']
// 无法理解的结果:默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小。
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]// 自定义排序sort()高级
var arr = [10, 20, 1, 2];
arr.sort(function(x, y){if (x < y) {return -1;}if (x > y) {return 1;}return 0;
});
console.log(arr); // [1, 2, 10, 20]// 箭头函数排序
'use strict'
var arr = [10, 20, 1, 2];
arr.sort((x, y) => {return x - y;
});
console.log(arr); // [1, 2, 10, 20]// 反转: reverse()
var arr = ['one', 'two', 'three'];
arr.reverse(); 
arr; // ['three', 'two', 'one']// 万能修改: splice()从指定的索引开始删除若干元素，然后再从该位置添加若干元素
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']// 数组合并: concat()
var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']
// 实际上，concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里：
var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]// 元素连串:join()把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串。如果Array的元素不是字符串，将自动转换为字符串后再连接
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'// 元素过滤||筛选:filter() 根据返回值是true(保留)还是false(丢弃)决定保留还是丢弃该元素
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
// 把一个Array中的空字符串删掉，可以这么写：
ar arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']
// filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：
var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {console.log(element); // 依次打印'A', 'B', 'C'console.log(index); // 依次打印0, 1, 2console.log(self); // self就是变量arrreturn true;
});	
// 利用filter，可以巧妙地去除Array的重复元素
var r, arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {return self.indexOf(element) === index;
});// 多维数组
var arr = [[1, 2, 3], [400, 500, 600], '-'];
// 通过索引取到500这个值
var x = arr[1][1];

对象(Object)

JavaScript的对象是一组由键-值组成的无序集合。

// JavaScript对象的键都是字符串类型，值可以是任意数据类型。
var person = {name: 'Bob',age: 20,tags: ['js', 'web', 'mobile'],city: 'Beijing',hasCar: true,zipcode: null,// 如果属性名包含特殊字符，就必须用''括起来'middle-school': 'No.1 Middle School',// 对象方法fullName: function(){return this.name + " " + this.age;}
};// 获取一个对象的属性，我们用对象变量.属性名的方式
person.name; // 'Bob'
person.zipcode; // null
// 属性名middle-school不是一个有效的变量，就需要用''括起来。访问这个属性也无法使用.操作符，必须用['xxx']来访问
person['middle-school']; // 'No.1 Middle School'
person['name']; // 'Bob'
// 获取一个对象的方法
person.fullName();// Bob 20
// 访问不存在的属性不报错，而是返回undefined：
person.xxx; // undefined// 检测xiaoming是否拥有某一属性，可以用in操作符：
var xiaoming = {name: '小明',birth: 1990,school: 'No.1 Middle School',height: 1.70,weight: 65,score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false
// 不过要小心，如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的
'toString' in xiaoming; // true 因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。
// 要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法
var xiaoming = {name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false// 动态添加或删除属性
var xiaoming = {name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错

函数(Function)

变量

变量是用于存储信息的"容器"。变量不仅可以是数字，还可以是任意数据类型。
变量在JavaScript中就是用一个变量名表示，变量名是大小写英文、数字、$和_的组合，且不能用数字开头。变量名也不能是JavaScript的关键字，如if、while等。申明一个变量用var语句，比如：

var a; // 申明了变量a，此时a的值为undefined
var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1
var s_007 = '007'; // s_007是一个字符串
var Answer = true; // Answer是一个布尔值true
var t = null; // t的值是null

这种变量本身类型不固定的语言称之为动态语言，与之对应的是静态语言。静态语言在定义变量时必须指定变量类型，如果赋值的时候类型不匹配，就会报错。例如Java是静态语言，赋值语句如下：

int a = 123; // a是整数类型变量，类型用int申明
a = "ABC"; // 错误：不能把字符串赋给整型变量

和静态语言相比，动态语言更灵活，就是这个原因。

全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量：

i = 10; // i现在是全局变量// 使用全局变量
//此处可使用 window.carName
function myFunction() {carName = "Volvo";
}

注意： 在同一个页面的不同的JavaScript文件中，如果都不用var申明，恰好都使用了变量i，将造成变量i互相影响，产生难以调试的错误结果。

变量作用域与结构解析

如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：
如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响：
由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行：
这说明JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。

变量提升

JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：
由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量：

'use strict';function foo() {var x = 'Hello, ' + y;console.log(x);var y = 'Bob';
}foo();// 虽然是strict模式，但语句var x = 'Hello, ' + y;并不报错，原因是变量y在稍后申明了。但是console.log显示Hello, undefined，说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明，但不会提升变量y的赋值。// 对于上述foo()函数，JavaScript引擎看到的代码相当于：
function foo() {var y; // 提升变量y的申明，此时y为undefinedvar x = 'Hello, ' + y;console.log(x);y = 'Bob';
}

全局作用域

在函数外声明的变量作用域是全局的：网页中所有脚本和函数均可使用。
不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性：

'use strict';
// 直接访问全局变量course和访问window.course是完全一样的。
var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'// 由于函数定义有两种方式，以变量方式var foo = function () {}定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象
'use strict';
function foo() {alert('foo');
}
foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用

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

名字空间

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。
减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

// 唯一的全局变量MYAPP:
var MYAPP = {};// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;// 其他函数:
MYAPP.foo = function () {return 'foo';
};// 把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。

局部作用域(let)

'use strict';function foo() {for (var i=0; i<100; i++) {//}i += 100; // 仍然可以引用变量i
}// 为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：
'use strict';function foo() {var sum = 0;for (let i=0; i<100; i++) {sum += i;}// SyntaxError:i += 1;
}

常量(const)

由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：
ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域：

'use strict';const PI = 3.14;
PI = 3; // 某些浏览器不报错，但是无效果！
PI; // 3.14

解构赋值

从ES6开始，JavaScript引入了解构赋值，可以同时对一组变量进行赋值。

// 传统赋值
var array = ['hello', 'JavaScript', 'ES6'];
var x = array[0];
var y = array[1];
var z = array[2];// 使用解构赋值，直接对多个变量同时赋值
// 如果浏览器支持解构赋值就不会报错:
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];
// x, y, z分别被赋值为数组对应元素:
console.log('x = ' + x + ', y = ' + y + ', z = ' + z);// 如果需要从一个对象中取出若干属性，也可以使用解构赋值，便于快速获取对象的指定属性：
'use strict';var person = {name: '小明',age: 20,gender: 'male',passport: 'G-12345678',school: 'No.4 middle school'
};
var {name, age, passport} = person;
// name, age, passport分别被赋值为对应属性:
console.log('name = ' + name + ', age = ' + age + ', passport = ' + passport);// 对一个对象进行解构赋值时，同样可以直接对嵌套的对象属性进行赋值，只要保证对应的层次是一致的：
var person = {name: '小明',age: 20,gender: 'male',passport: 'G-12345678',school: 'No.4 middle school',address: {city: 'Beijing',street: 'No.1 Road',zipcode: '100001'}
};
var {name, address: {city, zip}} = person;
name; // '小明'
city; // 'Beijing'
zip; // undefined, 因为属性名是zipcode而不是zip
// 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:
address; // Uncaught ReferenceError: address is not defined// 使用解构赋值对对象属性进行赋值时，如果对应的属性不存在，变量将被赋值为undefined，这和引用一个不存在的属性获得undefined是一致的。如果要使用的变量名和属性名不一致，可以用下面的语法获取：
var person = {name: '小明',age: 20,gender: 'male',passport: 'G-12345678',school: 'No.4 middle school'
};// 把passport属性赋值给变量id:
let {name, passport:id} = person;
name; // '小明'
id; // 'G-12345678'
// 注意: passport不是变量，而是为了让变量id获得passport属性:
passport; // Uncaught ReferenceError: passport is not defined

条件判断

if…else if

小明身高1.75，体重80.5kg。请根据BMI公式（体重除以身高的平方）帮小明计算他的BMI指数，并根据BMI指数：

低于18.5：过轻
18.5-25：正常
25-28：过重
28-32：肥胖
高于32：严重肥胖

'use strict';var height = parseFloat(prompt('请输入身高(m):'));
var weight = parseFloat(prompt('请输入体重(kg):'));var bmi = weight / (height * height );
console.log(bmi );
if(bmi < 18.5){bmi = '过轻';
}
else if(bmi >= 18.5 && bmi <= 25) {bmi = '正常';
}
else if(bmi >= 25 && bmi <= 28) {bmi = '过重';
}
else if(bmi >= 28 && bmi <= 32) {bmi = '肥胖';
}
else if(bmi > 32) {bmi = '严重肥胖';
}
console.log(bmi);

switch

var d=new Date().getDay();
switch (d) {case 6:x="今天是星期六";break;case 0:x="今天是星期日";break;default:x="期待周末";
}
document.getElementById("demo").innerHTML=x;

循环

for循环在已知循环的初始和结束条件时非常有用。
while只有一个判断条件，条件满足，就不断循环，条件不满足时则退出循环。

for

// 示例1
var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {x = arr[i];console.log(x);
}// 示例2
var x;
for (var i=0;i<5;i++){x=x + "该数字为 " + i + "<br>";
}
console.log(x);

for…in

// 把一个对象的所有属性依次循环出来
var o = {name: 'Jack',age: 20,city: 'Beijing'
};
for (var key in o) {console.log(key); // 'name', 'age', 'city'
}// 要过滤掉对象继承的属性，用hasOwnProperty()来实现：
var o = {name: 'Jack',age: 20,city: 'Beijing'
};
for (var key in o) {if (o.hasOwnProperty(key)) {console.log(key); // 'name', 'age', 'city'}
}// 由于Array也是对象，而它的每个元素的索引被视为对象的属性，因此，for ... in循环可以直接循环出Array的索引
var a = ['A', 'B', 'C'];
// 请注意，for ... in对Array的循环得到的是String而不是Number
for (var i in a) {console.log(i); // '0', '1', '2'console.log(a[i]); // 'A', 'B', 'C'
}

while

var x = 0;
var n = 99;
while (n > 0) {x = x + n;n = n - 2;
}
x; // 2500

do…while

var n = 0;
do {n = n + 1;
} while (n < 100);
n; // 100

**注意：**用do { ... } while()循环要小心，循环体会至少执行1次，而for和while循环则可能一次都不执行。

break和continue

break跳出循环。
continue跳过循环中的一个迭代。

Map和Set

JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。
但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题，最新的ES6规范引入了新的数据类型Map。

检验是否支持

'use strict';
var m = new Map();
var s = new Set();
console.log('你的浏览器支持Map和Set！');

Map

Map是一组键值对的结构，具有极快的查找速度。它得出现也可以弥补Array数组的不足。

var m = new Map(); // 空Map
m.set('Adam', 32); // 添加新的key-value
// 由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59); // 设置键值
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 获取Key值，67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

Set

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

// 创建Set
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3// 重复元素在Set中自动被过滤。注意数字3和字符串'3'是不同的元素。
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
// 通过delete(key)方法可以删除元素
s.delete(3);
s; // Set {1, 2, "3"}

Iterable

for…of

'use strict';
var a = [1, 2, 3];
for (var x of a) {
}
console.log('你的浏览器支持for ... of');

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Arrayconsole.log(x);
}
for (var x of s) { // 遍历Setconsole.log(x);
}
for (var x of m) { // 遍历Mapconsole.log(x[0] + '=' + x[1]);
}

forEach

'use strict';
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) { // 遍历Array// element: 指向当前元素的值// index: 指向当前索引// array: 指向Array对象本身console.log(element + ', index = ' + index);
});var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) { // 遍历Setconsole.log(element);
});var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) { // 遍历Mapconsole.log(value + ', key = ' + key);
});

函数

函数定义与调用

函数定义

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

// 方式一
function abs(x) {if (x >= 0) {return x;} else {return -x;}
}// 方式二: 匿名函数
var abs = function (x) {if (x >= 0) {return x;} else {return -x;}
};

上述abs()函数的定义如下：

function指出这是一个函数定义；
abs是函数的名称；
(x)括号内列出函数的参数，多个参数以,分隔；
{ ... }之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

请注意，函数体内部的语句在执行时，一旦执行到return时，函数就执行完毕，并将结果返回。因此，函数内部通过条件判断和循环可以实现非常复杂的逻辑。
如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。
由于JavaScript的函数也是一个对象，上述定义的abs()函数实际上是一个函数对象，而函数名abs可以视为指向该函数的变量。

函数调用

// 按顺序传入参数即可
abs(10); // 返回10
abs(-9); // 返回9// javaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数
abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9// 传入的参数比定义的少也没有问题。此时abs(x)函数的参数x将收到undefined，计算结果为NaN。
abs(); // 返回NaN
// 要避免收到undefined，可以对参数进行检查
function abs(x) {if (typeof x !== 'number') {throw 'Not a number';}if (x >= 0) {return x;} else {return -x;}
}

arguments参数

arguments是一个对应于传递给函数的参数的类数组对象。
JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array：

'use strict'
function foo(x) {console.log('x = ' + x); // 10for (var i=0; i<arguments.length; i++) {console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30}
}
// 调用
foo(10, 20, 30);// 利用arguments，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值
function abs() {if (arguments.length === 0) {return 0;}var x = arguments[0];return x >= 0 ? x : -x;
}abs(); // 0
abs(10); // 10
abs(-9); // 9// 实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法
// foo(a[, b], c)
// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：
function foo(a, b, c) {if (arguments.length === 2) {// 实际拿到的参数是a和b，c为undefinedc = b; // 把b赋给cb = null; // b变为默认值}// ...
}

rest参数

提示： 类似Java中的可变参数。

// 由于JavaScript函数允许接收任意个参数，于是我们就不得不用arguments来获取所有参数：
function foo(a, b) {var i, rest = [];if (arguments.length > 2) {for (i = 2; i<arguments.length; i++) {rest.push(arguments[i]);}}console.log('a = ' + a);console.log('b = ' + b);console.log(rest);
}// 为了获取除了已定义参数a、b之外的参数，我们不得不用arguments，并且循环要从索引2开始以便排除前两个参数，这种写法很别扭，只是为了获得额外的rest参数，有没有更好的方法？
// ES6标准引入了rest参数，上面的函数可以改写为：
function foo(a, b, ...rest) {console.log('a = ' + a);console.log('b = ' + b);console.log(rest);
}foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]foo(1);
// 结果:
// a = 1
// b = undefined
// Array []// rest参数只能写在最后，前面用...标识，从运行结果可知，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest，所以，不再需要arguments我们就获取了全部参数。
// 如果传入的参数连正常定义的参数都没填满，也不要紧，rest参数会接收一个空数组（注意不是undefined）。

全局函数

内置函数：

eval(string)：计算 JavaScript 字符串，并把它作为脚本代码来执行。
isFinite(number)：检查某个值是否为有穷大的数。
isNaN(value)：用于检查其参数是否是非数字值。
parseInt()：解析一个字符串并返回一个整数。
parseFloat()：解析一个字符串并返回一个浮点数。
escape()：对字符串进行编码。
unescape()：对由 escape() 编码的字符串进行解码。

详见参考
示例参考

方法

对象方法以及this关键字的作用。this是一个特殊变量，它始终指向当前对象。
参考对象(Object) 的定义。

高阶函数

JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
一个最简单的高阶函数：

function add(x, y, f) {return f(x) + f(y);
}
// 当我们调用add(-5, 6, Math.abs)时，参数x，y和f分别接收-5，6和函数Math.abs，根据函数定义，我们可以推导计算过程为：
x = -5;
y = 6;
f = Math.abs;
f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
return 11;// 验证
var x = add(-5, 6, Math.abs); // 11
console.log(x); // 11

详见参考

过滤(filter)

参见 数组(Array)
详见参考

排序(sort)

参见 数组(Array)
详见参考

函数作为返回值

我们来实现一个对Array的求和。通常情况下，求和的函数是这样定义的：

function sum(arr) {return arr.reduce(function (x, y) {return x + y;});
}sum([1, 2, 3, 4, 5]); // 15// 但是，如果不需要立刻求和，而是在后面的代码中，根据需要再计算怎么办？可以不返回求和的结果，而是返回求和的函数！
function lazy_sum(arr) {var sum = function () {return arr.reduce(function (x, y) {return x + y;});}return sum;
}// 当我们调用lazy_sum()时，返回的并不是求和结果，而是求和函数：
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()// 调用函数f时，才真正计算求和的结果：
f(); // 15// 请再注意一点，当我们调用lazy_sum()时，每次调用都会返回一个新的函数，即使传入相同的参数：
var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false

闭包

详细参见
详细参见
注意到返回的函数在其定义内部引用了局部变量arr，所以，当一个函数返回了一个函数后，其内部的局部变量还被新函数引用，所以，闭包用起来简单，实现起来可不容易。
另一个需要注意的问题是，返回的函数并没有立刻执行，而是直到调用了f()才执行。我们来看一个例子：

function count() {var arr = [];for (var i=1; i<=3; i++) {arr.push(function () {return i * i;});}return arr;
}var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

在上面的例子中，每次循环，都创建了一个新的函数，然后，把创建的3个函数都添加到一个Array中返回了。
你可能认为调用f1()，f2()和f3()结果应该是1，4，9，但实际结果是：

f1(); // 16
f2(); // 16
f3(); // 16

全部都是16！原因就在于返回的函数引用了变量i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量i已经变成了4，因此最终结果为16。
返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。
如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变：

function count() {var arr = [];for (var i=1; i<=3; i++) {arr.push((function (n) {return function () {return n * n;}})(i));}return arr;
}var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];f1(); // 1
f2(); // 4
f3(); // 9

注意这里用了一个“创建一个匿名函数并立刻执行”的语法：

(function (x) {return x * x;
})(3); // 9

理论上讲，创建一个匿名函数并立刻执行可以这么写：

function (x) { return x * x } (3);

但是由于JavaScript语法解析的问题，会报SyntaxError错误，因此需要用括号把整个函数定义括起来：

(function (x) { return x * x }) (3);
通常，一个立即执行的匿名函数可以把函数体拆开，一般这么写：
```javascript
(function (x) {return x * x;
})(3);

说了这么多，难道闭包就是为了返回一个函数然后延迟执行吗？
当然不是！闭包有非常强大的功能。举个栗子：
在面向对象的程序设计语言里，比如Java和C++，要在对象内部封装一个私有变量，可以用private修饰一个成员变量。
在没有class机制，只有函数的语言里，借助闭包，同样可以封装一个私有变量。我们用JavaScript创建一个计数器：

'use strict';function create_counter(initial) {var x = initial || 0;return {inc: function () {x += 1;return x;}}
}// 它用起来像这样：
var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13

在返回的对象中，实现了一个闭包，该闭包携带了局部变量x，并且，从外部代码根本无法访问到变量x。换句话说，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。
闭包还可以把多参数的函数变成单参数的函数。
JavaScript 变量可以是局部变量或全局变量。
私有变量可以用到闭包。

var add = (function () {var counter = 0;return function () {return counter += 1;}
})();add();
add();
add();
// 计数器为 3

箭头函数(Arrow Function)

x => x * x;
// 相当于
function (x) {return x * x;
}// 实例2
var x = (x, y) => { return x * y };

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：

x => {if (x > 0) {return x * x;}else {return - x * x;}
}// 如果参数不是一个，就需要用括号()括起来：
// 两个参数:
(x, y) => x * x + y * y// 无参数:
() => 3.14// 可变参数:
(x, y, ...rest) => {var i, sum = x + y;for (i=0; i<rest.length; i++) {sum += rest[i];}return sum;
}// 如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：
// SyntaxError:
x => { foo: x }
// ok:
x => ({ foo: x })

generator

generator就是能够返回多次的“函数”？返回多次有啥用？
详细参见

void

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

<a href="javascript:void(0)">单击此处什么也不会发生</a>
<!-- 用户点击链接后显示警告信息 -->
<a href="javascript:void(alert('Warning!!!'))">点我!</a>

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

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

标准对象

数据类型

为了区分对象的类型，我们用typeof操作符获取对象的类型，它总是返回一个字符串：

typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'// object 类型
var n = new Number(123); // 123,生成了新的包装类型
var b = new Boolean(true); // true,生成了新的包装类型
var s = new String('str'); // 'str',生成了新的包装类型// 虽然包装对象看上去和原来的值一模一样，显示出来也是一模一样，但他们的类型已经变为object了！所以，包装对象和原始值用===比较会返回false：
typeof new Number(123); // 'object'
new Number(123) === 123; // falsetypeof new Boolean(true); // 'object'
new Boolean(true) === true; // falsetypeof new String('str'); // 'object'
new String('str') === 'str'; // false
// 所以闲的蛋疼也不要使用包装对象！尤其是针对string类型！！！// 类型转换
// 将数字转换为字符串
123..toString(); // '123', 注意是两个点！
(123).toString(); // '123'
String(123); // '123'var m=parseInt("3.14")+10; // 13
var n=parseFloat("3.14")+10; // 13.14// 将布尔值转换为字符串
String(false)        // 返回 "false"
String(true)         // 返回 "true"
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"// 将日期转换为字符串
Date()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
String(new Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳// 创建一个指定日期和时间的Date对象，可以用：
var d = new Date(2015, 5, 19, 20, 15, 30, 123);
// 月份范围用整数表示是0~11
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)var d = Date.parse('2015-06-24T19:49:22.875+08:00');
d; // 1435146562875var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
d.getMonth(); // 5

总结：

不要使用new Number()、new Boolean()、new String()创建包装对象；
用parseInt()或parseFloat()来转换任意类型到number；
用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；
通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}；
typeof操作符可以判断出number、boolean、string、function和undefined；
判断Array要使用Array.isArray(arr)；
判断null请使用myVar === null；
判断某个全局变量是否存在用typeof window.myVar === 'undefined'；
函数内部判断某个变量是否存在用typeof myVar === 'undefined'。

类型转换详细参见

对象类型

Date

Date对象用来表示日期和时间。

Math

方法	说明
abs(x)	返回数的绝对值
acos(x)	返回数的反余弦值
asin(x)	返回数的反正弦值
atan(x)	以介于-π/2与π/2弧度之间的数值来返回x的反正切值
atan2(y,x)	返回从x轴到点（x,y）的角度（介于-π/2与π/2弧度之间）
ceil(x)	对数进行上舍入
cos(x)	返回数的余弦
exp(x)	返回e的指数
floor(x)	对数进行下舍入
log(x)	返回数的自然对数(底为e)
max(x,y)	返回x和y中的最大值
min(x,y)	返回x和y中的最小值
pow(x,y)	返回x的y次幂
random()	返回0~1之间的随机数
round(x)	把数四舍五入为最接近的整数
sin(x)	返回数的正弦
sqrt(x)	返回数的平方根
tan(x)	返回角的正切
toSource()	返回该对象的源代码
valueOf()	返回Math对象的原始值

RegExp

基础：

在正则表达式中，如果直接给出字符，就是精确匹配。用\d可以匹配一个数字，\w可以匹配一个字母或数字，.可以匹配任意字符，\s可以匹配一个空格（也包括Tab等空白符），所以\s+表示至少有一个空格。

进阶

要做更精确地匹配，可以用[]表示范围，比如：

[0-9a-zA-Z\_]可以匹配一个数字、字母或者下划线；
[0-9a-zA-Z\_]+可以匹配至少由一个数字、字母或者下划线组成的字符串，比如'a100'，'0_Z'，'js2015'等等；
[a-zA-Z\_\$][0-9a-zA-Z\_\$]*可以匹配由字母或下划线、$开头，后接任意个由一个数字、字母或者下划线、$组成的字符串，也就是JavaScript允许的变量名；
[a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。

A|B可以匹配A或B，所以(J|j)ava(S|s)cript可以匹配'JavaScript'、'Javascript'、'javaScript'或者'javascript'。
^表示行的开头，^\d表示必须以数字开头。
$表示行的结束，\d$表示必须以数字结束。
你可能注意到了，js也可以匹配'jsp'，但是加上^js$就变成了整行匹配，就只能匹配'js'了。
第一种方式是直接通过/正则表达式/写出来，第二种方式是通过new RegExp('正则表达式')创建一个RegExp对象。

var re1 = /ABC\-001/;
var re2 = new RegExp('ABC\\-001'); // 字符串的转义问题，字符串的两个\\实际上是一个\。// RegExp对象的test()方法用于测试给定的字符串是否符合条件。
var re = /^\d{3}\-\d{3,8}$/;
re.test('010-12345'); // true
re.test('010-1234x'); // false
re.test('010 12345'); // false// 切分字符串
'a b   c'.split(' '); // ['a', 'b', '', '', 'c']
'a b   c'.split(/\s+/); // ['a', 'b', 'c']

使用字符串方法

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

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

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

Json

定义

// Json数据
"name":"Runoob"// Json对象
{"name":"Runoob", "url":"www.runoob.com"}// Json数组
"sites":[{"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"},{"name":"Taobao", "url":"www.taobao.com"}
]

序列化

'use strict';var xiaoming = {name: '小明',age: 14,gender: true,height: 1.65,grade: null,'middle-school': '\"W3C\" Middle School',skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};// 对象序列化成JSON格式的字符串
var s = JSON.stringify(xiaoming);
console.log(s);
// 输出
{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}// 要输出得好看一些，可以加上参数，按缩进输出：
JSON.stringify(xiaoming, null, '  ');
// 输出
{"name": "小明","age": 14,"gender": true,"height": 1.65,"grade": null,"middle-school": "\"W3C\" Middle School","skills": ["JavaScript","Java","Python","Lisp"]
}// 第二个参数用于控制如何筛选对象的键值，如果我们只想输出指定的属性，可以传入Array：
JSON.stringify(xiaoming, ['name', 'skills'], '  ');
// 输出
{"name": "小明","skills": ["JavaScript","Java","Python","Lisp"]
}// 还可以传入一个函数，这样对象的每个键值对都会被函数先处理：
function convert(key, value) {if (typeof value === 'string') {return value.toUpperCase();}return value;
}JSON.stringify(xiaoming, convert, '  ');
// 输出
{"name": "小明","age": 14,"gender": true,"height": 1.65,"grade": null,"middle-school": "\"W3C\" MIDDLE SCHOOL","skills": ["JAVASCRIPT","JAVA","PYTHON","LISP"]
}// 如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法，直接返回JSON应该序列化的数据：
var xiaoming = {name: '小明',age: 14,gender: true,height: 1.65,grade: null,'middle-school': '\"W3C\" Middle School',skills: ['JavaScript', 'Java', 'Python', 'Lisp'],toJSON: function () {return { // 只输出name和age，并且改变了key：'Name': this.name,'Age': this.age};}
};JSON.stringify(xiaoming); // '{"Name":"小明","Age":14}'

反序列化

// 拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象：
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45// JSON.parse()还可以接收一个函数，用来转换解析出的属性：
var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) {if (key === 'name') {return value + '同学';}return value;
});
console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}

面向对象编程

创建对象

简单方式见：class继承
当我们用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined。

// 创建一个Array对象：
var arr = [1, 2, 3];
// 原型链是: arr ----> Array.prototype ----> Object.prototype ----> null// 对象定义
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};// 构造函数
function Student(name) {this.name = name;this.hello = function () {alert('Hello, ' + this.name + '!');}
}
// 这确实是一个普通函数，但是在JavaScript中，可以用关键字new来调用这个函数，并返回一个对象：
// 注意，如果不写new，这就是一个普通函数，它返回undefined。但是，如果写了new，它就变成了一个构造函数，它绑定的this指向新创建的对象，并默认返回this，也就是说，不需要在最后写return this;。
var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!// 要让创建的对象共享一个hello函数，根据对象的属性查找原则，我们只要把hello函数移动到xiaoming、xiaohong这些对象共同的原型上就可以了，也就是Student.prototype：
function Student(name) {this.name = name;
}Student.prototype.hello = function () {alert('Hello, ' + this.name + '!');
};// 推荐如下写法：
function Student(props) {this.name = props.name || '匿名'; // 默认值为'匿名'this.grade = props.grade || 1; // 默认值为1
}Student.prototype.hello = function () {alert('Hello, ' + this.name + '!');
};function createStudent(props) {return new Student(props || {})
}// 创建对象：如果创建的对象有很多属性，我们只需要传递需要的某些属性，剩下的属性可以用默认值。由于参数是一个Object，我们无需记忆参数的顺序。如果恰好从JSON拿到了一个对象，就可以直接创建出xiaoming。
var xiaoming = createStudent({name: '小明'
});xiaoming.grade; // 1

原型继承

简单方式见：class继承
JavaScript的原型继承实现方式就是：

定义新的构造函数，并在内部用call()调用希望“继承”的构造函数，并绑定this；
借助中间函数F实现原型链继承，最好通过封装的inherits函数完成；
继续在新的构造函数的原型上定义新方法。

function inherits(Child, Parent) {var F = function () {};F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child;
}function Student(props) {this.name = props.name || 'Unnamed';
}Student.prototype.hello = function () {alert('Hello, ' + this.name + '!');
}function PrimaryStudent(props) {Student.call(this, props);this.grade = props.grade || 1;
}// 实现原型继承链:
inherits(PrimaryStudent, Student);// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {return this.grade;
};

class继承

在上面的章节中我们看到了JavaScript的对象模型是基于原型实现的，特点是简单，缺点是理解起来比传统的类－实例模型要困难，最大的缺点是继承的实现需要编写大量代码，并且需要正确实现原型链。
有没有更简单的写法？有！
新的关键字class从ES6开始正式被引入到JavaScript中。class的目的就是让定义类更简单。

// 我们先回顾用函数实现Student的方法：
function Student(name) {this.name = name;
}Student.prototype.hello = function () {alert('Hello, ' + this.name + '!');
}// 如果用新的class关键字来编写Student，可以这样写：
class Student {constructor(name) {this.name = name;}hello() {alert('Hello, ' + this.name + '!');}
}// 比较一下就可以发现，class的定义包含了构造函数constructor和定义在原型对象上的函数hello()（注意没有function关键字），这样就避免了Student.prototype.hello = function () {...}这样分散的代码。
// 创建一个Student对象代码
var xiaoming = new Student('小明');
xiaoming.hello();// class继承
// 用class定义对象的另一个巨大的好处是继承更方便了。想一想我们从Student派生一个PrimaryStudent需要编写的代码量。现在，原型继承的中间对象，原型对象的构造函数等等都不需要考虑了，直接通过extends来实现：
class PrimaryStudent extends Student {constructor(name, grade) {super(name); // 记得用super调用父类的构造方法!this.grade = grade;}myGrade() {alert('I am at grade ' + this.grade);}
}// 注意PrimaryStudent的定义也是class关键字实现的，而extends则表示原型链对象来自Student。子类的构造函数可能会与父类不太相同，例如，PrimaryStudent需要name和grade两个参数，并且需要通过super(name)来调用父类的构造函数，否则父类的name属性无法正常初始化。// PrimaryStudent已经自动获得了父类Student的hello方法，我们又在子类中定义了新的myGrade方法。// 简而言之，用class的好处就是极大地简化了原型链代码。

现在用还早了点，因为不是所有的主流浏览器都支持ES6的class。如果一定要现在就用上，就需要一个工具把class代码转换为传统的prototype代码，可以试试Babel这个工具。

浏览器

浏览器对象

浏览器窗口(window)

window对象不但充当全局作用域，而且表示浏览器窗口。
window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

// 可以调整浏览器窗口大小试试:
console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
// 对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。
console.log('window outer size: ' + window.outerWidth + ' x ' + window.outerHeight);// 打开和关闭窗口，可参见http://www.lvyestudy.com/les_js/js_10.2.aspx
// 语法：window.open(URL, 窗口名称, 参数);// 示例
// 打开一个新窗口
window.open("http://www.lvyestudy.com","","");
// 打开一个指定位置的窗口
window.open("http://www.lvyestudy.com ","","top=200,left=200");// 关闭当前窗口
window.close();
close();
this.close();// 关闭子窗口。就是关闭之前使用window.open()方法动态创建的子窗口。
//语法：窗口名称.close();
// 关闭示例
var newWindow = window.open("http://www.lvyestudy.com","","width=200,height=200");
function closeWindow()        {newWindow.close();
}// 改变窗口大小
// x表示改变后的水平宽度，y表示改变后的垂直高度。x和y的单位都是px，浏览器自带单位，我们只需要使用数值即可。
window.resizeTo(x, y)
// 当x、y的值大于0时为扩大，小于0时为缩小。其中x和y的单位都是px。x表示窗口水平方向每次扩大或缩小的数值，y表示垂直方向窗口每次扩大或缩小的数值。
window.resizeBy(x, y)// 移动窗口。x表示距离屏幕左上角的水平距离（x轴坐标）；y表示距离屏幕左上角的垂直距离（y轴坐标）；
moveTo(x,y);
// 移动窗口。x表示水平方向移动的距离，单位为px。当x>0时，窗口向右移动；当x<0时，窗口向左移动。y表示垂直方向移动的距离，单位为px。当y>0时，窗口向下移动；当y<0时，窗口向上移动。
moveBy(x,y);
// 区别
// moveTo(x,y)中的x、y是“改变后”的数值，而moveBy(x,y)中的x、y是“增加或减少”的数值。“to”表示一个结果，“by”表示一个过程。

详见参考

浏览器的信息(navigator)

navigator对象表示浏览器的信息，最常用的属性包括：

navigator.appName：浏览器名称；
navigator.appCodeName：浏览器代号；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的User-Agent字符串；
navigator.cookieEnabled：启用Cookie。

'use strict';
console.log('appName = ' + navigator.appName);
console.log('appVersion = ' + navigator.appVersion);
console.log('language = ' + navigator.language);
console.log('platform = ' + navigator.platform);
console.log('userAgent = ' + navigator.userAgent);// 输出
appName = Netscape
appVersion = 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36
language = zh-CN
platform = Win32
userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.67 Safari/537.36// 请注意，navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码，喜欢用if判断浏览器版本，例如：
var width;
if (getIEVersion(navigator.userAgent) < 9) {width = document.body.clientWidth;
} else {width = window.innerWidth;
}// 但这样既可能判断不准确，也很难维护代码。正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算：
var width = window.innerWidth || document.body.clientWidth;

屏幕信息(screen)

screen对象表示屏幕的信息，常用的属性有：

screen.width：屏幕宽度，以像素为单位；
screen.height：屏幕高度，以像素为单位；
screen.colorDepth：返回颜色位数，如8、16、24。

console.log('屏幕宽度 = ' + screen.width + ' 屏幕高度 = ' + screen.height + " 颜色位数 = " + screen.colorDepth);
// 输出
// 屏幕宽度 = 1707 屏幕高度 = 960 颜色位数 = 24

当前页面URL信息(location)

location对象表示当前页面的URL信息。

// 获取当前页面URL:例如http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.href
// 细化各部分信息
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'// 要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。
if (confirm('重新加载当前页' + location.href + '?')) {location.reload();
} else {location.assign('/'); // 设置一个新的URL地址
}

当前页面(document)

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。
document的title属性是从HTML文档中的<title>xxx</title>读取的，但是可以动态改变：

// 动态修改浏览器窗口标题
document.title = '努力学习JavaScript!';document.write("创建日期：" + document.fileCreatedDate + "<br/>");
document.write("修改日期：" + document.fileModifiedDate + "<br/>");
document.write("创建时间：" + document.lastModified + "<br/>");
document.write("文件大小：" + document.fileSize);// 要查找DOM树的某个节点，需要从document对象开始查找。最常用的查找是根据ID和Tag Name。
// 准备数据
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;"><dt>摩卡</dt><dd>热摩卡咖啡</dd><dt>酸奶</dt><dd>北京老酸奶</dd><dt>果汁</dt><dd>鲜榨苹果汁</dd>
</dl>// 用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点：
// 按ID获得一个DOM节点
var menu = document.getElementById('drink-menu');
// 按Tag名称获得一组DOM节点
var drinks = document.getElementsByTagName('dt');
var i, s, menu, drinks;menu = document.getElementById('drink-menu');
menu.tagName; // 'DL'drinks = document.getElementsByTagName('dt');
s = '提供的饮料有:';
for (i=0; i<drinks.length; i++) {s = s + drinks[i].innerHTML + ',';
}
console.log(s); // 提供的饮料有:摩卡,酸奶,果汁,// document对象还有一个cookie属性，可以获取当前页面的Cookie。
document.cookie; // 'v=123; remember=true; prefer=zh'
// 由于JavaScript能读取到页面的Cookie，而用户的登录信息通常也存在Cookie中，这就造成了巨大的安全隐患，这是因为在HTML页面中引入第三方的JavaScript代码是允许的：// 为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。

更多方法参见

浏览器历史记录(history)

history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。
这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。
新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。
~~任何情况，你都不应该使用history这个对象了。~~

定时器(setInterval和setTimeout)

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。循环执行。
setTimeout() - 在指定的毫秒数后执行指定代码。执行一次。

// 开启执行 语法:window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。
// 第一个参数是函数，第二个参数是毫秒数
window.setInterval("javascript function",milliseconds);// 示例1 每三秒弹出 "hello" ：
setInterval(function(){alert("Hello")},3000);
// 示例2 显示当前时间
var myVar=setInterval(function(){myTimer()},1000);function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;
}// clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
// 停止执行 语法：window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。
window.clearInterval(intervalVariable)// 停止示例
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
// 要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：  
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){clearInterval(myVar);
}
</script>

Cookie

详见参考

// 创建Cookie
document.cookie="username=John Doe";
// 为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";
// 使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";// 读取Cookie
var x = document.cookie;// 修改Cookie:旧的将被覆盖
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";// 删除Cookie：只需要设置 expires 参数为以前的时间即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";// 设置Cookie的函数:cookie 名、cookie 值、cookie过期时间。
function setCookie(cname,cvalue,exdays){var d = new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000));var expires = "expires="+d.toGMTString();document.cookie = cname+"="+cvalue+"; "+expires;
}
// 获取 cookie 值的函数:cookie 名
function getCookie(cname){var name = cname + "=";var ca = document.cookie.split(';');for(var i=0; i<ca.length; i++) {var c = ca[i].trim();if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }}return "";
}
// 检测 cookie 值的函数
function checkCookie(){var user=getCookie("username");if (user!=""){alert("欢迎 " + user + " 再次访问");}else {user = prompt("请输入你的名字:","");if (user!="" && user!=null){setCookie("username",user,30);}}
}

操作DOM

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

属性	说明
parentNode	获取当前节点的父节点
childNodes	获取当前节点的子节点集合
firstChild	获取当前节点的第一个子节点
lastChild	获取当前节点的最后一个子节点
previousSibling	获取当前节点的前一个兄弟节点
nextSibling	获取当前节点的后一个兄弟节点
attributes	元素的属性列表

获取DOM

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()。
getElementsByName()方法都是用于获取表单元素。与getElementById()方法不同的是，使用该方法的返回值是一个数组，而不是一个元素。因此，我们想要获取具体的某一个表单元素，就必须通过数组下标来获取。
由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

// 返回ID为'test'的节点：
var test = document.getElementById('test');// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');// 通过类名(class=intro)找到 HTML 元素
var x=document.getElementsByClassName("intro");// 获取节点test下的所有直属子节点:
var cs = test.children;// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便：

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

DOM事件

HTML 事件的例子：

当用户点击鼠标时：onclick
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

事件分配：
HTML 元素分配事件，您可以使用事件属性。

<button onclick="displayDate()">点这里</button>

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

提示： 以上是等效的。

onload和onunload事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">

onchange事件

onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<input type="text" id="fname" onchange="upperCase()">
<script>
function myFunction(){var x=document.getElementById("fname");x.value=x.value.toUpperCase();
}
</script>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){obj.innerHTML="Thank You"
}
function mOut(obj){obj.innerHTML="Mouse Over Me"
}
</script>

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

更新DOM

一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改

第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。
修改CSS也是经常需要的操作。DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';
js.style['font-weight']= 'bold';

创建节点

var e = document.createElement("元素名");       //创建元素节点
var t = document.createTextNode("元素内容");  //创建文本节点
e.appendChild(t);                               //把元素内容插入元素中去// 创建：<input id="submit" type="button" value="提交"/>
var e = document.createElement("input");
e.id = "submit";
e.type = "button";
e.value = "提交";
document.body.appendChild(e);

插入DOM

如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。
如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。
有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p>
</div>

把<p id="js">JavaScript</p>添加到<div id="list">的最后一项：

var js = document.getElementById('js'),list = document.getElementById('list');
list.appendChild(js);// 结构变成如下：
<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p><p id="js">JavaScript</p>
</div>
// 因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。

// 更多的时候我们会从零创建一个新的节点，然后插入到指定位置：
varlist = document.getElementById('list'),haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

insertBefore

如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。
还是以上面的HTML为例，假定我们要把Haskell插入到Python之前：

<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="python">Python</p><p id="scheme">Scheme</p>
</div>

varlist = document.getElementById('list'),ref = document.getElementById('python'),haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

新的HTML结构如下：

<!-- HTML结构 -->
<div id="list"><p id="java">Java</p><p id="haskell">Haskell</p><p id="python">Python</p><p id="scheme">Scheme</p>
</div>

很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：

vari, c,list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {c = list.children[i]; // 拿到第i个子节点
}

删除DOM

删除一个DOM节点就比插入要容易得多。
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true
// 注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。// 当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。
// 例如
<div id="parent"><p>First</p><p>Second</p>
</div>// 删除
var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错。正确还是删除0
// 浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

操作表单

HTML表单的输入控件主要有以下几种：

文本框，对应的<input type="text">，用于输入文本；
口令框，对应的<input type="password">，用于输入口令；
单选框，对应的<input type="radio">，用于选择一项；
复选框，对应的<input type="checkbox">，用于选择多项；
下拉框，对应的<select>，用于选择一项；
隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

// 获取值// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'// 这种方式可以应用于text、password、hidden以及select。但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断：
// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false// 设置值// 设置值和获取值类似，对于text、password、hidden以及select，直接设置value就可以：
// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新
// 对于单选框和复选框，设置checked为true或false即可。
mon.checked = true; // true或者false
tue.checked = false; // true或者false// HTML5控件
// HTML5新增了大量标准控件，常用的包括date、datetime、datetime-local、color等，它们都使用<input>标签：// 提交表单
// 方式一是通过<form>元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中提交表单：
<!-- HTML -->
<form id="test-form"><input type="text" name="test"><button type="button" onclick="doSubmitForm()">Submit</button>
</form><script>
function doSubmitForm() {var form = document.getElementById('test-form');// 可以在此修改form的input...// 提交form:form.submit();
}
</script>// 这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。因此，第二种方式是响应<form>本身的onsubmit事件，在提交form时作修改：
<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()"><input type="text" name="test"><button type="submit">Submit</button>
</form><script>
function checkForm() {var form = document.getElementById('test-form');// 可以在此修改form的input...// 继续下一步:// 注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。return true;
}
</script>// 注意到id为md5-password的<input>标记了name="password"，而用户输入的id为input-password的<input>没有name属性。没有name属性的<input>的数据不会被提交。
<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()"><input type="text" id="username" name="username"><input type="password" id="input-password"><input type="hidden" id="md5-password" name="password"><button type="submit">Submit</button>
</form><script>
function checkForm() {var input_pwd = document.getElementById('input-password');var md5_pwd = document.getElementById('md5-password');// 把用户输入的明文变为MD5:md5_pwd.value = toMD5(input_pwd.value);// 继续下一步:return true;
}
</script>// 表单事件
/*
（1）onfocus事件；获取焦点触发的事件
（2）onblur事件；失去焦点触发的事件
（3）onchange事件；在单行文本框text和多行文本框textarea输入文本时，由于文本框内字符串的改变将会触发onchange事件。
（4）onselect事件；选中单行文本框text或多行文本框textarea的文本时，会触发onselect事件。
*/

操作文件

注意：当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

出于安全考虑，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径：

通常，上传的文件都由后台服务器处理，JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的文件：

var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {alert('Can only upload image file.');return false;
}// HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。
varfileInput = document.getElementById('test-image-file'),info = document.getElementById('test-file-info'),preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {// 清除背景图片:preview.style.backgroundImage = '';// 检查文件是否选择:if (!fileInput.value) {info.innerHTML = '没有选择文件';return;}// 获取File引用:var file = fileInput.files[0];// 获取File信息:info.innerHTML = '文件: ' + file.name + '<br>' +'大小: ' + file.size + '<br>' +'修改: ' + file.lastModifiedDate;if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {alert('不是有效的图片文件!');return;}// 读取文件:var reader = new FileReader();reader.onload = function(e) {vardata = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'            preview.style.backgroundImage = 'url(' + data + ')';};// 以DataURL的形式读取文件:reader.readAsDataURL(file);
});// 上面的代码演示了如何通过HTML5的File API读取文件内容。以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...，常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。

AJAX

用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。
在现代浏览器上写AJAX主要依靠XMLHttpRequest对象：

'use strict';
// 成功
function success(text) {var textarea = document.getElementById('test-response-text');textarea.value = text;
}
// 失败
function fail(code) {var textarea = document.getElementById('test-response-text');textarea.value = 'Error code: ' + code;
}
// 新建XMLHttpRequest对象
var request;
// 标准写法和IE写法混在一起
if (window.XMLHttpRequest) {request = new XMLHttpRequest();
} else {request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.onreadystatechange = function () { // 状态发生变化时，函数被回调if (request.readyState === 4) { // 成功完成// 判断响应结果:if (request.status === 200) {// 成功，通过responseText拿到响应的文本:return success(request.responseText);} else {// 失败，根据响应码判断失败原因:return fail(request.status);}} else {// HTTP请求还在继续...}
}
// 发送请求:第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。
// 注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。
request.open('GET', '/api/categories', true);
request.send();alert('请求已发送，请等待响应...');// 安全限制
// 上面代码的URL使用的是相对路径。如果你把它改为'http://www.sina.com.cn/'，再运行，肯定报错。在Chrome的控制台里，还可以看到错误信息。// 这是因为浏览器的同源策略导致的。默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。
// 完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。// 那是不是用JavaScript无法请求外域（就是其他网站）的URL了呢？方法还是有的，大概有这么几种：// 一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。// 二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器：
'/proxy?url=http://www.sina.com.cn' // 代理服务器再把结果返回，这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。

JSOUP

// 第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源：
<html>
<head><script src="http://example.com/abc.js"></script>...
</head>
<body>
...
</body>
</html>// JSONP通常以函数调用的形式返回，例如，返回JavaScript内容如下：
foo('data');
// 这样一来，我们如果在页面中先准备好foo()函数，然后给页面动态加一个<script>节点，相当于动态读取外域的JavaScript资源，最后就等着接收回调了。//以163的股票查询URL为例，对于URL：http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice，你将得到如下返回：
// refreshPrice({"0000001":{"code": "0000001", ... });
// 因此我们需要首先在页面中准备好回调函数：
function refreshPrice(data) {var p = document.getElementById('test-jsonp');p.innerHTML = '当前价格：' +data['0000001'].name +': ' + data['0000001'].price + '；' +data['1399001'].name + ': ' +data['1399001'].price;
}// 最后用getPrice()函数触发：
function getPrice() {varjs = document.createElement('script'),head = document.getElementsByTagName('head')[0];js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';head.appendChild(js);
}
// 就完成了跨域加载数据。

CORS

如果浏览器支持HTML5，那么就可以一劳永逸地使用新的跨域策略：CORS了。
Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（如sina.com）发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。
用一个图来表示就是：
在这里插入图片描述
假设本域是my.com，外域是sina.com，只要响应头Access-Control-Allow-Origin为http://my.com，或者是*，本次请求就可以成功。
可见，跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin，决定权始终在对方手中。
上面这种跨域请求，称之为“简单请求”。简单请求包括GET、HEAD和POST（POST的Content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出现任何自定义头（例如，X-Custom: 12345），通常能满足90%的需求。
无论你是否需要用JavaScript通过CORS跨域请求资源，你都要了解CORS的原理。最新的浏览器全面支持HTML5。在引用外域资源时，除了JavaScript和CSS外，都要验证CORS。例如，当你引用了某个第三方CDN上的字体文件时：

/* CSS */
@font-face {font-family: 'FontAwesome';src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
}
// 如果该CDN服务商未正确设置Access-Control-Allow-Origin，那么浏览器无法加载字体资源。

对于PUT、DELETE以及其他类型如application/json的POST请求，在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）到这个URL上，询问目标服务器是否接受：

OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST

// 服务器必须响应并明确指出允许的Method：
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400

浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method，才会继续发送AJAX，否则，抛出一个错误。
由于以POST、PUT方式传送JSON格式的数据在REST中很常见，所以要跨域正确处理POST和PUT请求，服务器端必须正确响应OPTIONS请求。

Promise

在JavaScript的世界中，所有代码都是单线程执行的。
由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：

function callback() {console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback, 1000); // 1秒钟后调用callback函数
console.log('after setTimeout()');// 控制台输出
/*
before setTimeout()
after setTimeout()
(等待1秒后)
Done
*/

var p1 = new Promise(test);
var p2 = p1.then(function (result) {console.log('成功：' + result);
});
var p3 = p2.catch(function (reason) {console.log('失败：' + reason);
});
// 变量p1是一个Promise对象，它负责执行test函数。由于test函数在内部是异步执行的，当test函数执行成功时，我们告诉Promise对象：
// 如果成功，执行这个函数：
p1.then(function (result) {console.log('成功：' + result);
});
// 当test函数执行失败时，我们告诉Promise对象：
p2.catch(function (reason) {console.log('失败：' + reason);
});// Promise对象可以串联起来，所以上述代码可以简化为：
new Promise(test).then(function (result) {console.log('成功：' + result);
}).catch(function (reason) {console.log('失败：' + reason);
});

绘图

参见HTML5部分。

错误处理

try … catch … finally

语法

// 完整的try ... catch ... finally：
try {...
} catch (e) {...
} finally {...
}// 只有try ... catch，没有finally：
try {...
} catch (e) {...
}// 只有try ... finally，没有catch：
try {...
} finally {...
}

示例

var r1, r2, s = null;
try {r1 = s.length; // 此处应产生错误r2 = 100; // 该语句不会执行
} catch (e) {console.log('出错了：' + e);
} finally {console.log('finally');
}
console.log('r1 = ' + r1); // r1应为undefined
console.log('r2 = ' + r2); // r2应为undefined
/*
出错了：TypeError: Cannot read property 'length' of null
finally
r1 = undefined
r2 = undefined
*/

// 错误类型
// JavaScript有一个标准的`Error`对象表示错误，还有从`Error`派生的`TypeError`、`ReferenceError`等错误对象。我们在处理错误时，可以通过`catch(e)`捕获的变量`e`访问错误对象：
// 使用变量e是一个习惯用法，也可以以其他变量名命名，如catch(ex)。
try {...
} catch (e) {if (e instanceof TypeError) {alert('Type error!');} else if (e instanceof Error) {alert(e.message);} else {alert('Error: ' + e);}
}// 抛出错误
// 程序也可以主动抛出一个错误，让执行流程直接跳转到catch块。抛出错误使用throw语句。
var r, n, s;
try {s = prompt('请输入一个数字');n = parseInt(s);if (isNaN(n)) {throw new Error('输入错误');}// 计算平方:r = n * n;console.log(n + ' * ' + n + ' = ' + r);
} catch (e) {console.log('出错了：' + e);
}

教程参考与笔记

javascript 幻灯片代码(含自动播放)
实用示例
Javascript教程

这篇关于JavaScript整理笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！