fengchuanyu 1 giorno fa
parent
commit
4254c306a4

+ 59 - 0
8_ES6/14_解构赋值.html

@@ -0,0 +1,59 @@
+<!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>
+        // let arr = ["hello","world","你好","世界"];
+        // let str1 = arr[0];
+        // let str2 = arr[1];
+        // let str3 = arr[2];
+        // 数组解构赋值 可以从数组中提取值,按照对应位置,对变量赋值。
+        // let [str1,str2,str3] = arr;
+        // console.log(str1,str2,str3);
+
+
+        // let obj = {
+        //     school:"清华大学",
+        //     age:18,
+        //     sex:"男",
+        //     name:"李四"
+        // }
+        // let name = obj.name;
+        // let age = obj.age;
+        // let sex = obj.sex;
+        // 对象解构赋值 可以从对象中提取值,按照对应属性,对变量赋值。
+        // 如果对象中没有该属性,就会使用默认值 如果有,就会使用对象中的值
+        // let {name="张三",age,sex} = obj;
+        // console.log(name,age,sex);
+
+        // 字符串结构
+        // let str = "hello";
+        // let [a,b,c,d,e] = str;
+        // console.log(a,b,c,d,e);
+
+
+
+        // 函数参数解构赋值
+        // function foo([a,b,c]){
+        //     console.log(a,b,c);
+        // }
+
+        // foo([1,2,3])
+
+        // function foo({a,b,c=4}){
+        //     console.log(a,b,c);
+        // }
+        // foo({a:1,b:2})
+
+        function foo(){
+            return {a:1,b:2,c:3}
+        }
+        let {a,b,c} = foo();
+        console.log(a,b,c);
+    </script>
+</body>
+</html>

+ 53 - 0
8_ES6/15_扩展运算符.html

@@ -0,0 +1,53 @@
+<!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. 数组的扩展运算符 可以把数组中的值逐一取出
+        let arr = [1,2,3,4,5];
+        console.log(...arr);
+        let arr2 = [6,7,8];
+        let arr3 = [...arr,"a",...arr2];
+        console.log(arr3);
+        // 2. 字符串的扩展运算符 可以把字符串中的值逐一取出
+        let str = "hello";
+        console.log(...str);
+        
+
+        // function foo(...arg){
+            // arguments 类数组对象 负责接收参数 
+            // 扩展运算符可以扩展类数组
+            // console.log(...arguments)
+
+        //     console.log(arg);
+        // }
+        // foo(1,2,3,4,5,6)
+
+
+        // 如果通过扩展运算接收后半部份不确定的参数 那么称为剩余运算符 剩余参数
+        // function foo(a,b,...arg){
+        //     console.log(a,b,arg);
+        // }
+        // foo(1,2,3,4,5,6)
+
+
+        // 扩展对象
+        let obj = {
+            name:"张三",
+            age:18,
+            sex:"男"
+        }
+        // let obj2 = obj;
+        let obj2 = {...obj,school:"清华大学"};
+        obj.name = "李四";
+        console.log(obj2);
+        
+        
+    </script>
+</body>
+</html>

+ 81 - 0
8_ES6/16_this.html

