关于撤回键的具体操作，涉及js的数据备份（即深度克隆）

最新推荐文章于 2022-11-17 15:44:19 发布

兔老大的胡萝卜

最新推荐文章于 2022-11-17 15:44:19 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/nuoyuezuo/article/details/83420342

版权

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
</head>
<body>
	<div style="width: 50px ;height: 40px; background: #999" id="shili1">0</div>
	<div style="width: 50px ;height: 40px; background: #999" id="shili2">0</div>
	<input type="button" name="" value="1+" onclick="add(1);">
	<input type="button" name="" value="2+" onclick="add(2);">
	<input type="button" name="" value="初始化" onclick="init();">
	<input type="button" name="" value="撤回" onclick="back();">
	<script type="text/javascript">
		var matchs = new Array();
		var match = new Object();
		match.player1 = 0;
		match.player2 = 0;
		var globle = 0;//指针位置
		function add(player){
			if (player == 1) {
				match.player1 += 1;
			}
			else if(player == 2){
				match.player2 += 1;
			}
			if(globle < matchs.length) {
				matchs.splice(globle);//数组删除最后一个//这里的删除是哪里的删除
			}
			matchs.push(deepCopy(match));//向数组中添加一个克隆的match对象
			globle = matchs.length;//指针对应所加的matchs数组的长度就是对应最后一个
			show();
		}
		function show(){
			$("#shili1").text(match.player1);
			$("#shili2").text(match.player2);
		}

		function back(){
			var currentpoint = globle - 1;// 当前的指针的位置，就是点击一次回车键后的位置
			if (currentpoint > 0) {
				match = deepCopy(matchs[currentpoint - 1]);//拷贝备份里的指针前一个位置
				globle -= 1;// 指针的位置向前进一位；
				show();
			}
		}



//对于下面两个函数（关于克隆备份数据），可以直接调用
function getType(obj){
   //tostring会返回对应不同的标签的构造函数
   var toString = Object.prototype.toString;
   // 判断输入的数据的数据类型
   var map = {
      '[object Boolean]'  : 'boolean', 
      '[object Number]'   : 'number', 
      '[object String]'   : 'string', 
      '[object Function]' : 'function', 
      '[object Array]'    : 'array', 
      '[object Date]'     : 'date', 
      '[object RegExp]'   : 'regExp', 
      '[object Undefined]': 'undefined',
      '[object Null]'     : 'null', 
      '[object Object]'   : 'object'
  };
  if(obj instanceof Element) {
       return 'element';
  }
  return map[toString.call(obj)];
}


// 对象的深拷贝
// 主要涉及递归函数的应用
function deepCopy(data){
  var type = getType(data);
  var obj;
  if(type === 'array'){
    obj = [];
  } else if(type === 'object'){
    obj = {};
  } else {
    //不再具有下一层次
    return data;
  }
  // 函数调用自己就是递归
  if(type === 'array'){
    for(var i = 0, len = data.length; i < len; i++){
       obj.push(deepCopy(data[i]));
    }
  } else if(type === 'object'){
    for(var key in data){
       obj[key] = deepCopy(data[key]);
    }
  }
  return obj;
}
	</script>
</body>
</html>