JavaScript总结

JavaScript概述

• JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。
• 主要目的：验证发往服务器端的数据、增加Web互动、加强用户体验度等。
• 特点：松散性、对象属性、继承机制
• JavaScript核心：核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)

语法、关键保留字及变量

• 语法构成：区分大小写、标识符、注释。
• 区分大小写：ECMAScript中的一切，包括变量、函数名和操作符都是区分大小写的。例如：text和Text表示两种不同的变量。
• 标识符：所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。
• 规则：1、第一字符必须是一个字母、下划线(_)或一个美元符号($)；2、其他字符可以是字母、下划线、美元符号或数字；3、不能把关键字、保留字、true、false和null作为标识符。
• 注释：1、// 单行注释 ；2、/* 代码片段 */ 多行注释
• 关键字和保留字

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

• 变量 ：所谓变量，就是可以初始化后可以再次改变的量。
• 变量是松散类型，松散类型就是用来保存任何类型的数据。
• 命名方法：匈牙利命名法（变量名=类型+对象描述）、驼峰命名法（大驼峰和小驼峰）
• 规则：1、组成： 英文字母、数字、下划线 、$(可以用)，不能以数字开头；2、首字符是英文字母或者下划线；3、不能使用JavaScript关键字、保留字。
• var 声明变量。例子：var box=“靓靓人”
• 声明：禁忌陋习：没有类型、重复声明、隐式声明、不声明直接赋值

数据类型

• 简单数据类型： Undefined、Null、Boolean、Number（类型转换 parseInt()整型、parseFloat()浮点型 ）、String（ toString() 把值转换成字符串 ）
• 复杂数据类型： Object
• typeof操作符（检测的数据类型）： undefined（未定义）、boolean（布尔值true或者false）、string（字符串）、number（数值型）、object（对象或null）、function（函数）

JavaScript运算符

• 算术运算符 ：1、简单运算符：+、-、*、/、% (求余)；2、复合赋值运算符：+=、-=、/=、乘=
• 自增与自减 ：++ 或 - -；对唯一的运算数进行递增或递减操作（每次加1或减1）
• 自增与自减的规则 ：1、运算数之前：先进行递增（递减）操作，再进行求值 var i=1; ++i。2、运算数之后：先求值，再进行递增（递减）操作 var i=0; i++
• 关系运算符 ：<、<=、>、>=、!=
• 对象运算符 ：
  1、in：判断左侧运算数是否为右侧运算数的成员。
  2、instancesof：判断对象实例是否属于某个类或构造函数。
  3、new：根据构造函数创建一个新的对象，数组元素或变量。
  4、delete：删除指定对象的属性，数组元素或变量。
  5、.及[ ]：存取对象和数组元素。
  6、( )：函数调用，改变运算符优先级等。
• 逻辑运算符 ：
  1、! 逻辑非：如果运算数的值为false则返回true，否则返回false。
  2、&& 逻辑与：当且仅当两个运算数的值都是true时，才返回true，否则返回false。
  3、|| 逻辑或：当且仅当两个运算数的值都是false时，才返回false，否则返回true。
• 其他运算符 ：
  1、?: ：条件运算符，简介的if else。
  2、typeof：类型判定运算符。
  3、，：逗号，在一行语句中执行多个不同的操作。
  4、void：舍弃运算数的值，返回undefined作为表达式的值。

流程控制语句

• 定义：在ECMAScript中，所有的代码都是由语句来构成的。语句表明执行过程中的流程、限定与约定，形式上可以是单行语句，或者由一对大括号“｛｝”括起来的复合语句，在语法描述中，复合语句整体可以作为一个单行语句处理。
• 语句的种类：声明语句、表达式语句、分支语句、循环语句（for、for … in、while、do … while）、控制结构、其他（空语句、with语句）
• if语句(即条件判断语句)：
  1、if (条件表达式) {语句;} else {语句;}；
  2、if (条件表达式) {语句;} else if (条件表达式) {语句;} … else {语句;}
• switch语句：switch语句是多重条件判断，用于多个值相等的比较。
• 循环语句：
  1、for循环：重复一个动作到一定次数时
  2、for … in：循环输出的属性顺序不可预知，对象的值不能是null或undefined
  3、while：一个动作被重复执行到满足某个条件时
  4、do-while：希望一个 动作至少被执行一次时
• with语句 ：with语句的作用是将代码的作用域设置到一个特定的对象中。

函数

• 指针标识：
  1、this：指向当前操作对象
  2、callee：指向参数集合所属函数
  3、prototype：指向函数附带的原型对象
  4、constructor：指向创建该对象的构造函数
