Javascript学习总结

js输出

JavaScript显示方案：

-使用 window.alert() 写入警告框
-使用 document.write() 写入HTML输出
-使用 innerHTML 写入HTML元素
-使用 console.log() 写入浏览器控制台

js关键字

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

js数据类型

JavaScript数据类型：
javascript有五种可包含值的数据类型：字符串值(String)、数值(Number)、布尔值(Boolean)、对象(Object)、函数(Function)。
有三种对象类型：
对象(Object)、日期(Date)、数组(Array)。
同时有两种不能包含值的数据类型：
null、undefined。
typeof运算符：

type 0.123                                                   //返回Number

js字符串方法

1. length属性返回字符串的长度。
2. indexOf()方法返归字符串中指定文本首次出现的索引（位置），如果未找到文本返回-1.
3. lastIndexOf()方法返回指定文本在字符串中最后一次出现的索引，如果未找到文本返回-1。
4. search()方法搜索特定值的字符串，并返回匹配的位置。
5. slice()提取字符串的某个部分并在新字符串中返回被提取的部分，该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。
6. substring()类似于 slice(),不同之处在于 substring() 无法接受负的索引。
7. substr()类似于 slice()，不同之处在于第二个参数规定被提取部分的长度。
8. replace() 方法用另一个值替换在字符串中指定的值。
9. toUpperCase()把字符串转换为大写。
10. toLowerCase()把字符串转换成小写。
11. concat() 连接两个或多个字符串。
12. trim() 方法删除字符串两端的空白符。
13. charAt() 方法返回字符串中指定下标（位置）的字符串。
14. charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码。
15. split() 将字符串转换为数组。

js数字方法

16. toString() 以字符串返回数值。
17. toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数。
18. toFixed() 返回字符串值，它包含了指定位数小数的数字。
19. toPrecision() 返回字符串值，它包含了指定长度的数字。
20. valueOf() 以数值返回数值。
21. Number() 可用于把 JavaScript 变量转换为数值，还可以把日期转化为数值。
22. parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字。
23. parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字。
    数字属性：

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

js数组

数组方法：

24. toString() 把数组转换为数组值（逗号分隔）的字符串。
25. join() 方法也可将所有数组元素结合为一个字符串。
26. pop() 方法从数组中删除最后一个元素。
27. push() 方法（在数组结尾处）向数组添加一个新的元素。
28. shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。
29. unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素。
30. splice() 方法可用于向数组添加新项，第一个参数定义了应添加新元素的位置（拼接），第二个参数定义应删除多少元素。
31. concat() 方法通过合并（连接）现有数组来创建一个新数组。
32. slice() 方法用数组的某个片段切出新数组。

数组排序：

33. sort() 方法以字母顺序对数组进行排序。
34. reverse() 方法反转数组中的元素。

数组迭代：

1. forEach() 方法为每个数组元素调用一次函数（回调函数），该函数接受 3 个参数：项目值，项目索引，数组本身。IE9+
2. map() 方法通过对每个数组元素执行函数来创建新数组，该函数接受 3 个参数：项目值，项目索引，数组本身。IE9+
3. filter() 方法创建一个包含通过测试的数组元素的新数组，该函数接受 3 个参数：项目值，项目索引，数组本身。IE9+
4. reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值，该函数接受4个参数：总数(初始值/先前返回的值)、项目值、项目索引、数组本身。IE9+
5. reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值，该函数接受4个参数：总数(初始值/先前返回的值)、项目值、项目索引、数组本身。IE9+
6. every() 方法检查所有数组值是否通过测试，该函数接受3个参数：项目值、项目索引、数组本身。IE9+
7. some() 方法检查某些数组值是否通过了测试，该函数接受3个参数：项目值、项目索引、数组本身。IE9+
8. indexOf() 方法在数组中搜索元素值并返回其位置。
9. lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。
10. find() 方法返回通过测试函数的第一个数组元素的值，该函数接受3个参数：项目值、项目索引、数组本身。IE9+
11. findIndex() 方法返回通过测试函数的第一个数组元素的索引，该函数接受3个参数：项目值、项目索引、数组本身。IE9+

日期

日期获取方法：

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

Math对象

