JavaScript学习记录

#JavaScript

JavaScript 是世界上最流行的脚本语言。在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。 JavaScript 同时接受双引号和单引号
JavaScript 是属于 HTML 和 Web 的编程语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。JavaScript 被设计为向 HTML 页面增加交互性。您能够在 HTML 文档中放置任意数量的脚本。

• HTML 定义网页的内容
• CSS 规定网页的布局
• JavaScript 对网页行为进行编程

脚本可被放置与 HTML 页面的 或 部分中，或兼而有之。把脚本置于元素的底部，可改善显示速度，因为脚本编译会拖慢显示. 脚本可放置与外部文件中 ,JavaScript 文件的文件扩展名是 .js。

如需使用外部脚本，请在 外部脚本不能包含

• 分离了 HTML 和代码
• 使 HTML 和 JavaScript 更易于阅读和维护
• 已缓存的 JavaScript 文件可加速页面加载
  外部引用可通过完整的 URL 或相对于当前网页的路径引用外部脚本：

小列子

在 HTML 中，JavaScript 代码必须位于 标签之间。

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

改变 HTML 内容

HTML 属性可用于获取或替换 HTML 元素的内容。 查找” id=“demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”

document.getElementById(“demo”).innerHTML=“Hello JavaScript”;

改变 HTML 属性

改变 标签的 src 属性（source）来改变一张 HTML 图像

document.getElementById(“myImage”).src="/x.gif"

###改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

如：document.getElementById(“demo”).style.fontsize=“25px”;

###添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

隐藏 HTML 元素

通过改变 display 样式来隐藏 HTML 元素
document.getElementById(“demo”).style.display=“none”;

显示 HTML 元素

document.getElementById(“demo”).style.display=“block”;

###添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。例如，当发生事件时调用函数，比如当用户点击按钮时， 函数会在按钮被点击时调用

输出

JavaScript 不提供任何内建的打印或显示函数。

JavaScript 能够以不同方式“显示”数据：

• 使用 window.alert() 写入警告框

• 使用 document.write() 写入 HTML 输出，出于测试目的

**注意：**在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

• 使用 innerHTML 写入 HTML 元素

• 使用 console.log() 写入浏览器控制台， 来显示数据

语句

1. JavaScript 语句由以下构成：值、运算符、表达式、关键词和注释。
2. 语句会按照它们被编写的顺序逐一执行。
3. 每条可执行的语句之后添加分号 ，**提示：**以分号结束语句不是必需的，但我们仍然强烈建议您这么做。
4. 在运算符旁边（ = + - * / ）添加空格是个好习惯，JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。
5. 如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符，程序员们常常喜欢把代码行控制在 80 个字符以内。
6. JavaScript 语句可以用花括号（{…}）组合在代码块中。代码块的作用是定义一同执行的语句。

###关键词

JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do … while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if … else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try … catch	对语句块实现错误处理。
var	声明变量。

**注释：**JavaScript 关键词指的是保留的单词。保留词无法用作变量名。

JavaScript 语句定义两种类型的值：混合值和变量值。混合值被称为字面量（literal）， 写数值有无小数点均可 ，字符串是文本，由双引号或单引号包围 。变量值被称为变量，变量用于存储数据值。

###注释

并非所有 JavaScript 语句都被“执行”。双斜杠 // 或 /* 与 */ 之间的代码被视为注释。

###标识符

在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。连串的字符可以是字母、数字、下划线或美元符号。数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。 所有 JavaScript 标识符对大小写敏感。JavaScript 中不能使用连字符。它是为减法预留的用下划线和驼峰式大小写。 JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写 。

JavaScript 使用 Unicode 字符集。Unicode 覆盖世界上几乎所有的字符、标点和符号。

不带有值的变量，它的值将是 undefined。

如果再次声明某个 JavaScript 变量，将不会丢它的值。

要给数值放入引号中，其余数值会被视作字符串并被级联。
“8” + 3 + 5——>835 3 + 5 + “8” ——> 88

比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

###类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

JavaScript 运算符优先级值

值	运算符	描述	实例
20	( )	表达式分组	(3 + 4)
19	.	成员	person.name
19	[]	成员	person[“name”]
19	()	函数调用	myFunction()
19	new	创建	new Date()
17	++	后缀递增	i++
17	–	后缀递减	i–
16	++	前缀递增	++i
16	–	前缀递减	–i
16	!	逻辑否	!(x==y)
16	typeof	类型	typeof x
15	**	求幂 (ES7)	10 ** 2
14	*	乘	10 * 5
14	/	除	10 / 5
14	%	模数除法	10 % 5
13	+	加	10 + 5
13	-	减	10 - 5
12	<<	左位移	x << 2
12	>>	右位移	x >> 2
12	>>>	右位移（无符号）	x >>> 2
11	<	小于	x < y
11	<=	小于或等于	x <= y
11	>	大于	x > y
11	>=	大于或等于	x >= y
11	in	对象中的属性	“PI” in Math
11	instanceof	对象的实例	instanceof Array
10	==	相等	x == y
10	===	严格相等	x === y
10	!=	不相等	x != y
10	!==	严格不相等	x !== y
9	&	按位与	x & y
8	^	按位 XOR	x ^ y
7	|	按位或	x | y
6	&&	逻辑与	x && y
5	||	逻辑否	x || y
4	? :	条件	? “Yes” : “No”
3	=	赋值	x = y
3	+=	赋值	x += y
3	-=	赋值	x -= y
3	*=	赋值	x *= y
3	%=	赋值	x %= y
3	<<=	赋值	x <<= y
3	>>=	赋值	x >>= y
3	>>>=	赋值	x >>>= y
3	&=	赋值	x &= y
3	^=	赋值	x ^= y
3	|=	赋值	x |= y
2	yield	暂停函数	yield x
1	,	逗号	7 , 8

注意： 括号中的表达式会在值在表达式的其余部分中被使用之前进行完全计算。

