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

new

zsydgithub 1 year ago
parent
b9ab90ace0
commit
eee53ae203
8 changed files with 377 additions and 0 deletions
Split View Show Diff Stats
  1. 48 0
      10_es6/10_类.html
  2. 45 0
      10_es6/11_es6类.html
  3. 25 0
      10_es6/12_symbol.html
  4. 33 0
      10_es6/13_set.html
  5. 47 0
      10_es6/14_map.html
  6. 112 0
      10_es6/15_Promise.html
  7. 36 0
      10_es6/16_proxy.html
  8. 31 0
      10_es6/9_对象新增方法.html

+ 48 - 0
10_es6/10_类.html
View File 

@@ -0,0 +1,48 @@
 
+<!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>
 
+    function Person(name,age){
 
+      this.name = name
 
+      this.age = age
 
+    }
 
+
 
+    /* 所有的构造函数 都有一个prototype 属性  这个属性指向它的原型对象
 
+    原型对象的特点： 声明在原型对象下面的属性和方法  都被所有的实例化对象所共享
 
+    属性写在    构造函数里
 
+    方法写在    原型对象下
 
+    */
 
+
 
+    Person.prototype.eat = function(){
 
+      console.log('eat')
 
+    }
 
+
 
+    var p1 = new Person()
 
+    p1.eat()
 
+    console.log(Person.prototype.constructor)
 
+
 
+    /* 
+    继承父类的方法 在子类的构造函数里面  通过调用父类的.call  去继承
 
+    子类的继承对象 = new  父类 继承方法
 
+    */
 
+
 
+    function Coder(name,age){
 
+      Person.call(this,name,age)
 
+    }
 
+    /* 继承父类的方法 */
 
+    Coder.prototype = new Person()
 
+    Coder.prototype.constructor = Coder
 
+
 
+    console.log(Coder.prototype.constructor)
 
+    var c1 = new Coder('lisi',20)
 
+    console.log(c1)
 
+    c1.eat()
 
+  </script>
 
+</body>
 
+</html>

+ 45 - 0
10_es6/11_es6类.html
View File 

@@ -0,0 +1,45 @@
 
+<!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>
 
+    class Person{
 
+      constructor(name){
 
+        this.name = name
 
+      }
 
+      //方法
 
+      eat(){
 
+        console.log(this,'吃')
 
+      }
 
+      //类方法 调用
 
+      static say(){
 
+        console.log('xxxxxxxxxxx')
 
+      }
 
+    }
 
+    /* 继承 */
 
+    class Coder extends Person {
 
+      constructor(name,aa){
 
+        super(name)
 
+        this.aa = aa
 
+      }
 
+    }
 
+
 
+    var p1 = new Person('zs')
 
+    console.log(p1)
 
+    p1.eat()
 
+    Person.say()
 
+
 
+
 
+    var c1 = new Coder('lisi','aaa')
 
+    console.log(c1)
 
+    Coder.say()
 
+  
+
 
+  </script>
 
+</body>
 
+</html>

+ 25 - 0
10_es6/12_symbol.html
View File 

@@ -0,0 +1,25 @@
 
+<!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>
 
+    /* 基本数据类型  number  string  boolean  null   undefined */
 
+    /* symbol   独一无二 */
 
+    var a = Symbol()
 
+    console.log(a)
 
+
 
+    var symbol1 = Symbol()
 
+    var symbol2 = Symbol()
 
+
 
+    /* 每个symbol值都是唯一的  即使创建的时候 传入相同的参数  也会返回不同的symbol值 */
 
+    console.log(symbol1 === symbol2)
 
+
 
+    /* 可以定义类的私有属性和方法   因为外部无法访问到Symbol值 */
 
+  </script>
 
+</body>
 
+</html>

+ 33 - 0
10_es6/13_set.html
View File 

@@ -0,0 +1,33 @@
 
+<!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 arr = [1,2,3,1,2,3,4]
 
+
 
+    /* 数组去重 */
 
+    var x = new Set(arr)
 
+    console.log(x)
 
+
 
+    var arr2 = Array.from(x)
 
+    console.log(arr2)
 
+
 
+    function quchong(arr){
 
+      return Array.from(new Set(arr))
 
+    }
 
+    console.log(quchong([1,2,3,4444,555,621,7,7,7,88,9,8]))
 
+
 
+    var s1 = new Set([1,2,3,4])
 
+    console.log(s1)
 
+    s1.add(8)
 
+    console.log(s1)
 
+    s1.delete(1)
 
+    console.log(s1)
 
+  </script>
 
+</body>
 
+</html>

+ 47 - 0
10_es6/14_map.html
View File 