1. Math.round(x) 的返回值是 x 四舍五入为最接近的整数。
2. Math.pow(x, y) 的返回值是 x 的 y 次幂。
3. Math.sqrt(x) 返回 x 的平方根。
4. Math.abs(x) 返回 x 的绝对（正）值。
5. Math.ceil(x) 的返回值是 x 上舍入最接近的整数。
6. Math.floor(x) 的返回值是 x 下舍入最接近的整数。
7. Math.sin(x) 返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）。
8. Math.cos(x) 返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）。
9. Math.min() 可用于查找参数列表中的最低值。
10. Math.max() 可用于查找参数列表中的最高值。
11. Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数。
12. Math.acos(x) 返回 x 的反余弦值，以弧度计。
13. Math.asin(x) 返回 x 的反正弦值，以弧度计。
14. Math.atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
15. Math.atan2(y,x) 返回从 x 轴到点 (x,y) 的角度。
16. Math.exp(x) 返回 Ex 的值。
17. Math.log(x) 返回 x 的自然对数（底为e）。
18. Math.tan(x) 返回角的正切。

javscript 逻辑

0（零）、-0（负零）、""（空值）、undefined、null、false、NaN的布尔值都是false。

javscript 事件

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

javscript 循环

• for：多次遍历代码块
• for/in：遍历对象属性
• while：当指定条件为true时循环一段代码块
• do/while：当指定条件为true时循环一段代码块

javscript 正则表达式

1. search()：使用表达式来搜索匹配，然后返回匹配的位置。
2. replace()：返回模式被替换处修改后的字符串。
3. test()：是一个正则表达式的方法，它通过模式来搜索字符串，然后根据结果返回true或false。
4. exec()：是一个正则表达式的方法，它通过指定模式搜索字符串，并返回已找到的文本。
5. match()：找到一个或多个正则表达式的匹配。
6. split()：把字符串分割成字符串数组。

javscript 错误

1. try语句使您能够测试代码块中的错误。
2. catch语句允许你处理错误。
3. throw语句允许你创建自定义错误。
4. finally使您能够执行代码，在try和catch之后，无论结果如何。

javscript 严格模式

通过在脚本或函数的开头添加"use strict";来声明严格模式。
在脚本开头进行声明，拥有全局作用域(脚本中的所有代码均以严格模式来执行)。
以下版本的浏览器支持严格模式：
版本 10 以后的 IE
版本 4 以后的 Firefox
版本 13 以后的 Chrome
版本 5.1 以后的 Safari
版本 12 以后的 Opera

"use strict"指令只能在脚本或函数的开头被识别。

javscript5

ECMAScript5是什么？
ECMAScript5也被称为ES5和ECMAScript2019。
ECMAScript5新特性：

1. "use strict"指令
2. String.trim()
3. Array.isArray()：检查对象是否为数组
4. Array.forEach()
5. Array.map()
6. Array.filter()：过滤
7. Array.reduce()：确定数组中所有数的总和
8. Array.reduceRight()
9. Array.every()
10. Array.some()
11. Array.indexOf()
12. Array.lastIndexOf()
13. JSON.parse()
14. JSON.stringify()
15. Date.now()：返回自零日期（1970 年 1 月 1 日 00:00:00:00）以来的毫秒数
16. 属性Getter和Setter
17. 新的对象属性和方法
18. String.charAt()：返回字符串中指定索引（位置）的字符。

ES5新的对象方法：

方法	描述
Object.defineProperty()	它允许您定义对象属性和/或更改属性的值和/或元数据
Object.defineProperty(object, property, descriptor)	添加或更改对象属性
Object.defineProperties(object, descriptors)	添加或更改多个对象属性
Object.getOwnPropertyDescriptor(object, property)	访问属性
Object.getOwnPropertyNames(object)	将所有属性作为数组返回
Object.keys(object)	将可枚举属性作为数组返回
Object.getPrototypeOf(object)	访问原型
Object.preventExtensions(object)	防止向对象添加属性
Object.isExtensible(object)	如果可以将属性添加到对象，则返回true
Object.seal(object)	防止更改对象属性（而不是值）
Object.isSealed(object)	如果对象被密封，则返回true
Object.freeze(object)	防止对对象进行任何更改
Object.isFrozen(object)	如果对象被冻结，则返回true

ES6

ES6的新特性

1. JavaScript let
2. JavaScript const
3. 幂(**)
4. 默认参数值
5. Array.find()：返回通过测试函数的第一个数组元素的值，此函数接受三个参数：项目值、项目索引、数组本身。
6. Array.findIndex()：返回通过测试函数的第一个数组元素的索引，此函数接受三个参数：项目值、项目索引、数组本身。