数据类型

JavaScript 中有五种可包含值的数据类型：

• 字符串（string）
• 数字（number）
• 布尔（boolean）
• 对象（object）
• 函数（function）

有三种对象类型：

• 对象（Object）
• 日期（Date）
• 数组（Array）

同时有两种不能包含值的数据类型：

• null

• undefined

• JavaScript 数组用方括号书写，数组的项目由逗号分隔。JavaScript 对象用花括号来书写，对象属性是 name:value 对，由逗号分隔。

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

• 写数值时用不用小数点均可 ， 超大或超小的数值可以用科学计数法来写 , JavaScript 数值始终以双精度浮点数来存储。此格式用 64 位存储数值，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号。 整数（不使用指数或科学计数法）会被精确到 15 位。 小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准

• 字符串被引号包围，您可使用单引号或双引号，可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配 。字符串是不可变的：字符串不能更改，只能替换。

• 布尔值只有两个值：true 或 false， 经常用在条件测试中。

• 用字符串减去字符串，不会产生错误而是返回 NaN（Not a Number）

注意：

• NaN 的数据类型是数值

• 数组的数据类型是对象

• 日期的数据类型是对象

• null 的数据类型是对象

• 未定义变量的数据类型是 undefined

• 尚未赋值的变量的数据类型也是 undefined

####NaN - 非数值

NaN 属于 JavaScript 保留词，指示某个数不是合法数。
尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）， 在数学运算中使用了 NaN，则结果也将是 NaN。可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数
NaN 是数，typeof NaN 返回 number。

Infinity

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。 除以 0（零）也会生成 Infinity ；typeOf Infinity 返回 number。

1. JavaScript 会把前缀为 0x 的数值常量解释为十六进制。
2. typeof 确定 JavaScript 变量的类型 没有值的变量，其值是 undefined。typeof 也返回 undefined。 空值与 undefined 不是一回事。空的字符串变量既有值"“也有类型"string”。
   typeof 运算符把数组返回为 “object”，因为在 JavaScript 中数组即对象。
3. 在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。不幸的是，在 JavaScript 中，null 的数据类型是对象。您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。您可以通过设置值为 null 清空对象。
4. Undefined 与 null 的值相等，但类型不相等；值是 null，类型是对象，值是 undefined，类型是 undefined。

###isFinite() 方法

如果参数为 Infinity 或 NaN，则全局 isFinite() 方法返回 false。

####数组、字符串长度

内建属性 length 可返回字符串的长度, length 属性返回数组的长度（数组元素的数目）。

####查找字符串中的字符串

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）;
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
两种方法都接受作为检索起始位置的第二个参数。

####检索字符串中的字符串

search() 方法搜索特定值的字符串，并返回匹配的位置
两种方法，indexOf() 与 search()，是相等的。
这两种方法是不相等的。区别在于：
search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。

####提取部分字符串

有三种提取部分字符串的方法：

• slice(start, end) 提取字符串的某个部分并在新字符串中返回被提取的部分。 如果某个参数为负，则从字符串的结尾开始计数。 如果省略第二个参数，则该方法将裁剪字符串的剩余部分
• substring(start, end)substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引。 如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分。
• substr(start, length)substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。 如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。 如果首个参数为负，则从字符串的结尾计算位置。 第二个参数不能为负，因为它定义的是长度。 如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感)请注意正则表达式不带引号。如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）

####连接

concat() 连接两个或多个字符串

concat() 方法可用于代替加运算符

下面两行是等效的：

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

转换为大写和小写

通过 toUpperCase() 把字符串转换为大写
通过 toLowerCase() 把字符串转换为小写

####替换字符串内容

replace() 方法用另一个值替换在字符串中指定的值,replace() 方法不会改变调用它的字符串。它返回的是新字符串。 默认地，replace() 只替换首个匹配, 默认地，replace() 对大小写敏感。

####String.trim()

trim() 方法删除字符串两端的空白符

####提取字符串字符

这是两个提取字符串字符的安全方法：

• charAt(position) 返回字符串中指定下标（位置）的字符串
• charCodeAt(position) 返回字符串中指定索引的字符 unicode 编码

属性访问（Property Access）

允许对字符串的属性访问 [ ]：

使用属性访问有点不太靠谱：

• 不适用 Internet Explorer 7 或更早的版本
• 它让字符串看起来像是数组（其实并不是）
• 如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。
• 它是只读的。str[0] = “A” 不会产生错误（但也不会工作！）

如果您希望按照数组的方式处理字符串，可以先把它转换为数组。

####把字符串转换为数组

可以通过 split() 将字符串转换为数组
如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。
如果分隔符是 “”，被返回的数组将是间隔单个字符的数组

toString() 方法

• 能够把数输出为十六进制、八进制或二进制。

• 能够把数组转换为数组值（逗号分隔）的字符串。

####toExponential() 方法

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。参数定义小数点后的字符数， 该参数是可选的。如果您没有设置它，JavaScript 不会对数字进行舍入。

####toFixed() 方法

toFixed() 返回字符串值，它包含了指定位数小数的数字， 非常适合处理金钱 。

####toPrecision() 方法

toPrecision() 返回字符串值，它包含了指定长度的数字

valueOf() 以数值返回数值

在 JavaScript 中，数字可以是原始值（typeof = number）或对象（typeof = object）。
在 JavaScript 内部使用 valueOf() 方法可将 Number 对象转换为原始值。
没有理由在代码中使用它。
所有 JavaScript 数据类型都有 valueOf() 和 toString() 方法。

处理数字时最相关的方法(如果无法转换数字，则返回 NaN。)：

方法	描述
Number()	返回数字，由其参数转换而来。
parseFloat()	解析其参数并返回浮点数。允许空格。只返回首个数字
parseInt()	解析其参数并返回整数。允许空格,只返回首个数字.

Number(new Date("2019-04-15"));    // 返回 1506729600000
//Number() 方法返回 2019-04-15 至今的毫秒数。

