---于2021/1/26整理
js基础复习笔记
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("<br />");
}
}
) ();
回调函数
// 回调函数:(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); //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]+"写作业"+"<br/>");
};
// for of 比for in遍历效率高，但是比普通for遍历效率低
for(value of arr){
document.write(value+"写作业"+"<br/>");
};
对象的创建
// 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";
};
}
选项卡切换
<!DOCTYPE html>
<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;">选项卡1</li>
<li style="background: blue;">选项卡2</li>
<li style="background: green;">选项卡3</li>
</ul>
<ul id="cont">
<li style="background: red; display: block;">内容1</li>
<li style="background: blue;">内容2</li>
<li style="background: green;">内容3</li>
</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("我要自学网<br/>");
},1000);
清理两种定时器（clearTimeout 和 clearInterval）
// 1.setTimeout(要执行的动作,时间:毫秒); 指多少时间后执行,只能执行一次（类似定时炸弹）
var timer2 = setTimeout(function(){
console.log("我要自学网2<br/>");
},4000);
// 2.setInterval(要执行的动作,时间:毫秒); 指经过多少时间就执行,可以重复执行多次（类似闹钟）
var timer1 = setInterval(function(){
console.log("我要自学网1<br/>");
},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("我要自学网<br/>");
};
function wyzxw(x){
document.write(x);
};
//要执行动作的几种写法：(定时器的第一个参数)
// 1.匿名函数:
setInterval(function(){
document.write("我要自学网<br/>");
},1000);
// 2.函数名:不能传递参数
setInterval(zxw,1000);
// 3.把函数当成字符串,就可以传递参数了
var a = "我要自学网2<br/>";
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);
}
放大镜效果–全
<!DOCTYPE html>
<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> <!--灰色框是随着鼠标不断变化的-->
<!--添加这个cover的目的是，防止灰色区域乱闪，因为鼠标移动事件是绑定在left上的，
而灰色框在left的上层，所以鼠标移动事件总是发生在灰色框上，鼠标移动的距离是以灰色框为对象计算的。
而灰色框又是随着鼠标不断变化的，甚至当鼠标移出灰色框的瞬间，移动到背景图上时，
事件又是按背景图为对象计算的，事件对象切换之间页面渲染下灰色框会瞬移回0,0的位置。
加遮罩层，按程序执行顺序，遮罩层的层级 > 灰色框 > 背景图，
又因为尺寸上遮罩层全覆盖背景图尺寸，所以全程都是以最上层的遮罩层为对象计算的。-->
<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+"<br/>");
document.write(xm_obj.age+"<br/>");
document.write(xm_obj.sex+"<br/>");
document.write(xm_obj.height+"<br/>");
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+"<br/>");
document.write(xm_obj.age+"<br/>");
document.write(xm_obj.sex+"<br/>");
document.write(xm_obj.height+"<br/>");
扫一扫
2820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