• 函数参数：
  1、参数类型：形参（定义函数时使用的参数
  接收调用该函数时传递的参数）、实参（调用函数时传递给函数的实际参数）
  2、特性：
  <1> 参数个数没有限制；
  <2> 参数的数据类型没有限制；
  <3> 通过arguments对象访问参数数组；
  <4> 参数始终按值传递。
  3、arguments对象：
  <1> 功能：存放实参的参数列表；
  <2> 特性：仅能在函数体内使用，带有下标属性，但并非数组，函数声明时自动初始化；
  <3> 属性：length（获取函数实参的长度）、callee（返回当前正在指向的函数）、caler（返回调用当前正在执行函数的函数名）。
  4、方法：
  <1> apply：将函数作为对象的方法来调用
  将参数以数组形式传递给该方法；
  <2> call：将函数作为对象的方法来调用
  将指定参数传递给该方法；
  <3> toString：返回函数的字符串表示。

对象和数组

• 什么是对象：对象其实就是一种类型，即引用类型。对象的值就是引用类型的实例。在ECMAScript中引用类型是一种数据结构，用于将数据和功能组织在一起。
• 创建Object类型：1. 使用new运算符；2. 使用字面量定义。
• 内置对象：

1. Global(全局)对象；

Global(全局)对象属性：undefined、NaN、Object、Array、Function

2. Math对象.

Math.ceil()：执行向上舍入，即它总是将数值向上舍入为最接近的整数。
Math.floor()：执行向下舍入，即它总是将数值向下舍入为最接近的整数。
Math.round()：执行标准舍入，即它总是将数值四舍五入为最接近的整数。
Math.random()：返回介于0到1之间一个随机数，不包括0和1。
Math.abs(num)：返回num的绝对值。
Math.sqrt(num)：返回num的平方根。

• 数组：
  1、创建方式：new关键字、字面量方式。
  2、索引（索引是从0开始计算的）。
  3、length属性：alert(box.length) 获取元素个数。
• 对象和数组方法：
  1、转换方法：toLocaleString() 把数组转换为本地字符串；toString() 方法可把一个逻辑值转换为字符串，并返回结果；valueOf() 方法可返回 Boolean 对象的原始值。
  2、栈方法：push() 可以接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度；pop() 从数组末尾移除最后一个元素，减少数组的length值，然后返回移除的元素。
  3、队列方法：shift() 从数组前端移除一个元素； unshift() 数组的前端添加一个元素或者多个。
  4、排序方法：reverse() 逆向排序方法，返回排序后的数组；注意：源数组也被逆向排序了，说明是引用；sort() 从小到大排序，返回排序后的数组；注意：源数组也被从小到大排序了。
  5、操作方法：concat() 数组拼接； slice() 基于当前数组获取指定区域元素并创建一个新数组；splice() 删除、插入、替换。

时间与日期

• Date类型：创建日期对象：var box = new Date();
• 日期格式化方法：
• toDateString() ：以特定的格式显示星期几、月、日和年
• toTimeString() ：以特定的格式显示时、分、秒和时区
• toLocaleDateString() ：显示本地时间
• toLocaleTimeString()：以特定地区格式显示时、分、秒和时区
• toUTCString()：以特定的格式显示完整的UTC日期。
• 组件方法：
• getFullYear()：获取四位年份
• getMonth()：获取月份，没指定月份，从0开始算起（月份要加1）
• getDate()：获取日期
• getDay()：返回星期几，0表示星期日，6表示星期六
• getHours()：返回时
• getMinutes()：返回分钟
• getSeconds()：返回秒数
• getMilliseconds()：返回毫秒数
• getTimezoneOffset()：返回本地时间和UTC时间相差的分钟数

DOM操作

• 查找元素：
• DOM节点：
• childNodes：获取当前元素节点的所有子节点
• firstChild：获取当前元素节点的第一个子节点
• lastChild：获取当前元素节点的最后一个子节点
• ownerDocument：获取该节点的文档根节点，相当与document
• parentNode：获取当前节点的父节点
• previousSibling：获取当前节点的前一个同级节点
• nextSibling：获取当前节点的后一个同级节点
• attributes：获取当前元素节点的所有属性节点集合
• 节点操作：
• write()：这个方法可以把任意字符串插入到文档中
• createElement()：创建一个元素节点
• appendChild()：将新节点追加到子节点列表的末尾
• createTextNode()：创建一个文本节点
• insertBefore()：将新节点插入在前面
• repalceChild()：将新节点替换旧节点
• cloneNode()：复制节点
• removeChild()：移除节点

事件

1、事件入门

• 概念：事件一般是用于浏览器和用户操作进行交互。
• 事件模型：内联模型、脚本模型、DOM2模型
• 事件处理函数：鼠标事件、键盘事件、HTML事件

