every learn

abstain23 · Mar 27, 2020 · fca3bde · fca3bde
1 parent b30f151
commit fca3bde
Show file tree

Hide file tree

Showing 8 changed files with 209 additions and 0 deletions.
diff --git a/Symbol.iterator 迭代器.js b/Symbol.iterator 迭代器.js
@@ -0,0 +1,33 @@
+let obj = {
+  a: 1,
+  b: 2
+}
+console.log(...obj) //Found non-callable @@iterator Object身上没有Symbol.iterator
+
+for(let v of obj) {
+  console.log(v) //同上都会报错
+}
+//Array身上天生具备Symbol.iterator
+let arr = [1,2,3,4];
+console.log([...arr]);//(4) [1, 2, 3, 4]
+//实现一个
+
+let obj2 = {
+  0: 'a',
+  1: 'b',
+  2: 'c',
+  length: 3,
+  [Symbol.iterator]: function() {
+    let index = 0
+    let next = () => {
+      return {
+        value: this[index],
+        done: this.length === index++
+      }
+    }
+    return {
+      next
+    }
+  }
+}
+console.log([...obj2])
diff --git a/json数据类型.js b/json数据类型.js
@@ -0,0 +1,30 @@
+// 两种特殊类型：数组(array)、对象(object)
+// 四种基础类型：字符串(string)、数字(number)、布尔型(boolean)、NULL值
+
+var obj = {
+  a: 1,
+  b:2,
+  c: {
+    cc: 20
+  },
+  d: [0,1,2],
+  f: undefined, //json中没有undefined 所以这个属性被忽略
+  e: null,
+  g: function(){}, //同理没有function
+  h: /cc/
+}
+
+var obj2 = obj
+
+obj2.a = 3
+obj.c.cc = 33
+console.log(obj, obj2)//{a: 3, b: 2, c: {cc:33} {a: 3, b: 2, c: {cc:33} 
+obj.d[0] = 9
+console.log(obj, obj2) //[9,1,2] [9,1,2] 
+
+var obj3 = JSON.parse(JSON.stringify(obj))
+obj3.a = 4
+obj3.c.cc = 44
+console.log(obj, obj3) //{a: 3, b: 2, c: {cc:33}} {a: 4, b: 2, c:{cc:44} }
+obj3.d[1] = 99
+// [9, 1, 2] [9, 99, 2]
diff --git a/vue/vue-router/demo01/index.html b/vue/vue-router/demo01/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>vue router</title>
+</head>
+
+<body>
+  <a href="#1">go1</a>
+  <a href="#2">go2</a>
+  <a href="#3">go3</a>
+  <a href="#4">go4</a>
+  <div id='app'>
+  </div>
+  <div id="div1" style="display: none;">这是第1个div</div>
+  <div id="div2" style="display: none;">这是第2个div</div>
+  <div id="div3" style="display: none;">这是第3个div</div>
+  <div id="div4" style="display: none;">这是第4个div</div>
+  <div id="div404" style="display: none;">404页面</div>
+  <script src="./index.js"></script>
+</body>
+
+</html>
diff --git a/vue/vue-router/demo01/index.js b/vue/vue-router/demo01/index.js
@@ -0,0 +1,32 @@
+// console.log(window.location.hash)
+let url = window.location.hash.substring(1)
+url = url || 1
+// console.log(url)
+let div = document.getElementById(`div${url}`)
+// console.log(div)
+const app = document.getElementById('app')
+console.log(app)
+if (div) {
+  app.appendChild(div)
+  div.style.display = 'block'
+} else {
+  div = document.getElementById('div404')
+  div.style.display = 'block'
+}
+
+window.addEventListener('hashchange', (e) => {
+  console.log('hash改变了')
+  url = window.location.hash.substring(1)
+  div = document.getElementById(`div${url}`)
+  // console.log(app.children)
+  if (div) {
+    let oldDIv = app.children[0]
+    oldDIv.style.display = 'none'
+    document.body.appendChild(oldDIv)
+    app.appendChild(div)
+    div.style.display = 'block'
+  }else {
+    div = document.getElementById('div404')
+    div.style.display = 'block'
+  }
+})
diff --git a/vue/vue-router/demo02/index.html b/vue/vue-router/demo02/index.html
@@ -0,0 +1,12 @@
+<!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 src="./index.js"></script>
+</body>
+</html>
diff --git a/vue/vue-router/demo02/index.js b/vue/vue-router/demo02/index.js
@@ -0,0 +1,3 @@
+window.addEventListener('popstate', () => {
+  console.log('xxx')
+})
diff --git a/可以改变词法作用域的方式.js b/可以改变词法作用域的方式.js
@@ -0,0 +1,33 @@
+function c() {
+  console.log(a)
+}
+var a = 'cc'
+c() // cc
+
+//eval
+
+function c() {
+  eval('var a = "dd"')
+  console.log(a)
+}
+var a = 'cc'
+c() //dd
+
+//with
+
+var o1 = {
+  a: 1
+}
+var o2 = {
+  b: 2
+}
+function c(obj) {
+  with(obj){
+    a:3
+  }
+}
+c(o1)
+console.log(o1.a)
+c(o2)
+console.log(o2.a)
+console.log(a)
diff --git a/实现一个简单的promise.js b/实现一个简单的promise.js
@@ -0,0 +1,41 @@
+// function ccPromise(cb) {
+//   var that = this
+//   that.onResolvedCallback = []
+//   function resolve(value) {
+//     setTimeout(() => {
+//       that.date = value
+//       that.onResolvedCallback.forEach(callback => callback(value))
+//     })
+//   }
+//   cb(resolve.bind(that))
+// }
+// ccPromise.prototype.then = function(onResolved) {
+//   var that = this
+//   return new ccPromise(resolve => {
+//     that.onResolvedCallback.push(function() {
+//       var result = onResolved(that.data)
+//       if(result instanceof ccPromise) {
+//         result.then(resolve)
+//       } else {
+//         resolve(result)
+//       }
+//     })
+//   })
+// }
+
+// new ccPromise(resolve => {
+//   setTimeout(() => {
+//     resolve(1)
+//   }, 500)
+// })
+//   .then(res => {
+//     console.log(res)
+//     return new ccPromise(resolve => {
+//       setTimeout(() => {
+//         resolve(2)
+//       }, 500)
+//     })
+//   })
+//   .then(console.log)
+
+//极简型