js基础复习笔记

           		                                                  ---于2021/1/26整理

1.变量及数据类型

• typeof：检测数据类型，是运算符，不是函数
• undefined：未被定义，表示空变量，空变量被声明但是没有赋值
• null：空对象，表示什么也没有，声明也没有
• number：数值类型：整数或小数（浮点数）
• object：对象类型，数组是特殊的对象。例如：{name:“张三”,age:“16”};

2.运算符

• 运算符 ‘+’ ：只要 + 两侧有字符串，就是拼接的意思；两侧都是数字就是加法的意思。

• 运算符 ‘ - ’，‘ * ’ ：如果存在纯数字字符串（如“5”），计算机自动转其为数字型进行运算
  var a = “6”-2; // 4 a是number
  var a = “6”*1; // 6 a是number

  ​ 只要有一侧为非纯数字字符串,结果为NaN(非数字类型)
  ​ var a = “51zxw”-2; // NaN

• 比较运算符：
  (= = ，!= )：等于和不等于 = =>只比较值,不比较类型

  4!=“4” 为假

  (= = = ，! = = )： 全等和不全等 = => 比较值也比较数据类型

  4 !=="4"为真

• undefined: 假
  Null: 假
  false: 假
  Number: 除0外都是真
  string: 除空字符串外都是真
  对象: 都是真,不管是否为空

3.函数

函数声明与创建

function jiafa(i,j){
      //可以不用写变量类型，因为js是弱类型语言
    //i,j都是形参,没有实际值，只会作用于函数内部
      var a = i+j;
      alert(a);
}
jiafa(4,6); //4和6是实参

//   函数内部不用var声明，直接赋值方式声明的变量是全局变量（很少用到）要了解
//   如:      
    function zxw(){
     
        a="我要自学网"; //zxw()函数一但被调用，a就是全局变量
    }
    zxw(); //函数一定要执行，才能声明全局变量a，然后在函数外部输出
    document.write(a);

函数的2种定义方式

// 1.基本方式定义函数:
    function 函数名(参数1,参数2,参数3...){
     
        要执行的代码,函数体;
    }
    function dfg(){
     
       alert("饭做好了");
    };
    
// 2.自变量方式定义函数(赋值法定义函数) ==》这其实是匿名函数
    var dfg = function (参数1,参数2,参数3...){
     
        要执行的代码;
    };

    var dfg = function() {
     
        alert("饭做好了");
    };

调用函数的3种方法

//     调用函数：函数名();
//      1.当事件发生时(如:当用户点击按钮时)
//      2.当JS代码调用时
//         cfb();
//         cfb();
//      3.函数创建完成后自动调用
    (
      function cfb(){
     
         	 for(var i = 9;i >= 1;i--){
     
				for(var j = i;j >= 1;j--){
     
					var b = i+"X"+j+"="+(i*j)+"    ";
					document.write(b);
				}
				document.write("
");
			 }
      }
     ) ();

回调函数

// 回调函数:(callback函数)函数B作为参数传递到另一个函数A中,函数A执行函数B.函数B叫做回调函数.
// 回调函数：回家是主函数，发信息是回调函数
    function hj(a){
      //a是形参，执行完hj()这个函数后，就会回调a()
        a();
    };
    function fxx(){
     
        alert("我到家啦！");
    };
    hj(fxx);
//你把“发信息函数fxx()”当做参数传给“回家函数hj()”，然后你女朋友必须先回到家后，
//主函数执行完了，再执行传递进去的"发信息函数fxx()"，然后你就收到了一条信息。

• 2种匿名函数

//	普通函数:
         zxw(); //可以在函数声明前调用函数
		function zxw(){
     
			var a = "我要自学网";
			alert(a);
		}
		zxw();

//	匿名函数:没有函数名
//	第一种匿名函数:函数没有函数名,而是直接赋值给一个变量通过变量调用或直接调用
//    zxw();  //不能在这里调用。注意：匿名函数的调用语句，一定要放在函数声明语句之后
      var zxw = function(){
     
      	alert("我要自学网");
      }
      zxw(); //要在这里调用

//   第二种匿名函数:
//     1.自调用
       (function(){
     
       	alert("我要自学网");
       })();
//     2.事件发生时调用
     window.onload = function(){
     
     	   alert("我要自学网");
     };

//     3.函数中调用
        setTimeout(
            function(){
     
        	    alert("我要自学网");
            } ,3000);
               

内置功能函数

//			内置功能函数:
//			   1.ECMAscript自带的函数,ECMAscript将我们常用的一些功能封装起来
//			   2.我们不需要知道它是怎么来的,只需要知道怎么调用就可以
//			   alert(124);
//			   prompt();
               
//             1.Number()转换成数值类型
               var a = "123456";
               var b = typeof Number(a); //number
               alert(b);
               alert(Number(a)); //123456


//             2.String()转换成字符串类型
               var a = 123456;
               var b = typeof String(a); //string
               alert(b);

//             3.Boolean()转换成boolean类型
               var a = 123456;
               var b = typeof Boolean(a); //boolean
               alert(b);


//             3.parseInt()转换成数值类型 !!!!!!!!非常重要
               var a = "123px";
               var b = typeof parseInt(a); //number
               var c = parseInt(a); //123
               alert(b);	
               alert(c); 

4.数组

数组概念

// 1.数组:一组数据的集合,数组的每一个数据叫做一个元素
//    数组是对象，是加了数字索引和length属性的特殊对象
 		var arr=["校长","教室","老师","学生"];
		alert(arr);
		console.log(arr);       
// 2.数组元素可以是任意类型,同一个数组中的不同元素可能是对象或数组
           var arr=["小李",2,true,["校长","教室"],{
     }];
           console.log(arr);      

数组的创建方式

//			1.隐式方式创建数组: 最常用
			var arr=["校长","教室","老师","学生"];
//          2.直接实例化通过构造函数Array()创建
//             1.直接把数组元素写到括号里
                 var arr=new Array("校长","教室","老师","学生");
//			  2.创建数组并给数组元素赋值
			   	var arr=new Array();
			   	arr[0]="校长";
			  	arr[1]="校长";
			   	arr[2]="校长";
			   	arr[3]="校长";
			   console.log(arr);

//			   3.规定了数组初始的长度,并给数组元素赋值
//			             数组长度可以随时动态调整
			   var arr=new Array(3);
			   arr[0]="校长";
			   arr[1]="校长";
			   arr[2]="校长";
			   arr[3]="校长";
			   console.log(arr);

数组的修改 以及 for in 和 for of

			var arr=new Array("校长","教室","老师","学生");
//	   1.数组中数据的修改:直接使用下标对数组元素重新赋值
          arr[2]="xiaozhang";  
//     2.数组中数据的增加:
          arr[4]="小花"; //增加数据
          console.log(arr);
            
//   for in 使用很多！！！！！！缺点是：效率很低
            for(i in arr){
     
            	document.write(arr[i]+"写作业"+"
");
            };
            
//   for of   比for in遍历效率高，但是比普通for遍历效率低
			for(value of arr){
     
            	document.write(value+"写作业"+"
");
            };

对象的创建

//		   js对象是包含很多属性的变量
//          js对象属性指的是与  对象相关的值.js对象是无序属性的集合

//   1.json模式创建对象,创建对象用{}号;(最主要的形式)
          var ren={
     name:"小明",sex:"男",age:12,height:1.8};
          console.log(ren);

//   2.直接实例化,通过构造函数Object()创建对象
            var ren=new Object();
            ren.name = "小明"; //添加属性和属性值
            ren.sex = "男";
            console.log(ren);

访问对象

        var ren={
     name:"小明",sex:"男",age:12,height:1.8};
        
        //访问对象属性：
//      1.对象名["属性名"]
          var name = ren["name"]; //小明
          alert(name);

//      2.对象名.属性名(用的最多)
        var sex = ren.sex;
        alert(sex);

//      对象添加属性
        ren.gcd = true;
        ren["yifu"]="red";
        console.log(ren); //Object { name: "小明", sex: "男", age: 12, height: 1.8, gcd: true, yifu: "red" }

修改、删除对象属性

var ren={
     name:"小明",sex:"男",age:12,height:1.8};
// 修改对象属性:
      ren.age=13;
      console.log(ren.age);
	
// 删除对象属性: delete 关键词从对象中删除属性：会同时删除属性的值和属性本身
        delete ren.height;
        alert(ren.height); //undefined
        console.log(ren);

// 构造函数
        function Ren(name,sex){
      //构造函数创建对象
            this.name=name;
            this.sex=sex;
        };

        var xiaoming = new Ren("xiaoming","男");
        console.log(xiaoming);

5.获取元素及事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JHhG4HiW-1611670099190)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210126164143824.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NMX107sr-1611670099194)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210126164308511.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zBYJwwM7-1611670099196)(D:\Users\Administrator\Documents\QQfiles\MobileFile\IMG_0673(20210126-163815)].JPG)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8f9OB2cT-1611670099199)(D:\Users\Administrator\Documents\QQfiles\MobileFile\IMG_0675(20210126-163815)].JPG)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C7rUasDa-1611670099202)(D:\Users\Administrator\Documents\QQfiles\MobileFile\IMG_0676(20210126-163815)].JPG)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p8XOqEsj-1611670099204)(D:\Users\Administrator\Documents\QQfiles\MobileFile\IMG_0677(20210126-163815)].JPG)