鼠标事件	含义	键盘事件	含义	HTML事件	含义
onclick	当用户单击鼠标按钮或按下回车键时触发。	onkeydown	当用户按下键盘上任意键触发，如果按住不放，会重复触发。	onload	当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发。
ondblclick	当用户双击主鼠标按钮时触发。	onkeypress	当用户按下键盘上的字符键触发，如果按住不放，会重复触发。	onunload	当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发。
onmousedown	当用户按下了鼠标还未弹起时触发。	onkeyup	当用户释放键盘上的键触发。	onselect	当用户选择文本框(input或textarea)中的一个或多个字符触发。
onmouseup	当用户释放鼠标按钮时触发。			onchange	当文本框(input或textarea)内容改变且失去焦点后触发。
onmouseover	当鼠标移到某个元素上方时触发。			onfocus	当页面或者元素获得焦点时在window及相关元素上面触发。
onmouseout	当鼠标移出某个元素上方时触发。			onblur	当页面或元素失去焦点时在window及相关元素上触发。
onmousemove	当鼠标指针在元素上移动时触发。			onsubmit	当用户点击提交按钮在元素上触发。
				onreset	当用户点击重置按钮在元素上触发。
				onresize	当窗口或框架的大小变化时在window或框架上触发。
				onscroll	当用户滚动带滚动条的元素时触发。

2、事件对象：event
3、事件绑定：IE(非标准浏览器)、DOM方式(标准浏览器)、事件默认行为、设置全局捕获、释放全局捕获

• IE(非标准浏览器)：attachEvent（事件名称，事件函数）、绑定事件处理函数、detachEvent（事件名称，事件函数）、解除绑定。
• DOM方式(标准浏览器)：addEventListener（事件名称。事件函数，是否捕获）、绑定、捕获事件、removeEventListener（事件名称，事件函数，是否捕获）、解除。
• 事件默认行为：oncontextmenu、右键菜单事件，当右键（环境菜单）显示出来的时候触发。
• 设置全局捕获：setCapture()
• 释放全局捕获：releaseCapture()

正则表达式

1、概念：正则表达式(regular expression)是一个描述字符模式的对象。正则表达式主要用来验证客户端的输入数据。可以节约大量的服务器端的系统资源，并且提供更好的用户体验
2、创建：
var box = new RegExp('box'); 第一个参数字符串
var box = new RegExp('box', 'ig'); 第二个参数可选模式修饰符
var box=//

模式修饰符:i 忽略大小写;g 全局匹配;m 多行匹配.

3、对象的方法：

test(): 在字符串中测试模式匹配，返回true或false
exec(): 在字符串中执行匹配搜索，返回结果数组，匹配不到返回null

4、String对象中的方法

match(pattern): 返回pattern中的子串或null
replace( pattern,replacement): 用replacement替换pattern
search(pattern): 返回字符串中pattern开始位置
split(pattern): 返回字符串按指定pattern拆分的数组

5、Number对象的方法

toString(): 将数值转化为字符串，并且可以转换进制
toLocaleString(): 根据本地数字格式转换为字符串
toFixed(): 将数字保留小数点后指定位数并转化为字符串
toExponential(): 将数字以指数形式表示，保留小数点后指定位数并转化为字符串
toPrecision(): 指数形式或点形式表述数，保留小数点后面指定位数并转化为字符串

6、字符串操作方法

1、concat(str1...str2)
2、slice(n,m)
3、substring(n,m)
4、substr(n,m)
5、indexOf(str, n)
6、lastIndexOf(str, n)

7、大小写转换方法：

将字符串全部转换为小写
将字符串全部转换为大写

8、获取控制

• 单个字符和数字：

字符	含义
.	匹配除换行符外的任意字符
[a-z0-9]	匹配括号中的字符集中的任意字符
[^a-z0-9]	匹配任意不在括号中的字符集中的字符
\d	匹配数字
\D	匹配非数字，同[^0-9]相同
\w	匹配字母和数字及_
\W	匹配非字母和数字及_

• 空白字符：

字符	含义
\0	匹配null字符
\b	匹配空格字符
\f	匹配进纸字符
\n	匹配换行符
\r	匹配回车字符
\t	匹配制表符
\s	匹配空白字符、空格、制表符和换行符
\S	匹配非空白字符

• 锚字符：

字符	含义
^	行首匹配
$	行尾匹配
\A	只有匹配字符串开始处
\b	匹配单词边界，词在[]内时无效
\B	匹配非单词边界
\G	匹配当前搜索的开始位置
\ Z	匹配字符串结束处或行尾
\z	只匹配字符串结束处

• 重复字符：

字符	含义
x?	匹配0个或1个x
x*	匹配0个或任意多个x
x+	匹配至少一个x
(xyz)	匹配至少一个(xyz)
x{m，n }	匹配最少m个、最多n个x