####数值属性

属性	描述
MAX_VALUE	返回 JavaScript 中可能的最大数。
MIN_VALUE	返回 JavaScript 中可能的最小数。
NEGATIVE_INFINITY	表示负的无穷大（溢出返回）。
NaN	表示非数字值（“Not-a-Number”）。
POSITIVE_INFINITY	表示无穷大（溢出返回）。

####遍历数组元素

遍历数组的最安全方法是使用 “for” 循环：

var fruits, text,  i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
for (i = 0; i < fruits.length; i++) {
     text += "<li>" + fruits[i] + "</li>";
} 

可以使用 Array.foreach() 函数

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

####添加数组元素

向数组添加新元素的最佳方法是使用 push() 方法：fruits.push(“Lemon”);

添加最高索引的元素可在数组中创建未定义的“洞”：

####数组和对象的区别

在 JavaScript 中，数组使用数字索引。
在 JavaScript 中，对象使用命名索引。
数组是特殊类型的对象，具有数字索引。
如果希望元素名为字符串（文本）则应该使用对象。如果希望元素名为数字则应该使用数组。

如何识别数组

解决方案 1：Array.isArray(fruits); // 返回 true

解决方案 2：

创建您自己的 isArray() 函数以解决此问题：

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

解决方案 3：假如对象由给定的构造器创建，则 instanceof 运算符返回 true：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
 
fruits instanceof Array     // 返回 true

数组

####删除元素Popping 和 Pushing

1. 可用delete 运算符来删除如：delete fruits[0]; 使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。
2. 通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素。fruits.splice(0, 1); // 删除 fruits 中的第一个元素
3. Popping删除元素 和 Pushing添加新元素 指的是：从数组弹出项目，或向数组推入项目。
   • pop() 方法从数组中删除最后一个元素 ， pop() 方法返回“被弹出”的值；
   • push() 方法（在数组结尾处）向数组添加一个新的元素 ， 返回新数组的长度 。

####位移元素

位移与弹出等同，但处理首个元素而不是最后一个。shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。 shift() 方法返回被“位移出”的字符串。

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素。 返回新数组的长度。

####更改元素

通过使用它们的索引号来访问数组元素：
数组*索引（下标）*以 0 开始。[0] 是第一个数组元素，[1] 是第二个，[2] 是第三个

####join() 方法也可将所有数组元素结合为一个字符串。

它的行为类似 toString()，但是您还可以规定分隔符：

####拼接数组

splice() 方法可用于向数组添加新项如：fruits.splice(2, 0, “Lemon”, “Kiwi”);

第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组：
var myChildren = arr1.concat(arr2, arr3); // 将arr1、arr2 与 arr3 连接在一起

####裁剪数组

slice() 方法用数组的某个片段切出新数组。

slice() 可接受两个参数，比如 (1, 3)。该方法会从开始参数选取元素，直到结束参数（不包括）为止。 如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。

数组排序

1. sort() 方法以字母顺序对数组进行排序 points.sort();

2. 数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。

   sort() 方法在对数值排序时会产生不正确的结果，我们通过一个比值函数来修正此问题：

   //升序
   var points = [40, 100, 1, 5, 25, 10];
   points.sort(function(a, b){return a - b}); 
   //降序
   var points = [40, 100, 1, 5, 25, 10];
   points.sort(function(a, b){return b - a}); 
   

3. 随机顺序排序

   points.sort(function(a, b){return 0.5 - Math.random()}); 
   

4. 排序对象数组

   通过比较函数来对比属性值 cars.sort(function(a, b){return a.year - b.year});

   比较字符串属性

   cars.sort(function(a, b){
   	  var x = a.type.toLowerCase();
   	  var y = b.type.toLowerCase();
   	  if (x < y) {return -1;}
   	  if (x > y) {return 1;}
   	  return 0;
   });
   

查找最高（或最低）的数组值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。 但数组进行排序之后，能够使用索引来获得最高或最低值。

//升序如下，降序反之。
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

// 现在 points[0] 包含最低值
// 而 points[points.length-1] 包含最高值

查找数组中的最高值

可以使用 Math.max.apply 来查找数组中的最高值：

实例：

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

对数组使用 Math.min()

您可以使用 Math.min.apply 来查找数组中的最低值：

实例：

function myArrayMin(arr) {
    return Math.min.apply(null, arr);
}

Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。

我的 Max / Min JavaScript 方法

Max：此函数遍历数组，用找到的最高值与每个值进行比较

function myArrayMax(arr){
    var len = arr.length;
    var max = -Infinity;
    while (len--){
        if (arr[len] > max){
            max = len[len];
        }
    }
    return max;
}

Min: 此函数遍历数组，用找到的最低值与每个值进行比较

function  myArrayMin(arr){
    var len = arr.length;
    var min = Infinity;
    while(arr--){
        if(arr[len] < min){
            min =arr[len];
        }
	}
    return min;
}

####反转数组

reverse() 方法反转数组中的元素。

####合并（连接）数组

concat() 方法通过合并（连接）现有数组来创建一个新数组
var myChildren = myGirls.concat(myBoys); // 连接 myGirls 和 myBoys

concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数：

数组迭代方法

####Array.forEach()

forEach() 方法为每个数组元素调用一次函数（回调函数）。

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
//该函数最多可接受 3 个参数,项目值 项目索引 数组本身
function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

####Array.map()

map() 方法通过对每个数组元素执行函数来创建新数组。对没有值的数组元素不会执行函数。不会更改原始数组。

将每个数组值乘以2实例：

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

####Array.filter()

filter() 方法创建一个包含通过测试的数组元素的新数组。

用值大于 18 的元素创建一个新数组实例：

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

####Array.every()

every() 方法检查所有数组值是否通过测试。返回true or false