6.元素内容的操作

删除内容

var btn = document.getElementById("btn"); //一个按钮
var zxw = document.getElementById("zxw"); //一个div元素
btn.onclick = function() {
     
    //删除元素内容
    zxw.innerHTML = "";
}

元素内容的移动

var btn = document.getElementById("btn"); //一个按钮
var zxw1 = document.getElementById("zxw1"); //div
var zxw2 = document.getElementById("zxw2"); //div
var abc = 1;

btn.onclick = function() {
     
    if (abc == 1) {
     
        //实现把zxw1中的元素移动到zxw2中
        //1.先复制zxw1元素内容到zxw2中
        zxw2.innerHTML = zxw1.innerHTML;
        //2.再删除zxw1元素内容
        zxw1.innerHTML = "";
        abc = 0;
    } else {
     
        //1.先复制zxw2元素内容到zxw1中
        zxw1.innerHTML = zxw2.innerHTML;
        //2.再删除zxw1元素内容
        zxw2.innerHTML = "";
        abc = 1;
    }

}

元素内容的交换

var btn = document.getElementById("btn");//一个按钮
var zxw1 = document.getElementById("zxw1");//div
var zxw2 = document.getElementById("zxw2");//div

btn.onclick = function() {
     
    //实现把zxw1中的元素交换到zxw2中
    var temp = zxw2.innerHTML;
    zxw2.innerHTML = zxw1.innerHTML;
    zxw1.innerHTML = temp;
}

7.元素样式的操作

操作元素尺寸

var btn = document.getElementById("btn");
var zxw = document.getElementById("zxw");

btn.onclick = function() {
     
    //实现把zxw方框点击一次，增大一次
    //获取元素尺寸并转成数值
    var old_width = zxw.style.width;
    var old_height = zxw.style.height;
    zxw.style.width = (parseInt(old_width) + 10) + "px";
    // alert(zxw.style.width);
    zxw.style.height = (parseInt(old_height) + 10) + "px";
    // alert(zxw.style.height);
}

获取非行内样式

var btn = document.getElementById("btn");
var zxw = document.getElementById("zxw");

btn.onclick = function() {
     
//获取非行内元素尺寸并转成数值类型。注：getComputedStyle只对IE9以上的标准浏览器生效
    var old_width = getComputedStyle(zxw, null).width;
    var old_height = getComputedStyle(zxw, null).height;
    var bgcolor = getComputedStyle(zxw, null).backgroundColor; //简写的属性，要一个一个获取，采用驼峰命名法

    // alert(bgcolor);
    zxw.style.width = (parseInt(old_width) + 10) + "px ";
    // alert(zxw.style.width);
    zxw.style.height = (parseInt(old_height) + 10) + "px ";
    // alert(zxw.style.height);
}

判断是否为IE浏览器

if (document.all) {
      //IE浏览器
    var old_width = zxw.currentStyle.width;
    var old_height = zxw.currentStyle.height;
} else {
      //其他浏览器
    var old_width = getComputedStyle(zxw, null).width;
    var old_height = getComputedStyle(zxw, null).height;
    var bgcolor = getComputedStyle(zxw, null).backgroundColor; //简写的属性，要一个一个获取，采用驼峰命名法
}
// 要使IE9以下的标准浏览器生效方法如下：
// var old_width = zxw.currentStyle.width;
// var old_height = zxw.currentStyle.height;
// alert(bgcolor);
zxw.style.width = (parseInt(old_width) + 10) + "px ";
zxw.style.height = (parseInt(old_height) + 10) + "px ";

元素显隐

var btn = document.getElementById("btn");
var zxw = document.getElementById("zxw");
var abc = 1;

btn.onclick = function() {
     
    if(abc == 1){
     
        zxw.style.display = "none";//元素隐藏
        abc = 0;
    }else {
     
        zxw.style.display = "block";//元素显示
        abc = 1;
    }
}

下滑显隐（下滑到一定高度显示出元素）

//网页正文全文高，包括当前不可见部分的元素的高度。
var scrollHeight = document.documentElement.scrollHeight;

//获得网页可见区域高(包括边线的高)，包括padding、border、水平滚动条。 但不包括margin的元素的高度
var offsetHeight = document.documentElement.offsetHeight;

