js基础复习笔记
---于2021/1/26整理
js基础复习笔记
- 1.变量及数据类型
- 2.运算符
- 3.函数
- 函数声明与创建
- 函数的2种定义方式
- 调用函数的3种方法
- 回调函数
- 2种匿名函数
- 内置功能函数
- 4.数组
- 数组概念
- 数组的创建方式
- 数组的修改 以及 for in 和 for of
- 对象的创建
- 访问对象
- 修改、删除对象属性
- 5.获取元素及事件
- 6.元素内容的操作
- 删除内容
- 元素内容的移动
- 元素内容的交换
- 7.元素样式的操作
- 操作元素尺寸
- 获取非行内样式
- 判断是否为IE浏览器
- 元素显隐
- 下滑显隐（下滑到一定高度显示出元素）
- 选项卡切换
- 围棋效果：第一次点击为黑色，第二次点击为白色（奇数次为黑色，偶数次为白色）
- 8.定时器
- 两种定时器（ setTimeout 和 setInterval ）
- 清理两种定时器（clearTimeout 和 clearInterval）
- 定时器的3种写法
- 倒计时跳转
- 点击物体从左到右，然后从右到左运动
- 清除定时器(解决上一个的问题)
- 十秒免单游戏
- 9.放大镜
- 获取事件对象
- 获得鼠标坐标
- 放大镜效果--全
- 10.时间对象及其方法
- 创建时间对象
- 获取年 月 日 星期
- 获取时 分 秒 毫秒
- 获取完整的年月日、时分秒
- 时间戳
- 11.数字对象及其方法
- 数字取整
- 随机取数
- 12.字符串及其方法
- 字符串查找
- 字符串替换
- 字符串大小写转换
- 字符串的截取 subsring substr
- 13.数组及对象的方法
- 将数组转成字符串 数组名.join()
- 将伪数组转成数组 Array.from(伪数组名)
- 数组末尾删除和添加数据 会改变原数组
- 数组开头删除和添加数据 shift()= =>删除 unshift()= =>添加 会改变原数组
- 数组的任意位置删除和添加，替换，截取数据 splice() 会改变原数组
- 截取指定下标的数组或字符串 slice()
- 查找指定元素的下标
- 合并数组及反转数组 concat() 和 reverse()
- 数组元素升序排序 sort()会改变原数组
- 数组元素自定义排序 sort(比较函数)会改变原数组
- 数组元素过滤 filter()
- 使用set去重复
- 数组并集，交集，差集
- 14.对象的合并 assigh() 会修改目标对象
- 获取对象的属性名和属性值
- 判断属性及销毁对象
- 15.json数据格式
- json和js对象的相互转换
- 筛选对象键值 处理完数据后转成json字符串，stringify(参数1，参数2，参数3)
- 传入函数处理json键值 接收到json数据后处理转成对象， parse(参数1，参数2)函数
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()"，然后你就收到了一条信息。
// 普通函数: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); //numberalert(b);alert(Number(a)); //123456// 2.String()转换成字符串类型var a = 123456;var b = typeof String(a); //stringalert(b);// 3.Boolean()转换成boolean类型var a = 123456;var b = typeof Boolean(a); //booleanalert(b);// 3.parseInt()转换成数值类型 !!!!!!!!非常重要var a = "123px";var b = typeof parseInt(a); //numbervar c = parseInt(a); //123alert(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); //undefinedconsole.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");//divbtn.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等于1sflag = 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 salert("会员有效");}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); //-2alert(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.查询指定位置的字符
//返回的是某个位置的字符，即字符在字符串中的下标，第一个字符的下标是0var zxw = "www.51zxw.net";var a = zxw.charAt(4); //返回5//2.返回某个指定的字符串值在字符串中首次出现的位置
//对大小写敏感，如果要检索的字符串没有出现，则该方法返回-1var zxw = "www.51zxw.net";var a = zxw.indexOf("w");var b = zxw.indexOf("."); //返回3var 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.netalert(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，不包括下标9var 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.netvar z = str.slice(4,9); //51zxwvar w = str.slice(-7,-1); //zxw.neconsole.log(w);
查找指定元素的下标
var arr1 = [ "赵", "宋", "吴","李", "周", "王", "李" ];//1.indexOf() 查找指定元素的下标，从前往后查找
//若有重复的，则返回第一个查到的下标
//若不存在则返回-1var a = arr1.indexOf("李"); //3var b = arr1.indexOf("冯"); //-1 不存在则返回-1console.log(b);//2.lastIndexOf() 查找指定元素的下标，从后往前查找
//若有重复的，则返回第一个查到的下标
//若不存在则返回-1var arr2 = [ "赵", "宋", "吴","李", "周", "王", "李" ];var c = arr2.lastIndexOf("李"); //6console.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.销毁对象，对象=nullconsole.log(obj); //Object { a: 1, b: 2, c: 3, d: 4 }console.log(obj.b); //2//销毁obj这个对象obj = null;console.log(obj); //nullconsole.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+"
");
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！