note

abstain23 · Dec 13, 2019 · cb996c0 · cb996c0
commit cb996c0
Show file tree

Hide file tree

Showing 28 changed files with 1,081 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/eventsloop/1206-2.html b/eventsloop/1206-2.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <script>
+    new Promise(resolve=>{
+      console.log(1)
+      setTimeout(resolve, 1000,2);
+      console.log(3)
+    }).then((res)=>{
+      console.log(333)
+      console.log(res)
+    })
+
+    const obj = {}
+    let temp = 'test'
+    Object.defineProperty(obj,'name',{
+      get(){
+        console.log('这是获取')
+        return temp
+      },
+      set(newval){
+        temp=newval
+        console.log(newval)
+      }
+    })
+  </script>
+</body>
+</html>
diff --git a/eventsloop/1206-class.html b/eventsloop/1206-class.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <script>
+    class Person{
+      constructor(name,age){
+        this.name=name
+        this.age=age
+        console.log('class')
+      }
+      run(){
+        console.log(`今年${this.age}岁的${this.name}在跑步`)
+      }
+      static walk(){
+
+        console.log('只能构造函数自己使用的静态方法')
+      }
+    }
+    const xiaoming = new Person('小明','5')
+    Person.walk()
+    xiaoming.run()
+  </script>
+</body>
+</html>
diff --git a/eventsloop/1206.html b/eventsloop/1206.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <input type="date" value="2019-12-06" pattern="xx"> 
+  <input type="color">
+  <input type="datetime-local" id="xx" value="2019-12-06T14:54">
+  <script>
+    console.log(xx.value)
+
+    function Fn(){
+      var n =10
+      this.m=100
+    }  
+    Fn.prototype.aa=function(){
+      console.log('aa')
+    }
+    Fn.bb=function(){
+      console.log('bb')
+    }
+    Fn() 
+    var f = new Fn()
+    console.log(f.n) //undefined
+    console.log(f.m) //100
+    f.aa() //'aa'
+    console.log(f.bb())//报错
+    Fn.bb()//'bb'
+  </script>
+</body>
+</html>
diff --git a/eventsloop/deepclone.html b/eventsloop/deepclone.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>深拷贝的几种方式</title>
+</head>
+<body>
+  <script>
+    //深拷贝实现的几种方式
+
+    //运用递归
+    function deepclone(obj){
+      let newObj = Array.isArray(obj)?[]:{}
+      if(typeof obj !== 'object'){
+        return obj
+      }else {
+        console.log('obj is object')
+        for(let key in obj){
+          newObj[key]=typeof obj[key]==='object'?deepclone(obj[key]):obj[key]
+        }
+      }
+      return newObj
+    }
+    console.log(deepclone(1))
+    const obj = {name:'yyy'}
+    const obj2 = deepclone(obj)
+    obj2.name='xxx'
+    console.log(obj)
+    console.log(obj2)
+    // 使用json对象的方法
+    /*
+    var a = [1,2,3]
+    var b = JSON.parse(JSON.stringify(a))
+    a[2]=4
+    console.log(a)
+    console.log(b)
+    */
+
+
+    // 使用es6的展开运算符 以下几种都是针对数组的
+    /*
+    var a = [1,3,4]
+    var b=[...a]
+    b.push(4)
+    console.log('b',b)
+    console.log('a',a)
+    */
+
+    //使用cancat
+    /*
+    var c = [6,7,8]
+    var d=[]
+    //var e = d.concat(c)
+    var e = c.splice(1)
+    // e.push(3)
+    // c.push(1)
+    c[1]=0
+    console.log('e',e)
+    console.log('c',c)
+    */
+   /*
+    var a = [1,[2,3],4]
+    var b = a.slice(1)
+    
+    console.log(a)
+    console.log(b)
+ 
+    a[1][0] = 5
+    a[2] = 6
+
+    console.log(a)
+    console.log(b)
+    */
+
+  </script>
+</body>
+</html>
diff --git a/eventsloop/event.html b/eventsloop/event.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>事件</title>
+  <style>
+    ul>li {
+      width: 50px;
+      height: 20px;
+      margin: 5px 5px;
+      border: 1px solid green;
+    }
+  </style>
+</head>
+<body>
+  <div  id="test" onclick="test()" style="width: 200px;height: 200px;border: 1px solid red;"> 
+
+  </div>
+
+  <ul> 
+    <li>item1</li>
+    <li>item2</li>
+    <li>item3</li>
+    <li>item4</li>
+  </ul>
+  <script>
+    function test(){
+      console.log('test')
+    }
+    let test2 = document.getElementById('test')
+    test2.onclick=function(){
+      console.log('test2')
+    }
+    test2.addEventListener('click',test,false)
+    test2.removeEventListener('click',test,false)
+
+    //事件委托
+    document.body.addEventListener('click',function(e){
+      let target = e.target
+      // let currentTarget = e.currentTarget
+      // console.log(target.innerText)
+      // console.log(currentTarget)
+      console.log(target.nodeName)
+      if(target.nodeName ==='LI'){
+        e.stopPropagation()
+        e.preventDefault()
+        console.log('content is :',target.innerText)
+
+      }
+    })
+    // 自定义事件
+
+
+  </script>
+</body>
+</html>
diff --git a/eventsloop/forin.html b/eventsloop/forin.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <script>
+    let arr = [1,3,4,5]
+    let res = arr.forEach((val,index,arr)=>{
+      console.log(val,index,arr)
+    })
+    console.log(res) // foreach 无返回值 undefined
+
+    // for in 一般用于遍历对象
+    console.log('======')
+    let obj = {
+      name:'元宝',
+      age:'0.5',
+      sex:'男'
+    }
+    for(let key in obj){
+      console.log(key,obj[key]) //for in 会遍历出prototype上的属性
+    }
+    console.log('for of =====')
+    for(let key2 of arr){
+      console.log(key2)
+    }
+    const obj2 = {
+      0:'1',
+      1:'2',
+      2:'3',
+      length:3
+    }
+    // for(let key3 of obj2){
+    //   console.log(key3)
+    // }
+  </script>
+</body>
+</html>
diff --git a/eventsloop/promise.html b/eventsloop/promise.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>promise</title>
+</head>
+<body>
+  <script>
+    function runpromise(){
+      return new Promise((resolve,reject)=>{
+        console.log('执行到此')
+        resolve('成功')
+        rejec('失败')
+      })
+    }
+    runpromise().then(res=>{
+      console.log(res)
+    })
+
+    Promise.resolve('成功').then((data)=>{
+      console.log(data)
+    })
+
+    Promise.resolve('失败').then(err=>{
+      console.log(err)
+    })
+
+    new Promise((resolve,reject)=>{
+      if(false){
+        resolve('成功')
+      }else{
+        reject('err')
+      }
+    }).then(res=>{
+      console.log(res)
+    },err=>{
+      console.log(err)
+    })
+
+    new Promise((resolve,reject)=>{
+      if(false){
+        resolve('成功')
+      }else{
+        reject('err2')
+      }
+    }).then(res=>{
+      console.log(res)
+    }).catch(err=>{
+      console.log(err)
+    })
+
+    console.log('all====race')
+
+    let p1 = Promise.resolve('111')
+    let p2 = Promise.resolve('222')
+    let p3 = Promise.resolve('333')
+    Promise.all([p1,p2,p3]).then(res=>{
+      let [q,w,e]=res
+      console.log(res)
+      console.log(q,w,e)
+    })
+
+    let pp1 = Promise.resolve('成功1')
+    let pp2 = Promise.resolve('成功2')
+    let pp3 = Promise.reject('失败1')
+    Promise.race([pp2,pp1,pp3]).then(res=>{
+      console.log(res)
+    })
+
+    console.log('=======')
+
+    Promise.resolve(function(){
+      console.log('resolve里面的回调')
+    }).then(res=>{
+      res()
+    })
+
+    console.log('settime')
+
+    setTimeout(() => {
+      console.log('0ms')
+    }, 0);
+
+    setTimeout(() => {
+      console.log('1000ms')
+    }, 1000);
+
+  </script>
+</body>
+</html>