//获得网页可见区域高，包括padding 但不包括border、水平滚动条、margin的元素的高度
var clientHeight = document.documentElement.clientHeight;


//滚动的是body,所以给body添加滚动事件
//给body添加滚动事件，以实现下滑到一定高度时，显现左右图片
document.body.onscroll=function(){
     
	var s_top = document.documentElement.scrollTop;//滚动条离顶部的距离
	//alert(s_top); //s_top是number类型
    if(s_top > scrollHeight/4) {
     
        document.getElementById("zxw_l").style.display = "block";
        document.getElementById("zxw_r").style.display = "block";
    }else{
     
        document.getElementById("zxw_l").style.display = "none";
        document.getElementById("zxw_r").style.display = "none";
    };
}

选项卡切换

<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css">
			*{
      margin: 0;padding: 0;}
			li{
      list-style: none;} /*去掉列表的默认小圆点*/
			#box{
      
				width: 600px;height: 400px;margin: 0 auto;
				border: 1px black solid;
			}
			#tab{
      
				width: 600px;height: 50px;line-height: 50px;text-align: center;
			}
			#tab li{
      
				width: 200px;height: 50px;font-size: 30px;float: left;
			}
			
			#cont{
      
				width: 600px;height: 340px;line-height: 350px;
				text-align: center;position: relative;
				margin-top: 10px;
			}
			#cont li{
      
				width: 600px;height: 340px;font-size: 25px;
				position: absolute;top: 0;left: 0;
				display: none;
			}
		style>
	head>
	<body>
		<div id="box">
			<ul id="tab">
				<li style="background: red;">选项卡1li>
				<li style="background: blue;">选项卡2li>
				<li style="background: green;">选项卡3li>
			ul>
			<ul id="cont">
				<li style="background: red; display: block;">内容1li>
				<li style="background: blue;">内容2li>
				<li style="background: green;">内容3li>
			ul>
		div>
		
		<script type="text/javascript">
			var tab = document.querySelectorAll("#tab li");
			var cont = document.querySelectorAll("#cont li");
			for(var i=0;i<tab.length;i++){
      
				//给i号元素加   记号
				tab[i].xb=i; //选项卡的下标，方便更改对应下标的内容
				tab[i].onclick=function() {
      
					for(var j=0;j<cont.length;j++){
      //首先把所有内容隐藏
						cont[j].style.display = "none";
					}
                    //必须要用this.xb才能访问到对应的cont，让它显示出来
					cont[this.xb].style.display = "block";//再显现一个内容
				}
			}
		script>
	body>
html>

围棋效果：第一次点击为黑色，第二次点击为白色（奇数次为黑色，偶数次为白色）

var abc=1;
//获取所有名字叫wqqz的元素
var wqqz = document.getElementsByClassName("wqqz");

for(var i=0;i < wqqz.length;i++){
     //给每个棋子都添加点击事件
    wqqz[i].onclick=function(){
     
        if(abc == 1) {
     
            this.style.background="#000";
            abc=0;
        }else {
     
            this.style.background="#ccc";
            abc=1;
        }
        this.style.boxShadow="3px 3px 1px #666";
    }
}

8.定时器

两种定时器（ setTimeout 和 setInterval ）

// 1.setTimeout(要执行的动作,时间:毫秒); 指多少时间后执行,只能执行一次（类似定时炸弹）
    setTimeout(function(){
     
        document.write("我要自学网")；
    },3000);
			