这个例子检查所有数组值是否大于 18：

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
//此函数接受 3 个参数：项目值 项目索引 数组本身 
function myFunction(value, index, array) {
  return value > 18;
}
//如果回调函数仅使用第一个参数（值）时，可以省略其他参数：
function myFunction(value) {
  return value > 18;
}

Array.some()

some() 方法检查某些数组值是否通过了测试。

这个例子检查某些数组值是否大于 18：返回true or false

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;

####Array.indexOf(item, start)在数组中搜索元素值并返回其位置。

item	必需。要检索的项目。
start	可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

**注释：**第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

如果未找到项目，Array.indexOf() 返回 -1。如果项目多次出现，则返回第一次出现的位置。

array.lastIndexOf(item, start)

item	必需。要检索的项目。
start	可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。

####Array.find()

find() 方法返回通过测试函数的第一个数组元素的值。

这个例子查找（返回）大于 18 的第一个元素的值：

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

####Array.findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

这个例子查找大于 18 的第一个元素的索引：

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
  }

####Array.reduce()

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。在数组中从左到右工作。另请参阅 reduceRight()。不会减少原始数组。

这个例子确定数组中所有数字的总和：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);
//此函数接受 4 个参数：总数（初始值/先前返回的值） 项目值 项目索引 数组本身
function myFunction(total, value, index, array) {
  return total + value;
}
//上例并未使用 index 和 array 参数。可以将它改写为：
function myFunction(total, value) {
  return total + value;
}

####Array.reduceRight()

reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。在数组中从右到左工作。另请参阅 reduce()。不会减少原始数组。

这个例子确定数组中所有数字的总和：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);
//此函数接受 4 个参数：总数（初始值/先前返回的值） 项目值 项目索引 数组本身
function myFunction(total, value, index, array) {
  return total + value;
}
//上例并未使用 index 和 array 参数。可以将它改写为：
function myFunction(total, value) {
  return total + value;
}

反斜杠转义字符把特殊字符转换为字符串字符：

代码	结果	描述
’	’	单引号
"	"	双引号
\	\	反斜杠

其他六个 JavaScript 中有效的转义序列：

代码	结果
\b	退格键
\f	换页
\n	新行
\r	回车
\t	水平制表符
\v	垂直制表符

##函数

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数会在某代码调用它时被执行。

函数语法

通过 function 关键词进行定义，其后函数名和括号 ()。函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。圆括号可包括由逗号分隔的参数：
由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

函数参数（Function parameters)是在函数定义中所列的名称。当调用函数时由函数接收的真实的值。在函数中，参数是局部变量。在其他编程语言中，函数近似程序（Procedure）或子程序（Subroutine）。

由于局部变量只能被其函数识别，因此可以在不同函数中使用相同名称的变量。局部变量在函数开始时创建，在函数完成时被删除。

值以名称:值对的方式来书写（名称和值由冒号分隔）。 名称:值对被称为属性。
对象也可以有方法，方法是在对象上执行的动作，方法以函数定义被存储在属性中。

在函数定义中，this 引用该函数的“拥有者”， 空格和折行都是允许的，对象定义可横跨多行 。

###函数表达式

JavaScript 函数也可以使用表达式来定义。

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

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

匿名函数（没有名称的函数）。存放在变量中的函数不需要函数名。他们总是使用变量名调用。上面的函数使用分号结尾，因为它是可执行语句的一部分。

Function() 构造器

函数也可以通过名为 Function() 的内建 JavaScript 函数构造器来定义。

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

var x = myFunction(4, 3);
//无需使用函数构造器。上面的例子这么写也是一样的：
var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);

###函数调用

函数中的代码将在其他代码调用该函数时执行：

• 当事件发生时（当用户点击按钮时）
• 当 JavaScript 代码调用时
• 自动的（自调用）

自调用函数

函数表达式可以作为“自调用”。
自调用表达式是自动被调用（开始）的，在不进行调用的情况下。
函数表达式会自动执行，假如表达式后面跟着 ()。您无法对函数声明进行自调用。您需要在函数周围添加括号，以指示它是一个函数表达式：

(function () {
    var x = "Hello!!";      //我会调用我自己
})();

###函数返回

当 JavaScript 到达 return 语句，函数将停止执行。如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。函数通常会计算出返回值。这个返回值会返回给调用者。

访问没有 () 的函数将返回函数定义 ，局部变量只能在函数内访问。

###访问对象方法

您能够通过如下语法访问对象方法：

objectName.methodName()

如果您不使用 () 访问 fullName 方法，则将返回函数定义

请不要把字符串、数值和布尔值声明为对象！ 他们会增加代码的复杂性并降低执行速度。

###参数通过值传递,对象是由引用传递的

事件

使用单引号：

<element event='一些 JavaScript'>

使用双引号：

<element event="一些 JavaScript">

###常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载，onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
请把鼠标移上来</div>

<script>
function mOver(obj) {
  obj.innerHTML = "谢谢您"
}

function mOut(obj) {
  obj.innerHTML = "请把鼠标移上来"
}
</script>

</body>
</html>

日期

UTC（Universal Time Coordinated）等同于 GMT（格林威治时间）。
**注释：**UTC，协调世界时，又称世界统一时间，世界标准时间，国际协调时间。
日期和时间通过大写字母 T 来分隔。UTC 时间通过大写字母 Z 来定义。
在日期-时间字符串中省略 T 或 Z，在不同浏览器中会产生不同结果。

var d = new Date();

###JavaScript 日期输出

1. 默认情况下，JavaScript 将使用浏览器的时区并将日期显示为全文本字符串, 在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串。 ：
   Tue Jul 27 2021 17:13:47 GMT+0800 (中国标准时间)

2. toUTCString() 方法将日期转换为 UTC 字符串（一种日期显示标准）。

   Wed, 28 Jul 2021 12:31:49 GMT

3. toDateString() 方法将日期转换为更易读的格式

   Wed Jul 28 2021

###JavaScript 日期输入

有四种 JavaScript 日期输入格式：

