14-三目运算、对象克隆、浅拷贝、深拷贝

最新推荐文章于 2023-01-21 18:47:39 发布

valueyear

最新推荐文章于 2023-01-21 18:47:39 发布

阅读量161

点赞数

分类专栏： ECMAScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43714814/article/details/121779763

版权

ECMAScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

(一)、三目运算符

(1)、基本使用

也叫三元运算符

<script type="text/javascript">
   	 var a = 5;
   	 a > 0 ? console.log('大于0')
   	 	     : console.log('小于等于0');
</script>

<script type="text/javascript">
 var a = 5,
   	 str = '';
 a > 0 ? str='大于0'
 	 	   : str='小于等于0';

 console.log(str);
</script>

(2)、return功能

三目运算是有return的功能的，这也是三目运算的一个好处。

 <script type="text/javascript">
   	 var a = -1,
   	 	   str = '';
   	 str = a > 0 ? '大于0'
   	 	         :'小于等于0';

   	 console.log(str);	   

</script>
<!--甚至可以这样写-->
 <script type="text/javascript">
   	 var a = -1;
   	 	  
   	 var str = a > 0 ? '大于0'
   	 	         :'小于等于0';

   	 console.log(str);	   

</script>

(3)、嵌套

   <script type="text/javascript">
   	 var a = 2,
   	 	 str = '';
   	 str = a > 0 ? (
   	 				a > 3 ? '大于3'
   	 					  : '小于等于3' 	
   	 				)
   	 	         :'小于等于0';

   	 console.log(str);	   

   </script>

笔试题

字符串与字符串比较大小是比较ASCIl码,

必须要有一个是数字才会进行隐式类型转换

   <script type="text/javascript">
   	 var str = 89 > 9 ? (
   	 					  '89' > '9' ? '通过了'
   	 					             :  '内层未通过'
   	 					)
   	 				   : '外层未通过';	
   	 console.log(str);	 //内层未通过  

   </script>

(二)、对象克隆

指向同一个地址

<script type="text/javascript">
   	 var person1 = {
   	 	name:'张三',
   	 	age:18,
   	 	sex:'male',
   	 	height:180,
   	 	weight:140
   	 }	   

     var person2 = person1;
     person2.name = '李四';
     console.log(person1,person2);
</script>

(三）、浅拷贝

修改person2的第二层属性还是会影响person1

 <script type="text/javascript">
   	 var person1 = {
   	 	name:'张三',
   	 	age:18,
   	 	sex:'male',
   	 	height:180,
   	 	weight:140,
   	 	son: {
   	 		first: 'Jenney',
   	 		second:'Lucy',
   	 		Third: 'Jone'
   	 	}
   	 }	   

     var person2 = {};
     //浅拷贝
     for(var key in person1){
     	person2[key] = person1[key];
     }

     person2.name = '李四';
     person2.son.forth = 'Ben'; // person1也会修改
     console.log(person1,person2);

   </script>

上面写法给人一种不伦不类的感觉，可以定义一个函数。

浅拷贝只拷贝了第一层，而且会发现person2多了一个num,而person2没有

循环的时候把prototype里面的东西也循环出来了，prototype上面的东西，

只要是自定义的，就能循环出来 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-puUHWOBY-1638885242735)(/Users/liruize/Library/Application Support/typora-user-images/image-20211207205856645.png)]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>
   <script type="text/javascript">
   	 Object.prototype.num = 1;
   	 var person1 = {
   	 	name:'张三',
   	 	age:18,
   	 	sex:'male',
   	 	height:180,
   	 	weight:140,
   	 	son: {
   	 		first: 'Jenney',
   	 		second:'Lucy',
   	 		Third: 'Jone'
   	 	}
   	 }	   

     var person2 = {};
     //浅拷贝
     clone(person1,person2);

     person2.name = '李四';
     person2.son.forth = 'Ben';
     console.log(person1,person2);

     function clone(origin,target){
     	for(var key in origin){
     		target[key] = origin[key];
     	}
     }
   </script>
</body>
</html>

用hasOwnProperty剔除原型，是我自己的属性我才给你返回true

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>
   <script type="text/javascript">
   	 Object.prototype.num = 1;
   	 var person1 = {
   	 	name:'张三',
   	 	age:18,
   	 	sex:'male',
   	 	height:180,
   	 	weight:140,
   	 	son: {
   	 		first: 'Jenney',
   	 		second:'Lucy',
   	 		Third: 'Jone'
   	 	}
   	 }	   

     var person2 = {};
     //浅拷贝
     clone(person1,person2);

     person2.name = '李四';
     person2.son.forth = 'Ben';
     console.log(person1,person2);

     function clone(origin,target){
     	for(var key in origin){
     		if(origin.hasOwnProperty(key)){
     			target[key] = origin[key];
     		}    		
     	}
     }
   </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>
   <script type="text/javascript">
   	 Object.prototype.num = 1;
   	 var person1 = {
   	 	name:'张三',
   	 	age:18,
   	 	sex:'male',
   	 	height:180,
   	 	weight:140,
   	 	son: {
   	 		first: 'Jenney',
   	 		second:'Lucy',
   	 		Third: 'Jone'
   	 	}
   	 }	   

  
     var person2 =clone(person1);

     person2.name = '李四';
     person2.son.forth = 'Ben';
     console.log(person1,person2);

     function clone(origin,target){
     	var tar = target || {};
     	for(var key in origin){
     		if(origin.hasOwnProperty(key)){
     			tar[key] = origin[key];
     		}    		
     	}
     	return tar
     }
   </script>
