目录:
1:浅拷贝
2: 深拷贝
3:遍历DOM树
4:正则表达式
5:正则表达式的创建方式
6:字符串中的正则表达式
7:真数组和伪数组
8: escape()和unescapt() 编码和 解码,汉字和Unicode
1:浅拷贝
<script> //浅拷贝:拷贝就是复制,就相当于把一个对象中的所有的内容,复制一份给另一个对象,直接复制,或者说,就是把一个对象的地址给了另一个对象,他们指向相同,两个对象之间有共同的属性或者方法,都可以使用 var obj1={
age:10,
sex:"男",
car:["奔驰","宝马","特斯拉","奥拓"]
};
//另一个对象
var obj2={}; //写一个函数,作用:把一个对象的属性复制到另一个对象中,浅拷贝
//把a对象中的所有的属性复制到对象b中
function extend(a,b) {
for(var key in a){
b[key]=a[key];
}
}
extend(obj1,obj2); obj2.sex = "女";
console.dir(obj2);//开始的时候这个对象是空对象
console.dir(obj1);//有属性 console.log(obj1 == obj2); </script>
浅拷贝:示意图
2:深拷贝
// 只要不是基本类型,比如数组和对象的话,就需要重新开始开辟一块内存,来存储。之后把地址给这个属性。
<script>
//深拷贝:拷贝还是复制,深:把一个对象中所有的属性或者方法,一个一个的找到.并且在另一个对象中开辟相应的空间,一个一个的存储到另一个对象中 var obj1={
age:10,
sex:"男",
car:["奔驰","宝马","特斯拉","奥拓"],
dog:{
name:"大黄",
age:5,
color:"黑白色"
}
}; var obj2={};//空对象
//通过函数实现,把对象a中的所有的数据深拷贝到对象b中
function extend(a,b) {
for(var key in a){
//先获取a对象中每个属性的值
var item=a[key];
//判断这个属性的值是不是数组
if(item instanceof Array){
//如果是数组,那么在b对象中添加一个新的属性,并且这个属性值也是数组
b[key]=[];
//调用这个方法,把a对象中这个数组的属性值一个一个的复制到b对象的这个数组属性中
extend(item,b[key]);
}else if(item instanceof Object){//判断这个值是不是对象类型的
//如果是对象类型的,那么在b对象中添加一个属性,是一个空对象
b[key]={};
//再次调用这个函数,把a对象中的属性对象的值一个一个的复制到b对象的这个属性对象中
extend(item,b[key]);
}else{
//如果值是普通的数据,直接复制到b对象的这个属性中
b[key]=item;
}
}
} extend(obj1,obj2);
console.dir(obj1);
console.dir(obj2); </script>
深拷贝示意图
3:遍历DOM树
<script> //获取页面中的根节点--根标签
var root=document.documentElement;//html
//函数遍历DOM树
//根据根节点,调用fn的函数,显示的是根节点的名字
function forDOM(root1) {
//调用f1,显示的是节点的名字
// f1(root1);
//获取根节点中所有的子节点
var children=root1.children;
//调用遍历所有子节点的函数
forChildren(children);
}
//给我所有的子节点,我把这个子节点中的所有的子节点显示出来
function forChildren(children) {
//遍历所有的子节点
for(var i=0;i<children.length;i++){
//每个子节点
var child=children[i];
//显示每个子节点的名字
f1(child);
//判断child下面有没有子节点,如果还有子节点,那么就继续的遍历
child.children&&forDOM(child);
}
}
//函数调用,传入根节点
forDOM(root);
function f1(node) {
console.log("节点的名字:"+node.nodeName);
} //节点:nodeName,nodeType,nodeValue // 第一个函数:给我根节点,我会找到所有的子节点:forDOM(根节点)
// 获取这个根节点的子节点
// var children=根节点的.children
// 调用第二个函数
//
// 第二个函数:给我所有的子节点,我把每个子节点的名字显示出来(children)
// for(var i=0;i<children.length;i++){
// 每个子节点
// var child=children[i];
// f1(child);给我节点,我显示该节点的名字
// child是子节点,但是如果child里面还有子节点,此时child就是爹了
// child.children&&第一个函数(child)
//
// } </script>
4:正则表达式
<script> /*
*
* 正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的,
* "我的电话:10086,他的电话:10010,你的电话:10000" 正则表达式,把这个字符串中的所有的数字找到
*
* 正则表达式的作用:匹配字符串的
*
* 在大多数编程语言中都可以使用
*
* 正则表达式的组成:是由元字符或者是限定符组成的一个式子
*
*
* 元字符:
*
* 1: . 表示的是:除了\n以外的任意的一个字符 "fdsfs238"
*
*
* 2: [] 表示的是:范围, [0-9] 表示的是0到9之间的任意的一个数字, "789" [0-9]
* [1-7] 表示的是1到7之间的任意的一个数字
* [a-z] 表示的是:所有的小写的字母中的任意的一个
* [A-Z] 表示的是:所有的大写的字母中的任意的一个
* [a-zA-Z] 表示的是:所有的字母的任意的一个
* [0-9a-zA-Z] 表示的是: 所有的数字或者是字母中的一个
* [] 另一个函数: 把正则表达式中元字符的意义干掉 [.] 就是一个.
*
*
* 3: | 或者 [0-9]|[a-z] 表示的是要么是一个数字,要么是一个小写的字母
*
*
* 4: () 分组 提升优先级 [0-9]|([a-z])|[A-Z]
* ([0-9])([1-5])([a-z]) 三组, 从最左边开始计算
* (()(()))
*
*
* 都是元字符,但是也可以叫限定符,下面的这些
* 5: * 表示的是:前面的表达式出现了0次到多次
* [a-z][0-9]* 小写字母中的任意一个 后面是要么是没有数字的,要么是多个数字的
* "fdsfs3223323" [a-z][0-9]*
*
*
* 6: + 表示的是:前面的表达式出现了1次到多次
* [a-z][9]+ 小写字母一个后面最少一个9,或者多个9
* "fesfewww9fefds"
*
*
* 7: ? 表示的是:前面的表达式出现了0次到1次,最少是0次,最多1次 ,另一个含义:阻止贪婪模式
* [4][a-z]? "1231234ij"
*
*
* 限定符:限定前面的表达式出现的次数
*
*
* 8: {} 更加的明确前面的表达式出现的次数
* {0,} 表示的是前面的表达式出现了0次到多次,和 *一样的
* {1,} 表示的是前面的表达式出现了1次到多次,和 +一样的
* {0,1} 表示的是前面的表达式出现了0次到1次,和 ?一样的
* {5,10} 表示的是前面的表达式出现了5次到10次
* {4} 前面的表达式出现了4次
* {,10} 错误的========不能这么写
*
*
* 9: ^ 表示的是以什么开始,或者是取非(取反) ^[0-9] 以数字开头
* ^[a-z] 以小写字母开始
* [^0-9] 取反,非数字
* [^a-z] 非小写字母
* [^0-9a-zA-Z_] 特殊字符
*
*
* 10: $ 表示的是以什么结束 [0-9][a-z]$ 必须以小写字母结束
* ^[0-9][a-z] 相当于是严格模式 "3f2432e" "4f"
*
*
* 11: \d 数字中的任意一个, digit 数字
* \D 非数字中的一个
* 12: \s 空白符中的一个 Space 空白符号
* \S 非空白符
* 13: \w 非特殊符号 Word,单词.\w匹配包括下划线的任何单词字符.等价于'[A-Za-z0-9_]'.
* \W 特殊符号
* \b 单词的边界
* "what are you no sha lei"
*
*
* . 除了\n以外的任意一个单个字符
* [] 范围
* () 分组,提升优先级
* | 或者
* * 0-多次
* + 1-多次
* ? 0-1次
* {0,} 和*一样
* {1,} 和+
* {0,1} 和?
*
* \d 数字中的一个
* \D 非数字
* \s 空白符
* \S 非空白符
* \W 特殊符号
* \w 非特殊符号 _
* ^ 取反,以什么开始
* $ 以什么结束
*
* \b 单词边界 * */
</script>
5:正则表达式的创建方式
<script> //创建正则表达式对象 //两种:
/*
*
* 1.通过构造函数创建对象
*
*
* 2.字面量的方式创建对象
*
*
* 正则表达式的作用:匹配字符串的
*
* */
// //对象创建完毕---
// var reg=new RegExp(/\d{5}/);
// //字符串
// var str="我的电话是10086";
// //调用方法验证字符串是否匹配
// var flag=reg.test(str);
// console.log(flag); // //对象创建完毕---
// var reg=new RegExp(/\d{5}/);
// //调用方法验证字符串是否匹配
// var flag=reg.test("我的电话是10086");
// console.log(flag); //字面量的方式创建正则表达式对象
var reg=/\d{1,5}/;
var flag=reg.test("小苏的幸运数字:888");
console.log(flag); </script>
6:字符创中的正则表达式
<script>
//正则表达式中:g 表示的是全局模式匹配
//正则表达式中:i 表示的是忽略大小写
// match是匹配的意思
// replace是替换的意思 var str="中国移动:10086,中国联通:10010,中国电信:10000";
//把里面所有的数字全部显示出来
var array=str.match(/\d{5}/g);
console.log(array); //
// var str = "[email protected],[email protected] [email protected] 2、[email protected] [email protected]...";
// var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
// console.log(array); //提取这里的日
// var str="2017-11-12";
// var array=str.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
// //console.log(array);
// //正则表达式对象.$3
// console.log(RegExp.$3); // var email="[email protected]";
// email.match(/([0-9a-zA-Z_.-]+)[@]([0-9a-zA-Z_-]+)(([.][a-zA-Z]+){1,2})/);
// console.log(RegExp.$1);//用户名
// console.log(RegExp.$2);//126
// console.log(RegExp.$3);//域名 // var str="小苏好帅哦,真的是太帅了,帅,就是真帅";
// str=str.replace(/帅/g,"猥琐");
// console.log(str); // var str=" 哦买噶的 ,太幸福了 ";
// str=str.trim();
// console.log("==="+str+"==="); // var str = " 哦买噶的 ,太幸福了 ";
// str = str.replace(/\s+/g, "");
// console.log("===" + str + "==="); //所有的h都替换成S
// var str="HhpphH";//SSppSS
// str=str.replace(/[h]/gi,"S");
// console.log(str); // var reg = new RegExp(/[h]/gi);
// var str = "HhpphH";//SSppSS
// str = str.replace(reg, "S");
// console.log(str); //
// var str = "中国移动:10086,中国联通:10010,中国电信:10000";
// //把里面所有的数字全部显示出来
// //var array = str.match(/\d{5}/g);
// //正则表达式对象.exec方法传入字符串
// var reg=/\d{5}/g;
// //var array=reg.exec(str);
//// console.log(array);
//// console.log(reg.exec(str));
//// console.log(reg.exec(str));
//// console.log(reg.exec(str));
//
// var result=reg.exec(str);
// while(result!=null){
// console.log(result);
// result=reg.exec(str);
// } // var str = "中国移动:10086,中国联通:10010,中国电信:10000";
// var reg=/\d{5}/g;
// //通过正则表达式匹配这个字符串
// var array=reg.exec(str);
// console.log(array);
// console.log(reg.exec(str));
// console.log(reg.exec(str));
// console.log(reg.exec(str));//null
// var str = "中国移动:10086,中国联通:10010,中国电信:10000";
var reg=/\d{5}/g;
//通过正则表达式匹配这个字符串
var array=reg.exec(str);
while (array!=null){
//输出匹配的内容
console.log(array[0]);
array=reg.exec(str);
} </script>
7:真数组和伪数组
<script>
//伪数组和数组的区别
//真数组的长度是可变的
//伪数组的长度不可变
//真数组可以使用数组中的方法
//伪数组不可以使用数组中的方法 // function f1() {
// var sum=0;
// for(var i=0;i<arguments.length;i++){
// sum+=arguments[i];
// }
// console.log(sum);
// }
// //arguments得到的是实参的个数及实参的每个值
//
// f1(10,20,30,40); // function f1() {
// var sum=0;
// arguments.forEach(function () {
//
// });
// }
// //arguments得到的是实参的个数及实参的每个值
//
// f1(10,20,30,40); // var arr=[10,20,30];
// arr.forEach(function () {
//
// }); var arr=[10,20];
arr.forEach()
console.dir(arr); // 数组实例对象的__proto__----->Array的prototype //数组
// var arr=[10,20,30];
// arr[3]=100;
// console.log(arr.length);
// //对象---假的数组
// var obj={
// 0:10,
// 1:20,
// 2:30,
// length:3
// };
//
// console.log(obj[0]);
// console.log(obj[1]);
// console.log(obj[2]);
// console.log(obj.length);
// obj[3]=1000;
// console.log(obj[3]);
// console.log(obj.length); //遍历数组
// for(var i=0;i<arr.length;i++){
// console.log(arr[i]);
// }
//
// for(var i=0;i<obj.length;i++){
// console.log(obj[i]);
// }
</script>