@@ -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 obj = {
 
+    //   name:'zs'
 
+    // }
 
+    // var a1 = new Map()
 
+    // console.log(a1)
 
+
 
+    // a1.set('age',20)
 
+    // console.log(a1)
 
+    // a1.set(obj,'aaa')
 
+    // console.log(a1)
 
+    // a1.set('name','zs')
 
+    // console.log(a1)
 
+    /* 
+    map
 
+    1.可以使用任何数据类型作为键值
 
+    2.方法：
 
+          set(key,value)向Map中添加一个键值对
 
+          get(key)根据键获取对应的值
 
+          has(Key)判断Map中是否存在指定的值
 
+          delete(key)根据键删除对应的键值对
 
+          clear()清空Map中所有的键值对
 
+          size()获取Map中键值对的数量
 
+    */
 
+    let map = new Map()
 
+    map.set('name','zs')
 
+    map.set('age',30)
 
+    map.set(true,'yes')
 
+    console.log(map.get('name'))//输出为zs
 
+    console.log(map.has('age'))//输出为true
 
+    console.log(map.size)//输出为3
 
+    map.delete(true)
 
+    console.log(map.size)//输出为2
 
+    map.clear()
 
+    console.log(map.size)//输出为0
 
+  </script>
 
+</body>
 
+</html>

+ 112 - 0
10_es6/15_Promise.html
View File 

@@ -0,0 +1,112 @@
 
+<!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>
 
+    // setTimeout(()=>{
 
+    //   console.log(1)
 
+    //   setTimeout(()=>{
 
+    //     console.log(2)
 
+    //   },500)
 
+    // },1000)
 
+
 
+
 
+    // new Promise((resolve,reject)=>{
 
+    //   setTimeout(()=>{
 
+    //     console.log(4)
 
+    //     resolve()
 
+    //   },1000)
 
+    // }).then(()=>{
 
+    //   console.log('r')
 
+    // }).catch(()=>{
 
+    //   console.log('失败')
 
+    // })
 
+
 
+
 
+    // function fetchData() {
 
+    //   return new Promise((resolve, reject) => {
 
+    //     setTimeout(() => {
 
+    //       const data = 'hello word'
 
+    //       if (data) {
 
+    //         resolve(data)
 
+    //       } else {
 
+    //         reject('Error')
 
+    //       }
 
+    //     },1000)
 
+    //   })
 
+    // }
 
+
 
+    // fetchData().then((data)=>{
 
+    //   console.log(data)
 
+    // }).catch((error)=>{
 
+    //   console.log(err)
 
+    // })
 
+    // fetchData()
 
+
 
+    /* 
+      函数返回一个promise对象，在promise的构造函数当中，执行异步操作，根据操作结果调用
 
+      resolve或者reject方法，在then方法中，可以执行异步操作成功的方法，catch方法中 可以执行失败的方法
 
+
 
+    */
 
+
 
+    /* 
+      promise 有三种状态 pending(进行中)  fulfilled(已成功)  rejected(已失败)
 
+
 
+      1.当一个promise 被创建的时候 初始状态就是pending
 
+      2.当异步操作成功执行的时候，promise的状态会变为fulfilled  并且会调用then方法中
 
+      的回调函数
 
+      3.当异步操作失败的时候，promise的状态会变为rejected 就会调用.catch()中的回调函数
 
+    */
 
+
 
+    let p1 = new Promise((resolve, reject) => {
 
+      // setTimeout(() => {
 
+      //   console.log(1)
 
+      //   reject()
 
+      // }, 1000);
 
+      console.log(1)
 
+      resolve()
 
+    })
 
+    let p2 = new Promise((resolve, reject) => {
 
+      setTimeout(() => {
 
+        console.log(2)
 
+        // resolve()
 
+        reject()
 
+      }, 800);
 
+    })
 
+    let p3 = new Promise((resolve, reject) => {
 
+      // setTimeout(() => {
 
+      //   console.log(3)
 
+      //   resolve()
 
+      // }, 2000);
 
+      console.log(3)
 
+      // reject()
 
+      resolve()
 
+    })
 
+
 
+    /* promise.all()用于将多个promise实例 包装成一个新的promise实例 */
 
+    // Promise.all([p1,p2,p3]).then(()=>{
 
+    //   console.log('ok')
 
+    // }).catch(()=>{
 
+    //   console.log('error')
 
+    // })
 
+    Promise.race([p1, p2, p3]).then(() => {
 
+      console.log('ok')
 
+    }).catch(() => {
 
+      console.log('error')
 
+    })
 
+    /* Promise.race 将多个promise实例 包装成一个promise实例 */
 
+    /* 
+      任何一个promise对象为失败，就会返回失败的状态
 
+      不会管在执行异步操作的promise
 
+    */
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 36 - 0
10_es6/16_proxy.html
View File 

@@ -0,0 +1,36 @@
 
+<!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>
 
+    /* 创建代理 */
 
+    // const proxy = new Proxy(target,handler)
 
+    /* target 想要代理的目标对象 */
 
+    /* handler 包含各种拦截操作的对象 */
 
+
 
+    var obj = {
 
+      name:'zs'
 
+    }
 
+    var a = new Proxy(obj,{
 
+      get(target,key,property){
 
+        console.log(target,key,property)
 
+      },
 
+      set(target,key,value){
 
+        console.log(target,key,value)
 
+        return target[key] = value
 
+      }
 
+    })
 
+    a.name = 'lisi'
 
+    console.log(a)
 
+
 
+
 
+    /* apply(target,this.arg,argumentsList) 拦截目标对象函数的调用操作 */
 
+    
+  </script>
 
+</body>
 
+</html>

+ 31 - 0
10_es6/9_对象新增方法.html
View File 

@@ -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>
 
+  <script>
 
+    var obj = {
 
+      name:'zs',
 
+      age:18,
 
+      eat:function(){
 
+        console.log('eat')
 
+      }
 
+    }
 
+    var obj1 = {
 
+      name:'lisi',
 
+      school:'xiwangxiaoxue'
 
+    }
 
+    /* 合并对象  用obj1 去 覆盖 obj */
 
+    var obj2 = Object.assign(obj,obj1)
 
+    console.log(obj2)
 
+
 
+    /* 合并对象 */
 
+    var obj3 = {...obj1,...obj}
 
+    console.log(obj3)
 
+  </script>
 
+</body>
 
+</html>