</body>
</html>

(四)、深拷贝

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>
   <script type="text/javascript">
   	 Object.prototype.num = 1;
   	 var person1 = {
   	 	name:'张三',
   	 	age:18,
   	 	sex:'male',
   	 	height:180,
   	 	weight:140,
   	 	children:{
   	 		first:{
   	 			name:'张小一',
   	 			age:13
   	 		},
   	 		second:{
   	 			name:'张小二',
   	 			age:7
   	 		},
   	 		third:{
   	 			name:'张小三',
   	 			age:3
   	 		}
   	 	},
   	 	car:['Benz','Mazda']
   	 }	   

  
     var person2 = deepClone(person1);
     person2.name = '李四';
     person2.children.forth = {
     	name: '张小四',
     	age: 1
     };
     person2.car.push('BYD');
     console.log(person1,person2);

     function deepClone(origin,target){
     	var target = target || {};
     	var toStr = Object.prototype.toString;
      var arrType = '[object Array]';

     	for(var key in origin){
     		if(origin.hasOwnProperty(key)){
     			if(typeof(origin[key]) === 'object' && origin[key] !== null){
     				if(toStr.call(origin[key]) === arrType){
     					target[key] = [];
     				}else{
     					target[key] = {};
     				}
     				deepClone(origin[key],target[key]);
     			}else{
     				target[key] = origin[key];
     			}
     		}
     	}
     	return target;    
     }
   </script>
</body>
</html>

也可以用JSON来实现深拷贝，但是这种方法并不好

一般来说我们不会用这种方式来做。

因为JSON数据里面是不带有任何的方法的，以后我们要去克隆方法的时候，JSON这种方法就不行了。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>
   <script type="text/javascript">
   	 Object.prototype.num = 1;
   	 var person1 = {
   	 	name:'张三',
   	 	age:18,
   	 	sex:'male',
   	 	height:180,
   	 	weight:140,
   	 	children:{
   	 		first:{
   	 			name:'张小一',
   	 			age:13
   	 		},
   	 		second:{
   	 			name:'张小二',
   	 			age:7
   	 		},
   	 		third:{
   	 			name:'张小三',
   	 			age:3
   	 		}
   	 	},
   	 	car:['Benz','Mazda']
   	 }	   

     var str = JSON.stringify(person1);
     var person2 = JSON.parse(str);
     person2.name = '李四';
     person2.children.forth = {
     	name: '张小四',
     	age: 1
     };
     person2.car.push('BYD');
     console.log(person1,person2);

     
   </script>
</body>
</html>

题1

function test(){
  console.log(foo);
  var foo = 2;
  console.log(foo);
  console.log(a);
}
test();
// undefined 2 报错    typeof(a)的时候才会报undefined，对象底下没有的属性才会报undefined

题2

function a(){
   var test;
   function test(){
     console.log(1);
   }
}
a();
//1

题3

阿里题

下面这道题如果能做出来，this指向根本就不是问题

var name = '222';
var a = {
 name: '111',
 say: function(){
    console.log(this.name);
 }
}
var fun = a.say;
fun(); // 222
a.say();//111
var b = {
  name:'333',
  say: function(fun){
     fun();
  }
}
b.say(a.say); //222
b.say = a.say;
b.say();//333

题4

阿里题 this指向

function test(){
  var marty = {
   name:'marty',
   printName: function(){
   		console.log(this.name);
   }
  }
  
  var test1 = {
     name: 'test1'
  }
  var test2 = {
     name: 'test2'
  }
  var test3 = {
     name: 'test3'
  }
  
  test3.printName = marty.printName;
  marty.printName.call(test1);
  marty.printName.apply(test2);
  marty.printName();
  test3.printName();
}

test();
//test1 test2 marty test3

题5

百度题：

var bar = {
  a: '1'
};

function test(){
   bar.a = 'a';
   Object.prototype.b = 'b';
   return function inner(){
   		console.log(bar.a);
   		console.log(bar.b);
   }
}
test()()
// return出一个function，需要变量去接收
// 一般是这样写  
// var test = test();  //这个test接收的是return出来的函数
// test(); 						 //再执行这个函数
// 和在一起就写成test()();
-----------------------------------------------------
// a b
//return function典型的闭包
//函数内部可以改全局的值，所以bar.a肯定是a