衢州专业做网站海外aso优化
文章目录
- 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>
为什么要区分数组和对象?
因为有些方法数组能用,假如你都是按照对象方法进行拷贝的,就会让一些原本能用的方法失效
