Javascript汇总.docx
- 文档编号:29210647
- 上传时间:2023-07-21
- 格式:DOCX
- 页数:105
- 大小:4.14MB
Javascript汇总.docx
《Javascript汇总.docx》由会员分享,可在线阅读,更多相关《Javascript汇总.docx(105页珍藏版)》请在冰豆网上搜索。
Javascript汇总
1、数组***
(1)关联数组***
(2)数组API***
1)排序****
(3)二维数组
2、ECMAScript对象
3、包装类型
4、String***
5、正则表达式*****
6、RegExp对象***
7、Math
8、Date
9、Error***
10、Function*****
(1)重载
(2)匿名函数
(3)作用域和作用域链
(4)闭包*****
11、面向对象OOP*****
(1)封装
1)this*****
(2)继承
(3)多态
(4)自定义继承
12、ES5*****
(1)对象的属性
1)访问器属性*****
(2)防篡改
(3)Object.create()
(4)数组API
(5)bind()*****
(6)严格模式
数组***
1、什么是:
What
内存中连续存储多个数据的数据结构,再起一个统一的名字。
2、为什么:
Why
普通的变量只能存储一个数据
程序=数据结构+算法:
数据结构:
数据在内存中的存储结构;
算法:
解决问题的步骤。
好的数据结构可以极大的提高程序的执行效率。
(连续存储的一组数据,可极大的提高操作的速度。
)
3、何时使用:
When
只要存储多个连续的数据,都要用数组
4、如何用:
How
A)数组:
(索引数组:
下标为数字的数组)
1、创建数组:
3种
(1)创建空数组:
a)数组直接量:
vararr=[];
b)用new:
vararr=newArray();
何时用:
在创建数组时,还不知道数组中的元素内容时
(2)创建数组时同时初始化数组:
a)数组直接量:
vararr=[值1,值2];
b)用new:
vararr=newArray(值1,值2,.....);
何时用:
在创建数组时,已经知道数组的元素内容时
(3)创建n个空元素的数组:
a)用new:
vararr=newArray(n);
2、数组(引用类型的对象)vs原始类型的值
原始类型的值:
数据直接保存在变量本地的数据类型
number,string,boolean,null,undefined
引用类型的值:
数据无法直接保存在变量本地的数据类型
3、数组如何存储:
引用类型的对象如何存储:
在变量之外开辟独立的存储空间,变量仅保存外部存储空间的地址
4、按值传递
两个变量间赋值时,或将变量作为参数传入函数时,其实只是将原变量中的值复制一个副本给对方
结果:
对原始类型的值:
修改新变量,不影响原变量
为什么:
复制的是原始的值
对引用类型的对象:
通过新变量修改对象,等效于直接修改原对象。
为什么:
仅复制地址值,原对象不增加
5、垃圾回收
垃圾回收:
引擎会自动释放不再使用的对象的空间
垃圾回收器:
自动记录对象的引用次数,并释放不再被任何变量引用的对象的小程序,伴随js主程序并行执行。
原理:
创建对象时,每个对象都有一个属性:
引用计数器,用来记录引用对象的变量个数
*如果变量不再使用对象时,要将变量赋值为null*
对象的引用计数器-1
垃圾回收器会自动寻找引用计数器为0的对象,释放
6、如何访问数组中的元素
元素:
数组中每个数据都是一个元素
打印数组:
console.log(String(arr));
输出对象的结构:
console.dir(arr);
(1)如何访问:
下标:
数组中唯一标识每个元素存储位置的序号
特点:
从0开始,连续不重复
(2)何时使用:
只要访问数组元素,只能用下标
(3)如何使用:
数组名[i]——用法和单个变量完全一样!
7、数组的length属性
记录了数组中理论上的元素个数,length属性的值永远是最大下标+1
固定套路:
(1)获得数组最后一个元素:
arr[arr.length-1]
(2)获得倒数第n个元素的位置:
arr[arr.length-n]
(3)在数组末尾追加一个新元素:
arr[arr.length]=新值
(4)数组缩容:
减小arr.length的数值,会删除结尾的多余元素。
a)删除末尾元素:
arr.length--;
b)删除末尾n个元素:
arr.length-=n;
c)清空数组:
arr.length=0;
(5)遍历数组:
依次访问数组中每个元素,对每个元素执行相同的操作
for(vari=0;i arr[i]//当前正在遍历的元素 } 8、特殊: 三个不限制 (1)不限制数组的元素个数: 长度可变,可随时在任意位置添加新元素 (2)不限制下标越界: 取值: 不报错,返回undefined 赋值: 不报错,自动在指定位置创建新元素,并且自动修改length属性为最大下标+1----------如果下标不连续的数组,我们叫做稀疏数组 (3)不限制元素的数据类型 B)关联数组(hash数组)***window其实是一个巨大的hash数组 1、什么是: What 可自定义下标名称的数组 2、为什么: Why 索引数组中的数字下标没有明确的意义,只能通过遍历查找指定的元素内容,查找速度受数组元素个数和元素位置的影响 3、何时使用: When 只要希望每个元素都有专门的名称时 希望快速查找某个元素时 不受数组元素个数和元素位置的影响 4、如何用: How (1)创建数组: 2步: a)创建空数组varhash=[]; b)向空数组中添加新元素,并自定义下标名称hash[“下标名(key)”]=值(value) (2)访问数组 hash[“下标名(key)”]------用法同访问索引数组 (3)特点 a).length属性始终为0 b)无法使用索引数组的API (4)索引数组vs关联数组(hash数组) a)以字符串输出不能用字符串输出 b)下标是数字下标是自定义的字符串 c)length属性有效length属性无效(=0) d)可用for循环遍历不能用for循环遍历---forin e)访问元素时,都用数组名[“下标”] (5)遍历: forin循环 for(varkeyinhash){ key//只是元素的下标名 hash[key]//当前元素值 } 固定套路: 仅获取hash中的所有key varkeys=[]; vari=0; for(keys[i++]inhash); //结束后: keys中保存了hash中所有的key (6)其他: a)其实js底层,一切对象都是关联数组(hash数组) 比如: 索引数组,window b)鄙视口头说出: hash: 散列算法,接受一个字符串,并计算出尽量不重复的序号 不同的字符串,尽量计算出不同的序号 相同的字符串,一定计算出相同的序号 (1)原理: a)存入元素: 将字符串类型的元素名,交给hash算法,计算出一个尽量不重复的数字。 再将元素值,存入数字表示的位置 b)获取元素: 将要查找的元素名,交给hash算法,计算出和存入时完全一致的序号,直接到序号标识的位置获取元素值。 (2)查找元素时: 索引数组vshash数组 a)遍历不用遍历 b)受存储位置影响和存储位置无关 c)受数组元素个数影响和数组中元素个数无关 总结: 今后只要希望快速查找元素时,就用hash数组 C)案例 1、获得数组中的最大值: getMax(arr) 2、去掉数组中的重复元素----鄙视题unique1(arr),unique2(arr) 测速度: console.time();.......console.timeEnd(); 3、在数组中查找指定元素的位置: indexOf(arr,val,fromi)(重写indexOf方法) 4、数组API*** A)数组转字符串: 1、String(arr): 将arr中每个元素转为字符串,用逗号分隔 a)固定套路: 对数组拍照: 用于鉴别是否数组被修改过 b)StringvstoString String是万能的 functionString(obj){ if(obj===undefined){ return"undefined"; }elseif(obj==null){ return"null"; }else{ returnobj.toString(); } } toString: 只能转换除null和undefined外的任何数据 2、arr.join(“连接符”): 将arr中每个元素转为字符串,可自定义连接符 固定套路: 1.无缝拼接: arr.join("") 2.将单词拼接为句子: arr.join("") 3.判断数组是否为空: arr.join("")==""; 4.将数组动态生成页面元素: "<开始标签>"+ arr.join("结束标签><开始标签>") +"结束标签>" B)拼接和选取: 不直接修改原数组,而返回新数组 1、拼接 varnewArr=arr1.concat(值1,值2,arr2,值3,...); 将值1,值2和arr2中每个元素,以及值3都拼接到arr1的元素之后,返回新数组 其中: arr2的元素会被先*打散*,再拼接 2、选取 varsubArr=arr.slice(starti,endi+1) 选取arr中starti位置开始,到endi结束的所有元素组成新数组返回——原数组保持不变 强调: 凡是两个参数都是下标的函数,都有一个特性: 含头不含尾 简写: (1)一直选取到结尾: 可省略第二个参数 (2)如果选取的元素离结尾近: 可用倒数下标,arr.length可以省略: arr.slice(arr.length-n,arr.length-m+1) 可简写为: arr.slice(-n,-m+1); (3)复制数组: arr.slice(0,arr.length); 可简写为: arr.slice(); C)修改数组: splice直接修改原数组 1、删除: arr.splice(starti,n); 删除arr中starti位置开始的n个元素 不考虑含头不含尾 其实: vardeletes=arr.splice(starti,n); 返回值deletes保存了被删除的元素组成的临时数组 2、插入: arr.splice(starti,0,值1,值2....) 在arr中starti位置,插入新值1,值2,... 原starti位置的值及其之后的值被向后顺移 强调: 不支持打散数组类型参数,如果插入子数组,会变成二维数组 3、替换: arr.splice(starti,n,值1,值2....) 其实就是删除旧的,插入新的 先删除arr中starti位置的n个值,再在starti位置插入新值 强调: 删除的元素个数和插入的新元素个数不必一致。 4、案例 固定套路: 广告轮播 1)移除开头的n个元素到结尾 imgs=imgs.concat(imgs.splice(0,1)); 2)移除结尾的n个元素到开头 imgs=imgs.splice(imgs.length-n,n).concat(imgs); 广告轮播: D)颠倒数组: arr.reverse() 强调: 仅负责原样颠倒数组,不负责排序 E)排序****: 将元素按从小到大的顺序重新排列 (1)鄙视题: 手写的排序算法: 冒泡快速插入排序 冒泡排序: bubbleSort(arr) (2)牵扯到另外一个鄙视题: 交换两个变量的值: (3)排序API: arr.sort(): 默认将所有元素转为字符串,再按字符串升序排列。 问题: 只能排列字符串类型的元素 解决: 使用自定义比较器函数 a)比较器函数: 专门比较任意两个数大小的函数 要求: 两个参数: a,b 返回值: a>b,就返回一个正数 a 否则就返回0 比如: 专门比较两个数字的比较器: functioncompare(a,b){returna-b;} b)何时使用: 只要sort默认的排序规则不是想要的,就要自定义比较器函数,代替默认规则 c)如何使用: 1.定义比较器函数 2.将比较器函数作为参数传入sort方法中 arr.sort(compare); 强调: 传入sort方法内的比较器函数属于回调函数 回调函数: 将一个函数作为参数传入另一个函数中被反复调用 传入回调函数时,不要加()! ==>因为不是立刻调用! 而是交给别人去调用 何时: 只要函数中缺少一段逻辑,就要定义回调函数参数。 降序: 颠倒比较器函数的正负号 比如: functioncompare(a,b){returnb-a;} 冒泡排序: bubbleSort(arr,compare) F)栈和队列 js中没有专门的栈和队列类型,都是用数组模拟的 1、栈: 一端封闭,只能从一端进出的数组 特点: FILO(FirstInLastOut) 何时: 希望始终使用最新的元素时,就用栈结构 如何: 1)结尾出入栈: 入栈: arr.push(值)==>arr[arr.length]=值 出栈: varlast=arr.pop(); 特点: 每次出入栈都不影响现有元素的位置 2)开头出入栈: 入栈: arr.unshift(值) 出栈: varfirst=arr.shift(); 特点: 每次出入栈都会导致现有元素的位置发生顺移 3)例子: toString(); 创建一个函数,传入一个十进制的整数,返回其对应的二进制数表示: 重写十进制转二进制: dec2bin(dec) 2、队列: 只能从一端进入,从另一端出的数组 特点: FILO(FirstInFirstOut) 何时: 只要希望按照先来后到的顺序使用数组元素时 如何: 结尾入: arr.push(值) 开头出: varfirst=arr.shift(); 案例: G)二维数组 1、什么是: 数组中的元素又引用了另一个子数组 2、何时用: a).如果要存储横行竖列的二维数据时 b).如果要对数组中存储的数据再进行细致分类时 3、如何用: a)创建: 2种 1)先创建空数组,再向空数组中添加子数组 vararr=[]; arr[i]=[值1,值2.....] 2)在创建数组同时,初始化子数组 vararr=[[值1,值2.....],[值1,值2.....],.......]; b)访问二维数组中的元素: arr[r][c] 强调: 二维数组行下标不能越界: 会报错 null和undefined不能加点,加点就报错 c)二维数组的length属性: 仅表示子数组的个数 d)遍历二维数组: 外层循环遍历行,内层循环遍历列 for(varr=0;r for(varc=0;c arr[r][c]//当前元素 } } e)案例: 1)判断游戏是否结束: isGameover() 2)查找指定省份包含的市区: getCitiesByProv(pname) ECMAScript内置对象 一、ECMAScript内置对象 ES标准中规定的,浏览器厂商已经实现的对象。 11个: StringNumberBoolean-包装类型 ArrayDateMathRegExp---工具类 ErrorFunction(所有函数对象的祖宗)Object(所有对象的祖宗) Global(全局对象): 在浏览器中被window替代 包装类型 一、包装类型 专门封装原始类型的值,并提供对原始类型的值执行操作的API的对象 为什么: 问题一: 原始类型的值本身不包含任何方法 解决: 预定义了三种包装类型,包装类型中包含操作数据的API。 在试图对原始类型的值调用方法时,会自动创建对应包装类型的对象,封装原始类型的值,并调用对象的方法,操作值。 包装类型的对象,调用完方法后,自动释放! 问题二: string类型的数据,不能使用toFixed (2) 创建包装类型的对象前,先检查原始类型的值,再创建对应类型的包装类型对象。 不同类型的包装类型对象,拥有不同的API,不通用。 问题三: null和undefined不能打点? 鄙视题: varstr="Hello";//newString("Hello"); str.len=5;//为str添加一个属性len console.log(str.len);//undefined,又一次创建了String类型对象,这时是没有.len属性的,上下没有关系 //希望len=5,始终留在str上? //解决: varstr=newString(“Hello”);被str引用着不能释放 String*** 一、String: 其实就是一串字符组成的只读数组 Stringvs数组: 相同的地方: 1.下标访问 2.length===>获得字符的个数 3.slice,concat==>为什么能用? 不修改原数组,返回新数组 二、StringAPI: 强调: 所有StringAPI都无权修改原字符串,只能返回新字符串 1、大小写转换: 将字符串中所有英文字母统一转为大写或小写 str.toUpperCase(); str.toLowerCase(); 何时: 只要希望不区分大小写时 如何: 今后只要不区分大小写,都要先统一转为大写/小写,再操作。 补: css中,text-transform: uppercase/lowercase/capitalize(首字母大写) 2、获取指定位置的字符: str[i]: 也可以,但是容易产生歧义 varchar=str.charAt(i) 获得指定位置字符的unicode号: varunicode=str.charCodeAt(i);//省略i,默认为0 将unicode号反向转为字符: String.fromCharCode(unicode); 3、选取子字符串: varsubStr=str.slice(starti,endi+1);数组的API,支持负数,考虑含头不含尾 varsubStr=str.substring(starti,endi+1);String的API,不支持负数,考虑含头不含尾 varsubStr=str.substr(starti,n);选取starti开始的n个,不考虑含头不含尾 案例: 编码: encode(msg) 解码: decode(code) 4、检索关键词: 4种 (1)查找一个固定关键词的出现位置: vari=str.indexOf("关键词",fromi); 在str中从fromi位置开始查找下一个"关键词"所在的下标位置。 强调: 1.返回下标位置,如果找不到,返回-1 2.省略fromi,默认从0开始找 固定套路: 查找所有关键词的位置: while((i=str.indexOf("关键词",i+1))! =-1){ i//本次找到的关键词位置 } vari=str.lastIndexOf("关键词",fromi); 在str中从fromi位置开始查找前一个"关键词"所在的下标位置。 强调: 省略fromi,默认从最后(length-1)位置开始找 何时: 专门用于检索最后一个关键词的位置时 问题: 只能查找一个固定的关键词 解决: 用模式匹配——正则表达式(具体参照下一个) (2)仅判断是否包含符合规则的关键词: a)vari=str.search(/正则表达式/) 查找str中第一个符合正则表达式要求的关键词的位置i 如果没找到,返回-1 b)searchvsindexOf 相同: 默认都是从0位置开始找第一个关键词的位置 如果找不到,都返回-1 不同: indexOf: 优: 可指定开始位置! 可查找所有 缺: 不支持模式匹配,每次只能找一个关键词 search: 缺: 不可指定开始位置,永远从0开始找,而且永远只能找到第一个,不能找到所有的 只能返回位置,不能返回关键词内容 优: 支持模式匹配(正则) match优: 获取所有关键词的内容 缺: 无法返回每个关键词的位置 (3)列举所有关键词的内容: varkwords=str.match(/正则表达式/g); 检索出str中所有和正则表达式匹配的关键词 返回值是包含所有关键词内容的数组 如果没找到,返回null 强调: 如果一个方法可能返回null,都要先判断不是null,再使用 其中: g表示查找所有,必须加 为什么: 正则默认仅匹配第一个关键词 优: 获得所有关键词的内容 缺: 无法获得每个关键词的位置 (4)即获得每个关键词的内容,又获得每个关键词的位置: RegExp对象(参照后面) regexp.exec(str) 5、替换 str=str.replace(/正则/g,"替换值") 如果替换所有,就必须加g 如果英文环境下,忽略大小写,就必须加i 高级替换: 根据关键词的不同,动态替换不同的新值 str=str.replace(/正则/g,function(kw){ //kw获得本次找到的完整关键词 return根据kw的不同,返回不同的值 }) 练习: 如果需要对关键词部分处理或分组处理: 2步: (1).先用(),将正则分组 匹配时,每个(),会自动获得一个分组编号: 1,2,3... (2).在替换时,使用$1,$2,代替每个分组本次匹配的子内容 str=str.replace(/正则/g,function(kw,$1,$2,...){ //kw获得本次找到的完整关键词 //$n获得本次找到的关键词中第n个分组的子内容 return返回不同的值 }); 鄙视题: 将每个单词首字母改大写 衍生: (1)、删除: 替换成空字符串 (2)、格式化: 2步: 1).用正则将字符串分组 2).在替换值中使用$n重新拼接新格式 birth.replace(/(\d{4})(\d{2})(\d{2})/,"$1年$2月$3日"); 6、切割 按指定分隔符,将字符串切割为多段子字符串 简单切割: 分隔符是固定: varsubs=str.split("分隔符") 固定套路: 将
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Javascript 汇总