學習地址：
- 谷粒學院——尚硅谷
- 嗶哩嗶哩網站——尚硅谷最新版JavaScript基礎全套教程完整版(140集實戰教學,JS從入門到精通)
JavaScript基礎、高級學習筆記匯總表【尚硅谷最新版JavaScript基礎全套教程完整版(140集實戰教學,JS從入門到精通)】
目 錄
P136 136.尚硅谷_JS基礎_完成輪播圖 26:21
P137 137.尚硅谷_JS基礎_類的操作 30:02
1、addClass(obj, cn)：向一個元素中添加指定的class屬性值
2、hasClass(obj, cn)：判斷一個元素中是否含有指定的class屬性值
3、removeClass(obj, cn)：洗掉一個元素中的指定的class屬性
4、toggleClass(obj, cn)：切換一個類
P138 138.尚硅谷_JS基礎_二級選單-完成基本功能 28:54
js/tools.js
P139 139.尚硅谷_JS基礎_二級選單-過渡效果 16:14
P140 140.尚硅谷_JS基礎_JSON 37:14
JSON：JavaScript Object Notation JS物件表示法
W3School離線手冊——JSON
將JSON字串轉換為JS中的物件
JSON --> JS物件：JSON.parse()
JS物件 ---> JSON：JSON.stringify()
兼容IE
兼容IE7及以下的JSON操作：引入外部的js檔案
eval()：執行一段字串形式的JS代碼，并將執行結果回傳
JavaScript高級課程：https://www.bilibili.com/video/BV14s411E7qf
P136 136.尚硅谷_JS基礎_完成輪播圖 26:21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#outer { /* 設定outer的樣式 */
width: 520px; /* 設定寬和高 */
height: 333px;
margin: 50px auto;/*居中*/
background-color: greenyellow;/*設定背景顏色*/
padding: 10px 0;/*設定padding*/
position: relative;/*開啟相對定位*/
overflow: hidden;/*裁剪溢位的內容*/
}
#imgList { /* 設定imgList */
/*設定ul的寬度*/
/*width: 2600px;*/
position: absolute;/*開啟絕對定位*/
/* 每向左移動520px，就會顯示到下一張圖片 */
left: 0px; /* 設定偏移量 */
}
#imgList li {/* 設定圖片中的li */
float: left; /* 設定浮動 */
margin: 0 10px; /* 設定左右外邊距 */
list-style: none;
}
#navDiv { /* 設定導航按鈕 */
position: absolute;/*開啟絕對定位*/
bottom: 15px;/*設定位置*/
/*設定left值
outer寬度 520
navDiv寬度 25*5 = 125
520 - 125 = 395/2 = 197.5
* */
/*left: 197px;*/
}
#navDiv a {
float: left;/*設定超鏈接浮動*/
width: 15px;/*設定超鏈接的寬和高*/
height: 15px;
background-color: red;/*設定背景顏色*/
margin: 0 5px;/*設定左右外邊距*/
opacity: 0.5;/*設定透明*/
filter: alpha(opacity=50);/*兼容IE8透明*/
}
#navDiv a:hover { /* 設定滑鼠移入的效果 */
background-color: black;
}
</style>
<!--參考工具-->
<!-- <script type="text/javascript" src="js/tools.js"></script> -->
<script type="text/javascript">
//嘗試創建一個可以執行簡單影片的函式
/*
* 引數：
* obj:要執行影片的物件
* attr:要執行影片的樣式，比如：left top width height
* target:執行影片的目標位置
* speed:移動的速度(正數向右移動，負數向左移動)
* callback:回呼函式，這個函式將會在影片執行完畢以后執行
*/
function move(obj, attr, target, speed, callback) {
//關閉上一個定時器
clearInterval(obj.timer);
//獲取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判斷速度的正負值
//如果從0 向 800移動，則speed為正
//如果從800向0移動，則speed為負
if (current > target) {
//此時速度應為負值
speed = -speed;
}
//開啟一個定時器，用來執行影片效果
//向執行影片的物件中添加一個timer屬性，用來保存它自己的定時器的標識
obj.timer = setInterval(function() {
//獲取box1的原來的left值
var oldValue = parseInt(getStyle(obj, attr));
//在舊值的基礎上增加
var newValue = oldValue + speed;
//判斷newValue是否大于800
//從800 向 0移動
//向左移動時，需要判斷newValue是否小于target
//向右移動時，需要判斷newValue是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
obj.style[attr] = newValue + "px"; // 將新值設定給box1
//當元素移動到0px時，使其停止執行影片
if (newValue == target) {
//達到目標，關閉定時器
clearInterval(obj.timer);
//影片執行完畢，呼叫回呼函式
callback && callback();
}
}, 30);
}
/*
* 定義一個函式，用來獲取指定元素的當前的樣式
* 引數：
* obj 要獲取樣式的元素
* name 要獲取的樣式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常瀏覽器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，沒有getComputedStyle()方法
return obj.currentStyle[name];
}
}
window.onload = function() {
//獲取imgList
var imgList = document.getElementById("imgList");
//獲取頁面中所有的img標簽
var imgArr = document.getElementsByTagName("img");
//設定imgList的寬度
imgList.style.width = 520 * imgArr.length + "px";
/*設定導航按鈕居中*/
//獲取navDiv
var navDiv = document.getElementById("navDiv");
//獲取outer
var outer = document.getElementById("outer");
//設定navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
//默認顯示圖片的索引
var index = 0;
//獲取所有的a
var allA = document.getElementsByTagName("a");
//設定默認選中的效果
allA[index].style.backgroundColor = "black";
/*
點擊超鏈接切換到指定的圖片
點擊第一個超鏈接，顯示第一個圖片
點擊第二個超鏈接，顯示第二個圖片
*/
//為所有的超鏈接都系結單擊回應函式
for (var i = 0; i < allA.length; i++) {
//為每一個超鏈接都添加一個num屬性
allA[i].num = i;
//為超鏈接系結單擊回應函式
allA[i].onclick = function() {
//關閉自動切換的定時器
clearInterval(timer);
//獲取點擊超鏈接的索引,并將其設定為index
index = this.num;
//切換圖片
/*
* 第一張 0 0
* 第二張 1 -520
* 第三張 2 -1040
*/
//imgList.style.left = -520*index + "px";
//設定選中的a
setA();
//使用move函式來切換圖片
move(imgList, "left", -520 * index, 20, function() {
//影片執行完畢，開啟自動切換
autoChange();
});
};
}
autoChange(); // 開啟自動切換圖片
//創建一個方法用來設定選中的a
function setA() {
//判斷當前索引是否是最后一張圖片
if (index >= imgArr.length - 1) {
//則將index設定為0
index = 0;
//此時顯示的最后一張圖片，而最后一張圖片和第一張是一摸一樣
//通過CSS將最后一張切換成第一張
imgList.style.left = 0;
}
//遍歷所有a，并將它們的背景顏色設定為紅色
for (var i = 0; i < allA.length; i++) {
allA[i].style.backgroundColor = "";
}
allA[index].style.backgroundColor = "black"; // 將選中的a設定為黑色
};
var timer; // 定義一個自動切換的定時器的標識
function autoChange() { // 創建一個函式，用來開啟自動切換圖片
//開啟一個定時器，用來定時去切換圖片
timer = setInterval(function() {
index++; // 使索引自增
index %= imgArr.length; // 判斷index的值
//執行影片，切換圖片
move(imgList, "left", -520 * index, 20, function() {
//修改導航按鈕
setA();
});
}, 3000);
}
};
</script>
</head>
<body>
<!-- 創建一個外部的div，來作為大的容器 -->
<div id="outer">
<!-- 創建一個ul，用于放置圖片 -->
<ul id="imgList">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/1.jpg" /></li>
</ul>
<!--創建導航按鈕-->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>P137 137.尚硅谷_JS基礎_類的操作 30:02
1、addClass(obj, cn)：向一個元素中添加指定的class屬性值
2、hasClass(obj, cn)：判斷一個元素中是否含有指定的class屬性值
3、removeClass(obj, cn)：洗掉一個元素中的指定的class屬性
4、toggleClass(obj, cn)：切換一個類
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.b1 {
width: 100px;
height: 100px;
background-color: red;
}
.b2 {
height: 300px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function() {
//獲取box
var box = document.getElementById("box");
//獲取btn01
var btn01 = document.getElementById("btn01");
//為btn01系結單擊回應函式
btn01.onclick = function() { // 修改box的class屬性
/*
* 通過style屬性來修改元素的樣式，每修改一個樣式，瀏覽器就需要重新渲染一次頁面
* 這樣的執行的性能是比較差的，而且這種形式 當我們要修改多個樣式時，也不太方便
*/
/*box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "yellow";*/
/*
* 我希望一行代碼，可以同時修改多個樣式，
* 我們可以通過修改元素的class屬性來間接的修改樣式
* 這樣一來，我們只需要修改一次，即可同時修改多個樣式，
* 瀏覽器只需要重新渲染頁面一次，性能比較好，
* 并且這種方式，可以使表現和行為進一步的分離
*/
//box.className += " b2";
//addClass(box,"b2");
//alert(hasClass(box,"hello"));
//removeClass(box,"b2");
toggleClass(box, "b2");
};
};
//1、定義一個函式，用來向一個元素中添加指定的class屬性值
/*
* 引數:
* obj 要添加class屬性的元素
* cn 要添加的class值
*
*/
function addClass(obj, cn) {
//檢查obj中是否含有cn
if (!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
* 2、判斷一個元素中是否含有指定的class屬性值
* 如果有該class，則回傳true，沒有則回傳false
*/
function hasClass(obj, cn) {
//判斷obj中有沒有cn class
//創建一個正則運算式【\b：表示單詞邊界】字串中\\→\，所以要用兩個反斜杠
//var reg = /\bb2\b/;
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
}
/*
* 3、洗掉一個元素中的指定的class屬性
*/
function removeClass(obj, cn) {
//創建一個正則運算式
var reg = new RegExp("\\b" + cn + "\\b");
//洗掉class
obj.className = obj.className.replace(reg, "");
}
/*
* 4、toggleClass可以用來切換一個類
* 如果元素中具有該類，則洗掉；如果元素中沒有該類，則添加
*/
function toggleClass(obj, cn) {
//判斷obj中是否含有cn
if (hasClass(obj, cn)) {
removeClass(obj, cn); // 有，則洗掉
} else {
addClass(obj, cn); // 沒有，則添加
}
}
</script>
</head>
<body>
<button id="btn01">點擊按鈕以后修改box的樣式</button>
<br /><br />
<div id="box" class="b1 b2"></div>
</body>
</html>P138 138.尚硅谷_JS基礎_二級選單-完成基本功能 28:54
css/sdmenu.css
/* sdmenu */
@charset "utf-8";
div.sdmenu {
width: 150px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
height: 15px;
line-height: 15px;
overflow: hidden;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background: #ccc;
}
div.sdmenu div a:hover {
background: #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}js/tools.js
/*嘗試創建一個可以執行簡單影片的函式
* 引數：
* obj:要執行影片的物件
* attr:要執行影片的樣式，比如：left top width height
* target:執行影片的目標位置
* speed:移動的速度(正數向右移動，負數向左移動)
* callback:回呼函式，這個函式將會在影片執行完畢以后執行
*/
function move(obj, attr, target, speed, callback) {
//關閉上一個定時器
clearInterval(obj.timer);
//獲取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判斷速度的正負值
//如果從0 向 800移動，則speed為正
//如果從800向0移動，則speed為負
if (current > target) {
//此時速度應為負值
speed = -speed;
}
//開啟一個定時器，用來執行影片效果
//向執行影片的物件中添加一個timer屬性，用來保存它自己的定時器的標識
obj.timer = setInterval(function() {
//獲取box1的原來的left值
var oldValue = parseInt(getStyle(obj, attr));
//在舊值的基礎上增加
var newValue = oldValue + speed;
//判斷newValue是否大于800
//從800 向 0移動
//向左移動時，需要判斷newValue是否小于target
//向右移動時，需要判斷newValue是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//將新值設定給box1
obj.style[attr] = newValue + "px";
//當元素移動到0px時，使其停止執行影片
if (newValue == target) {
//達到目標，關閉定時器
clearInterval(obj.timer);
//影片執行完畢，呼叫回呼函式
callback && callback();
}
}, 30);
}
/*
* 定義一個函式，用來獲取指定元素的當前的樣式
* 引數：
* obj 要獲取樣式的元素
* name 要獲取的樣式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常瀏覽器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，沒有getComputedStyle()方法
return obj.currentStyle[name];
}
}
/*1、定義一個函式，用來向一個元素中添加指定的class屬性值
* 引數:
* obj 要添加class屬性的元素
* cn 要添加的class值
*
*/
function addClass(obj, cn) {
//檢查obj中是否含有cn
if (!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
* 2、判斷一個元素中是否含有指定的class屬性值
* 如果有該class，則回傳true，沒有則回傳false
*
*/
function hasClass(obj, cn) {
//判斷obj中有沒有cn class
//創建一個正則運算式
//var reg = /\bb2\b/;
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
}
/*
* 3、洗掉一個元素中的指定的class屬性
*/
function removeClass(obj, cn) {
//創建一個正則運算式
var reg = new RegExp("\\b" + cn + "\\b");
//洗掉class
obj.className = obj.className.replace(reg, "");
}
/*
* 4、toggleClass可以用來切換一個類
* 如果元素中具有該類，則洗掉
* 如果元素中沒有該類，則添加
*/
function toggleClass(obj, cn) {
//判斷obj中是否含有cn
if (hasClass(obj, cn)) {
//有，則洗掉
removeClass(obj, cn);
} else {
//沒有，則添加
addClass(obj, cn);
}
}P139 139.尚硅谷_JS基礎_二級選單-過渡效果 16:14
專案檔案：JavaScript基礎、高級學習筆記匯總表【尚硅谷最新版JavaScript基礎全套教程完整版(140集實戰教學,JS從入門到精通)】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二級選單</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,
img {
border: 0;
text-decoration: none;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋體";
}
</style>
<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function() {
/*
* 我們的每一個選單都是一個div
* 當div具有collapsed這個類時，div就是折疊的狀態
* 當div沒有這個類是，div就是展開的狀態
*/
/*
* 點擊選單，切換選單的顯示狀態
*/
//獲取所有的class為menuSpan的元素
var menuSpan = document.querySelectorAll(".menuSpan");
//定義一個變數，來保存當前打開的選單
var openDiv = menuSpan[0].parentNode;
//為span系結單擊回應函式
for (var i = 0; i < menuSpan.length; i++) {
menuSpan[i].onclick = function() {
//this代表我當前點擊的span
//獲取當前span的父元素
var parentDiv = this.parentNode;
//切換選單的顯示狀態
toggleMenu(parentDiv);
//判斷openDiv和parentDiv是否相同
if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) {
//打開選單以后，應該關閉之前打開的選單
//為了可以統一處理影片過渡效果，我們希望在這將addClass改為toggleClass
//addClass(openDiv , "collapsed");
//此處toggleClass()不需要有移除的功能
//toggleClass(openDiv , "collapsed");
//切換選單的顯示狀態
toggleMenu(openDiv);
}
//修改openDiv為當前打開的選單
openDiv = parentDiv;
};
}
/*
* 用來切換選單折疊和顯示狀態
*/
function toggleMenu(obj) {
//在切換類之前，獲取元素的高度
var begin = obj.offsetHeight;
//切換parentDiv的顯示
toggleClass(obj, "collapsed");
//在切換類之后獲取一個高度
var end = obj.offsetHeight;
//console.log("begin = "+begin +" , end = "+end);
//影片效果就是將高度從begin向end過渡
//將元素的高度重置為begin
obj.style.height = begin + "px";
//執行影片，從bengin向end過渡
move(obj, "height", end, 10, function() {
//影片執行完畢，行內樣式已經沒有存在的意義了，洗掉之
obj.style.height = "";
});
}
};
</script>
</head>
<body>
<div id="my_menu" class="sdmenu">
<div>
<span class="menuSpan">在線工具</span>
<a href="#">影像優化</a>
<a href="#">收藏夾圖示生成器</a>
<a href="#">郵件</a>
<a href="#">htaccess密碼</a>
<a href="#">梯度影像</a>
<a href="#">按鈕生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">支持我們</span>
<a href="#">推薦我們</a>
<a href="#">鏈接我們</a>
<a href="#">網路資源</a>
</div>
<div class="collapsed">
<span class="menuSpan">合作伙伴</span>
<a href="#">JavaScript工具包</a>
<a href="#">CSS驅動</a>
<a href="#">CodingForums</a>
<a href="#">CSS例子</a>
</div>
<div class="collapsed">
<span class="menuSpan">測驗電流</span>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
</div>
</div>
</body>
</html>P140 140.尚硅谷_JS基礎_JSON 37:14
JSON：JavaScript Object Notation JS物件表示法
JSON = "JavaScript Object Notation"，稱為JS物件標識，是為了給其他語言識別的一種JS包裝物件的手段，
- JS中的物件只有JS自己認識，其他的語言都不認識，
- JSON就是一個特殊格式的字串，這個字串可以被任意的語言所識別，并且可以轉換為任意語言中的物件，JSON在開發中主要用來資料的互動，
- JSON：JavaScript Object Notation JS物件表示法；JSON和JS物件的格式一樣，只不過JSON字串中的屬性名必須加雙引號，其他的和JS語法一致，
- JSON分類：1.物件 {}；2.陣列 []，
- JSON中允許的值：
- 字串
- 數值
- 布林值
- null
- 物件
- 陣列
W3School離線手冊——JSON
將JSON字串轉換為JS中的物件
在JS中，為我們提供了一個工具類，就叫JSON，這個物件可以幫助我們將一個JSON字串轉換為JS中的物件，也可以將一個JS物件轉換為JSON，
JSON --> JS物件：JSON.parse()
json --> js物件：JSON.parse()
可以將一個JSON字串轉換為js物件，它需要一個JSON字串作為引數，會將該字串轉換為JS物件并回傳，
JS物件 ---> JSON：JSON.stringify()
JS物件 ---> JSON：JSON.stringify()
可以將一個JS物件轉換為JSON字串，需要一個js物件作為引數，會回傳一個JSON字串，
兼容IE
JSON這個物件在IE7及以下的瀏覽器中不支持，所以在這些瀏覽器中呼叫時會報錯，
兼容IE7及以下的JSON操作：引入外部的js檔案（json2.js）
如果需要兼容IE7及以下的JSON操作，則可以通過引入一個外部的js檔案來處理，
// json2.js
// 2016-05-01
// Public Domain.
// NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
// See http://www.JSON.org/js.html
// This code should be minified before deployment.
// See http://javascript.crockford.com/jsmin.html
// USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
// NOT CONTROL.
// This file creates a global JSON object containing two methods: stringify
// and parse. This file is provides the ES5 JSON capability to ES3 systems.
// If a project might run on IE8 or earlier, then this file should be included.
// This file does nothing on ES5 systems.
// JSON.stringify(value, replacer, space)
// value any JavaScript value, usually an object or array.
// replacer an optional parameter that determines how object
// values are stringified for objects. It can be a
// function or an array of strings.
// space an optional parameter that specifies the indentation
// of nested structures. If it is omitted, the text will
// be packed without extra whitespace. If it is a number,
// it will specify the number of spaces to indent at each
// level. If it is a string (such as "\t" or " "),
// it contains the characters used to indent at each level.
// This method produces a JSON text from a JavaScript value.
// When an object value is found, if the object contains a toJSON
// method, its toJSON method will be called and the result will be
// stringified. A toJSON method does not serialize: it returns the
// value represented by the name/value pair that should be serialized,
// or undefined if nothing should be serialized. The toJSON method
// will be passed the key associated with the value, and this will be
// bound to the value.
// For example, this would serialize Dates as ISO strings.
// Date.prototype.toJSON = function (key) {
// function f(n) {
// // Format integers to have at least two digits.
// return (n < 10)
// ? "0" + n
// : n;
// }
// return this.getUTCFullYear() + "-" +
// f(this.getUTCMonth() + 1) + "-" +
// f(this.getUTCDate()) + "T" +
// f(this.getUTCHours()) + ":" +
// f(this.getUTCMinutes()) + ":" +
// f(this.getUTCSeconds()) + "Z";
// };
// You can provide an optional replacer method. It will be passed the
// key and value of each member, with this bound to the containing
// object. The value that is returned from your method will be
// serialized. If your method returns undefined, then the member will
// be excluded from the serialization.
// If the replacer parameter is an array of strings, then it will be
// used to select the members to be serialized. It filters the results
// such that only members with keys listed in the replacer array are
// stringified.
// Values that do not have JSON representations, such as undefined or
// functions, will not be serialized. Such values in objects will be
// dropped; in arrays they will be replaced with null. You can use
// a replacer function to replace those with JSON values.
// JSON.stringify(undefined) returns undefined.
// The optional space parameter produces a stringification of the
// value that is filled with line breaks and indentation to make it
// easier to read.
// If the space parameter is a non-empty string, then that string will
// be used for indentation. If the space parameter is a number, then
// the indentation will be that many spaces.
// Example:
// text = JSON.stringify(["e", {pluribus: "unum"}]);
// // text is '["e",{"pluribus":"unum"}]'
// text = JSON.stringify(["e", {pluribus: "unum"}], null, "\t");
// // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
// text = JSON.stringify([new Date()], function (key, value) {
// return this[key] instanceof Date
// ? "Date(" + this[key] + ")"
// : value;
// });
// // text is '["Date(---current time---)"]'
// JSON.parse(text, reviver)
// This method parses a JSON text to produce an object or array.
// It can throw a SyntaxError exception.
// The optional reviver parameter is a function that can filter and
// transform the results. It receives each of the keys and values,
// and its return value is used instead of the original value.
// If it returns what it received, then the structure is not modified.
// If it returns undefined then the member is deleted.
// Example:
// // Parse the text. Values that look like ISO date strings will
// // be converted to Date objects.
// myData = JSON.parse(text, function (key, value) {
// var a;
// if (typeof value === "string") {
// a =
// /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
// if (a) {
// return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
// +a[5], +a[6]));
// }
// }
// return value;
// });
// myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
// var d;
// if (typeof value === "string" &&
// value.slice(0, 5) === "Date(" &&
// value.slice(-1) === ")") {
// d = new Date(value.slice(5, -1));
// if (d) {
// return d;
// }
// }
// return value;
// });
// This is a reference implementation. You are free to copy, modify, or
// redistribute.
/*jslint
eval, for, this
*/
/*property
JSON, apply, call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
lastIndex, length, parse, prototype, push, replace, slice, stringify,
test, toJSON, toString, valueOf
*/
// Create a JSON object only if one does not already exist. We create the
// methods in a closure to avoid creating global variables.
if (typeof JSON !== "object") {
JSON = {};
}
(function() {
"use strict";
var rx_one = /^[\],:{}\s]*$/;
var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
var rx_escapable =
/[\\\"\u0000-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
var rx_dangerous =
/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
function f(n) {
// Format integers to have at least two digits.
return n < 10 ?
"0" + n :
n;
}
function this_value() {
return this.valueOf();
}
if (typeof Date.prototype.toJSON !== "function") {
Date.prototype.toJSON = function() {
return isFinite(this.valueOf()) ?
this.getUTCFullYear() + "-" +
f(this.getUTCMonth() + 1) + "-" +
f(this.getUTCDate()) + "T" +
f(this.getUTCHours()) + ":" +
f(this.getUTCMinutes()) + ":" +
f(this.getUTCSeconds()) + "Z" :
null;
};
Boolean.prototype.toJSON = this_value;
Number.prototype.toJSON = this_value;
String.prototype.toJSON = this_value;
}
var gap;
var indent;
var meta;
var rep;
function quote(string) {
// If the string contains no control characters, no quote characters, and no
// backslash characters, then we can safely slap some quotes around it.
// Otherwise we must also replace the offending characters with safe escape
// sequences.
rx_escapable.lastIndex = 0;
return rx_escapable.test(string) ?
"\"" + string.replace(rx_escapable, function(a) {
var c = meta[a];
return typeof c === "string" ?
c :
"\\u" + ("0000" + a.charCodeAt(0).toString(16)).slice(-4);
}) + "\"" :
"\"" + string + "\"";
}
function str(key, holder) {
// Produce a string from holder[key].
var i; // The loop counter.
var k; // The member key.
var v; // The member value.
var length;
var mind = gap;
var partial;
var value = holder[key];
// If the value has a toJSON method, call it to obtain a replacement value.
if (value && typeof value === "object" &&
typeof value.toJSON === "function") {
value = value.toJSON(key);
}
// If we were called with a replacer function, then call the replacer to
// obtain a replacement value.
if (typeof rep === "function") {
value = rep.call(holder, key, value);
}
// What happens next depends on the value's type.
switch (typeof value) {
case "string":
return quote(value);
case "number":
// JSON numbers must be finite. Encode non-finite numbers as null.
return isFinite(value) ?
String(value) :
"null";
case "boolean":
case "null":
// If the value is a boolean or null, convert it to a string. Note:
// typeof null does not produce "null". The case is included here in
// the remote chance that this gets fixed someday.
return String(value);
// If the type is "object", we might be dealing with an object or an array or
// null.
case "object":
// Due to a specification blunder in ECMAScript, typeof null is "object",
// so watch out for that case.
if (!value) {
return "null";
}
// Make an array to hold the partial results of stringifying this object value.
gap += indent;
partial = [];
// Is the value an array?
if (Object.prototype.toString.apply(value) === "[object Array]") {
// The value is an array. Stringify every element. Use null as a placeholder
// for non-JSON values.
length = value.length;
for (i = 0; i < length; i += 1) {
partial[i] = str(i, value) || "null";
}
// Join all of the elements together, separated with commas, and wrap them in
// brackets.
v = partial.length === 0 ?
"[]" :
gap ?
"[\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "]" :
"[" + partial.join(",") + "]";
gap = mind;
return v;
}
// If the replacer is an array, use it to select the members to be stringified.
if (rep && typeof rep === "object") {
length = rep.length;
for (i = 0; i < length; i += 1) {
if (typeof rep[i] === "string") {
k = rep[i];
v = str(k, value);
if (v) {
partial.push(quote(k) + (
gap ?
": " :
":"
) + v);
}
}
}
} else {
// Otherwise, iterate through all of the keys in the object.
for (k in value) {
if (Object.prototype.hasOwnProperty.call(value, k)) {
v = str(k, value);
if (v) {
partial.push(quote(k) + (
gap ?
": " :
":"
) + v);
}
}
}
}
// Join all of the member texts together, separated with commas,
// and wrap them in braces.
v = partial.length === 0 ?
"{}" :
gap ?
"{\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "}" :
"{" + partial.join(",") + "}";
gap = mind;
return v;
}
}
// If the JSON object does not yet have a stringify method, give it one.
if (typeof JSON.stringify !== "function") {
meta = { // table of character substitutions
"\b": "\\b",
"\t": "\\t",
"\n": "\\n",
"\f": "\\f",
"\r": "\\r",
"\"": "\\\"",
"\\": "\\\\"
};
JSON.stringify = function(value, replacer, space) {
// The stringify method takes a value and an optional replacer, and an optional
// space parameter, and returns a JSON text. The replacer can be a function
// that can replace values, or an array of strings that will select the keys.
// A default replacer method can be provided. Use of the space parameter can
// produce text that is more easily readable.
var i;
gap = "";
indent = "";
// If the space parameter is a number, make an indent string containing that
// many spaces.
if (typeof space === "number") {
for (i = 0; i < space; i += 1) {
indent += " ";
}
// If the space parameter is a string, it will be used as the indent string.
} else if (typeof space === "string") {
indent = space;
}
// If there is a replacer, it must be a function or an array.
// Otherwise, throw an error.
rep = replacer;
if (replacer && typeof replacer !== "function" &&
(typeof replacer !== "object" ||
typeof replacer.length !== "number")) {
throw new Error("JSON.stringify");
}
// Make a fake root object containing our value under the key of "".
// Return the result of stringifying the value.
return str("", {
"": value
});
};
}
// If the JSON object does not yet have a parse method, give it one.
if (typeof JSON.parse !== "function") {
JSON.parse = function(text, reviver) {
// The parse method takes a text and an optional reviver function, and returns
// a JavaScript value if the text is a valid JSON text.
var j;
function walk(holder, key) {
// The walk method is used to recursively walk the resulting structure so
// that modifications can be made.
var k;
var v;
var value = holder[key];
if (value && typeof value === "object") {
for (k in value) {
if (Object.prototype.hasOwnProperty.call(value, k)) {
v = walk(value, k);
if (v !== undefined) {
value[k] = v;
} else {
delete value[k];
}
}
}
}
return reviver.call(holder, key, value);
}
// Parsing happens in four stages. In the first stage, we replace certain
// Unicode characters with escape sequences. JavaScript handles many characters
// incorrectly, either silently deleting them, or treating them as line endings.
text = String(text);
rx_dangerous.lastIndex = 0;
if (rx_dangerous.test(text)) {
text = text.replace(rx_dangerous, function(a) {
return "\\u" +
("0000" + a.charCodeAt(0).toString(16)).slice(-4);
});
}
// In the second stage, we run the text against regular expressions that look
// for non-JSON patterns. We are especially concerned with "()" and "new"
// because they can cause invocation, and "=" because it can cause mutation.
// But just to be safe, we want to reject all unexpected forms.
// We split the second stage into 4 regexp operations in order to work around
// crippling inefficiencies in IE's and Safari's regexp engines. First we
// replace the JSON backslash pairs with "@" (a non-JSON character). Second, we
// replace all simple value tokens with "]" characters. Third, we delete all
// open brackets that follow a colon or comma or that begin the text. Finally,
// we look to see that the remaining characters are only whitespace or "]" or
// "," or ":" or "{" or "}". If that is so, then the text is safe for eval.
if (
rx_one.test(
text
.replace(rx_two, "@")
.replace(rx_three, "]")
.replace(rx_four, "")
)
) {
// In the third stage we use the eval function to compile the text into a
// JavaScript structure. The "{" operator is subject to a syntactic ambiguity
// in JavaScript: it can begin a block or an object literal. We wrap the text
// in parens to eliminate the ambiguity.
j = eval("(" + text + ")");
// In the optional fourth stage, we recursively walk the new structure, passing
// each name/value pair to a reviver function for possible transformation.
return (typeof reviver === "function") ?
walk({
"": j
}, "") :
j;
}
// If the text is not JSON parseable, then a SyntaxError is thrown.
throw new SyntaxError("JSON.parse");
};
}
}());eval()：執行一段字串形式的JS代碼，并將執行結果回傳
eval()
- 這個函式可以用來執行一段字串形式的JS代碼，并將執行結果回傳，
- 如果使用eval()執行的字串中含有{}，它會將{}當成是代碼塊，如果不希望將其當成代碼塊決議，則需要在字串前后各加一個()，
- eval()這個函式的功能很強大，可以直接執行一個字串中的js代碼，但是在開發中盡量不要使用，首先它的執行性能比較差，然后它還具有安全隱患，
JavaScript高級課程：https://www.bilibili.com/video/BV14s411E7qf
感謝李老師，JavaScript專欄（筆記）：https://blog.csdn.net/weixin_44949135/category_10123119.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/252148.html
標籤：其他