// 2.setInterval(要执行的动作,时间:毫秒); 指经过多少时间就执行,可以重复执行多次（类似闹钟）
    setInterval(function(){
     
        document.write("我要自学网
");
    },1000);

清理两种定时器（clearTimeout 和 clearInterval）

// 1.setTimeout(要执行的动作,时间:毫秒); 指多少时间后执行,只能执行一次（类似定时炸弹）
    var timer2 = setTimeout(function(){
     
        console.log("我要自学网2
");
    },4000);
			
// 2.setInterval(要执行的动作,时间:毫秒); 指经过多少时间就执行,可以重复执行多次（类似闹钟）
    var timer1 = setInterval(function(){
     
        console.log("我要自学网1
");
    },1000);
			
//   清理定时器
//	 1.clearInterval(要清理的定时名称); 
//      clearInterval(timer1);
//   2.clearTimeout(要清理的定时名称);
//		clearTimeout(timer2);
    var btn = document.getElementById("btn");
    btn.onclick=function(){
     
        clearInterval(timer1);
        clearTimeout(timer2);
    }
			

定时器的3种写法

			
function zxw(){
     
    document.write("我要自学网
");
};

function wyzxw(x){
     
    document.write(x);
};
			
//要执行动作的几种写法：(定时器的第一个参数)
			
//	1.匿名函数:
        setInterval(function(){
     
            document.write("我要自学网
");
        },1000);
			
//	2.函数名:不能传递参数
		setInterval(zxw,1000);

//  3.把函数当成字符串,就可以传递参数了
        var a = "我要自学网2
";
        setInterval("wyzxw(a)",1000);
	

倒计时跳转

var clock = document.getElementById("clock");
var tm = clock.innerHTML;

var tim = setInterval(timer,1000); //开启定时器 1s执行一次
function timer() {
     
    tm--;
    clock.innerHTML = tm;
    if(tm <= 0) {
     				
        clearInterval(tim); //清除定时器
        location.href = "https://www.51zxw.net"; //跳转页面
    };
}

点击物体从左到右，然后从右到左运动

var btn = document.getElementById("btn");
var zxw = document.getElementById("zxw");
var buchang=10;
//有一个问题：如果连续点击很多次按钮，则会触发很多次定时器，导致物体运动的速度越来越快。
//解决办法在06 清除定时器中

function yidong(){
     
    var tpleft = parseInt(zxw.style.left);
    if(tpleft > 300) buchang -= 10;
    if(tpleft < 10) buchang += 10;

    zxw.style.left = tpleft+buchang+"px";
}

btn.onclick = function(){
     
	timer = setInterval(yidong,100);  
}
			

清除定时器(解决上一个的问题)

var btn = document.getElementById("btn");
var zxw = document.getElementById("zxw");
var buchang=10;
var timer;//定时器要声明在外面！！！！！！！！！！解决问题的关键

function yidong(){
     
    var tpleft = parseInt(zxw.style.left);
    if(tpleft > 300) buchang -= 10;
    if(tpleft < 10) buchang += 10;

    zxw.style.left = tpleft+buchang+"px";
}

btn.onclick=function(){
     
    clearInterval(timer);//每次触发定时器前，先清除上一个定时器
    timer = setInterval(yidong,100);  
}

十秒免单游戏

var btn = document.getElementById("btn");
var clock = document.getElementById("clock");

//每10ms增加一次数字
var tm=0;
var flag=1; //1表示开始  0表示用户第二次点击，叫停
var timer;

function jishi(){
     
    if(tm >= 1199){
     
        clearInterval(timer);
    }
    tm += 1;
    clock.innerHTML = tm;
}


btn.onclick=function(){
     
        if(flag == 1){
     
            timer = setInterval(jishi,10);//100ms等于1s
            flag = 0;
        }
        else {
     
            clearInterval(timer);//关闭定时器，此时是第二次点击，用户叫停了
            //生成1-9的随机数,减少成功的几率
            var p = Math.floor(Math.random()*10);
            if(tm == 1000 && p==9){
     
                alert("挑战10秒成功")
            }else if(tm == 1000 && p!=9){
     
                clock.innerHTML = 1002;
                alert("挑战10秒失败");
            }else{
     
                alert("挑战10秒失败");
                flag = 1;
            }
        }
}

9.放大镜

获取事件对象

var left = document.getElementById("left");
//给left元素绑定鼠标移动事件
left.onmousemove = function(event){
     
    //获取事件对象
    //event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等
    //event对象只在事件发生的过程中才有效
    //	 var ev = window.event; //IE写法
    //	 var ev = event; //其他浏览器写法,要传入event参数 

    var ev = window.event || event;
    alert(ev.type); //mousemove
}

获得鼠标坐标

var left = document.getElementById("left");
//给left元素绑定鼠标移动事件
left.onmousemove = function(evt){
     
    //获取事件对象
    var ev = window.event || evt;

    //获取鼠标与元素的位置,相对于被触发的元素左上角位置

    //		var m_left = ev.offsetX;
    //		var m_right = ev.offsetY;
    //		var m_left = ev.layerX; //对付老版的火狐浏览器
    //		var m_right = ev.layerY;
    var m_left = ev.offsetX || ev.layerX;
    var m_right = ev.offsetY || ev.layerY;

    document.title = (m_left+"|"+m_right);
}

放大镜效果–全

<html>
	<head>
		<meta charset="UTF-8">
		<title>放大镜效果title>
		<style type="text/css">
			*{
      margin: 0;padding: 0;}
			#left{
      
				width: 500px;height: 400px;background: url(wqqp.jpg) no-repeat;
				float: left;margin-left:20px;position: relative;
				cursor: crosshair;
			}
			#box{
      
				width: 250px;height: 200px;background: #999;opacity: 0.8;
				position: absolute;
				top: 0;left: 0;display: none;
			}
			.cover{
      
				width: 500px;height: 400px;background: rgba(0,0,0,0);
				position: absolute;
				top: 0;left: 0;
			}
			#right{
      
				width: 500px;height: 400px;float: left;margin-left:20px;
				position: relative;overflow: hidden;display: none;
			}
			#pic{
      
				position: absolute;
				top: 0;left: 0;
			}
		style>
	head>
	<body>
		<div id="left">
			<div id="box">div>  
            
 
			<div class="cover">div>
		div>
        
        
		<div id="right">
			<img src="../02 元素样式的操作/img/wqqp.jpg" id="pic"/>
		div>
		
		<script type="text/javascript">
			var left = document.getElementById("left");
			var box = document.getElementById("box");
			var right = document.getElementById("right")
			
			//给left元素绑定鼠标移动事件
		left.onmousemove = function(event){
      
				//获取事件对象
                var ev = window.event || event;
				
				//获取鼠标与元素的位置
                 var m_left = ev.offsetX || ev.layerX;
				var m_top = ev.offsetY || ev.layerY;
//				document.title = (m_left+"|"+m_right);
				
				//计算box的位置  box大小为250*200  这样计算box位置会使鼠标位于box中心
				var box_left = m_left-125;
				var box_top = m_top-100;
				document.title = (box_left+"|"+box_top);
				
				//设置条件,不让灰色区域出界
				box_left = box_left < 0 ? 0 : box_left;
				box_top = box_top < 0 ? 0 : box_top;
				box_left = box_left > 250 ? 250 : box_left;
				box_top = box_top > 200 ? 200 : box_top;
				
				//让灰色区域box动起来
				box.style.left = box_left + "px";
				box.style.top = box_top + "px";
				
				//让右侧图片动起来  因为右侧图片的大小是左侧的两倍
				pic.style.left = "-" + box_left*2 + "px";
                     //若鼠标右移，则要把右侧大图片左移，才能看到对应的右侧
				pic.style.top = "-" + box_top*2 + "px";
                     //若鼠标下移，则要把右侧图片上移，才能看到对应的下侧
				
			}
			
            //鼠标移入，则显示放大
			left.onmouseover = function(){
      
				box.style.display = "block";
				right.style.display = "block";
			}
			
			//鼠标移出，则隐藏
			left.onmouseout = function(){
      
				box.style.display = "none";
				right.style.display = "none";
			}
		script>
	body>
html>

10.时间对象及其方法

创建时间对象

//创建时间对象
// 1.创建当前的时间对象
	var myDate = new Date();

// 2.使用参数创建时间对象(年，月，日，时，分，秒，毫秒)
	var myDate = new Date(2019,10,1,9,10,40,50);

// 3.使用字符串创建时间对象
	var myDate = new Date("2019/10/1 9:10:40");

// 4.使用时间戳创建时间对象
//时间戳：从格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数
//是一个13位的数字
	var myDate = new Date(1560000000000);

    alert(myDate);

获取年 月 日 星期

//创建时间对象
//一、创建当前的时间对象
var myDate = new Date();

// 1.获取完整的年份（4位）
var year = myDate.getFullYear();

// 2.获取当前月份(0-11，0代表1月)
var month = myDate.getMonth()+1; 

// 3.获取当前日（1-31）号
var dt = myDate.getDate();

// 4.获取当前星期几(0-6，0代表周日)
var xq = myDate.getDay();

alert(myDate);
alert(dt);

获取时 分 秒 毫秒

//创建时间对象
//1.创建当前的时间对象
var myDate = new Date();

//获取小时数（0-23）
var hours = myDate.getHours();

//获取当前分钟数(0-59)
var minute = myDate.getMinutes(); 

//获取当秒数(0-59)
var seconds = myDate.getSeconds();

//获取当前毫秒数(0-999)
var milliseconds = myDate.getMilliseconds();

alert(myDate);
alert(milliseconds);

获取完整的年月日、时分秒

//获取完整的年月日
var myDate = new Date().toLocaleDateString(); //2019/6/8
var myDate = new Date(1560000000000).toLocaleDateString();

//获取完整的时分秒
var myTime = new Date().toLocaleTimeString(); //下午9:20:00
var myTime = new Date(1560000000000).toLocaleTimeString();

//获取完整的年月日 时分秒
var myDateTime = new Date().toLocaleString(); //2019/6/8 下午9:20:00
var myDateTime = new Date(1560000000000).toLocaleString();

alert(myDate);
alert(myTime);
alert(myDateTime);

时间戳

//时间戳：从格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数
//13位的数字
			
//精确到毫秒
	var t = new Date().getTime();
			
//精确到秒:实际运用中经常这样，经常用来判断一个会员是否到期
	var t = parseInt(new Date().getTime()/1000);

    var o_t = parseInt(new Date("2020/10/1 9:0:5").getTime()/1000);
    var n_t = parseInt(new Date().getTime()/1000);
    if((n_t-o_t) < 31536000) {
      //一年365*24*60 s
        alert("会员有效");
    }else{
     
        alert("会员无效");
    }

11.数字对象及其方法

数字取整

//	Math对象:用于执行数学任务
//  Math 对象并不像Date 和String那样是对象的类,因此没有构造函数
    var zxw = -1.53456;

    //1.向下取整  后的数一定比当前数小
    var a = Math.floor(zxw);// -2

    //2.向上取整 后的数一定比当前数大
    var b = Math.ceil(zxw); //-1

    //3.四舍五入
    var c = Math.round(zxw); //-2

    alert(a);
    alert(b);
    alert(c);

随机取数

//获取0-1之间的随机数: 包含0，但不包含1
var a = Math.random();

//获取0-10之间的随机数: 包含0，但不包含10
var b = Math.random()*10;

//获取0-5之间的随机数: 包含0，但不包含5
var c = Math.random()*5;

//获取0-3之间的随机整数: 0 1 2 这种方法用的多
var zxw = Math.floor(Math.random()*3); //向下取整

//获取0-3之间的随机整数:0 1 2 3，可以取到0，但是概率极小
var zxw = Math.ceil(Math.random()*3); //向上取整
alert(zxw);


//获取2,3,4,5中随机数
var a = Math.random()+2; //获取2-3的随机数，2.几-3.几。  最小是2
var b = Math.random()*(5-2+1); //获取0-4的随机数， 0.几-3.几
var c = Math.random()*(5-2+1)+2; //2.几-5.几
var zxw = Math.floor(Math.random()*(5-2+1)+2);

//获取给定范围的随机整数（包含最小数和最大数）
//		公式:var zxw = Math.floor(Math.random()*(最大数-最小数+1)+最小数);

//获取最小是5，最大是50，包含5和50的随机整数
var zxw = Math.floor(Math.random()*(50-5+1)+5);

alert(zxw);

12.字符串及其方法

字符串查找

//1.查询指定位置的字符
//返回的是某个位置的字符，即字符在字符串中的下标，第一个字符的下标是0
	var zxw = "www.51zxw.net";
	var a = zxw.charAt(4); //返回5

//2.返回某个指定的字符串值在字符串中首次出现的位置
//对大小写敏感，如果要检索的字符串没有出现，则该方法返回-1
    var zxw = "www.51zxw.net";
    var a = zxw.indexOf("w");
    var b = zxw.indexOf("."); //返回3
    var c = zxw.indexOf("W"); //返回-1

字符串替换

//1.替换字符串
//	语法:replace("要替换的字符","用什么字符替换");

var zxw1 = "www.51zxw.net";
var zxw2 = "www.51zxw.net www.51zxw.net www.51zxw.net";

//只匹配出现的第一个
var a = zxw1.replace("www","aaa"); //aaa.51zxw.net
var b = zxw2.replace("www","aaa"); //aaa.51zxw.net www.51zxw.net

//全局匹配    /www/g  正则表达式
var c = zxw2.replace(/www/g,"aaa"); //aaa.51zxw.net aaa.51zxw.net aaa.51zxw.net

//忽略大小写只匹配出现的第一个  /WWW/i
var d = zxw2.replace(/WWW/i,"aaa"); //aaa.51zxw.net www.51zxw.net www.51zxw.net

//全局匹配和忽略大小写
var d = zxw2.replace(/WWW/ig,"aaa"); //aaa.51zxw.net aaa.51zxw.net aaa.51zxw.net

alert(d);

字符串大小写转换

//1.字符串大小写转换

var zxw1 = "www.51zxw.net";
var zxw2 = "WWW.51ZXW.NET";

//toUpperCase()将所有的字符串都转换成大写字母
var a = zxw1.toUpperCase();
//toLowerCase()将所有的字符串都转换成小写字母
var b = zxw1.toLowerCase();

//2.把字符串的首字母转成大写
var xm = "xiaoming";
//第一步：找到第一个字符
var e = xm.charAt(0);
//第二步：转成大写
var f = e.toUpperCase();
//第三步：字符串替换
var g = xm.replace(e,f);


var XM = xm.replace(xm.charAt(0),xm.charAt(0).toUpperCase());
var XM = xm.replace(xm[0],xm[0].toUpperCase());

alert(XM);

字符串的截取 subsring substr

var zxw = "www.51zxw.net";

//1.substring() 截取指定下标范围的字符串
//substring()不接受负值

//只有一个参数时，从指定位置截取到字符串结尾
var a = zxw.substring(4); //从第5个字符开始到字符串结尾，51zxw.net

//有两个参数时，截取指定下标范围的字符串，包头不包尾
var b = zxw.substring(4,8); //51zx
var c = zxw.substring(4,9); //51zxw 从下标4到下标8，不包括下标9


var d = zxw.substring(-4,-2); //错误

alert(a);


//2.substr() 截取从指定下标开始截取指定个数
//	语法: substr(开始下标,截取个数);

//只有一个参数时，从指定位置截取到字符串结尾
var a = zxw.substr(4); // 从第5个字符开始到字符串结尾，51zxw.net

//有两个参数时，截取从指定下标开始，指定个数的字符，包头
var b = zxw.substr(4,8); // 51zxw.ne
var c = zxw.substr(4,9); // 51zxw.net 从下标4到下标8，不包括下标9

//开始下标可以接受负值，(-1指字符串中最后一个字符)
var d = zxw.substr(-4,2); // .n

//var d = zxw.substr(-4,-2); // 错误
alert(d);

• 字符串分割 split()

var zxw = "www.51zxw.net";

//分割字符串  split();  把一个字符串分割成为字符串数组
//语法：split(指定位置分割，指定数组的长度);
//var a = zxw.split("."); //Array(3) [ "www", "51zxw", "net" ]

//var b = zxw.split(".",2); //Array [ "www", "51zxw" ]

//-----------------------------------------------
var str = "中文名：光合速率||出品时间：2019||出演人：和帅康、搞活动卡";
var c = str.split("||");

console.log(c);
alert(c[1]);

13.数组及对象的方法

将数组转成字符串 数组名.join()

//1.join()将数组的元素转成一个字符串,原来的数组会保留
//join("分隔符"); 该方法只接收一个参数，即分隔符，省略的话则用默认逗号分割符。

//var arr = [1,2,3,4,5,6];
var arr = ["2020","01","24"];
var a = arr.join(); // 2020,01,24
var b = arr.join("/"); // 2020/01/24
console.log(a);
console.log(arr);

将伪数组转成数组 Array.from(伪数组名)

//伪数组变成数组
//Array.from()将伪数组变成数组，只要有length属性的就可以转成数组，ES6语法
//把字符串，set数据类型转成数组

var zxw = "51zxw";

var arr = [1,2,3,4,5,6];

var obj = {
     name:"小明",age:18};

console.log(zxw.length);
console.log(arr.length);
console.log(obj.length); //对象没有长度

var a = Array.from(zxw); //返回Array(5) [ "5", "1", "z", "x", "w" ]
console.log(a);

var b = Array.from(arr);
console.log(b);

var c = Array.from(obj); //返回Array []
console.log(c); 

数组末尾删除和添加数据 会改变原数组

var arr = [1,2,3,4,5,6];
//删除数组末尾数据
//1.pop() 数组末尾移除最后一项，减少数组的length值，然后返回移除的元素
//pop()会直接修改原数组，而不是创建一个新数组
    var a = arr.pop(); //返回的是移除的最后元素'6'
    console.log(a);
    console.log(arr);

//2.push() 用于向数组的末尾添加一个或多个元素，并返回修改后的数组的长度（数值类型）
    var b = arr.push(8); //返回7 ==> 添加后数组的长度
    console.log(b);
    console.log(arr);

数组开头删除和添加数据 shift()= =>删除 unshift()= =>添加 会改变原数组

var arr = [1,2,3,4,5,6];
//删除数组开头数据
//1.shift() 删除数组开头第一项，减少数组的length值，然后返回移除的元素
//shift()会直接修改原数组，而不是创建一个新数组
    var a = arr.shift(); //返回的是移除的开头元素'1'
    console.log(a);
    console.log(arr);

//2.unshift() 用于向数组的开头添加一个或多个元素，并返回修改后的数组的长度（数值类型）
    var b = arr.unshift(8); //返回7 ==> 添加后数组的长度
    console.log(b);
    console.log(arr);

数组的任意位置删除和添加，替换，截取数据 splice() 会改变原数组

//splice(): 删除、插入、替换、截取，会直接修改原数组
//1.删除：可以删除任意数量的项，需指定2个参数：要删除的第一项的位置和要删除的项数
    var arr = ["赵","钱","孙","李"];
    arr.splice(1,2);
    console.log(arr);

//2.插入：可以向指定位置插入任意数量的项，需提供至少3个参数，起始位置、0(要删除的项数)和要插入的数据
    var arr = ["赵","钱","孙","李"];
    arr.splice(2,0,"宋","吴"); //[ "赵", "钱", "宋", "吴", "孙", "李" ]
    arr.splice(arr.length,0,"song","wu");

    console.log(arr);


//3.替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，需提供至少3个参数，
//  起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等
    var arr = ["赵","钱","孙","李"];
    arr.splice(1,1,"宋"); //[ "赵", "宋", "孙", "李" ]
    arr.splice(1,2,"宋","吴"); //[ "赵", "宋", "吴", "李" ]
    arr.splice(1,2,"宋","吴","周","王"); //[ "赵", "宋", "吴", "周", "王", "李" ]
    console.log(arr);

//4.截取: 返回一个包含从原始数组中删除项的数组
//可以截取从指定位置开始，指定元素个数的数组
    var arr = [ "赵", "钱","孙","李", "周", "王", "李" ];
    var abc = arr.splice(1,4); //["钱","孙","李", "周"]
    console.log(abc);
    console.log(arr);

截取指定下标的数组或字符串 slice()

//substring 也有一样的功能，只不过它只能用于字符串
//substring(开始下标，结束下标)，结束下标包头不包尾


//slice():截取指定下标的数组或字符串元素，不会修改原数组或字符串
//语法：slice(开始下标，结束下标);
//如果结束下标未被规定，那么会选取从开始下标到数组结尾的所有元素
//返回一个包含从开始下标到结束下标（不包括结束下标）的新数组

var arr = [0,1,2,3,4,5,6,7,8,9];
var abc = arr.slice(2); //Array(8) [ 2, 3, 4, 5, 6, 7, 8, 9 ]

var bcd = arr.slice(3,9); //Array(6) [ 3, 4, 5, 6, 7, 8 ]

var jg = arr.slice(-6,-1); //Array(5) [ 4, 5, 6, 7, 8 ] 从倒数第6个-倒数第1个（但不包括结束下标）

var jg = arr.slice(-6,-9); //空数组
console.log(abc);
console.log(bcd);
console.log(jg);

    var str = "www.51zxw.net";
    var zxw = str.slice(4); //51zxw.net
    var z = str.slice(4,9); //51zxw
    var w = str.slice(-7,-1); //zxw.ne

console.log(w);

查找指定元素的下标

var arr1 = [ "赵", "宋", "吴","李", "周", "王", "李" ];

//1.indexOf() 查找指定元素的下标，从前往后查找
//若有重复的，则返回第一个查到的下标
//若不存在则返回-1
    var a = arr1.indexOf("李"); //3
    var b = arr1.indexOf("冯"); //-1 不存在则返回-1
    console.log(b);

//2.lastIndexOf() 查找指定元素的下标，从后往前查找
//若有重复的，则返回第一个查到的下标
//若不存在则返回-1
    var arr2 = [ "赵", "宋", "吴","李", "周", "王", "李" ];
    var c = arr2.lastIndexOf("李"); //6
    console.log(c);

合并数组及反转数组 concat() 和 reverse()

//合并数组及反转数组
//1.concat() 方法用于连接两个或多个数组,不会改变原数组
//该方法会先创建当前数组的一个副本，不会改变原有的数组，会返回一个新数组
    var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    var arr3 = [7,8,9];
    var arr_a = arr1.concat(arr2);
    var arr_b = arr1.concat(arr2,arr3); 
    console.log(arr_a); //Array(6) [ 1, 2, 3, 4, 5, 6 ]
    console.log(arr_b); //Array(9) [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
    console.log(arr1); //Array(3) [ 1, 2, 3 ]
    console.log(arr2); //Array(3) [ 4, 5, 6 ]

    var arr_c = arr2.concat(arr1);
    console.log(arr_c); //Array(6) [ 4, 5, 6, 1, 2, 3 ]
    console.log(arr1); //Array(3) [ 1, 2, 3 ]
    console.log(arr2); //Array(3) [ 4, 5, 6 ]

//2.reverse() 反转数组中的元素
//该方法会改变原来的数组，而不会创建新的数组
//返回值并不是排序后的数组，而是排序后数组的引用
    var arr4 = [1,2,3,4,5,6];
    arr4.reverse(arr4); //Array(6) [ 6, 5, 4, 3, 2, 1 ]
    var flag = arr4.reverse(arr4); //flag ==> Array(6) [ 6, 5, 4, 3, 2, 1 ]
    console.log(arr4);
    console.log(flag);

数组元素升序排序 sort()会改变原数组

//sort():用于对数组的元素进行排序
//默认：按升序排序数组项，即最小的值位于最前面，最大的值排在最后面
//会直接修改原数组
//sort() 会转成字符串再比较，并从第1个字符进行比较，再比较第2位字符

var arr1 = [3,7,4,3,1,5,7];
arr1.sort(); //Array(7) [ 1, 3, 3, 4, 5, 7, 7 ]
console.log(arr1); 

var arr2 = ["e","j","i","y","p","r","o"];
arr2.sort(); //Array(7) [ "e", "i", "j", "o", "p", "r", "y" ]
console.log(arr2); 

var arr3 = [33,99,17,6,24,2];
arr3.sort(); //Array(6) [ 17, 2, 24, 33, 6, 99 ]
console.log(arr3); 

var arr4 = ["es","jg","iy","ye","pq","rh","ol"];
arr4.sort(); //Array(7) [ "es", "iy", "jg", "ol", "pq", "rh", "ye" ]
console.log(arr4); 

var arr5 = ["aa","aj","ff","mb","pq","rh","ol"];
arr5.sort(); //Array(7) [ "aa", "aj", "ff", "mb", "ol", "pq", "rh" ]
console.log(arr5); 

数组元素自定义排序 sort(比较函数)会改变原数组

//sort():用于对数组的元素进行排序
//默认：按升序排序数组项，即最小的值位于最前面，最大的值排在最后面
//会直接修改原数组
//sort() 会转成字符串再比较，并从第1个字符进行比较，再比较第2位字符
//			参数为规定排序顺序,必须是函数
//          语法:sort(比较函数);
//          比较函数应该具有两个参数a ,b ,其返回值如下:
//               若a < b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于0的值
//               若a == b,则返回0
//               若a > b,则返回一个大于0的值
//1.升序排列
    function asc(a,b){
     
        if(a < b) return -1;
        else if(a > b) return 1;
        else return 0;
    };
//2.降序排列
function desc(a,b){
     
    if(a < b) return 1;
    else if(a > b) return -1;
    else return 0;
};

//			var arr1 = [3,7,4,3,1,5,7];
//			arr1.sort(asc); //Array(7) [ 1, 3, 3, 4, 5, 7, 7 ]
//			console.log(arr1); 

//			var arr2 = ["e","j","i","y","p","r","o"];
//			arr2.sort(); //Array(7) [ "e", "i", "j", "o", "p", "r", "y" ]
//			console.log(arr2); 
//			
var arr3 = [33,99,17,6,24,2];
arr3.sort(asc); //Array(6) [ 2, 6, 17, 24, 33, 99 ]
console.log(arr3); 

var arr3 = [33,99,17,6,24,2];
arr3.sort(desc); //Array(6) [ 99, 33, 24, 17, 6, 2 ]
console.log(arr3); 

var arr4 = ["es","jg","iy","ye","pq","rh","ol"];
arr4.sort(asc); //Array(7) [ "es", "iy", "jg", "ol", "pq", "rh", "ye" ]
console.log(arr4); 

数组元素过滤 filter()

//1.filter() 把数组中的某些元素过滤掉，然后返回剩下的元素，接收的是一个回调函数
//数组中的每一项运行给定函数，返回满足过滤条件组成的新数组
//不会改变数组
var arr1 = [1,2,3,4,5,6,7,8,9,10];

//保留大于6的数组元素
function abc(x){
      
    return x > 6; 
};

var res1 = arr1.filter(abc); //Array(4) [ 7, 8, 9, 10 ]
console.log(res1); 


//保留数组中的奇数
function bcd(x){
     
    return x % 2 == 1;
};
var res2 = arr1.filter(bcd); //Array(5) [ 1, 3, 5, 7, 9 ]
console.log(res2); 

console.log(arr1);

使用set去重复

//set数据类型，ES6提供的新数据结构
//它类似于数组，但是成员的值都是唯一的，没有重复值

var arr1 = [1,1,2,2,3,3];

//1.数组转成set
var set1 = new Set(arr1); //Set(3) [ 1, 2, 3 ]
console.log(set1);

//2.set转数组
arr2 = Array.from(set1); //Array(3) [ 1, 2, 3 ]
arr3 = [...set1]; //Array(3) [ 1, 2, 3 ]
console.log(arr2);
console.log(arr3);

//3.has()判断一个值是否在set中
var p = set1.has(2); //true
console.log(p);
var k = set1.has(5); //false
console.log(k);

数组并集，交集，差集

var arr1 = [1,2,3];
var arr2 = [2,3,4];
var set1 = new Set(arr1);//Set(3) [ 1, 2, 3 ]
var set2 = new Set(arr2);//Set(3) [ 2, 3, 4 ]
console.log(set1);
console.log(set2);

//1.并集：a+b,然后去重复 [1,2,3,4]
var union = new Set([...set1,...set2]); //Set(4) [ 1, 2, 3, 4 ]
console.log(union);

//2.交集：a，b共同的部分 [2,3]
var intersection = new Set([...set1].filter(x=>set2.has(x))); //Set [ 2, 3 ]
//	function(x) {
     
//		return set2.has(x);
//	}
console.log(intersection); 


//3.差集：a-b [1]
var diff = new Set([...set1].filter(x=>!set2.has(x))); //Set [ 1 ]
console.log(diff);

14.对象的合并 assigh() 会修改目标对象

//Object.assigh()方法用于对象的合并
//将源对象的属性，复制到目标对象中
//第一个是目标对象，后面的参数都是源对象
//会修改目标对象，不会修改源对象

    var obj1 = {
     a:1};
    var obj2 = {
     b:2};

    var obj = Object.assign(obj1,obj2);
    console.log(obj1); //Object { a: 1, b: 2 }
    console.log(obj2); //Object { b: 2 }
    console.log(obj); //Object { a: 1, b: 2 }


//如果目标对象与源对象有同名属性，或与多个源对象有同名属性，则后面的属性会覆盖前面的属性
    var obj1 = {
     a:1,b:1};
    var obj2 = {
     b:2,c:2};

    var obj = Object.assign(obj1,obj2);
    console.log(obj1); //Object { a: 1, b: 2, c: 2 }
    console.log(obj2); //Object { b: 2, c: 2 }
    console.log(obj); //Object { a: 1, b: 2, c: 2 }


//多个对象合并
    var obj1 = {
     a:1,b:1};
    var obj2 = {
     b:2,c:2};
    var obj3 = {
     c:3,d:3};

    var obj = Object.assign(obj1,obj2,obj3);
    console.log(obj1); //Object { a: 1, b: 2, c: 3, d: 3 }
    console.log(obj2); //Object { b: 2, c: 2 }
    console.log(obj3); //Object { c: 3, d: 3 }
    console.log(obj); //Object { a: 1, b: 2, c: 3, d: 3 }

获取对象的属性名和属性值

var obj = {
     a:1,b:2,c:3,d:4};

//可枚举就是可遍历的意思，也就是说对象的属性是否能够通过遍历得到
//1.Object.keys():用于返回对象可枚举的属性名或方法名
//返回的结果是一个数组
var a = Object.keys(obj); //Array(4) [ "a", "b", "c", "d" ] 
console.log(a); 

//2.Object.values():用于返回对象可枚举的属性值
//返回的结果是一个数组
var b = Object.values(obj); //Array(4) [ 1, 2, 3, 4 ]
console.log(b); 

判断属性及销毁对象

var obj = {
     a:1,b:2,c:3,d:4};
// 1.判断对象中是否包含某个属性： in操作符
    var a = "b" in obj; //true   表示有这个属性
    var b = "f" in obj; //false  表示没有这个属性

    alert(b);

// 2.销毁对象，对象=null
    console.log(obj); //Object { a: 1, b: 2, c: 3, d: 4 }
    console.log(obj.b); //2

    //销毁obj这个对象
    obj = null;
    console.log(obj); //null
    console.log(obj.b); //Uncaught TypeError: obj is null

15.json数据格式

json和js对象的相互转换

var obj = {
     name:"小明",age:18}; //这是一个对象

var xm = '{"name":"小明","age":18}'; //这是一个JSON字符串

//1.js对象转json字符串：使用JSON.stringify()方法
	var xm_json = JSON.stringify(obj); //{"name":"小明","age":18}
    console.log(xm_json);
    console.log(typeof xm_json);

//2.json字符串转js对象：使用JSON.parse()方法
    var xm_obj = JSON.parse(xm); //Object { name: "小明", age: 18 }
    console.log(xm_obj);
    alert(xm_obj.name);

筛选对象键值 处理完数据后转成json字符串，stringify(参数1，参数2，参数3)

var obj = {
     name:"小明",age:18,sex:"男",height:"1.8m"}; //这是一个对象

var xm = '{"name":"小明","age":18}'; //这是一个JSON字符串

//1.js对象转json字符串：使用JSON.stringify()方法
//JSON.stringify()可以有3个参数
    //参数1：要转换的对象或数组
    //参数2（可选）：数组或函数
    //如果参数2是一个数组，则仅转换数组中指定的属性
    //如果参数2是一个函数，则将调用该函数，并传入每个成员的键和值给该函数
    //参数3（可选）：文本缩进，空格和换行符

var xm_json = JSON.stringify(obj); //{"name":"小明","age":18,"sex":"男","height":"1.8m"}
var xm_json = JSON.stringify(obj,['name','sex']); //{"name":"小明","sex":"男"}
var xm_json = JSON.stringify(obj,sex); //{"name":"小明","age":18,"sex":"女","height":"1.8m"}

function sex(key,value){
     
    if(value == "男"){
     
        return "女"
    };
    return value;
}

	var xm_json = JSON.stringify(obj,null,6);
//          {
     
//			      "name": "小明",
//			      "age": 18,
//			      "sex": "男",
//			      "height": "1.8m"
//			}

传入函数处理json键值 接收到json数据后处理转成对象， parse(参数1，参数2)函数

//2.json字符串转js对象：使用JSON.parse()方法
    //JSON.parse()可以有2个参数
    //参数1：要转换的JSON字符串
    //参数2（可选）：在parse函数返回之前处理结果的函数，处理每个成员的键和值
               
//这是一个JSON字符串
var xm = '{"name":"小明","age":18,"sex":"男","height":"1.8m"}'; 

var xm_obj = JSON.parse(xm,sex);
//Object { name: "小明", age: 18, sex: "女", height: "1.8m" }
function sex(key,value){
     
    if(value == "男"){
     
    return "女";
    };
    return value;
}


var xm_obj = JSON.parse(xm,nm);
//Object { name: "小红", age: 18, sex: "男", height: "1.8m" }
//Object { name: "小明你好", age: 18, sex: "男", height: "1.8m" }
function nm(key,value){
     
    if(key == "name"){
     
    //return "小红";
    return value+"你好";//return的是value值
    };
    return value;
}  

console.log(xm_obj);
document.write(xm_obj.name+"
");
document.write(xm_obj.age+"
");
document.write(xm_obj.sex+"
");
document.write(xm_obj.height+"
");

1.js对象转json字符串：使用JSON.stringify()方法
//JSON.stringify()可以有3个参数
//参数1：要转换的对象或数组
//参数2（可选）：数组或函数
//如果参数2是一个数组，则仅转换数组中指定的属性
//如果参数2是一个函数，则将调用该函数，并传入每个成员的键和值给该函数
//参数3（可选）：文本缩进，空格和换行符

var xm_json = JSON.stringify(obj); //{“name”:“小明”,“age”:18,“sex”:“男”,“height”:“1.8m”}
var xm_json = JSON.stringify(obj,[‘name’,‘sex’]); //{“name”:“小明”,“sex”:“男”}
var xm_json = JSON.stringify(obj,sex); //{“name”:“小明”,“age”:18,“sex”:“女”,“height”:“1.8m”}

function sex(key,value){
if(value == “男”){
return “女”
};
return value;
}

var xm_json = JSON.stringify(obj,null,6);

// {
// “name”: “小明”,
// “age”: 18,
// “sex”: “男”,
// “height”: “1.8m”
// }

##### 传入函数处理json键值     接收到json数据后处理转成对象， parse(参数1，参数2)函数

```javascript
//2.json字符串转js对象：使用JSON.parse()方法
    //JSON.parse()可以有2个参数
    //参数1：要转换的JSON字符串
    //参数2（可选）：在parse函数返回之前处理结果的函数，处理每个成员的键和值
               
//这是一个JSON字符串
var xm = '{"name":"小明","age":18,"sex":"男","height":"1.8m"}'; 

var xm_obj = JSON.parse(xm,sex);
//Object { name: "小明", age: 18, sex: "女", height: "1.8m" }
function sex(key,value){
    if(value == "男"){
    return "女";
    };
    return value;
}


var xm_obj = JSON.parse(xm,nm);
//Object { name: "小红", age: 18, sex: "男", height: "1.8m" }
//Object { name: "小明你好", age: 18, sex: "男", height: "1.8m" }
function nm(key,value){
    if(key == "name"){
    //return "小红";
    return value+"你好";//return的是value值
    };
    return value;
}  

console.log(xm_obj);
document.write(xm_obj.name+"
");
document.write(xm_obj.age+"
");
document.write(xm_obj.sex+"
");
document.write(xm_obj.height+"
");