新的数字属性：

1. EPSILON
2. MIN_SAFE_INTEGER
3. MAX_SAFE_INTEGER

新的数字方法：

1. Number.isInteger()：如果参数是整数则返回true。
2. Number.isSafeInteger()：安全整数是可以精确表示为双精度数的整数，如果参数是安全参数则返回true。

新的全局方法：

1. isFinite()：如果参数为 Infinity 或 NaN，则全局 isFinite() 方法返回 false。
2. isNaN()：如果参数是 NaN，则全局 isNaN() 方法返回 true。

箭头函数：

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;

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

箭头功能没有自己的this，它们不适合定义对象方法。

JavaScript表单

约束验证HTML输入属性：

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

约束验证CSS伪类元素：

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

JavaScript 对象原型

原型继承：

所有 JavaScript对象都从原型继承属性和方法。
日期对象继承自Date.prototype。数据对象继承自Array.prototype。Person对象继承自Preson.prototype。
Object.prototype位于原型继承链的顶端。
日期对象、数组对象和Person对象都继承自Object.prototype。

向对象添加属性和方法

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

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

JavaScript 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.laseName;
	}

ES5对象方法

• Object.defineProperty(object, property, descriptor) ： 添加或更改对象属性

  var person = {
  	firstName: "Bill",
  	lastName: "Gates",
  	language:  "EN"
  }
  // 更改属性
  Object.defineProperty(person, "language", {value: "ZH"});
  // 添加属性
  Object.defineProperty(person, "year", {value: "2020"});
  

• Object.defineProperties(object, descriptors)：添加或更改多个对象属性
• Object.getOwnPropertyDescriptor(object, propertype)：访问属性
• Object.getOwnPropertyNames(object)：以数组返回所有属性

  var person = {
  	firstName: "Bill",
  	lastName: "Gates",
  	language: "EN"
  }
  Object.defineProperty(person, "language", {enumerable: false});
  Object.getOwnProperty(person); // 返回属性数组
  

• Object.keys(object)：以数据返回所有可枚举的属性

  var person = {
  	firstName: "Bill",
  	lastName: "Gates",
  	language:  "EN"
  }
  Object.defineProperty(person, "language", {enumerable: false});
  Object.keys(person) // 返回可枚举属性的数组
  

• Object.getPrototypeOf(object)：访问原型
• Object.preventExtensions(object)：阻止向对象添加属性
• Object.isExtensible(object)：如果可将属性添加到对象，则返回true
• Object.seal(object)：防止更改对象属性（而不是值）
• Object.isSealed(object)：如果对象被密封，则返回true
• Object.freeze(object)：防止对对象进行任何更改
• Object.isFrozen(object)：如果对象被冻结，则返回true

更改元数据

ES5允许更改一下 属性元数据：

• writable : true // 属性值可修改

• enumerable : true // 属性可枚举

• configurable : true // 属性可重新配置

• writable : false // 属性值不可修改

• enumerable : false // 属性不可枚举

• configurable : false // 属性不可重新配置

  ES5允许更改getter和setter：

  	// 定义 getter
  	get: function() { return language; }
  	// 	定义 setter
  	set: function(value) { language = value; }
  

  此列使语言为只读：

  Object.defineProperty(person, "language", {writable: false});
  

  此列使语言不可枚举：

  Object.defineProperty(person, "language",{enumerable: false});
  

javscript 函数

函数是对象

javascript 中的 typeof 运算符会为函数返回 function。
但是最好是把JavaScript函数描述为对象。
JavaScript函数都有属性和方法。
arguments.length会返回函数被调用时收到的参数数目：

	function myFunction(a, b) {
		return arguments.length; // 2
	}

toString()方法以字符串返回函数。

箭头函数

	// ES5
	var x= function(x, y) {
		return x * y;
	}

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

箭头功能没有自己的this，它们不适合定义对象方法。IE11或更早版本不支持箭头函数。

函数参数

如果函数调用的参数太多(超过声明)，则可以使用arguments对象来达到这些参数。

arguments对象

JavaScript函数有一个名为arguments对象的内置对象。
arguments对象包含函数调用时使用的参数数组。

	var x = sumAll(1, 123, 34, 233, 256, 44, 88);   // 79
	function sumAll() {
		vari, sum = 0;
		for (i = 0; i < arguments.length; i++) {
			sum += arguments[i];
		}
		return sum;
	}

