zsydgithub 1 year ago
parent
commit
52382795c8
3 changed files with 164 additions and 0 deletions
  1. 31 0
      Html5/6_属性.html
  2. 47 0
      Html5/7_json.html
  3. 86 0
      Html5/8_深拷贝.html

+ 31 - 0
Html5/6_属性.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div data-name="google"  data-first-name="baidu">123</div>
+  <script>
+    var div1 = document.querySelector('div')
+    console.log(div1)
+    /* 
+      给元素设置自定义属性
+      1、div1.属性名 = 属性值
+      2、div1.setAttribute('属性名','属性值')
+      3、div1.dataset.属性名 = 属性值
+    */
+    div1.index = 1
+    div1.setAttribute('name','zs')
+    div1.dataset.age = 18
+    console.log(div1.index)
+    console.log(div1.getAttribute('name'))
+    console.log(div1.dataset.age)
+
+    console.log(div1.dataset.name)
+    console.log(div1.dataset.firstName)
+  </script>
+</body>
+</html>

+ 47 - 0
Html5/7_json.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <script>
+    var person = {
+      name: 'zs',
+      age: 18
+    }
+    console.log(person)
+
+    /* 将对象转化为字符串 */
+    var str = JSON.stringify(person)
+    console.log(str)
+
+    /* 将字符串转化为对象 */
+    var obj = JSON.parse(str)
+    console.log(obj)
+
+
+    // var a = 4
+    // b = a
+    // b = 6
+    // console.log(a)
+    // console.log(b)
+
+
+    // var a = {
+    //   age: 30
+    // }
+    // b = a
+    // b.age = 18
+    // console.log(a)
+    // console.log(b)
+    
+    /* 
+      浅克隆、浅拷贝:  将一个变量赋值给另一个变量,修改另一个变量的值,原有的变量随之改变     (引用数据类型)
+      深克隆、深拷贝: 将一个变量赋值给另一个变量,修改另一个变量的值,对于之前的变量没有影响  (基本数据类型)
+    */
+  </script>
+</body>
+</html>

+ 86 - 0
Html5/8_深拷贝.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+  <script>
+    // var a = {
+    //   age: 30
+    // }
+    // var str = JSON.stringify(a)
+    // var obj = JSON.parse(str)
+
+    // obj.age = 18
+    // console.log(a)
+    // console.log(obj)
+
+
+    // var person = {
+    //   name: 'zs',
+    //   age: 18
+    // }
+
+
+    // function deepClone(obj){
+    //   var tmp = {}
+    //   for(key in obj){
+    //     tmp[key] = obj[key]
+    //   }
+    //   return tmp
+    // }
+
+    // var a = deepClone(person)
+    // a.name = 'lisi'
+    // console.log(person)
+    // console.log(a)
+
+
+
+
+    var person = {
+      name: 'zs',
+      age: 18,
+      school: {
+        address: 'harbin',
+        num: 10000
+      }
+    }
+    // var a = deepClone(person)
+    // a.school.num = 30000
+    // console.log(a)
+    // console.log(person)
+
+
+
+    /* 封装深克隆的方法 */
+    function deepClone(obj) {
+      /* 定义一个空对象 接收深克隆后的结果 */
+      var tmp = {}
+      /* 循环对象里面的每一项  遍历对象下面的属性 */
+      for(key in obj){
+        /* 判断当前对象下面的属性是基本数据类型 还是 引用数据类型 */
+        if(typeof (obj[key]) == 'object'){
+          /* 如果是引用数据类型 再次调用函数本身 */
+          tmp[key] = deepClone(obj[key])
+        } else {
+          /* 如果是基本数据类型  可以直接赋值 */
+          tmp[key] = obj[key]
+        }
+      }
+      return tmp
+    }
+    var a = deepClone(person)
+    a.school.num = 200
+    console.log(a)
+    console.log(person)
+  </script>
+
+</body>
+
+</html>