类型	实例
ISO 日期	“2018-02-19” （国际标准）
短日期	“02/19/2018” 或者 “2018/02/19”
长日期	“Feb 19 2018” 或者 “19 Feb 2019”
完整日期	“Monday February 25 2015”

创建 Date 对象

有 4 种方法创建新的日期对象：

• new Date() 用当前日期和时间创建新的日期对象 日期对象是静态的。计算机时间正在滴答作响，但日期对象不会。

• new Date(year, month, day, hours, minutes, seconds, milliseconds) 用指定日期和时间创建新的日期对象 . 7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）

  注释：JavaScript 从 0 到 11 计算月份。一月是 0。十二月是11。6个数字指定年、月、日、小时、分钟、秒;…… 您不能省略月份。如果只提供一个参数，则将其视为毫秒。 一位和两位数年份将被解释为 19xx 年 .

• new Date(milliseconds) 创建一个零时加毫秒的新日期对象 var d = new Date(0);

• new Date(date string) 从日期字符串创建一个新的日期对象

  var d = new Date(“October 13, 2014 11:13:00”);

###获取日期的某个部分

获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法（以字母顺序排序）：

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）要获得正确的月份须添加 1
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

可以使用名称数组，并使用 getMonth() 将月份作为名称返回：

var d = new Date();
var months = 
            [
            "January", "February", "March", "April", "May", "June", 
            "July", "August", "September", "October", "November", "December"
            ];
document.getElementById("demo").innerHTML = months[d.getMonth()];

###UTC 日期方法

UTC 日期方法用于处理 UTC 日期（通用时区日期，Univeral Time Zone dates）：

方法	描述
getUTCDate()	等于 getDate()，但返回 UTC 日期
getUTCDay()	等于 getDay()，但返回 UTC 日
getUTCFullYear()	等于 getFullYear()，但返回 UTC 年
getUTCHours()	等于 getHours()，但返回 UTC 小时
getUTCMilliseconds()	等于 getMilliseconds()，但返回 UTC 毫秒
getUTCMinutes()	等于 getMinutes()，但返回 UTC 分
getUTCMonth()	等于 getMonth()，但返回 UTC 月
getUTCSeconds()	等于 getSeconds()，但返回 UTC 秒

###日期设置方法

设置方法用于设置日期的某个部分。下面是最常用的方法（按照字母顺序排序）：

方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）如：d.setFullYear(2020, 11, 3);
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

###比较日期

var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2049, 0, 16);

if (someday > today) {
  text = "今天在 2049 年 1 月 16 日之前";
} else {
  text = "今天在 2049 年 1 月 16 日之后";
}
document.getElementById("demo").innerHTML = text;

Math 对象

###Math 对象访问的 8 个数学常量：

Math.E          // 返回欧拉指数（Euler's number）
Math.PI         // 返回圆周率（PI）
Math.SQRT2      // 返回 2 的平方根
Math.SQRT1_2    // 返回 1/2 的平方根
Math.LN2        // 返回 2 的自然对数
Math.LN10       // 返回 10 的自然对数
Math.LOG2E      // 返回以 2 为底的 e 的对数（约等于 1.414）
Math.LOG10E     // 返回以 10 为底的 e 的对数（约等于0.434）

###Math 对象方法

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值，以弧度计
asin(x)	返回 x 的反正弦值，以弧度计
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度
ceil(x)	对 x 进行上舍入
cos(x)	返回 x 的余弦
exp(x)	返回 Ex 的值
floor(x)	对 x 进行下舍入
log(x)	返回 x 的自然对数（底为e）
max(x,y,z,…,n)	返回最高值
min(x,y,z,…,n)	返回最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把 x 四舍五入为最接近的整数
sin(x)	返回 x（x 以角度计）的正弦
sqrt(x)	返回 x 的平方根
tan(x)	返回角的正切

###随机数

Math.random() 与 Math.floor() 一起使用用于返回随机整数。

//返回介于 min（包括）和 max（不包括）之间的随机数：
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}
//介于 min 和 max（都包括）之间的随机数：
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}

逻辑

Boolean() 函数

您可以使用 Boolean() 函数来确定表达式（或变量）是否为真

NaN false null undefined " "（空值） -0 (负零) 0（零）的布尔值为 false , 任何表达式（除了零）是 true

运算符	描述
==	等于
===	值相等并且类型相等
!=	不相等
!==	值不相等或类型不相等

##If…Else Switch 语句

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

• 使用 if 来规定要执行的代码块，如果指定条件为 true
• 使用 else 来规定要执行的代码块，如果相同的条件为 false
• 使用 else if 来规定要测试的新条件，如果第一个条件为 false
• 使用 switch 来规定多个被执行的备选代码块

语法

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

**注释：**if使用小写字母。大写字母（IF 或 If）会产生 JavaScript 错误。

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 

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

如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。此举将停止代码块中更多代码的执行以及 case 测试。如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。 default 关键词规定不存在 case 匹配时所运行的代码。默认的 case 不必是 switch 代码块中最后一个 case 。

如果多种 case 匹配一个 case 值，则选择第一个 case。如果未找到匹配的 case，程序将继续使用默认 label。如果未找到默认 label，程序将继续 switch 后的语句。

循环

循环可多次执行代码块。

不同类型的循环

JavaScript 支持不同类型的循环：

• for - 多次遍历代码块

for 循环的语法如下：

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

• for/in - 遍历对象属性

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

• while - 当指定条件为 true 时循环一段代码块

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

• do/while - 当指定条件为 true 时循环一段代码块

do {
    要执行的代码块
}

while (条件);

Break 和 Continue

break 语句没有标签引用 “跳出” 一个循环或一个 switch循环， 有标签引用，则 break 语句可用于跳出任意代码块 。continue 语句“跳过”循环中的一个迭代。

类型转换

###constructor 属性

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

可以通过检查 constructor 属性来确定某个对象是否为数组（包含单词 “Array”）：

