Home Explore Help
Sign In
lovecoding
/
web0331
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix:js

e 1 week ago
parent
66a21d018d
commit
80a09e7400
6 changed files with 238 additions and 0 deletions
Split View Show Diff Stats
  1. 62 0
      4.js高级/11.对象的扩展方法.html
  2. 38 0
      4.js高级/12.类.html
  3. 51 0
      4.js高级/13.es6类+继承.html
  4. 24 0
      4.js高级/14.hasOwnProperty.html
  5. 27 0
      4.js高级/15.symbol.html
  6. 36 0
      4.js高级/16.Set.html

+ 62 - 0
4.js高级/11.对象的扩展方法.html
View File 

@@ -0,0 +1,62 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+  </head>
 
+  <body>
 
+    <script>
 
+      // 1.Object.is() 判断两个值是否全等(===)
 
+      console.log(Object.is(12, 12));
 
+      console.log(Object.is(12, "12"));
 
+      // 2.Object.assign() 对象合并；后面传入的对像若与前面传入的对象属相相同 则覆盖，不同 则合并
 
+      let obj1 = {
 
+        name: 'Lucy',
 
+        age: 10
 
+      }
 
+      let obj2 = {
 
+        name: "LiLi",
 
+        address: "哈尔滨"
 
+      }
 
+      console.log(Object.assign(obj1,obj2))
 
+      let school = {
 
+        address:"长春"
 
+      }
 
+      let city = {
 
+        name:['北京','上海','广州']
 
+      }
 
+      // 3.setPrototypeOf() 给当前对象设置原型 
+      console.log(Object.setPrototypeOf(school,city))
 
+      // 4.getPrototypeOf() 获取当前对象设置原型 
+      console.log(Object.getPrototypeOf(school))
 
+      // 5.Object.keys
 
+      let obj3 = {
 
+        name: "神厨小福贵",
 
+        age: 12
 
+      }
 
+      // 6.Object.keys() 返回当前可枚举对象的属性名键值对
 
+      console.log(Object.keys(obj3))
 
+      // 7.Object.entries() 返回当前可枚举对象的[key,value]数组
 
+      console.log(Object.entries(obj3))
 
+      // 8.Object.values() 返回当前可枚举对象的属性值键值对
 
+      console.log(Object.values(obj3))
 
+      // 9.Object.getOwnPropertyDescriptor() 返回当前传入对象自身的属性
 
+      console.log(Object.getOwnPropertyDescriptors(obj3)); 
+      // 10.Object.create() 对象的创建
 
+      let obj4 = Object.create(null,{
 
+        name:{
 
+            value:"东方树叶",
 
+            configurable: true,
 
+            enumerable: true,
 
+            writable: true
 
+        },
 
+        age:{
 
+            value: 10
 
+        }
 
+      })
 
+      console.log(obj4)
 
+      console.log(Object.getOwnPropertyDescriptors(obj4)); 
+    </script>
 
+  </body>
 
+</html>

+ 38 - 0
4.js高级/12.类.html
View File 

@@ -0,0 +1,38 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+  </head>
 
+  <body>
 
+    <!-- 
+        函数 中 写属性
 
+        原型 中 写方法
 
+    
+    -->
 
+    <script>
 
+      function Person(name, age) {
 
+        this.name = name;
 
+        this.age = age;
 
+      }
 
+      Person.prototype.eat = function() {
 
+        console.log("吃东西")
 
+      }
 
+      let p1 = new Person("暖宝宝", 10);
 
+      console.log(p1);
 
+      console.log(Person.prototype.constructor);
 
+      /**
 
+       * 继承父类的方法：
 
+       * 1.子类的构造函数里：通过调用的父类.call(this，xxxx)
 
+       * 2.子类的原型等于父类的实例化对象
 
+      */
 
+      function Fn1(name,age) {
 
+        Person.apply(this,[name,age])
 
+      }
 
+      Fn1.prototype = new Person();
 
+      var fn1 = new Fn1("小明",5);
 
+      console.log(fn1)
 
+    </script>
 
+  </body>
 
+</html>

+ 51 - 0
4.js高级/13.es6类+继承.html
View File 

@@ -0,0 +1,51 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        类：
 
+          定义：class 名字
 
+          constructor 定义构造函数初始化
 
+          extends 继承
 
+          super() 继承父级
 
+    -->
 
+    <script>
 
+        class Person {
 
+            constructor(color,toy) {
 
+                this.color = color;
 
+                this.toy = toy;
 
+            }
 
+            // 类的方法
 
+            play() {
 
+                console.log("我喜欢"+this.color+this.toy)
 
+            }
 
+        }
 
+        let p1 = new Person('红色','气球')
 
+        console.log(p1)
 
+        p1.play()
 
+        // es6继承
 
+        class newPerson extends Person {
 
+            constructor(color,toy,color1,toy1) {
 
+                super(color,toy)
 
+                this.color1 = color1;
 
+                this.toy1 = toy1;
 
+            }
 
+            play() {
 
+                console.log("我喜欢"+this.color1+this.toy1)
 
+            }
 
+            sun() {
 
+                console.log("天晴了")
 
+            }
 
+        }
 
+        let news = new newPerson('黄色','花','粉色','花瓶');
 
+        console.log(news)
 
+        news.play()
 
+        news.sun()
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 24 - 0
4.js高级/14.hasOwnProperty.html
View File 

@@ -0,0 +1,24 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // 构造函数
 
+        function Person() {
 
+
 
+        }
 
+        Person.prototype.vase = '花瓶'
 
+        let p1 = new Person();
 
+        p1.color = 'green'
 
+        console.log(p1)
 
+        // hasOwnProperty 在当前对象自身属性
 
+        console.log(p1.hasOwnProperty("color"))
 
+        console.log("color" in p1)
 
+    
+    </script>
 
+</body>
 
+</html>

+ 27 - 0
4.js高级/15.symbol.html
View File 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        /**
 
+         * Symbol：独一无二的
 
+         * 避免了命名的冲突
 
+         * 不能做运算
 
+         * 没有办法循环
 
+        */
 
+       let s1 = Symbol();
 
+       let s2 = Symbol();
 
+       console.log(s1 + 1);
 
+       console.log(s2)
 
+       if(s1 === s2) {
 
+        console.log("等")
 
+       } else {
 
+        console.log("不等")
 
+       }
 
+    </script>
 
+</body>
 
+</html>

+ 36 - 0
4.js高级/16.Set.html
View File 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        Set:
 
+            es6新增特性 类似于数组格式
 
+            size: 返回集合中的个数
 
+            add():向集合中添加数据
 
+            delete()：删除集合中的某个数据
 
+            has:查找集合中是否包含某个数据
 
+            clear():清空全部
 
+        -->
 
+    <script>
 
+        let s = new Set([1,2,3,4,5,6,8]);
 
+        s.add(13);
 
+        s.delete(3)
 
+        console.log(s.has(40));
 
+        s.clear()
 
+        console.log(s,'s')
 
+        console.log(s.size,'s')
 
+
 
+        // 1.filter + indexOf
 
+        var list = [1,2,3,32,32,4,5,4,3,1];
 
+        // 2.set
 
+        var news = new Set(list);
 
+        console.log(news)
 
+        var newList = Array.from(news);
 
+        console.log(newList)
 
+    </script>
 
+</body>
 
+</html>