@@ -0,0 +1,81 @@
+<!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>
+    <div class="box">hello</div>
+    <script>
+        // this 指向事件绑定的元素 谁调用当前函数 就指向谁
+        // let box = document.querySelector(".box");
+        // box.onclick = function(){
+        //     console.log(this);
+        // }
+
+        // let obj = {
+        //     name:"张三",
+        //     age:18,
+        //     sex:"男",
+        //     say(){
+        //         console.log(this.name);
+        //     }
+        // }
+        // // 调用obj的say方法 指向obj
+        // obj.say();
+
+        // 调用say方法 指向window 对象 函数前没有加任何调用者 指向window
+        // function say(){
+        //     console.log(this);
+        // }
+        // say();
+
+        // let obj = {
+        //     name:"张三",
+        //     age:18,
+        //     sex:"男",
+        //     say(){
+        //         console.log(this);
+        //         function foo(){
+        //             console.log(this);
+        //         }
+        //         foo();
+        //     }
+        // }
+        // obj.say();
+
+        // window.setTimeout(function(){
+        //     console.log(this);
+        // },1000)
+
+        var name1 = "李四";
+        let obj = {
+            name1:"张三",
+            age:18,
+            sex:"男"
+        }
+        console.log(window.name1);
+        function say(a,b){
+            console.log(a,b,this.name1);
+        }
+        // 改变this指向 call( ) apply() bind()
+        // call() 方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的 this 指向 
+        // call() 第一个参数是this指向的对象,后面的参数是函数调用的参数
+        // say.call(obj,1,2);
+
+        // apply() 方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的 this 指向 
+        // apply() 第一个参数是this指向的对象,后面的参数是函数调用的参数 以数组的形式传递
+        // say.apply(obj,[3,4]);
+
+        // bind() 可以实现改变this的方法 
+        // 使用后并不会立即执行函数 需要手动调用
+        // bind的参数部分与call参数一致
+        let foo = say.bind(obj,1,2); 
+        // 手动调用
+        foo();
+        
+
+    </script>
+</body>
+</html>

+ 124 - 0
8_ES6/练习题3_this指向.html

@@ -0,0 +1,124 @@
+<!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>
+    //1、写出下列输出结果
+    var x = 10;
+    function test() {
+      var x = 20
+      console.log(this.x)
+    }
+    test()
+
+
+    //2、写出下列输出结果
+    var name = "window"
+    var obj = {
+      name: "obj",
+      func1: function () {
+        console.log(this.name);
+        (function () {
+          console.log(this.name)
+        })()
+      }
+    }
+    obj.func1()
+
+
+    //3、写出下列结果
+    var name = "the window";
+
+    var object = {
+      name: "My Object",
+      getName: function () {
+        return this.name;
+      }
+    }
+
+    console.log(object.getName());
+    console.log((object.getName)());
+    console.log((object.getName = object.getName)());
+
+    //4、下列代码中当div的点击事件触发时输出的结果是?
+    document.getElementById("div").onclick = function () {
+      console.log(this)
+    };
+
+
+    //5、请写出下列代码运行结果
+    var name = "window"
+    var obj = {
+      name: "obj"
+    }
+    setInterval(function () {
+      console.log(this.name)
+    }, 300)
+    setInterval(function () {
+      console.log(this.name)
+    }.call(obj), 300)
+
+    //6、请补全下列代码
+    function foo() {
+      //补全此处代码实现每隔一秒输出 hello world
+    }
+    window.setInterval(foo(), 1000);
+
+
+    // 7、补全下列代码实现 1+2+3+4
+    function add(c, d) {
+      return this.a + this.b + c + d;
+    }
+
+    /*
+      在此补全代码 以两种以上方法实现
+    */
+
+
+
+    //8、写出下列输出结果
+    function f() {
+      return this.a;
+    }
+
+    var g = f.bind({ a: "azerty" });
+    console.log(g());
+
+    var h = g.bind({ a: 'yoo' });
+    console.log(h());
+
+    var o = { a: 'loveCoding', f: f, g: g, h: h };
+    console.log(o.f(), o.g(), o.h());
+
+
+    //9、补全下列代码
+    var o = { prop: 'loveCoding' };
+
+    function independent() {
+      return this.prop;
+    }
+    //在此补全代码
+    console.log(o.f()); //  loveCoding
+
+    //10、用call 或 apply 实现bind 方法
+    function foo() {
+      console.log(this.a)
+    }
+    var obj = {
+      a: "hello"
+    }
+
+
+    var foo2 = foo.bind2(obj);
+    foo2()
+  </script>
+</body>
+
+</html>