//推荐方法
function isArray(myArray) {
    return myArray.constructor === Array;
}
//扩展方法
function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

JavaScript 变量能够被转换为新变量以及另一种数据类型：

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

Number() 转换数值，String() 转换字符串，Boolean() 转换布尔值。一元的 + 运算符可用于把变量转换为数字 ，如果无法转换变量，则仍会成为数字，但是值为 NaN（Not a number）

**注意：**空的字符串转换为 0。其他字符串将转换为 NaN（Not a number，不是数字）。[]转化为数字为0，转化为字符串为""

方法	描述
toExponential()	返回字符串，对数字进行舍入，并使用指数计数法来写。
toFixed()	返回字符串，对数字进行舍入，并使用指定位数的小数来写。
toPrecision()	返回字符串，把数字写为指定的长度。
parseFloat()	解析字符串并返回浮点数。
parseInt()	解析字符串并返回整数。

位运算符

###JavaScript 位运算符

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

###二进制转换为十进制

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

把十进制转换为二进制

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

正则表达式

正则表达式是构成搜索模式的字符序列。该搜索模式可用于文本搜索和文本替换操作。

语法

/pattern/modifiers;
//模式（pattern）（在搜索中使用）。i 是修饰符（把搜索修改为大小写不敏感）。

修饰符可用于大小写不敏感的更全局的搜素：

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

###正则表达式常用于两个字符串方法：search() 和 replace()。

search() 方法使用表达式来搜索匹配，然后返回匹配的位置。

replace(旧，新) 方法返回模式被替换处修改后的字符串。

括号用于查找一定范围的字符串：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找由 | 分隔的任何选项。

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

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

Quantifiers 定义量词：

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

###使用 test()

test() 是一个正则表达式方法。它通过模式来搜索字符串，然后根据结果返回 true 或 false。

//搜索字符串中的字符 "e"：
/e/.test("The best things in life are free!");
//结果：true

###使用 exec()

exec() 方法是一个正则表达式方法。它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。如果未找到匹配，则返回 null。

/e/.exec("The best things in life are free!");
//结果：e

Throw 和 Try to Catch

• try 语句使您能够测试代码块中的错误。

• catch 语句允许您处理错误, JavaScript 实际上会创建带有两个属性的 Error 对象：name( 设置或返回错误名 ) 和 message( 设置或返回错误消息（一条字符串 )。

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

• finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

语法

try {
     供测试的代码块
}
 catch(err) {
     处理错误的代码块
} 
finally {
     无论 try / catch 结果如何都执行的代码块
}

输入验证案例

<!DOCTYPE html>
<html>
<body>

<p>请输入 5 到 10 之间的数字：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">检测输入</button>

<p id="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "")  throw "是空的";
    if(isNaN(x)) throw "不是数字";
    x = Number(x);
    if(x > 10)   throw "太大";
    if(x < 5)  throw "太小";
  }
  catch(err) {
    message.innerHTML = "输入：" + err;
  }
  finally {
    document.getElementById("demo").value = "";
  }
}
</script>

</body>
</html>

###error .name 属性可返回六个不同的值：

错误名	描述
EvalError	已在 eval() 函数中发生的错误
RangeError	已发生超出数字范围的错误
ReferenceError	已发生非法引用，如：尚未声明的变量
SyntaxError	已发生语法错误
TypeError	已发生类型错误,使用的值不在期望值的范围之内
URIError	在 encodeURI() 中已发生的错误

###非标准的 error 对象属性：

• fileName (Mozilla)
• lineNumber (Mozilla)
• columnNumber (Mozilla)
• stack (Mozilla)
• description (Microsoft)
• number (Microsoft)

请勿在公共网站使用这些属性。它们并不会在所有浏览器中工作。

作用域

作用域指的是您有权访问的变量集合。

在 JavaScript 中有两种作用域类型：

• 局部作用域

  在 JavaScript 函数中声明的变量，会成为函数的局部变量。局部变量的作用域是局部的：只能在函数内部访问它们。 在函数开始时会创建局部变量，在函数完成时会删除它们。

• 全局作用域

  全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。 在 HTML 中，全局作用域是 window。var定义的全局变量均属于 window 对象。( 通过 let 关键词定义的全局变量不属于 window 对象 ) 全局变量会在您关闭页面是被删除。

作用域决定了这些变量的可访问性（可见性）。函数内部定义的变量从函数外部是不可访问的（不可见的）。

###自动全局

如果您为尚未声明的变量赋值，此变量会自动成为全局变量。

除非有意为之，否则请勿创建全局变量。您的全局变量（或函数）能够覆盖 window 变量（或函数）。任何函数，包括 window 对象，能够覆盖您的全局变量和函数。

提升（Hoisting）

**提升（Hoisting）是 JavaScript 将声明移至顶部的默认行为。 只提升声明，而非初始化。 **

###let 和 const 关键字

用 let 或 const 声明的变量和常量不会被提升！
这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。

通过 var 关键词声明的变量没有块作用域。在块 {}内声明的变量可以从块之外进行访问。使用 let 关键词声明拥有块作用域的变量。在块 {}*内声明的变量无法从块外访问：

{ 
  let x = 10;
}
// 此处不可以使用 x

重新声明变量

在块中重新声明变量也将重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

使用 let 关键字重新声明变量在块中重新声明变量不会重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

###循环作用域

在循环中使用 var：

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

在循环中使用 let( 如果在循环中用 let 声明了变量 i，那么只有在循环内，变量 i 才是可见的。 )：

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的 ， 在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量也是不允许的 。在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的

var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

//
let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

//
let x = 10;       // 允许
let x = 6;       // 不允许

