浅拷贝:拷贝就是复制,就相当于把一个对象中的所有的内容,复制一份给另一个对象,直接复制,或者说,
就是把一个对象的地址给了另一个对象,他们指向相同,两个对象之间有共同的属性或者方法,都可以使用
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);
深拷贝:拷贝还是复制,深:把一个对象中所有的属性或者方法,一个一个的找到.并且在另一个对象中开辟相应的空间,一个一个的存储到另一个对象中
*深拷贝应用的是一种属性比较复杂的情况,代码并不难写,主要是条件的判断和递归的使用
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);
便利DOM树
<script>
var root=document.documentElement;
function forDOM(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.children && forDOM(child);
}
}
function f1(node){
console.log('节点的名字:'+node.nodeName);
}
forDOM(root);
</script>
正则表达式
* 正则表达式:也叫规则表达式,按照一定的规则组成的一个表达式,这个表达式的作用主要是匹配字符串的,
* "我的电话:10086,他的电话:10010,你的电话:10000" 正则表达式,把这个字符串中的所有的数字找到
*
* 正则表达式的作用:匹配字符串的
*
* 在大多数编程语言中都可以使用
*
* 正则表达式的组成:是由元字符或者是限定符组成的一个式子
*
* 元字符:
*
* . 表示的是:除了\n以外的任意的一个字符 "fdsfs238"
*
* [] 表示的是:范围, [0-9] 表示的是0到9之间的任意的一个数字, "789" [0-9]
* [1-7] 表示的是1到7之间的任意的一个数字
* [a-z] 表示的是:所有的小写的字母中的任意的一个
* [A-Z] 表示的是:所有的大写的字母中的任意的一个
* [a-zA-Z] 表示的是:所有的字母的任意的一个
* [0-9a-zA-Z] 表示的是: 所有的数字或者是字母中的一个
* [] 另一个函数: 把正则表达式中元字符的意义干掉 [.] 就是一个.
* | 或者 [0-9]|[a-z] 表示的是要么是一个数字,要么是一个小写的字母
* () 分组 提升优先级 [0-9]|([a-z])|[A-Z]
* ([0-9])([1-5])([a-z]) 三组, 从最左边开始计算
* (()(()))
*
* 限定符:
*
* * 表示的是:前面的表达式出现了0次到多次
* [a-z][0-9]* 小写字母中的任意一个 后面是要么是没有数字的,要么是多个数字的
* "fdsfs3223323" [a-z][0-9]*
*
* + 表示的是:前面的表达式出现了1次到多次
* [a-z][9]+ 小写字母一个后面最少一个9,或者多个9
* "fesfewww9fefds"
*
* ? 表示的是:前面的表达式出现了0次到1次,最少是0次,最多1次 ,另一个含义:阻止贪婪模式
* [4][a-z]? "1231234ij"
* 限定符:限定前面的表达式出现的次数
* {} 更加的明确前面的表达式出现的次数
* {0,} 表示的是前面的表达式出现了0次到多次,和 *一样的
* {1,} 表示的是前面的表达式出现了1次到多次,和 +一样的
* {0,1} 表示的是前面的表达式出现了0次到1次,和 ?一样的
* {5,10} 表示的是前面的表达式出现了5次到10次
* {4} 前面的表达式出现了4次
* {,10} 错误的========不能这么写
* ^ 表示的是以什么开始,或者是取非(取反) ^[0-9] 以数字开头
* ^[a-z] 以小写字母开始
* [^0-9] 取反,非数字
* [^a-z] 非小写字母
* [^0-9a-zA-Z_]
* $ 表示的是以什么结束 [0-9][a-z]$ 必须以小写字母结束
* ^[0-9][a-z] 相当于是严格模式 "3f2432e" "4f"
* \d 数字中的任意一个,
* \D 非数字中的一个
* \s 空白符中的一个
* \S 非空白符
* \w 非特殊符号
* \W 特殊符号
* \b 单词的边界
* "what are you no sha lei"
常用
* . 除了\n以外的任意一个单个字符
* [] 范围
* () 分组,提升优先级
* | 或者
* * 0-多次
* + 1-多次
* ? 0-1次
* {0,} 和*一样
* {1,} 和+
* {0,1} 和?
*
* \d 数字中的一个
* \D 非数字
* \s 空白符
* \S 非空白符
* \W 特殊符号
* \w 非特殊符号 _
* ^ 取反,以什么开始
* $ 以什么结束
* \b 单词边界
案例:省份证的正则表达式
*省份证通常有是15位,或者18位
① ( [1-9] [0-9] {14}) | ( [1-9] [0-9]{16} [0-9xX])
② ( [1-9] [0-9] {14}) ( [0-9]{2} [0-9xX])
*座机号: 010-19876754 0431-87123490
① [0-9] {3,4} [-] [0-9] {8}
② \d {3,4} [-] \d {8}
*QQ号码:
① [1-9] [0-9] {4,10}
② \d {5,11}
*手机的正则表达式
* 130 131 132 133 134 135 136 137 138 139
* 143 147
* 150 151 152 153 154 155 156 157 158 159
* 170 171 173 176 177
* 180 181 182 183 184 185 186 187 188 189
① ([1] [358] [0-9] [0-9] {8} ) | ( [1] [4] [37] [0-9] {8}) | ( [1] [5] [0-9]{9}) | ( [1] [7] [01367] [0-9] {8}) | ( [1] [8] [0-9] {9})
② \d {11}
*邮箱的这规则表达式 375445899@qq.com
① /^[0-9a-zA-Z_.-]+ [@] [0-9a-zA-Z_.-]+ ([.][a-zA-Z]+){1,2} $/;
创建正则表达式
* 1.通过构造函数创建对象
* 2.字面量的方式创建对象
var reget=new RegExp(/\d{5}/); 判断字符中是否包含五个连续的数字
var str='我是1008';
console.log(reget.test(str));
var reg=/\d{1,5}/;
var flag=reg.test("小苏的幸运数字:888");
console.log(flag);
识别正则表达式是否匹配
console.log(/./.test("除了回车换行以为的任意字符"));//true
console.log(/.*/.test("0个到多个"));//true
console.log(/.+/.test("1个到多个"));//true
console.log(/.?/.test("哈哈"));//true
console.log(/[0-9]/.test("9527"));//true
console.log(/[a-z]/.test("what"));//true
console.log(/[A-Z]/.test("Are"));//true
console.log(/[a-zA-Z]/.test("干啥子"));//false
console.log(/[0-9a-zA-Z]/.test("9ebg"));//true
console.log(/b|(ara)/.test("abra"));//true
console.log(/[a-z]{2,3}/.test("arfsf"));// true
console.log(/\d/.test("998")); true
console.log(/\d*/.test("998"));true
console.log(/\d+/.test("998"));true
console.log(/\d{0,}/.test("998"));true
console.log(/\d{2,3}/.test("998"));true
console.log(/\D/.test("eat"));true
console.log(/\s/.test(" "));true
console.log(/\S/.test("嘎嘎 "));true
console.log(/\w/.test("_"));true
console.log(/\W/.test("_"));false
案例:密码强度
<style>
#dv{
width: 300px;
height: 200px;
position: absolute;
left: 300px;
top:100px;
}
.strengthLv0{
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding:2px;
}
.strengthLv1{
background: red;
height: 6px;
width: 40px;
border:1px solid #ccc;
padding:2px;
}
.strengthLv2{
background: orange;
height: 6px;
width: 80px;
border:1px solid #ccc;
padding:2px;
}
.strengthLv3{
background: green;
height: 6px;
width: 120px;
border:1px solid #ccc;
padding:2px;
}
</style>
</head>
<body>
<div id="dv">
<label for="pwd">密码</label>
<input type="text" id="pwd" maxlength="16">
<div>
<em>密码强度:</em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
my$('pwd').onkeyup=function () {
my$('strengthLevel').className='strengthLv'+(this.value.length>=6?getLvl(this.value):0);
}
function getLvl(value) {
var lvl=0;
if(/[0-9]/.test(value)){
lvl++;
}
if(/[a-zA-Z]/.test(value)){
lvl++;
}
if(/[^0-9a-zA-Z]/.test(value)){
lvl++;
}
return lvl;
}
</script>
案例:邮箱验证
请输入你的邮箱:<input type="text" value="" id="email">
<script>
function my$(id) {
return document.getElementById(id);
}
my$('email').onblur=function () {
var reg=/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/;
if(reg.test(this.value)){
this.style.backgroundColor='green';
}else{
this.style.backgroundColor='red';
}
}
</script>
案例:中文输入验证
请输入你的姓名:<input type="text" value="" id="username">
<script>
function my$(id) {
return document.getElementById(id);
}
my$('username').onblur=function () {
var reg=/^[\u4e00-\u9fa5]{2,6}$/;
if(reg.test(this.value)){
this.style.backgroundColor='green';
}else{
this.style.backgroundColor='red';
}
}
</script>
案例:表单验证
<style>
body{
background: #ccc;
}
label{
width: 40px;
display: inline-block;
}
.container{
margin:100px auto;
width:400px;
padding: 50px;
line-height: 40px;
border:1px solid #999;
background: #efefef;
}
span{
margin-left: 30px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container" id="dv">
<label for="qq">QQ</label>
<input type="text" id="qq"><span></span><br/>
<label>手机</label>
<input type="text" id="phone"><span></span><br/>
<label>邮箱</label>
<input type="text" id="email"><span></span><br/>
<label>座机</label>
<input type="text" id="telephone"><span></span><br/>
<label>姓名</label>
<input type="text" id="fullName"><span></span><br/>
</div>
<script>
function my$(id){
return document.getElementById(id);
}
checkInput(my$('qq'),/^\d{5,11}$/);
checkInput(my$('phone'),/^\d{11}$/);
checkInput(my$('email'),/^[0-9a-zA-Z-._]+[@][0-9a-zA-Z-._]+([.][a-zA-Z]{2,3}){1,2}$/);
checkInput(my$('telephone'),/^\d{3,4}[-]\d{7,8}$/);
checkInput(my$("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);
function checkInput(input,reg){
input.onblur=function () {
if(reg.test(this.value)){
this.nextElementSibling.innerText='正确了';
this.nextElementSibling.style.color='green';
}else{
this.nextElementSibling.innerText='失败了';
this.nextElementSibling.style.color='red';
}
}
}
</script>
正则表达式中:g 表示的是全局模式匹配
正则表达式中:i 表示的是忽略大小写
var str="中国移动:10086,中国联通:10010,中国电信:10000";
把里面所有的数字全部显示出来
var array=str.match(/\d{5}/g);
console.log(array); [10086,10010,10000]
邮箱信息挖取
var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
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); ["2017-11-12"]
正则表达式对象.$3
console.log(RegExp.$3);
获得邮箱中的有效信息
var email="shuaiyangtaishuaile@itcast.com.cn";
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();
正则去除空格
var str = " 哦买噶的 ,太幸福了 ";
str = str.replace(/\s+/g, "");
console.log("===" + str + "===");
替换字符
var str="HhpphH";//SSppSS
str=str.replace(/[h]/gi,"S");
console.log(str);
同样可以实现打印所有五位数字的操作,类似java中迭代器,一次可以获得一个
var str = "中国移动:10086,中国联通:10010,中国电信:10000";
var reg=/\d{5}/g;
var result=reg.exec(str);
while(result!=null){
console.log(result);
result=reg.exec(str);
}
数组和伪数组
//伪数组和数组的区别
//真数组的长度是可变的
//伪数组的长度不可变
//真数组可以使用数组中的方法
//伪数组不可以使用数组中的方法
arguments.forEach是无法使用的,因为它是Object类型的伪数组
<script>
function f() {
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i]
}
console.log(sum) 15
console.log(typeof arguments) Object
}
f(1,2,3,4,5);
</script>