前端复习之JavaScript(ECMAScript5)
Posted dummer
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端复习之JavaScript(ECMAScript5)相关的知识,希望对你有一定的参考价值。
啦啦啦啦啦啦啦啦绿绿绿绿绿绿
1 1.javascript: 2 前段三大语言:html CSS js 3 HTML:专门编写网页内容的语言 4 CSS:专门编写网页样式的语言 5 js:专门编写网页交互行为的语言 6 原生js:不需要下载任何第三方文件就可以直接使用的js 7 ECMAScript(ES):ECMA制定的JavaScript语言国际标准规定js语言的核心语法 8 JavaScript:NetScape遵照ES标准实现的自己的js语言 9 JScript:Microsoft遵照ES…… 10 DOM:专门操作网页内容的程序标准 11 BOM:专门操作浏览器窗口的程序 12 js语言四大特点: 13 1.运行在脚本解释引擎中:脚本解释引擎:专门解析js语言并执行的小软件 14 1.浏览器自带脚本解释引擎:内容排版引擎和脚本解释引擎 15 2.独立安装的脚本解释引擎:Node.js 16 2.边解释边执行,后解释的相同内容会覆盖先解释的 17 3.弱类型: 18 声明变量时,不必提前规定变量的数据类型,一个变量先后可保存不同类型的数据 19 4.基于对象:core
1.使用
1 1. 页面中的script标签里: 2 一旦进入script标签内,就要使用js的语法 3 问题: 不符合内容与行为分离的原则——不便于维护和共用 4 2. 独立的js文件中: 5 引入: <script src="js文件的url"></script> 6 强调: script标签不同同时引入外部js和包含内部js。结果: 内部js自动失效
2.变量
1 var 变量1,变量2,...;; 2 强调: 一切变量都用var声明,不必提前规定数据类型。 3 默认值: 变量的默认值为undefined 4 命名规则: 5 1. 字母,数字或下划线组成,不能以数字开头 6 2. 不能使用保留字: js语言已经提前占用的有特殊意义的名字 7 3. 见名知义 8 4. 驼峰命名: 首字母小写,之后每个单词首字母大写 9 10 强调: 变量赋值前,必须先声明 11 特殊: 给为声明过的变量赋值 12 特殊: 试图从未声明过的变量中取值,会报错! 13 声明: const 常量名=值; 14 强调: 声明常量时,必须初始化其值常量名通常全大写 15 赋值: 常量不允许赋值 16 普通模式: 强行赋值,不报错,但也无法修改 17 ——静默失败 18 ES5 严格模式: 将所有静默失败升级为错误!
3.***数据变量:
1 1. 原始类型: 值直接保存在变量本地的数据类型 2 number string boolean null undefined 3 2. 引用类型: 值无法直接保存在变量本地的复杂数据类型 4 功能: typeof x 返回变量x中存储的数据的类型名 5 number类型:其类型的数字在内存中采用二进制存储 1字节=8位二进制 6 功能:n.toString(2) 将n的数值转为内存中的二进制形式(整数4字节 浮点数8字节) 7 特殊:舍入误差(底层二进制计算导致)->四舍五入n.toFixed(2)n按2位小数四舍五入 8 string类型:c.charCodeAt();查看C中的Unicode号 9 boolean类型:只有两个值的类型: true/false 10 undefined: 空 由程序自动使用,给变量赋初值。 11 null: 空 让程序员主动清空一个变量的值
4. ***数据类型转换:
1 弱类型: 2 1. 声明变量时,不用提前指定变量的数据类型 3 2. 同一个变量先后可保存不同类型的数据 4 3. js会根据自己的需要,动态转变数据的类型 5 1. 隐式转化: 由程序自动完成,不需要程序员手动干预的类型转化 6 只要所给的数据类型,不是程序想要的,程序自动将给定的数据转化为自己想要的类型 7 2. 强制转换: 由程序员主动调用功能,执行的类型转换 8 1. 强制转数字: 9 1. Number(x): 可将任意类型的数据,转化为number类型。 10 问题: 只能转纯数字组成的字符串和bool 11 2. parseFloat(str): 将str转化为数字,保留小数。 12 特殊功能: 可去掉数字*结尾*非数字字符。 13 parseInt(str): 将str转化为数字,去掉小数部分,下取整。 14 强调: parseFloat/Int的参数,要求是字符串。 15 如果给定的不是字符串,则首先隐式转为字符串,再转为数字。 16 比如: Number(true) -> 1 parseInt(true) -> NaN "true"->NaN 17 总结: 只要转字符串,都用parseFloat 18 除非去掉小数,才用parseInt 19 Number(x),几乎不会主动使用 20 因为隐式转换使用的其实就是Number 21 如果转不了: 都返回NaN(NaN: Not a Number) 22 代表一切不是数字的值NaN参与任何算数计算,结果依然是NaN 23 补: 转二进制: n.toString(2) 10->2 24 parseInt(str,2) 2->10 25 2. 转字符串: 2种: 26 x.toString() 将任意内容,转为字符串除null和undefined之外 27 String(x) 将任意内容,转为字符串——万能 28 总结: 今后,凡是转字符串,首选String(x) 29 3. 转bool: Boolean(x); 30 规律: 只有5个值会转为false: 0 "" null undefined NaN 31 其余都转为true!
5. ***运算符:
1 1.算数运算: + - * / % 2 m%n:模运算-->1.判断能否整除 2.用来取余数 3 隐式转换: 4 默认: 一切都转为number,再计算 5 特殊: +运算中,如果碰到字符串,则一切都转字符串,+计算变为字符串拼接 6 2.关系运算: 做比较,做判断( 6种: > < >= <= == !=) 7 隐式转换: 8 默认: 一切都转数字,再比较 9 特殊: 10 1. 如果两个字符串比较: 不再转数字,而是依次比较每个字符的unicode号大小 11 2. null和undefined: 12 如何鉴别: null vs undefined 13 ===: 全等: 首先要求类型必须相同 ,其次值再相等 14 !==: 其实就是全等的反义,可代替!= 15 强调: 只要比较undefined必须用===,其实===就是不带隐式转换的== 16 建议: 用===代替== 17 3. NaN不大于,不小于,不等于任何值 18 isNaN(num) 19 num不是数字或无法转为数字,则返回true 20 num是数字或可隐式转为数字,则返回false 21 3.逻辑运算: 将多个关系运算综合得出最终结论 22 短路逻辑: 如果前一个条件已经可以得出最终结论,则后续条件不再执行 23 &&: 如果前一个条件为true,则后续条件继续执行 24 如果前一个条件为false,则后续条件不再执行,直接返回false! 25 ||: 如果前一个条件为true,则后续条件不再执行, 直接返回true 26 如果前一个条件为false,则后续条件继续执行 27 4.位运算: 了解 28 1.左移右移 29 m<<n :等效于: m*Math.pow(2,n) , 30 m>>n : 等效于m/Math.pow(2,n) 31 2.下取整: 32 m^0 33 m|0 34 等效于Math.floor(m) 35 3. 交换两变量的值: 3种: 36 1. var t=a; a=b; b=t; 通常鄙视不让用!(不允许声明第三个变量) 37 2. a+=b; b=a-b; a-=b; 38 3. a^=b; b^=a; a^=b; 最简单 39 5.扩展赋值运算: 对计算+赋值的一种简写 40 a=a+b; 可简化为 a+=b 称为累加 41 a=a-b; 可简化为 a-=b 42 a=a*b; 可简化为 a*=b 43 a=a/b; 可简化为 a/=b 44 a=a%b; 可简化为 a%=b
6.***数组API:
1 API: 应用程序编程接口(数组: 连续存储多个数据的存储空间——存储 2 并提供了操作数据的API——功能) 3 1.转字符串: 2种: 4 String(arr): 将每个元素转为字符串,并用逗号连接 5 何时: 只关心内容,不关心格式——拍照,对比 6 arr.join(“自定义连接符”): 将每个元素转为字符串,但是,可自定义连接符 7 何时: 如果要求带格式的转化 8 比如: 将单词拼接为句子: words.join("") 9 将字母拼接为单词: 错误: chars.join() =>String(chars) 10 正确: chars.join("") 11 将数组内容动态生成页面元素 12 判断数组是空数组: 13 错误: arr.length==0 因为还有new Array(n)这种仅规定个数的空数组 14 正确: arr.join("")===”” 15 16 2.拼接和选取: 17 *拼接: 将其它元素或其它数组,和当前数组拼接为一个新数组 18 如何: var newArr=arr.concat(值1,值2,...,arr2,…) 19 强调: 20 1.concat无法修改原数组,只能返回新数组。 21 要想获得拼接后的新值,必须用变量接住新数组 22 2.会自动打散数组参数为单个元素,再拼接 23 *选取: 复制出数组中指定开始到结束位置之间的元素,组成新数组 24 如何: var subArr=arr.slice(starti,endi+1); 25 复制出arr中starti位置到endi为止的所有元素,组成新数组。 26 强调: 1. 如果两个参数都是下标,则含头不含尾,结束为止总要+1 27 2. 不修改原数组,仅复制出原数组的元素,组成新数组返回。 28 简写: 29 1.省略第二个参数: arr.slice(starti)表示一直选取到结尾 30 2.支持负数下标: 表示倒数第n个元素 31 原本: arr.length-n可简写为: -n ,其实,是slice自动用length-n 32 3.省略第一个参数: arr.slice() 复制整个数组 33 34 3.修改数组: 删除,插入,替换 —— splice 35 *删除: arr.splice(starti,n) 删除arr中,starti位置开始的n个元素。 36 其实, splice有返回值: 返回被删除的元素,组成的临时子数组 37 因为,程序中删除的东西,可能还有别的用途 38 如何: var deletes=arr.splice(starti,n); 39 强调: 1. 直接修改原数组 40 2. 不用考虑含头部含尾 41 简写: 1. 省略第二个参数,表示到结尾 42 2. 支持负数参数 43 *插入: arr.splice(starti,0,值1,值2,…) 44 在starti位置,插入值1,值2,…,原starti位置的被向后顺移 45 强调: 不支持打散数组类型参数 46 vs concat() 不同: 47 1.Concat不修改原数组,返回新数组 48 Splice 直接修改原数组 49 2.Concat可打散数组参数为单个元素 50 Splice 不支持打散数组参数,而是住套间 51 3.Concat只能在结尾添加 52 Splice 可在任意位置插入 53 *替换: arr.splice(starti,n,值1,值2,….)其实就是先删除,再插入 54 强调: 1. 删除的个数和插入的个数不必一致,因为,数组不限制元素个数。 55 56 *翻转: arr.reverse();
7.***排序:
1 鄙视: 3大排序算法: 冒泡,插入,快速 2 冒泡: 3 数组排序API: arr.sort(); 4 原理: 将每个元素都转为字符串,按字符串比较大小 5 问题: 只能按字符串排序。无法按数字排序。 6 解决: 自定义比较器函数: 7 专门比较任意两数大小的函数 8 要求: 2个参数: a,b 9 返回值: 如果a>b,就返回正数 10 a<b,就返回负数 11 a==b,就返回0 12 函数体: return a-b 13 何时: 只要希望按数字排序时,必须自定义比较器函数 14 如何定义: function cmp(a,b)return a-b 15 如何使用: 将比较器函数作为参数传给sort函数 16 arr.sort(cmp) 17 强调: cmp后不要加(),因为不是立刻执行,而是传入sort函数内,被sort函数反复调用。 18 降序排列: 19 只要颠倒比较器函数的返回值的正负即可 20 比如: function cmp(a,b)return b-a
8.***栈和队列:
1 Js中没有专门的栈和队列类型。都是用数组模拟的。 2 只不过,控制了使用数组元素的顺序。 3 何时: 只要希望按照特定的顺序使用数组元素时 4 5 栈(stack): 一端封闭,只能从另一端进出的数组 6 特点: FILO 7 如何: 8 结尾出入栈: 9 入栈: arr.push(值) 已入栈的元素下标不改变 10 出栈: var last=arr.pop() 11 开头出入栈: 12 入栈: arr.unshift(值) 已入栈元素的位置 往后顺延 13 强调: 开头入栈的结果和结尾入栈的结果是首尾颠倒的 14 出栈: var first=arr.shift(); 15 16 队列(queue): 只能从一端进入,从另一端出的数组 17 特点: FIFO 18 何时: 只要按照先来后到的顺序使用数组元素时 19 如何: 结尾入: arr.push() 20 开头出:var first= arr.shift()
9.*** 二维数组:
1 什么是: 数组中的元素,又引用另一个子数组 2 何时: 2种: 3 要保存的数据,就是横行竖列的二维数据 4 要对数组中保存的内容,进行更细致的分类时(保存上下级关系的数据) 5 如何: 6 创建: 2种: 7 先创建空数组,再添加子数组 8 创建数组同时,初始化子数组 9 访问: 数组[r][c] 10 二维数组中每个元素的用法和一维数组中每个元素的用法,以及单个变量的用法完全相同。 11 强调: 二维数组中行下标r不能越界列下标c 可以 12 遍历: 外层循环控制行,内层循环控制列 13 for(var r=0;r<arr.length;r++) 14 for(var c=0;c<arr[r].length;c++) 15 arr[r][c] //当前元素 16 17 18 arr.index(值):在arr中找“值”的位置,如果找到返回下标i,否则返回-1 19 ******* 20 1.Length属性: 21 数组是对象:分装了一组数据,并提供了对数据操作方法 22 .length属性:获得数组中的元素个数!=实际中的元素个数 23 何时使用: 24 arr[arr.length-1]: 任意长度数组中的最后一个元素 25 arr[arr.length]:向数组末尾追加一个新元素 26 改小length的值,可删除末尾元素 27 2.关联数组:可以自己定义下标名称的数组 28 如何创建关联数组: 29 Var fbb=[]; 30 Key value—>对儿 31 fbb[“sname”]=”范冰冰”; 32 fbb[“shx”]=91; 33 如何访问关联数组:fbb[“sname”] 34 关联数组中的length属性失效! 35 关联(hash)数组:下标是不能重复 36 优势:利用hash算法,精确定位某个下标的位置,不用遍历 37 索应数组:下标自动分配,无意义,要按内容查找只能从头开始遍历 38 遍历关联数组: 39 For(var key in arr) 40 Key,仅得到当前元素的下标 41 arr[key],得到当前元素的值! 42 43 44 3.数组API 45 1.arr to String: 46 var str=arr.toString()?自动,逗号分离 47 var str=arr.join(“连接符”)—>自定义连接符 48 固定套路:1.将字符拼接为单词:arr.join(“”) 49 2.将单词拼接为句子:arr.join(“ “) 50 *优化: 51 问题:频繁字符窜拼接造成内存浪费* 52 解决:先将要拼接的字符串放入数组 最后,arr.join(“”) 53 过程:Var arr=[“a”]; 54 arr[arr.length]=”b”; arr[arr.length]=”c”; 55 1个arr 2个str 1个arr 3个str 56 [“a”,”b”,”c”] arr.join(“”); 57 Var str=“a”; a 58 str+=”b”;//3个 ab b 59 str+=”c”;//5个 abc c 60 2. 拼接和截取:原对象保持不变 61 Var newArr=arr.concat(新值1,另一个数组,新值2…) 62 Var subArr=arr.slice(starti[,endi+1]); 63 第二个参数可省略,若省略表示从start一直取到结尾 64 两个参数都可以取负值,就近使用下标 含头不含尾 65 3.arr.splice():删除 插入 替换 66 4.arr.reverse(); 67 5.专门比较两数字的大小 68 Function compareNum(a,b)return a-b; 69 专门比较两字符串的大小 70 Function compareStr(a,b) 71 if(a>b) return 1; 72 else if(a=b)return 0; 73 else if(a<b)return -1 74 75 Function compareStr(a,b)return a>b?1:a<b?-1:0; 76 Bubble(nums,compareNum);console.log(nums); 77 Bubble(emps,compareStr); console.log(emps);
1 ***函数对象作为参数 2 Js中函数本质是一个对象 3 函数名本质是指向函数对象的变量 4 自定义sort方法的排序 arr.sort(比较器函数) 5 ***String:字符串:多个字符组成的一个只读的集合(数组) 6 凡是数组对象中,不修改原对象的API,字符串都能用! 7 比如:slice indexof 8 反例:push sort splice 9 内置对象(javacsript)ES标准中已经定义好的,由浏览器厂商已经实现的对象 10 11个:String Number Boolean 11 /Array Date Math RegExp 12 /Error 13 /Function Object 14 /Globel(全局Window) 15 16 ***包装类型:临时封装原始类型数据,提供对原始类型数据的操作方法 17 3种:String Number Boolean(不能new) 18 函数调用完,包装类型自动释放 19 原理: 20 1. 尝试对原始类型的值调用功能时, 引擎会判断值的类型, 21 然后创建对应类型的包装类型对象。 22 2. 包装类型对象中封装要操作的值,并提供各种API 23 3. 用值调用功能其实是调用包装类型的功能 24 4. 功能执行完,包装类型对象自动释放 25 比如: var n=345.678; n.toFixed(2) 26 //new Number(n).toFixed(2) 27 var char=”张”; char.charCodeAt() 28 //new String(char).charCodeAt()
10.****String API:
1 1.大小写转换: 将字符串中的字母统一转为大写或小写 2 何时: 不区分大小写时 3 比如: 用户名,验证码,邮箱地址 4 如何: str.toUpperCase() 转大写 5 str.toLowerCase() 转小写 6 2.获得指定位置的字符: 3种 7 2.str.charAt(i) => str[i] 8 1. str[i] 倒数第二个:str[str.length-2] 9 3.获得指定位置的字符的unicode号: str.charCodeAt(i) 10 4.将unicode号再转回原文: String.fromCharCode(unicode) 11 3.查找关键字的位置:2种: 12 1.Var i=str.indexOf(“kword”[,starti]); 13 2.Var i=str.lastIndexOf(“kword”[,starti]);查找starti左侧第一次出现关键字位置 14 Starti默认等于0 15 16 ***截取子字符串: 17 1.str.slice(starti,endi+1) eg: pid.slice(6,-5+1); 18 2.str.substring(starti,endi+1) 同slice, 19 仅不支持负数参数eg: pid.substring(6,pid.length-5+1); 20 如果知道个数: str.substr(starti,n) 21 22 ***检索关键词: 23 1. 检索一个固定的关键词出现的位置: 24 var i=str.indexOf(“关键词”,fromi) 25 查找str中fromi位置之后的下一个关键词的位置 26 fromi: 指开始查找的位置 27 如果省略,默认从头开始找 28 返回值: 如果找到,返回关键词第一个字的下标位置 29 如果找不到了,返回-1 30 问题: 每次只找一个关键词的位置 31 无法自动找下一个 32 解决: 循环调用indexOf 33 每次都要显式指定开始查找位置为本次找到位置的下一个 34 直到返回-1就退出循环 35 36 查找最后一个关键词的位置: 37 var i=str.lastIndexOf(“关键词”); 38 查找str中最后一个“关键词”的位置 39 问题: 只能查找一个固定的关键词 40 关键词稍微变化,就找不到 41 解决: 正则表达式 42 2.判断是否包含符合规则的关键词——支持正则 43 var i=str.search(/正则/) 44 查找str中第一个符合正则要求的关键词的位置 45 如果找不到,返回-1 46 问题1: 所有正则默认区分大小写 47 解决: 只要在第二个/后加i,表示ignore 48 问题2: 没有第二个参数, 永远只能找第一个 49 问题3: 只能返回位置,无法返回关键词的内容 50 解决: match 51 3.查找所有关键词的内容或个数: 52 var kwords=str.match(/正则/ig); 53 在str中查找所有符合正则要求的关键词 54 返回值: 所有关键词组成的数组 55 如果没找到,返回null! 56 问题: 所有正则默认只匹配第一个符合条件的关键词 57 解决: 在第二个/后加g, 表示global 58 问题: 只能返回内容,无法返回位置! 59 4.即查找每个关键词的内容,又查找每个关键词的位置: ? 60 61 替换: 将字符串中找到的所有关键词,替换为指定的新内容 62 包含2种: 63 简单替换: 将所有关键词替换为统一的新值 64 str=str.replace(/正则/ig,”新值”) 65 强调: 字符串是只读数组,所有,所有API都无权直接修改原字符串,只能返回新字符串 66 高级替换: 根据本次找到的关键词不同,动态选择不同的替换值. 67 str=str.replace(/正则/ig,function(kword) 68 kword //可自动获得本次找到的关键词 69 return 根据kword的不同,动态选择不同替换值 70 ) 71 删除: 将关键词替换为”” 72 73 切割: 将字符串按指定切割符,切成多段子字符串 74 简单切割: 切割符时固定的 75 var substrs=str.split(“切割符”) 76 复杂切割: 切割符不固定 77 var substrs=str.split(/正则/) 78 固定套路: 将字符串打散为字符数组: str.split(“”)
11.***正则表达式:
1 验证字符串格式 2 使用规则模糊查找多种关键词 3 如何: 4 1.最简单的正则表达式,就是关键词本身 5 2.字符集: 6 什么是: 规定一位字符备选字符列表的集合 7 何时: 只要一位字符上有多种备选字时 8 如何:[备选字符列表] 9 强调: 1. []不能随便加逗号和空格 10 2. 一个[]字符集只能限定一位字符的备选范围 11 简写: 当备选字符中部分字符是连续的,可用-省略中间字符: 12 比如: 一位数字[0-9] 13 一位小写字母[a-z] 14 一位大写字母[A-Z] 15 一位字母[A-Za-z] 16 一位汉字[\u4e00-\u9fa5] 17 反选: 选择除了xxx都行: [^xxx] 18 3.预定义字符集: 19 什么是: 对常用字符集的最简化写法 20 包括: 4个: 21 \d 一位数字, 代替[0-9] 22 \w 一位字母,数字或_, 代替[A-Za-z0-9_] 23 \s 一位空字符: 空格,Tab,… … 24 . 一位任意字符(除了换行)——通配符 25 \D,\W,\s-?除了\d,\w或\s--?了解 26 强调: 必须规则和预定义字符集的规则完全匹配时,才能使用预定义字符集。 27 问题: 字符集只能规定一位字符的备选内容无法灵活规定出现次数 28 解决: 量词: 29 4.量词: min,max灵活定义一位字符集出现次数的规则 30 何时: 只要规定字符集出现次数 31 如何: 2大类: 32 1.有明确数量边界的:3个 33 字符集m,n 至少m次,最多n次 34 字符集m, 至少m次,多了不限 35 字符集m 必须m次 36 2.没有明确数量边界:3个 37 字符集? 可有可无,最多一次0.1 38 字符集* 可有可无,多了不限0, 39 字符集+ 至少一次,多了不限1, 40 强调: 默认一个量词仅修饰相邻的前一个字符集 41 5.选择和分组: 42 分组: 将多个子规则用()包裹为一组 43 为什么: 默认一个量词只能修饰一个字符集 44 何时: 只要希望一个量词同时修饰多个字符集时 45 选择: “规则1|规则2” |读作或 46 类似于程序中的或者 47 只要匹配任意一个规则即可 48 例:身份证: 1,2,3代 15位数字 2位数字 49 最后一个可能是数字或Xx后三位整体可有可无,最多1次 50 \d15 (\d2 [0-9Xx])? 51 例:手机号: +86或0086 整体可有可无,最多一次 52 (\+86|0086)? 53 空字符 可有可无,多了不限 54 \s* 55 1 56 3,4,5,7,8中挑一个 57 [34578] 58 9位数字 59 \d9 60 (\+86|0086)? \s*1[34578] \d9 61 6.指定匹配位置: 3个位置 62 ^开始位置, 第一个字符之前 63 $结束位置, 最后一个字符之后 64 何时: 只要仅匹配特定位置的值时 65 比如: 匹配空字符: 66 ^\s+ 字符串开头的空字符 67 \s+$ 字符串结尾的空字符 68 ^\s+|\s+$匹配开头或结尾的空字符 69 \b 专指单词边界: 70 ^ $ 空格 标点符号 71 专门选择一个单词之用
12.**RegExp
1 什么是: 封装一条正则表达式,并提供使用正则表达式执行验证和查找的API 2 何时: 2种: 3 1.验证格式 4 2.实现最高级的查找 5 如何: 6 创建: 2种: 7 1.使用直接量: var reg=/正则/ig; 8 何时: 如果正则表达式是固定,无需动态拼接生成 9 因为//之中不支持js表达式 10 字符冲突: //之间出现特殊符号: + /等等,都要转义为\+ \/ 11 2.用new: var reg=new RegExp(“\n \t正则”,”ig”); 12 何时: 如果正则表达式需要动态拼接生成(所有\都要改为\\) 13 字符冲突: \\ 或 “ 都要转义为\\ \” 14 正则API: 2个: 15 1.验证格式: var bool=reg.test(str) 16 验证:str是否符合reg的正则规则(要求从头到尾必须完全匹配) 17 符合返回true,不符合返回false 18 问题:(test方法默认只要找到部分匹配,就算验证通过。 19 解决: 凡是验证必须前加^后加$ 20 ^表示开头位置的xxxx,$表示结尾位置的xxxx 21 ^和$联用表示从头到尾必须完整匹配 22 23 密码强度要求:6-8位,只能是字母、数字的组合 24 至少包含一位大写字母至少包含一位数字 25 预判(?):1.不全由小写字母或数字组成,可能包含大写或符号 26 (?! [a-z0-9]*$) 27 2. 不全由大写或小写字母组成,可能包含数字或符号 28 (?![a-zA-Z]*$) 29 正式规则:只能是字母数字的组合—>屏蔽了符号 30 [a-zA-Z0-9]6 31 补齐第四种查找关键词的方式:(即查找内容,又查找位置:) 32 var arr=reg.exec(str) 33 在str中查找下一个符合reg规则的关键词的内容和位置. 34 强调: 每次只找一个 35 返回值: 36 如果找到:arr:[0: 关键词内容, index: 关键词位置] 37 没找到: 返回null 38 如何查找所有: 39 仅循环调用即可!直到返回null为止 40 不用指定开始查找位置,就可自动找下一个 41 42 总结:查找关键字: 43 1.var i=str.search(reg)?判断有没有 44 缺点:不能指定开始位置 45 2.var arr=str.match(reg)?获得所有关键字内容,个数 46 缺点:不能返回位置 47 3.var i=str.indexOf(“kword”[,starti])?从指定位置开始,查找下一个关键字的位置 48 缺点:不支持正则 49 4.var arr=reg.exec(str)?即获得内容,又获得位置 50 缺点:复杂 51 52 正则:贪婪模式与懒惰模式 53 默认贪婪模式:默认总是匹配最长的符合条件的字符串 54 原因:.*或.+等引起 55 懒惰模式:仅匹配最短的符合条件的字符串 56 贪婪-->懒惰:(.*?) 57 从正则表达式中获得子内容:2步 58 1.正则表达式:用()包括要获取子内容的部分 59 2.程序中,本次查找后:RegExp.$n-->n:第几个圆括号 60 取本次匹配结果中第N个()匹配的子内容,正则中n从1开始
1 ***String中的模式匹配API:4个 2 2个查找:str.search(reg);str.match(reg); 3 1个替换:str.replace(reg); 4 1个切割: 5 1. ***String中的正则API: 6 1.替换:str.replace(reg,"替换值") 7 固定套路:利用replace格式化数据 8 “替换值中,也可用$n,和RegExp.$n的用法完全相同 9 2.切割:var arr=str.split(reg); 10 11 2.*Math 专门执行数学计算的对象 12 封装了数学计算中常用的常量 13 1.取整:3种:上取整 下取整 四舍五入取整 14 Math.ceil(n) Math.floor(n) Math.round(n) 15 对比: round VS toFixed 16 Math对象 Number对象 17 只能取整 按任意小数位数(参数0~20之间) 18 返回数字 返回字符串 19 2.乘方、开平方: 20 乘方:Math.pow(n,m):计算n的m次方 21 开平方:Math.sqrt(n):计算n的平方根 22 3.获取最大值最小值: 23 getMax(a,b) 24 Math.max(a,b,c...) Math.min(a,b,c...) 25 ***固定套路:变相实现获取数组中最大值 26 Math.max.apply(Math,arr);--》Math.max(arr[0],...) 27 4.随机数:Math.random();0<=n<1 28 任意min到max之间去一个随机整数 29 parseInt(Math.random()*(max-min+1)+min) 30 31 3.*Date:封装了一个时间点,提供对时间日期的操作API 32 创建Date对象: 33 1.var now=new Date();//创建一个新日期对象同时,保存了*客户端*当前时间点的毫秒数。--获得当前时间 34 2.var time=new Date("xxxx/xx/xx [xx:xx:xx]") 35 3.var time new Date(年,月-1,日[,时,分,秒]) 36 date.getTime():获得日期对象中的毫秒数 37 38 Date API 39 1.每个分量都有一对儿get set方法 40 getDay()获得星期,没有setDay 41 2.命名:年月日星期,不加s,时分秒毫秒,加s 42 3.返回值:月中的日取值范围从1开始到31结束 43 其余都是从0开始到减1结束 44 星期:日 一 二 六 45 0 1 2 6 46 月份:1月 2月 11月 12月 47 0 1 10 11 48 Date计算:2中 49 1.两日期对象可直接相减,结果毫秒差 50 2.对任意分量做加减:先get出来-》计算-》再set回去*直接修改原日期对象* 51 date.set(date.getXXX()+-n) 52 53 补:创建日期对象第四种:复制日期对象 54 var date1=new Date(); 55 var date2=new Date(date1.getTime()); 56 //new Date(毫秒数) 57 date2.setXXX(date2.getXXX()+-n)
1.*错误/异常处理
1 what:导致程序无法继续执行的异常状态 2 js中一旦发生错误,就会自动创建一个error类型对象 3 6种: 4 SyntaxError:语法错误 5 ReferenceError:引用错误,找不到变量或对象 6 TypeError:类型错误,错误的使用了对象中的方法时 7 RangeErroe:范围错误,参数超范围 8 EVA了Error:调用eval函数出错 9 URLError:URL错误 10 错误处理:在程序发生错误时,保证程序不退出或正常退出 11 如何错误处理 12 语法:tryCatch: 13 try 14 可能出错的代码段 15 catch(err)//仅在发生错误时才执行 16 //一旦发生错err中就会自动存入Error对象 17 1.记录/显示错误的信息 18 2.继续向调用者抛出异常 19 [finally 20 无论对错一定都会执行的代码段 21 释放资源 22 ] 23 建议:尽量优先使用if…else语句代替tryCatch块,已知的 24 try catch:解决浏览器兼容问题
2.***Function 对象
1 js中一切都是对象 2 连函数也是对象 3 函数名其实是引用函数定义 4 5 ************************************************************************** 6 7 1.*arguments对象: 8 重载:程序中可定义多个相同函数名,不同参数列表的函数调用者不必区分每个函数的参数,执行时,程序根据传入的参数个数,自动判断选择哪个函数执行。 9 10 js语法不支持重载!但可用arguments对象模拟重载效果 11 arguments对象:函数对象内,自动创建的专门接收所有参数值的类数组对象。 12 arguments[i]:获得传入的下标为i的参数值 13 arguments.length:获得传入的参数个数 14 15 即使定义了参数变量,arguments对象同样会收到所有参数值 16 17 2.****函数对象本质: 18 1.创建函数对象:3种: 19 1.声明方式:function 函数名(参数) 20 函数体; 21 return 返回值 22 函数名和函数定义都被提前 23 在调用前后位置定义都行 24 2.函数直接量:var 函数名=function(参数) 25 函数体; 26 return 返回值 27 仅函数名变量声明会提前,函数定义留在本地 28 必须定义在调用前! 29 3.使用new创建函数类型对象: 30 var 函数名=new function("a","b",...,"函数体"); 31 2.***内存中的函数对象*** 32 创建函数对象时:同时创建2个对象: 33 函数对象:函数的定义 34 作用域链对象:保存了函数对象可用的变量位置 35 默认第一项指向window对象 36 调用函数时:又会创建一个新对象: 37 活动对象:专门保存局部变量的对象 38 在作用域链对象中追加指向活动对象的引用 39 调用后:默认仅释放活动对象 40 作用域链对象中活动对象的引用出栈 41 3.***匿名函数:定义时,不能指定函数名的函数 42 何时使用:2大用途: 43 1.匿名函数自调时:定义完,立刻执行 执行完立刻释放 44 何时使用:只有确定函数只执行一次时! 45 如何自调:(function(参数) 46 函数体 47 )(参数值); 48 2.匿名函数回调:先将函数作为对象传递给另一个函数, 49 由另一个函数自主决定在需要时调用 50 何时使用:只要将一个函数对象传递给其他方法调用时 51 如何回调:直接将匿名函数的声明传入另一函数中 52 4.****闭包: 53 问题:局部变量的全局变量的缺陷 54 全局变量:容易全局污染 55 局部变量:无法共享不能长久保存 56 57 既可以共享,长久保存,又不会全局污染---闭包 58 解决:3步:闭包3特点: 59 1.定义外层函数:封装被保存的局部变量 60 2.定义内层函数,执行对外层函数局部变量的操作 61 3.外层函数返回内层函数的对象 62 并且外层函数被调用,结果被保存在全局变量中 63 64 何时使用:既反复使用局部变量,又避免全部污染--->闭包(保护局部变量,占内存) 65 判断闭包3特点: 66 1.嵌套函数 67 2.内层函数操作了外层函数的局部变量 68 3.外层函数将内层函数返回到外部,被全局变量保存住 69 70 判断闭包执行结果: 71 1.外层函数被调用几次,就有几个受保护的局部变量的副本 72 2.反复调用来自一个闭包的函数,受保护的局部变量就变化几次
1 1.面向对象: 2 在程序中都是用一个对象来描述现实中的一个具体的东西。 3 对象:封装多个数据的存储空间 4 自定义对象:封装现实中一个东西的属性和功能的存储空间。 5 现实中东西的属性会成为对象中的属性变量 6 现实中东西的功能,会成为对象中的方法(函数) 7 1.创建自定义对象 8 3种: 9 1.var obj=‘属性名1‘:值1,‘属性名2‘:值2,‘功能名‘:function()... 10 js中一切都是对象!所有对象的底层都是hash数组 11 12 属性:2种:obj.属性名 obj["属性名"] 13 访问对象中不存在的属性 14 (访问数组中不存在的下标):不会出错,返回undefined强行给不存在的属性赋值,不报错!js会自动创建同名属性 15 16 如何判断某个对象是否包含指定成员:3种 17 1.obj.hasOwnProperty("成员名") 18 如果找到,返回true,否则返回false! 19 20 方法:如何在方法中,访问当前对象自己: 21 ****this关键字:运行时,指代正在*调用*方法的对象 22 (.前的对象) 23 this本质是window下唯一的指针,指向当前正在调用方法的对象
1 2.****继承 2 面向对象三大特点:封装 继承 多态 3 封装:将描述同一个东西的属性和方法,定义在一个对象中 4 继承:父对象中的属性和方法,子对象可以直接使用 5 多态:同一个对象,在不同情况下,呈现不同的状态 6 重载:同一方法名,传入参数不同,执行不同的操作 7 重写:子对象觉得父对象的成员不好用,可自己定义一个,覆盖子对象 8 创建对象:3中: 9 1.var obj="属性名":值, 10 ……, 11 "方法名":function()…this.属性… 12 13 2.var obj=new Object();//创建一个空对象 14 obj.属性名=值; 15 obj.方法名=function()…this.属性名… 16 17 3.利用构造函数*反复*批量*创建相同结构的对象 18 构造函数:描述一类对象结构的特殊函数 19 2步: 20 1.定义构造函数 21 function 构造函数|类型名(属性参数1,……) 22 this.属性名=属性参数1; 23 ... 24 this.方法名=function()...this.属性名... 25 26 2.利用构造函数创建对象 27 var obj=new 构造函数|类型名(属性值1,...); 28 new:1.创建一个空对象:new obj= ; 29 2.用空对象,调用构造函数 30 构造函数在空对象中添加属性和方法 31 3.设置新对象的_proto_指向构造函数的prototype 32 4.返回新对象的地址 33 34 继承:js中一切继承都是用原型对象实现的! 35 原型对象(prototype):每个函数对象都有一个原型对象 36 构造函数的原型对象负责保存所有子对象共享的成员! 37 ---避免重复定义方法对象,浪费内存。 38 说明:其实所有内置类型的API都是定义在类型.prototype 39 40 41 扩展对象:2种: 42 1.扩展共有属性:通过构造函数.prototype添加的属性 43 2.扩展自有属性:通过某一个具体子对象添加的属性 44 判断自有属性或共有属性: 45 1.自有属性:obj.hasOwnProperty("属性名") 46 2.共有属性:"属性名"in obj&&!obj.hasOwnProperty("属性名") 47 在原关系中包含 且 子对象没有 48 49 删除属性:delete对象.属性名 50 *仅能删除当前对象自己的属性,无法删除共有属性 51 全局变量:3种: 52 var n=1; | window.n=1 | window["n"]=1 53 不能delete 不能delete 可被delete 54 55 原型链:由各级对象的_proto_逐级继承形成的关系 56 获得任意对象的父级原型对象: 57 Object.getPropertyOf(子对象) 58 ==>子对象._proto_ 59 60 61 检查对象的父对象:父对象.isPrototypeOf(子对象)
1 3.原形,原型链,继承: 2 原型:保存所有子对象共有属性和方法的对象! 3 所有函数都有prototype,指向自己的原型对象 4 所有对象都有_proto_,指向自己父级原型对象 5 所有原型对象都有constructor,指回原型对应的构造函数 6 7 原型链:所有父子级对象间由_proto_形成的多级引用关系-->*多级*继承 8 9 原型相关API: 10 1.判断自有属性和共有属性: 11 1.自有:obj.hasOwnProperty("属性名"); 12 2.判断原型链上的属性:2种: 13 判断不包含:if(!("属性"in obj)) 14 if(obj.属性名==undefined) 15 if(!obj.属性名) 16 3.仅判断共有:必须满足两个条件 17 !obj.hasOwnProperty("属性名") 18 && 19 obj.属性名 20 2.获得任意对象的原型: 21 obj._proto_ X 22 onject.getPropertyOf(obj) 23 3.判断父对象是否在子对象的原型链上 24 父对象.isPrototypeOf(子对象)
1 ***检测一个对象是不是数组类型:4种 2 1.Array.prototype.isPrototypeOf(obj); 3 2.obj instanceof Array 4 对象 是不是 构造函数 的实例 5 3.obj.constructor==Array仅判断直接父级 6 4.利用当前对象,强行调用原始的toString方法 7 Object.prototype.toString.call(obj)=="[object Array]" 8 .apply(obj) 9 10 继承:代码重用! 11 1.直接继承对象:想法设法修改对象的_proto_ 12 3种: 13 1.仅修改一个对象的_proto_ 14 Object.setPrototypeOf(子对象,父对象) 15 2.通过修改构造函数的原型对象,实现批量修改后续子对象的继承关系。 16 构造函数.prototype=父对象 17 强调:仅影响之后创建的对象的继承关系 18 3.var obj=Object.create(父对象[,属性列表]) 19 创建一个空对象 20 继承父对象中的属性 21 继承同时可再扩展属性和方法 22 2.仅继承结构 23 function 父类型构造函数(属性参数1,属性参数2) 24 this.属性1=属性参数1; 25 this.属性2=属性参数2; 26 27 function 子类型构造函数(属性参数1,属性参数2,属性参数3) 28 父类型构造函数.call(this,属性参数1,属性参数2); 29 this.属性3=属性参数3; 30 31 var obj=new 子类型构造函数(值1,值2,值3) 32 33
以上是关于前端复习之JavaScript(ECMAScript5)的主要内容,如果未能解决你的问题,请参考以下文章
Day 17前端工具升级之Javascript & jQuery