{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

通过 let 定义的变量不会被提升到顶端。在声明 let 变量之前就使用它会导致 ReferenceError。变量从块的开头一直处于“暂时死区”，直到声明为止

通过 const 定义的变量与 let 变量类似，但不能重新赋值,且const 变量必须在声明时赋值

###不是真正的常数

关键字 const 有一定的误导性。它没有定义常量值。它定义了对值的常量引用。因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。(无法整体，可以单个)

// 您可以创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};

// 您可以更改属性：
car.color = "White";

// 您可以添加属性：
car.owner = "Bill";


//但是您无法重新为常量对象赋值：
const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

###在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const：

var x = 2;         // 允许
const x = 2;       // 不允许
{
  let x = 2;     // 允许
  const x = 2;   // 不允许
}

通过 const 定义的变量不会被提升到顶端。const 变量不能在声明之前使用

##Use Strict

"use strict"; 定义 JavaScript 代码应该以“严格模式”执行。 它不算一条语句，而是一段文字表达式，更早版本的 JavaScript 会忽略它。 在严格模式中，您无法使用未声明的变量。

在脚本开头进行声明添加 “use strict”; 来声明严格模式。 拥有全局作用域（脚本中的所有代码均以严格模式来执行）

###为什么使用严格模式？

严格模式使我们更容易编写“安全的” JavaScript。严格模式把之前可接受的“坏语法”转变为真实的错误。在严格模式中，向不可写的、只能读取的、不存在的属性赋值，或者向不存在的变量或对象赋值，将抛出错误。

###对未来的保障

严格模式中不允许使用为未来预留的关键词。它们是：

• implements
• interface
• let
• package
• private
• protected
• public
• static
• yield

this 关键词

his 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

• 在方法中，this 指的是所有者对象。
• 单独的情况下，this 指的是全局对象。 在浏览器窗口中，全局对象是 [object Window]
• 在函数中，this 指的是全局对象。
• 在函数中，严格模式下，this 是 undefined。
• 在事件中，this 指的是接收事件的元素。

call() 和 apply() 是预定义的 JavaScript 方法。 这样的方法可以将 this 引用到任何对象。 当使用 person2 作为参数调用 person1.fullName 时，this 将引用 person2，即使它是 person1 的方法

call() 方法

call() 方法是预定义的 JavaScript 方法。
它可以用来调用所有者对象作为参数的方法。
通过 call()，您能够使用属于另一个对象的方法。

###apply() 方法

apply() 方法与 call() 方法非常相似：

###call() 和 apply() 之间的区别

不同之处是：

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

如果要使用数组而不是参数列表，则 apply() 方法非常方便。

//apply() 方法接受数组中的参数：
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);

//与 call() 方法对比
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");

调试

错误总会发生，每当您写一些新的计算机代码时。

通过 F12 键启动浏览器中的调试器，然后在调试器菜单中选择“控制台”。 可以使用 console.log() 在调试窗口中显示 JavaScript 的值

###设置断点

在调试窗口中，您可在 JavaScript 代码中设置断点。在每个断点中，JavaScript 将停止执行，以使您能够检查 JavaScript 的值。在检查值之后，您可以恢复代码执行。

debugger 关键词会停止 JavaScript 的执行，并调用（如果有）调试函数。

在一行的结尾自动关闭语句是默认的 JavaScript 行为。

在 script 标签中使用 defer=“true”。defer 属性规定了脚本应该在页面完成解析后执行，但它只适用于外部脚本。

如果可能，您可以在页面完成加载后，通过代码向页面添加脚本

###JavaScript 保留词

在 JavaScript 中，您不能把这些保留词作为变量、标记或函数名来使用：

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

###JavaScript 对象、属性和方法

您还应该避免使用 JavaScript 内建对象的名称、属性和方法：

Array	Date	eval	function
hasOwnProperty	Infinity	isFinite	isNaN
isPrototypeOf	length	Math	NaN
name	Number	Object	prototype
String	toString	undefined	valueOf

应该避免使用 HTML 和 Window 对象和属性的名称：

alert	all	anchor	anchors
area	assign	blur	button
checkbox	clearInterval	clearTimeout	clientInformation
close	closed	confirm	constructor
crypto	decodeURI	decodeURIComponent	defaultStatus
document	element	elements	embed
embeds	encodeURI	encodeURIComponent	escape
event	fileUpload	focus	form
forms	frame	innerHeight	innerWidth
layer	layers	link	location
mimeTypes	navigate	navigator	frames
frameRate	hidden	history	image
images	offscreenBuffering	open	opener
option	outerHeight	outerWidth	packages
pageXOffset	pageYOffset	parent	parseFloat
parseInt	password	pkcs11	plugin
prompt	propertyIsEnum	radio	reset
screenX	screenY	scroll	secure
select	self	setInterval	setTimeout
status	submit	taint	text
textarea	top	unescape	untaint
window

免使用所有 HTML 事件处理程序的名称。

例如：

onblur	onclick	onerror	onfocus
onkeydown	onkeypress	onkeyup	onmouseover
onload	onmouseup	onmousedown	onsubmit

##箭头函数（Arrow Function）

箭头函数允许使用简短的语法来编写函数表达式。您不需要 function 关键字、return 关键字以及花括号。 使用 const 比使用 var 更安全，因为函数表达式始终是常量值。 如果函数是单个语句，则只能省略 return 关键字和花括号。因此，保留它们可能是一个好习惯：

const x = (x, y) => { return x * y };

##JSON

##JSON 是存储和传输数据的格式。JSON 经常在数据从服务器发送到网页时使用。

JSON 语法规则

• 数据是名称/值对 “firstName”:“Bill”
• 数据由逗号分隔 {“firstName”:“Bill”, “lastName”:“Gates”}
• 花括号保存对象
• 方括号保存数组

"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"}, 
    {"firstName":"Alan", "lastName":"Turing"}
]

###把 JSON 文本转换为 JavaScript 对象

使用 JavaScript 的内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象

表单

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("必须填写姓名");
        return false;
    }
}

该函数能够在表单提交时被调用：

<form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post">
姓名：<input type="text" name="fname">
<input type="submit" value="Submit">
</form>

自动 HTML 表单验证

