文章目錄
- 1. html5新特性
- 2.用 js 給元素自定義屬性
- 3.json
- 3.1 json與普通對象的區別
- 3.2 json對象與 js對象的轉化
- 4.淺克隆和深克隆
1. html5新特性
html5中引入了新的特性（新的標簽），下面的新標簽是新的結構標簽，不過不太常用
- header 頭部
- footer 頁尾部
- nav 導航內容
- section 文章中的一塊內容
- aside 側邊框
接下來，介紹input新標簽
通過type屬性控制，輸入框內容，通過value控制默認內容,maxlength 是最長位數
<!-- text 文本類型 --><input type="text"><br><!-- color 調色板 --><input type="color"><br><!-- date 日期 --><input type="date" value="2025-05-30"><br><!-- time 時間 --><input type="time" value="13:30"><br><!-- search 搜索 --><input type="search"><br><!-- range 進度條 --><input type="range"><br><!-- tel 手機號 --><input type="tel" maxlength="11"><br><!-- file 文件 --><input type="file">
2.用 js 給元素自定義屬性
注意這個自定義屬性,不是 css 中 的屬性,是指一個對象的設置的新的變量,和 css 中屬性不是一個概念
下面 dom 的意思是我們通過 dom 下方法取得某個具體對象的統一寫法
html5 中新引入了 dateset 的方法,Attribute 的寫法早已有之
- 設置屬性
dom.dateset.屬性名=‘屬性值’
dom.setAttribute(‘屬性名’,‘屬性值’) - 讀取屬性
dom.dateset.屬性名
dom.getAttribute(“屬性名”)
實例如下:
操作 DOM 元素，必須先用 JS 獲取它
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 100px;height: 100px;border: 3px solid black;}</style>
</head>
<body><div class="box">box</div><script>var box=document.getElementsByClassName("box")[0];//新建屬性box.dataset.width="500";//取得元素屬性console.log(box.dataset.width);</script>
</body></html>
輸出結果:500
3.json
3.1 json與普通對象的區別
JSON 對象 vs 普通 JavaScript 對象的區別:
簡單來說,json 會把普通對象變為字符串,方便進行數據交換.但是普通對象中的函數,未定義的東西,json 是不管的.
json 對象的定義:
// json對象
var 名字 = '{"屬性名"：“屬性值”}'
//注意：單引包雙引 或者 雙引包單引
3.2 json對象與 js對象的轉化
// 將json對象如何轉成js對象
var newObj1 = JSON.parse(obj1);
// 將js對象轉成json對象
var newObj = JSON.stringify(obj);
parse:英文含義為語法分析
實例如下:
<script>
// 1.聲明一個新的 js 對象
var obj = {
name:'Tom',
age:11,
telephone:"123124"
}
//2.將 js 對象轉換為 json 對象
var newobj=JSON.stringify(obj);
console.log(obj);
console.log(newobj);
</script>
4.淺克隆和深克隆
淺克隆是指,那些對象中的引用對象,例如(對象,數組),會直接修改他們原本的值,不是真正意義的另一個,而是共用一個地址.
手動模擬淺克隆:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><script>const original = {name: "Alice",age: 25,info: { //information 的簡寫city: "Beijing"}};const shallowCopy = {};for (let key in original) {shallowCopy[key] = original[key]; // 不過濾，直接復制}shallowCopy.info.city="xian";console.log(original.info.city);console.log(shallowCopy.info.city);</script>
</body></html>
深克隆講解:
深克隆指的是：不僅復制對象的第一層屬性，還會遞歸地復制所有嵌套的對象和數組，確保新對象和原對象之間完全獨立、互不影響。
手動遞歸實現深克隆:
<script>const original = {name: "Alice",age: 25,info: { //information 的簡寫city: "Beijing"}};function deepClone(obj) {if (typeof obj !== 'object') return obj;const clone = Array.isArray(obj) ? [] : {};//判斷是對象還是數組for (let key in obj) {clone[key] = deepClone(obj[key]); }return clone;}var deep=deepClone(original);deep.info.city="xian";console.log(original.info.city);console.log(deep.info.city);</script>
為什么要區分數組和對象?
因為有些方法數組能用,假如你都是按照對象方法進行拷貝的,就會讓一些原本能用的方法失效
 與 Oracle 序列對比)
