<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style>
</style>
<body>
<script type="text/javascript">
srting的replace(要替换父字符串的子字符或正则,要替换成的字符)
'hello'.replace(new RegExp(/\d/ig),'jsj');
'hello'.replace(new RegExp('h','ig'),'jsj');
'kkk'.replace(/\B/img,'..');\B匹配非单词边界(k..k..k),单词边界(...kkk...)
'op0joioi'.replace(/\d{3}/img,'o')匹配连续3个数字的字符
"9".replace(/\9?/img,';') ?匹配不出现的位置和出现的单词0~1(n?)
"9j8j89999999".replace(/\9*/img,';')匹配不出现的位置和出现的连续相同的单词0~n(n*)
"9j89".replace(/\9+/img,';')=>";j8;"匹配任何包含至少一个n 的字符串 ||连续相同的单词
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。 /zo+&/含有zo的最后一个
^n 匹配任何开头为 n 的字符串。 ^和&反义
(e|o)匹配父字符串的e或者o
正则三要点:从左向右;贪婪模式;尽量匹配
var s = 'Hello'
var c = s.replace(new RegExp(/\w\b/img),'world')
document.getElementById("p1").innerHTML = c
'<html>nregrt</html>好啊'.replace(/<(\w+)>.*<\/\1>/ig,'你好')=>你好好啊;
'<html>nregrt</html>好啊'.replace(/<(\w+)>(.*)<\/\1>/ig,'$2')=>nregrt好啊;
在父字符串查找匹配子字符(字表达式)叫做捕捉,存在了RegExp全局对象属性($1~$9,
$1~$9里面存的值是默认空字符串)中, \1表示后向引用;
\1 === <html>即:\1引用的$1里面的值;每次匹配都会更新$里面的值
后向引用的作用:避免标签不对应
******************************************************************************
支持正则表达式的 String 对象的方法方法:
search('子串') 检索与正则表达式相匹配的值。返回值:父串或reg匹配的子串的起始位置number。
匹配不到return -1; 参数为空: return 0
match(''||RegExp) 在父中找到一个或多个正则表达式的匹配或在父字符串内检索指定的值,
返回指定的值(一个数组); 没有找到任何匹配的文本将返回 null
参数为空 返回 0:'',length:1;input:原对象
replace 替换与正则表达式匹配的子串。
split(字符串或正则表达式从该参数指定的地方分割,howmany) 把字符串分割为字符串数组。
regExp对象的方法:
exec(string)方法用于检索字符串中的正则表达式的匹配。和match方法相似 找到了匹配的文本,则返回一个结果数组。否则,返回 null
new RegExp('op','img').exec||test('opop');op是否存于opop中
如var a = /^\d{6}$/ a.test||exec(input.value) 或者input.value.search||match(a)
输入值在正则中是否有匹配用test||exec || 正则在输入值中是否有匹配search||match
///
Array——————————————————
/
JavaScript Array 对象的属性:
constructor 返回对创建此对象的数组函数的引用。
new Array().constructor==Array //true
***所有函数定义的时候,函数本身就会默认有一个prototype的属性,而我们如果用new 运算符来生成一个对象的时候就没有prototype属性
每一个对象实例都可以通过 constrcutor 对象访问它的构造函数:
**var f = new F();
alert(f.constructor === F);// output true
alert(f.constructor === F.prototype.constructor);// output true
应用场景:对象类型的判断if(f.constructor === F) 同 if(f instanceof F)
length 设置或返回数组中元素的数目。
prototype 使您有能力向对象添加属性和方法。
*********************************************************************************
alert(typeof Array) return 一个function
var obj=new Object();
var Arr=new Array();Array()是调用函数(function Array () { something })
Object,Array相当于java中的Class类中的子类
javascript的function = java中的class
所以alert(Object); alert(Array);都返回function,也就是java中的class;
typeof object || Array return function
---在js里,everything is object,所以type是type of object的意思。js大致有两种obejct,一种是function定义的object,这类object有prototype属性,具备造别的object的能力。另一种是var定义的普通object,这类object没有prototype,不具备造对象的能力,回顾Array和Object,很明显,他们是前者。
数组:
声明方法
let arr = new Array();
arr[1] = 1;向arr塞数组元素;
new Array(2)预先设置数组中存几个元素,*动态扩展*,提高可维护性,可读性
new Array(1,2,3,4)类似于字面量法创建 [1,2,3,4]
**new Array (true) length = 1
alert(new Array().push(true))length = 1
Array的方法:
splice(index(从0开始计算),- || howmany(从1开始计算),item1,.....,itemX)用于对数组元素的添加||删除||替换
返回被删除的项目,可以替代shift && push; [1,2,3,4,5].length - 1 === pop; [1,2,3,4,5].splice(0,1) = shift
[1,2,3,4,5].splice(1)从元素index1往后删除 return 2,3,4,5
['1','6','8','7'].splice(3)从index(从0开始计算)3开始往后删除 return 7 同上
[1,2,3,4,5].splice(2,2)从index2后面删除相邻的2个元素 return 3,4
var arr=[1,2,3,4,5];arr.splice(arr.length - 5,0,'ppp');增加 return ["ppp", 1, 2, 3, 4, 5]
[1,2,3,4].splice(3,0,'nihao')在3和4中间插入nihao,第二个参数0代表增加,非0是替换
---------------------------------------------------------------------------------
slice(start(从0开始计算),从start为1开始计算end不含):
[1,2,34].slice(1,-1) return 2 第二个参数是截止位置,截取时不包含该位置
得到数组最后一个元素 let a = [1,2,3,4,5]; alert(a[a.length - 1])
alert([1,2,3,4,5][[1,2,3,4,5].length - 1])
---------------------------------------------- -----------------------------------
push === concat 都可以连接数组
----------------------------------------------------------------------------------
join() === toString() 方法用于把数组中的所有元素放入一个字符串。
join()元素是通过指定的分隔符进行分隔的。
---------------------------------------------------------------------------------
sort 方法将 Array 对象进行适当的排序;在执行过程中并不会创建新的 Array 对象。
如果为 sortfunction 参数提供了一个函数,那么该函数必须返回下列值之一:
负值,如果所传递的第一个参数比第二个参数小。
零,如果两个参数相等。
正值,如果第一个参数比第二个参数大。
---------------------------------------------------------------------------------
*es6*array.fill(value(一个固定值),start(从0开始计算),end(从1开始计算,截止位置,包含))
fill()方法用于将一个固定值替换数组的元素
如:[1,2,3,4,5].fill('0',0,2) return 0 0 3 4 5
---------------------------------------------------------------------------------
*es6*copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
copyWithin(target(复制到指定目标的索引位置从0开始), start(元素复制的起始位置0开始), end,默认数组length)
[1,2,3,4,5].copyWithin(1) 11234;
[1,2,3,4,5].copyWithin(4,0,1)12341
--------------------------------------------------------------------------------
filter(item,index,arr(当前所属的数组对象) ) 方法创建一个新的数组,检测原始数值元素,并返回符合条件所有元素的数组
filter() 不会对空数组进行检测。不会改变原始数组。
如:获取数组中大于等于3的数,[1,2,3,4,5].filter((item) => {
return item >= 3 ----3,4,5
})
---------------------------------------------------------------------------------
*es6*find(item,index,arr(当前所属的数组对象)) 方法返回传入一个测试条件(函数)符合条件的数组第一个元素。
[1,2,3,4,5].find((item) => {
return item >= 3 ----3
})
filter 符合所有符合条件的元素,find只返回符合条件的第一个元素
-------------------------------------------------------------------------------
*es6*findIndex(item,index,arr(当前所属的数组对象))
方法返回传入一个测试条件(函数)符合条件的数组第一个元素的*索引的位置*
let arr = [1,23,4];
let arr2 = arr.findIndex((item,index) => {
return item > 1
})
alert(arr2) 1
-----------------------------------------------------------------------------------
array.every(item,index,arr(当前所属的数组对象))
检测数值元素的每个元素是否都符合条件。
return true/false;
[1,2,3,4,5].every((item) => {
return item > 0 ---true
})
---------------------------------------------------------------------------------
reduce:让数组中的前项和后项做某种计算,并累计最终值
var v = [1, 2 ,3, 4].reduce(function (pre,next) {return pre + next});
-----------------------------------------------------------------------------------
判断一个数组是否为空用length
1.JSON.stringify(arr) === '[]'
2.arr.length === 0
3.+arr === 0
var a =[];
if (a.length === 0) {
alert('空')
}
4.if(Object.prototype.toString.call(a) === '[object Array]' && a.length === 0){
console.log('空')
}
---------------------------------------------------------------------------
判断一个对象是否为空用
1.JSON.stringify(arr) === '{}'
2.var a = {};
if (Object.keys(a).length ==== 0) {
alert('空')
}
-----------------------------------------------------------------------------------
判断是不是数组:Array的静态方法:如manth.radom()
1.Array.isArray([1,2]) return true
2.if ([1,2] instanceof Array) return true
3.if(Object.prototype.toString.call([1,2]) === '[object Array]'))
注:toSting本身是函数,没有参数,用call可以加参数
4.// 定义函数,判断数组
function isArray(arr) {
if (Array.isArray) {
return Array.isArray(arr);
} else {
return Object.prototype.toString.call(arr) === '[object Array]';
}
}
*********************************************************************************
confirm()在页面弹出一个对话框。多一个取消按钮
console.error() 打印错误信息。
console.warn()打印警告信息。
prompt()弹出对话框,用于接收用户输入的信息。
********************************************************************************
/
String——————————————————————————————————————————————————————————————————————————————
创建方法:
字面量法,构造函数法 var str1 = new String('qwert');typeof str1 返回 Object
String方法:字符串中的每个字符都由单独的数字 Unicode 编码指定。
'qwertyui'[7]可以使用索引位置来访问字符串中的每个字符
'opop'.anchor('o')相当于为被a标签包围的字符串定义name='o'(锚);
'oo'.big(无参数)相当于加了个big标签;
'oo'.bold(无参数)显示粗体样式;HTML的包装方法
charAt(index),'op'.charAt(1)->return p,返回在指定位置的字符,参数索引是0~String.length
其他值返回空字符串;
charCodeAt(index)返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数;
concat(stringX,stringX,...,)方法用于连接两个或多个字符串,建议使用 " + "运算符来进行;
fixed(无参数)显示StingObject为打字机文本;
fontcolor(color)使用指定的颜色来显示字符串===<font color="Red">Hello world!<font>;
fontsize(1~7)设置字符串值字体大小;
fromCharCode(numX,numX,...,numX)接受一个指定的 Unicode 值,然后返回一个字符串。
indexOf(searchvalue,fromindex(开始检索的位置,省略该参数从最左侧开始检索,从0开始计算||负数)
返回某个指定的字符串值在字符串中首次出现的位置。**如果要检索的字符串值没有出现,则该方法返回 -1。var a = 'oop';a.indexOf('p',a.length - 1) return -> 2
italics使用斜体显示字符串,相当于i标签
lastIndeOf(searchvalue,fromindex(不能为负数))从尾到头地检索字符串, 反向于indexOf
'你好'.lastIndexOf('你',1) return -> 0
link(url) 方法用于把字符串显示为超链接 alert('baidu'.link("http://baidu.com"))
得到字符串最后一个字符var a = 'opop';a[a.length - 1]
match(string || RegExp)返回指定的值,而不是字符串的位置
返回值是数组:数组含有两个对象属性:
index 属性声明的是匹配文本的起始字符在stringObject中的位置
input 属性声明的是对stringObject的引用。
**replace(要被替换的字符||RegExp指定的字符,替换后的字符||函数) 在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
如:'nihaoa'.replace('ni','你');'nihaoa'.replace(/\w/img,'你');
字符$1、$2、...、$99指的是:与替换文本regexp中的第1到第 99 个
子表达式相匹配的文本。
存在了RegExp全局对象属性中了
'hello world'.replace(new RegExp(/(\w+)\s*\s*(\w+)/img),'$2 $1')-->world hello
将'hello world'两端字符首字母大写并设置红色:
'hello world'.replace(new RegExp(/\b\w+\b/img),(item) =>{
return item.substr(0,1).toUpperCase().fontcolor("blue").bold()+item.substr(1)
})
search(string||RegExp) 检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。
返回值(index):与 regexp||string 相匹配的子串的起始位置。没有找到,则返回-1
'oop'.search('o'||/[^op]/img) ->0
slice(start(从0开始计算||负数),end(正数(从start为1开始计算)||负数:尾部开始算))提取字符串的某个部分,并以新的字符串返回被提取的部分
'opop'.slice(1,2) ->p
small(无参数) 方法用于把字符串显示为小号字。
split(string||RegExp从该参数指定的地方分割,指定返回的数组的最大长度1开始) 方法用于把一个字符串分割成字符串数组。与 Array.join 执行的操作是相反的。
返回值:一个字符串数组 空格也会被分割
"hello".split("", 3) ->["h", "e", "l"]
"hello".split("he") ["", "llo"]
strike() 方法用于显示加删除线的字符串;相当于strike标签||del
sub() 把字符串显示为下标。
sup() 把字符串显示上标。
substr(start(0开始||-1),length)在字符串中抽取从start下标开始的指定数目的字符。
返回值:一个新的字符串
*substr() 的参数指定的是子串的开始位置和长度,因此它可以替代substring和 slice来使用。
'ni hao'.substr(2,4) ->" hao"
substring(start(index非负的整数),stop(非负的整数)不包含,0开始)用于提取字符串中介于两个指定下标之间的字符。
其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start。
*与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。
如果 start 比 stop 大,那么该方法在提取子串之前会先交换这两个参数。
'asdfgh'.substring(1,4) ->sdf 'asdfgh'.substring(4,1)->sdf
toLocaleLowerCase()||toLowerCase()把字符串转换为小写。
前者和后者的区别前者是本地语言的限制
toLocaleUpperCase()||toUpperCase()把字符串转换为大写。
toString() 方法返回字符串
当调用该方法的对象不是String时抛出TypeError异常,用于判断是不是字符串
valueOf() 方法可返回 String 对象的原始值。
原始值是由从 String 对象下来的所有对象继承的。
valueOf()方法通常由 JavaScript 在后台自动进行调用,而不是显式地处于代码中。
trim() 去除字符串两边的空白
dom操作节点——————————————————————————————————————————————————
每个节点对象都有个nodeType属性,该属性的值是一个整数,代表该节点的类型。
nodeType属性值为9:文档节点: 特指document对象,代表整个网页,但是不对应任何一个标签。
元素节点2: 每一个HTML标签都被看做是一个元素节点。
属性节点3: 每一个标签的属性都是一个属性节点。
文本节点8: 包含在某个标签内的纯文本是一个文本节点。
注释节点: 每一个html注释,都是一个注释节点。
p.parentNode.removeChild(p)===div.removeChild(p)
获取文档的基础URI: document.baseURI(属性);
document.cookie 返回当前文档所有 键/值 对的所有 cookies。
document.createAttribute() 方法 创建一个指定名称的属性,并返回Attr 对象属性。
var att=document.createAttribute("class");
att.value="democlass";
document.getElementsByTagName("H1")[0].setAttributeNode(att);
createElement() 方法通过指定名称创建一个元素(标签)
createTextNode() 可创建文本节点。
document.images[].property集合返回当前文档中所有图片的数组。
document.images.length
<img id="runoob1" border="0" src="klematis.jpg" width="150" height="113">
document.images[0].id
document.normalize()合并相邻的文本节点并删除空的文本节点。
document.open() 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.readyState 返回文档状态 (载入中……)
element.cloneNode()
拷贝一个列表项到另外一个列表:
var node=document.getElementById("myList2").lastChild.cloneNode(true);
document.getElementById("myList1").appendChild(node);
element.firstChild() 返回元素的第一个子节点document.firstChild.nodeName;
focus() 方法用于为元素设置焦点
使用 blur() 方法来移除元素焦点
element.insertBefore(元素,节点对象) 现有的子元素之前插入一个新的子元素
list.insertBefore(newItem,list.childNodes[0]);
element.childNodes 返回元素的一个子节点的数组
document.getElementById("myList").replaceChild(newnode,oldnode);某个子节点替换为另一个
返回某个元素之后紧跟的节点: document.getElementById("item1").nextSibling;
document.getElementById("item1").nextSibling.id;
element.nodeType 返回元素的节点类型
document.getElementById("item2").previousSibling;返回某节点之前紧跟的节点:
'nuviu.png'.substr(-3,3);return png substr(起始位置,总长度)
substr(-3,3) === substr(lastIndexOf('.') + 1)
**************************************************************************************
Object || Array || Number 的方法 tolaclString toString valeOf
这三个方法来自于(继承) Object.prototype
</script>
</body>
</html>
闭包:
function fn1 () {
var a = 9;
function fn2 () {
alert(a)
}
return fn2
}
var result = fn1();
result()
let result = (function (x) {
let a = 9 + x;
return function () {
alert(a);
return a;
}
})(2)
result();
(function () {
var a = 0;
(function () {
alert(a)
})()
})()
var fn1 = (function () {
var a = 1;
return function () {
alert(a);
return a;
}
})()
fn1()
复制代码