js基礎複習筆記
阿新 • • 發佈：2021-01-27
技術標籤：前端學習筆記
---於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/>");