如果表单字段（fname）是空的，required 属性防止表单被提交

###约束验证 HTML 输入属性

属性	描述
disabled	规定 input 元素应该被禁用
max	规定 input 元素的最大值
min	规定 input 元素的最小值
pattern	规定 input 元素的值模式
required	规定输入字段需要某个元素
type	规定 input 元素的类型

###约束验证 CSS 伪选择器

选择器	描述
:disabled	选择设置了 “disabled” 属性的 input 元素。
:invalid	选择带有无效值的 input 元素。
:optional	选择未设置 “required” 属性的 input 元素。
:required	选择设置了 “required” 属性的 input 元素。
:valid	选择带有有效值的 input 元素。

###约束验证 DOM 方法

属性	描述
checkValidity()	返回 true，如果 input 元素包含有效数据
setCustomValidity()	设置 input 元素的 validationMessage 属性。

<!DOCTYPE html>
<html>
<body>

<p>输入数字并点击提交：</p>

<input id="id1" type="number" min="100" max="300" required>

<button onclick="myFunction()">提交</button>

<p>如果该数字小于 100 或大于 300，将显示错误消息。</p>

<p id="demo"></p>

<script>
function myFunction() {
  var inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "输入有效";
  } 
} 
</script>

</body>
</html>

###约束验证 DOM 属性

属性	描述
validity	包含与 input 元素的合法性相关的布尔属性。
validationMessage	包含当 validity 为 false 时浏览器显示的消息。
willValidate	指示是否验证 input 元素。

input 元素的 validity 属性包含了与数据合法性相关的一系列属性：

属性	描述
customError	设置为 true，如果设置自定义的合法性消息。
patternMismatch	设置为 true，如果元素值不匹配其 pattern 属性。
rangeOverflow	设置为 true，如果元素值大于其 max 属性。
rangeUnderflow	设置为 true，如果元素值小于其 min 属性。
stepMismatch	当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，该属性值为 true。
tooLong	设置为 true，如果元素值超过了其 maxLength 属性。
typeMismatch	当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，属性值为 true。
valueMissing	设置为 true，如果元素（包含 required）没有值。
valid	设置为 true，如果元素值是有效的。

##for…in 语句遍历对象的属性。

for…in 循环中的代码块会为每个属性执行一次。

for (variable in object) {
    要执行的代码
}

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

###delete 关键词会同时删除属性的值和属性本身。

删除完成后，属性在被添加回来之前是无法使用的。delete 操作符被设计用于对象属性。它对变量或函数没有影响。delete 操作符不应被用于预定义的 JavaScript 对象属性。这样做会使应用程序崩溃。

###添加新的方法

向对象添加方法是在构造器函数内部完成的

列子：

function person(firstName, lastName, age, eyeColor) {
    this.firstName = firstName;  
    this.lastName = lastName;
    this.age = age;
    this.eyeColor = eyeColor;
    this.changeName = function (name) {
        this.lastName = name;
    };
}

为已有的对象添加新方法 ：

myFather.name = function () {
    return this.firstName + " " + this.lastName;
};

###使用 prototype 属性

向构造器添加一个新属性，您必须添加到构造器函数

JavaScript prototype 属性允许您为对象构造器添加新属性

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";

prototype 属性也允许您为对象构造器添加新方法：

实例

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

###Getter 和 Setter

• 它提供了更简洁的语法
• 它允许属性和方法的语法相同
• 它可以确保更好的数据质量
• 有利于后台工作

// Create an object:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};

// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;

对象方法

// 添加或更改对象属性
Object.defineProperty(object, property,  descriptor)
Object.defineProperty(person, "language", {value : "ZH"});
Object.defineProperty(person, "language", {enumerable:false});//此例使语言不可枚举
Object.defineProperty(person, "year", {value:"2008"});// 添加属性
Object.defineProperty(person, "fullName", {
  get : function () {return this.firstName + " " + this.lastName;}
});// 定义 getter
// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)

// 访问属性
Object.getOwnPropertyDescriptor(object, property)

// 以数组返回所有属性
Object.getOwnPropertyNames(object)
Object.getOwnPropertyNames(person);  // 返回属性数组
// 以数组返回所有可枚举的属性
Object.keys(object)
Object.keys(person);  // 返回可枚举属性的数组
// 访问原型
Object.getPrototypeOf(object)

// 阻止向对象添加属性
Object.preventExtensions(object)

// 如果可将属性添加到对象，则返回 true
Object.isExtensible(object)

// 防止更改对象属性（而不是值）
Object.seal(object)

// 如果对象被密封，则返回 true
Object.isSealed(object)

// 防止对对象进行任何更改
Object.freeze(object)

// 如果对象被冻结，则返回 true
Object.isFrozen(object)

###属性元数据：

writable : true      // 属性值可修改
enumerable : true    // 属性可枚举
configurable : true  // 属性可重新配置
writable : false     // 属性值不可修改
enumerable : false   // 属性不可枚举
configurable : false // 属性不可重新配置

闭包

JavaScript 变量属于本地或全局作用域。

全局变量能够通过闭包实现局部（私有）。

不通过关键词 var 创建的变量总是全局的，即使它们在函数中创建。

闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器目前是 3 

动画

JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。

这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button οnclick="myMove()">单击我</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

导航

###nodeName 属性规定节点的名称。

• nodeName 是只读的
• 元素节点的 nodeName 等同于标签名
• 属性节点的 nodeName 是属性名称
• 文本节点的 nodeName 总是 #text
• 文档节点的 nodeName 总是 #document

###nodeValue 属性规定节点的值。

• 元素节点的 nodeValue 是 undefined

• 文本节点的 nodeValue 是文本文本

• 属性节点的 nodeValue 是属性值

nodeType 属性返回节点的类型。nodeType 是只读的。

如何在浏览器的状态栏放入一条消息？ window.status = “put your message here”

如何获得客户端浏览器的名称？ navigator.appName