Home Explore Help
Sign In
chuck
/
es6-11study
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

second commit

DESKTOP-MK04A0R\chuck 4 years ago
parent
988c6ebdf0
commit
9ffc114042
11 changed files with 295 additions and 0 deletions
Split View Show Diff Stats
  1. 1 0
      .gitignore
  2. 37 0
      01/index.html
  3. 25 0
      02/index.html
  4. 26 0
      03/index.html
  5. 29 0
      04/index.html
  6. 26 0
      05/index.html
  7. 25 0
      06/index.html
  8. 63 0
      07/index.html
  9. 42 0
      08/index.html
  10. 13 0
      README.md
  11. 8 0
      package.json

+ 1 - 0
.gitignore
View File 

@@ -1 +1,2 @@
 
 
+node_modules/

+ 37 - 0
01/index.html
View File 

@@ -0,0 +1,37 @@
 
+<!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>
 
+        //声明变量 不能重复
 
+        let a;
 
+        let b,c,d;
 
+        let e = 100;
 
+        let f = 521,g = 'hi', h = {};
 
+
 
+        //块级作用域
 
+        // if else while for
 
+        //{
 
+        //    let a = 'c';
 
+        //}
 
+
 
+        //不存在变量提升
 
+        //console.log(hello);
 
+        //let hello = 'a';
 
+
 
+        //不影响作用域链
 