函数call

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

	var person = {
		fullName: function(city) {
			return this.firstName + " " + this.lastName + " " + city;
		}
	}
	var person1 = {
		firstName: "Bill",
		lastName: "Gates",
	}
	var person2 = {
		firstName: "Steve",
		lastName: "Jobs",
	}
	person.fullName.call(person1, "Seattle");  // 将返回 "Bill Gates Seattle"

函数Apply

apply()方法与call()方法非常相似，不同之处：
call() 方法分别接受参数。
apply() 方法接受数组形式的参数。

var person = {
	fullName: function(city) {
		return this.firstName + " " + this.lastName + " " + city;
	}
}
var person1 = {
	firstName: "John",
	lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo"]);  // John Doe Oslo

在数组上模拟max方法

Math.max(1, 2, 3);   // 会返回 3  

由于JavaScript数组没有max()方法，因此您可以应用Math.max()方法。

Math.max.apply(null, [1, 2, 3]);  // 会返回3
Math.max.apply(Math, [1, 2, 3]);  // 会返回3
Math.max.apply(" ", [1, 2, 3]);  // 会返回3
Math.max.apply(0, [1, 2, 3]);  // 会返回3

在JavaScript严格模式下，如果apply()方法的第一个参数不是对象，则它将称为被调用函数的所有者（对象）。在“非严格”模式下，它称为全局对象。

JavaScript必包

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

这被成为JavaScript闭包，它是函数拥有“私有”变量成为可能。计数器被这个匿名函数的作用域保护，并且只能使用add函数来修改。闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。

JavaScript HTML DOM

查找HTML元素：

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

改变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.createElement(element)	创建HTML元素
document.removeChild(element)	删除HTML元素
document.appendChild(element)	添加HTML元素
document.replaceChild(element)	替换HTML元素
document.write(text)	写入HTML输出流

添加事件处理程序

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

查找HTML对象

属性	描述
document.anchors	返回拥有 name 的所有 元素。
document.baseURl	返回文档的绝对基准 URl
document.body	返回 元素
document.cookie	返回文档的 cookie
document.doctype	返回文档的 doctype
document.documentElement	返回 元素
document.documentMode	返回浏览器使用的模式
document.documentURl	返回文档的 URl
document.domain	返回文档服务器的域名
document.forms	返回所有 元素
document.head	返回 元素
document.images	返回所有 元素
document.links	返回拥有 href 属性的所有 和 元素
document.readyState	返回文档的（加载）状态
document.referrer	返回引用的 URl（链接文档）
document.scripts	返回所有

通过 CSS 选择器查找 HTML 元素

如果你需要查找匹配指定CSS选择器（id、类名、类型、属性、属性值等等）的所有HTML元素，请使用querySelectorAll()方法。

<p class="intro">DOM 很有用。</p>
<p class="intro">演示<b>querySelectorAll</b>方法。</p>
<p id="demo"></p>

var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = x[0].innerHTML;

通过 HTML 对象选择器查找 HTML 对象

<form action="/demo/action_page.php" method="post" id="frm1">
	<input type="text" name="fname" value="Bill" />
	<br>
	<input type="text" name="lname" value="Gates" />
	<input type="submit" value="提交"/>
</form>
<button onclick="myFunction6()">试一试，显示表单中每个元素的值</button>

function myFunction6() {
	var x = document.forms["frm1"];
	var text = "", i;
	for (i = 0; i < x.length; i++) {
		console.log(x.elements[i].value);
	}
}

以下 HTML 对象（和对象集合）也是可访问的：

对象	描述
document.anchors
document.body
document.documentElement
document.embeds
document.forms
document.head
document.images
document.links
document.scripts
document.title

HTML DOM 事件监听器

• addEventListenter()方法：添加当用户点击按钮是触发的事件监听器

  <button id="myBtn"></button>
  <p id="demo"></p>
  
  document.getElementById("myBtn").addEventListenter(click, displayDate);
  function displayDate() {
  	document.getElementById("demo").innerHTML = Date();
  }
  

  addEventListenter() 方法为指定元素指定事件处理程序。
  addEventListenter() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。是我们更容易控制事件如何对冒泡作出反应。可以通过使用removeEventListenter() 方法轻松的删除事件监听器。