+        {
 
+            let school = 'hi';
 
+            function aa(){
 
+                console.log(school)
 
+            }
 
+            aa();
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 25 - 0
02/index.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>
 
+        for(var i = 0;i<5;i++){
 
+            console.log(i);
 
+            setTimeout(function(){
 
+                console.log(i)
 
+            })
 
+        }
 
+       /*  for(let j = 0;j<5;j++){
 
+            console.log(j);
 
+            setTimeout(function(){
 
+                console.log(j)
 
+            })
 
+        } */
 
+    </script>
 
+</body>
 
+</html>

+ 26 - 0
03/index.html
View File 

@@ -0,0 +1,26 @@
 
+<!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 AAA = 'hihihi';
 
+        //必须有初始值
 
+        //不可重复定义
 
+        //一般常量使用大写
 
+        //常量值不可修改
 
+        //块级作用域
 
+        {
 
+            const BBB = 'hello';
 
+        }
 
+        //对于数组和对象的元素修改，不算对常量的修改，不会报错
 
+        const TEAM = ['a','b','c'];  //由于地址没有发生改变，不会报错，对象亦如此
 
+        TEAM.push('d');
 
+        console.log(TEAM);
 
+    </script>
 
+</body>
 
+</html>

+ 29 - 0
04/index.html
View File 

@@ -0,0 +1,29 @@
 
+<!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 F4 = ['zhao','qian','sun','li'];
 
+        let [zhao,qian,sun,li] = F4;
 
+        console.log(zhao,qian,sun,li);
 
+
 
+        //对象解构赋值
 
+        const F5 = {
 
+            name:'zhao',
 
+            age:25,
 
+            xiaopin:function(){
 
+                console.log('xiapin');
 
+            }
 
+        }
 
+        let {name,age,xiaopin} = F5;
 
+        console.log(name,age,xiaopin)
 
+        xiaopin();
 
+    </script>
 
+</body>
 
+</html>

+ 26 - 0
05/index.html
View File 

@@ -0,0 +1,26 @@
 
+<!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>
 
+        //模板字符串
 
+        let str = `zifuchuangjkfdjsfldkjfkla`;
 
+        
+        //内容中可以直接出现换行符
 
+        let str1 = '<ul><li>zhang</li><li>li</li></ul>';
 
+        let str2 = `<ul>
 
+                        <li>zhang</li>
 
+                        <li>li</li>
 
+                    </ul>`;
 
+        
+        //变量拼接
 
+        let str3 = 'zhao';
 
+        let str4 = `${str3}fjdksfjdksf`;
 
+    </script>
 
+</body>
 
+</html>

+ 25 - 0
06/index.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>es6对象简化写法</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        //允许大括号直接写入变量和函数，作为对象的属性和方法
 
+        let name = 'zhaobenshan'
 
+        let change =  function(){
 
+            console.log('owowoowowwoow')
 
+        }
 
+        const school = {
 
+            name,   //name:name
 
+            change,    //change:change
 
+            improve(){   //improve:function(){}
 
+                conso.log()     
+            }
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 63 - 0
07/index.html
View File 

@@ -0,0 +1,63 @@
 
+<!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>箭头函数</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        let fn = function(){
 
+
 
+        }
 
+
 
+        let fn = (a,b) =>{
 
+            return a+b;
 
+        }
 
+        //调用
 
+        let r = fn(3,4)
 
+        console.log(r)
 
+
 
+        //this是静态的，始终指向函数声明时所在的作用域下的this值
 
+            function getName(){
 
+                console.log(this.name)
 
+            }
 
+            let getName2 = () =>{
 
+                console.log(this.name)
 
+            }
 
+            window.name = 'zhangsan'
 
+            const school = {
 
+                name = 'lisi'
 
+            }
 
+            getName()  //zhangsan
 
+            getName2()  //zhangsan
 
+
 
+            //call
 
+            getName.call(school) //lisi
 
+            getName2.call(school)  //zhangsan   保持不变
 
+        //不能作为构造函数实例化对象
 
+            let Person = (name,age) =>{
 
+                this.name = name;
 
+                this.age = age;
 
+            }
 
+            let me = new Person('zhang',18)
 
+            console.log(me)   //报错
 
+        
+        //不能使用arguments变量
 
+        let fn = () =>{
 
+            console.log(arguments)  // not defined
 
+        }
 
+        fn()
 
+
 
+        //简写 
+            //省略小括号 当形参有且只有一个时
 
+            let add = n =>{
 
+                return n*n
 
+            }
 
+            //省略花括号 当代码只有一条语句时,return也必须省略
 
+            let pow = (n) => n*n
 
+            
+    </script>
 
+</body>
 
+</html>

+ 42 - 0
08/index.html
View File 

@@ -0,0 +1,42 @@
 
+<!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>箭头函数应用场景</title>
 
+</head>
 
+<body>
 
+    <div style="width:200px;height:200px;background:green;" id="box"></div>
 
+    <script>
 
+        // 点击div 2s后变颜色
 
+            let ad = document.getElementById("box");
 
+            ad.addEventListener('click',function(){
 
+                let that = this
 
+                setTimeout(function(){
 
+                    //this指window
 
+                    that.style.background = 'pink'
 
+                },2000)
 
+                //箭头
 
+                setTimeout(()=>{
 
+                    this.style.background = 'pink'
 
+                })
 
+            })
 
+        //从数组中返回偶数元素
 
+            const arr = [1,2,4,5,3,344]
 
+            const result = arr.filter(function(item){
 
+                if(item % 2 === 0){
 
+                    return true;
 
+                }else{
 
+                    return false;
 
+                }
 
+            })
 
+            //箭头
 
+            const result = arr.filter(item=>item%2 === 0)
 
+
 
+        //箭头函数适合与this无关的回调，定时器，数组的方法回调
 
+        //不适合与this有关的回调，不适合事件回调，对象的方法
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 13 - 0
README.md
View File 

@@ -0,0 +1,13 @@
 
+## 目录说明
 
+* 01 let、const特性、块级作用域
 
+* 02 let在循环语句中的应用
 
+* 03 const特点
 
+* 04 数组和对象解构赋值
 
+* 05 模板字符串
 
+* 06 es6对象简化写法
 
+* 07 箭头函数
 
+* 08 箭头函数应用场景
 
+
 
+## 运行说明
 
+    npm i
 
+    npm start

+ 8 - 0
package.json
View File 

@@ -0,0 +1,8 @@
 
+{
 
+  "scripts": {
 
+    "start": "http-server -a 127.0.0.1 -p 7070"
 
+  },
 
+  "devDependencies": {
 
+    "http-server": "^0.12.3"
 
+  }
 
+}