Startseite Erkunden Hilfe
Anmelden
lovecoding
/
W250913
10
0
Fork 0

3 Commits 08887aa961 ... 133fb97332

Autor SHA1 Nachricht Datum
  fengchuanyu 133fb97332 admin vor 1 Tag
  fengchuanyu 379a3bcda8 admin vor 1 Tag
  fengchuanyu 0d06ea0955 admin vor 1 Tag
9 geänderte Dateien mit 441 neuen und 7 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. BIN
      8_ES6.zip
  2. 13 7
      8_ES6/1_let&const.html
  3. 45 0
      8_ES6/2_闭包.html
  4. 44 0
      8_ES6/3_闭包应用.html
  5. 21 0
      8_ES6/4_块作用域.html
  6. 32 0
      8_ES6/5_基本&引用数据类型.html
  7. 65 0
      8_ES6/6_字符串扩展.html
  8. 78 0
      8_ES6/7_数值型扩展.html
  9. 143 0
      8_ES6/练习题1_讲解.html

BIN
8_ES6.zip
Datei anzeigen


+ 13 - 7
8_ES6/1_let&const.html
Datei anzeigen 

@@ -28,16 +28,22 @@
 
 
         // const 定义常量 不能重复定义 不能在定义前使用 必须先定义再使用
 
         
-        let a = 10;
 
-        a = 20;
 
-        a = "a";
 
-        console.log(a);
 
+        // let a = 10;
 
+        // a = 20;
 
+        // a = "a";
 
+        // console.log(a);
 
 
-        const b = 1;
 
-        b = 2;
 
-        console.log(b);
 
+        // const b = 1;
 
+        // b = 2;
 
+        // console.log(b);
 
 
 
+        var a = 10;
 
+        let b = "hello";
 
+        console.log(window.a);
 
+        console.log(window.b);
 
+        
+

+ 45 - 0
8_ES6/2_闭包.html
Datei anzeigen 

@@ -0,0 +1,45 @@
 
+<!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>
 
+        // 闭包 函数嵌套函数 内部函数可以使用外部函数的变量
 
+        // 闭包的作用 保护变量不被销毁
 
+        function foo(){
 
+            var a = 10;
 
+            function seta(num){
 
+                a += num;
 
+                return a;
 
+            }
 
+            return seta
 
+        }
 
+
 
+        // console.log(foo());
 
+        var foo2 = foo();
 
+        console.log(foo2);
 
+        var num1 = foo2(1);
 
+        console.log(num1);
 
+        var num2 = foo2(2);
 
+        console.log(num2);
 
+        // 每个函数调用都是一个新的作用域 每一个作用域下的闭包内部变量不互通
 
+        var foo3 = foo();
 
+        var num3 = foo3(3);
 
+        console.log(num3);
 
+
 
+
 
+
 
+        // function foo10(){
 
+        //     var a = 10;
 
+        //     console.log(a);
 
+        // }
 
+        // foo10();
 
+        // foo10();
 
+
 
+        
+    </script>
 
+</body>
 
+</html>

+ 44 - 0
8_ES6/3_闭包应用.html
Datei anzeigen 

@@ -0,0 +1,44 @@
 
+<!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>
 
+    <ul>
 
+        <li>a</li>
 
+        <li>b</li>
 
+        <li>c</li>
 
+        <li>d</li>
 
+    </ul>
 
+    <script>
 
+        var aLi = document.querySelectorAll("li");
 
+
 
+        // for(var i=0;i<aLi.length;i++){
 
+        //     aLi[i].index = i;
 
+        //     aLi[i].onclick = function(){
 
+        //         console.log(this.index);
 
+        //     }
 
+        // }
 
+
 
+        // for (var i = 0; i < aLi.length; i++) {
 
+        //     (function (num) {
 
+        //         aLi[i].onclick = function () {
 
+        //             console.log(num);
 
+        //         }
 
+        //     })(i)
 
+        // }
 
+
 
+
 
+         for(let i=0;i<aLi.length;i++){
 
+            aLi[i].onclick = function(){
 
+                console.log(i);
 
+            }
 
+        }
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 21 - 0
8_ES6/4_块作用域.html
Datei anzeigen 

@@ -0,0 +1,21 @@
 
+<!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>
 
+        // if(true){
 
+        //     var a = 10;
 
+        // }
 
+        // console.log(a);
 
+
 
+        if(true){
 
+            let a = 10;
 
+        }
 
+        console.log(a);
 
+    </script>
 
+</body>
 
+</html>

+ 32 - 0
8_ES6/5_基本&引用数据类型.html
Datei anzeigen 

@@ -0,0 +1,32 @@
 
+<!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>
 
+        // var a = 10;
 
+        // var b = a;
 
+        // a = 20
 
+        // console.log(b);
 
+
 
+        // 数组和对象都是引用数据类型
 
+        // 基本数组类型变量名和值都存储在栈内存中
 
+        // 引用数组类型变量名存储在栈内存中值的部分为引用 值存储在堆内存中
 
+        var arr = [1,2,3];
 
+        var arr2 = arr;
 
+        arr[0] = "hello";
 
+        console.log(arr2);
 
+
 
+        var obj = {
 
+            name:"张三",
 
+            age:18
 
+        }
 
+        var obj1 = obj;
 
+        obj.name = "李四";
 
+        console.log(obj1);
 
+    </script>
 
+</body>
 
+</html>

+ 65 - 0
8_ES6/6_字符串扩展.html
Datei anzeigen 

@@ -0,0 +1,65 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .active {
 
+            color: red;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="box"></div>
 
+    <script>
 
+
 
+        var oBox = document.querySelector(".box");
 
+
 
+        // var oH1 = document.createElement("h1");
 
+        // oH1.classList.add("active");
 
+        // oH1.innerHTML = "hello world";
 
+        // oBox.append(oH1);
 
+        // var str = "hello world";
 
+        // oBox.innerHTML = "<h1 class='active'>"+str+"</h1>";
 
+        // oBox.innerHTML = `<h1 class="active">
 
+        // ${str}
 
+        //     </h1>`
 
+
 
+        // 模板字符串 `` 
+        // 1. 可以换行
 
+        // 2. 可以在字符串中使用变量 ${变量名}
 
+        // 3. 内部不区分单引号和双引号
 
+
 
+        let str = "username=张三;";
 
+        let str2 = "hello";
 
+        let str3 = "   world ";
 
+        // startsWith 检查字符串是否以指定的字符串开头
 
+        // console.log(str.startsWith("username"));
 
+        // endsWith 检查字符串是否以指定的字符串结尾
 
+        // console.log(str.endsWith(";"));
 
+        // repeat 重复字符串指定次数
 
+        // console.log(str.repeat(2));
 
+
 
+        // padStart 字符串补全指定长度 从左侧开始补全
 
+        // console.log(str2.padStart(10,"*"));
 
+        // padEnd 字符串补全指定长度 从右侧开始补全
 
+        // console.log(str2.padEnd(10,"*"));
 
+
 
+        console.log(str3);
 
+
 
+        // trim 去除字符串首尾空格
 
+        // console.log(str3.trim());
 
+        //trimStart 去除字符串左侧空格
 
+        // console.log(str3.trimStart());
 
+        // trimEnd 去除字符串右侧空格
 
+        // console.log(str3.trimEnd());
 
+
 
+        console.log(str2.at(0));
 
+
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 78 - 0
8_ES6/7_数值型扩展.html
Datei anzeigen 

@@ -0,0 +1,78 @@
 
+<!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>
 
+        // 二进制 0b开头
 
+        // let a = 0b1010;
 
+        // 八进制 0o开头
 
+        // let b = 0o123;
 
+        // 十六进制 0x开头
 
+        // let c = 0x123;
 
+
 
+        // NaN 不是一个数字
 
+        // 只要是数值型运算 除了加法以外 有参与运算的数不是数值型则返回一个NaN
 
+        // let num1 =  10;
 
+        // console.log(num1 * "a");
 
+        // console.log(Number.isNaN(num1 * "a"));
 
+
 
+        // parseInt() 可以将字符串转换为整数
 
+        // parseFloat() 可以将字符串转换为浮点数(小数)
 
+        // var num2 = "123";
 
+        // var num3 = "123.456";
 
+        // 隐式类型转换
 
+        // num2 *= 1;
 
+        // 显示类型转换
 
+        // num2 = parseInt(num2);
 
+        // console.log(num2+1);
 
+        // num3 = window.parseFloat(num3);
 
+        // num3 = parseInt(num3);
 
+        // console.log(num3+1);
 
+        // es6新增 Number.parseInt() 可以将字符串转换为整数
 
+        // es6新增 Number.parseFloat() 可以将字符串转换为浮点数(小数)
 
+        // 把window下一些方法和属性平移到某一些对象下
 
+        // var num2 = 123;
 
+        // var num3 = 123.456;
 
+        // isInteger() 可以判断一个数是否是整数
 
+        // console.log(Number.isInteger(num2));
 
+        // console.log(Number.isInteger(num3));
 
+
 
+        // MAX_SAFE_INTEGER 最大安全整数 2的53次方减1
 
+        // MIN_SAFE_INTEGER 最小安全整数 -2的53次方加1
 
+        // console.log(Number.MAX_SAFE_INTEGER);
 
+        // console.log(Number.MIN_SAFE_INTEGER);
 
+        
+        // isSafeInteger() 可以判断一个数是否是安全整数
 
+        // console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER+10));
 
+        // console.log(Number.isSafeInteger(Number.MIN_SAFE_INTEGER-10));
 
+        
+        // BigInt 大整数 可以表示超过安全整数范围的整数 es6中新增一个基本数据类型
 
+        let num1 = 100;
 
+        let big1 = 100n;// 直接在数字后面添加n可以定制bigint类型
 
+        let big2 = BigInt(111);//通过BigInt()函数定义数字为大整数
 
+        console.log(big1);
 
+        console.log(big2);
 
+        
+        // typeof 可以判断一个变量的数据类型 只能判断基本数据类型
 
+        console.log( typeof big1);
 
+        console.log(typeof num1);
 
+        // 大整数不能和普通整数进行运算
 
+        // console.log(num1+big1);
 
+        console.log(big1+big2);
 
+        // 大整数运算出现小数部分则省略小数部分
 
+        console.log(big2/big1);
 
+        
+        
+        
+        
+        
+        
+        
+
 
+    </script>
 
+</body>
 
+</html>

+ 143 - 0
8_ES6/练习题1_讲解.html
Datei anzeigen 

@@ -0,0 +1,143 @@
 
+<!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>
 
+        // 第一题
 
+        // var n = 13;
 
+        // function fn(n) {
 
+        //     alert(n);//13
 
+        //     n = 14;
 
+        //     alert(n);//14
 
+        // }
 
+        // fn(n);
 
+        // alert(n);//13
 
+
 
+
 
+        // var n = 13;
 
+        // function fn(n) {
 
+        //    console.log(n);
 
+        //    var n = 6;
 
+        //    console.log(n);
 
+        // }
 
+        // fn(5);
 
+
 
+        // var x = 13;
 
+        // function fn(n) {
 
+        //     console.log(n);
 
+        //     x = 6;
 
+        //     console.log(x);
 
+
 
+        // }
 
+        // console.log(x);
 
+        // fn(5);
 
+        // console.log(x);
 
+
 
+
 
+        // 第二题
 
+        // 作用域链 当发现有变量调用的时候 先从当前作用域查找 如果没在上一层作用域查找 如果还没有再向上一层逐层查找
 
+        // var n = 0;
 
+        // function a() {
 
+        //     var n = 10;
 
+        //     function b() {
 
+        //         n++;
 
+        //         alert(n);
 
+        //     }
 
+        //     b();
 
+        // }
 
+        // a();
 
+        // alert(n);
 
+
 
+
 
+        // 第三题
 
+        // console.log(num, str);//undefined undefined
 
+        // var num = 18;
 
+        // var str = "lily";
 
+        // function fn2() {
 
+        //     console.log(str, num);//lily undefined
 
+        //     num = 19;
 
+        //     str = "candy";
 
+        //     var num = 14;
 
+        //     console.log(str, num);//candy 14
 
+        // }
 
+        // fn2();
 
+        // console.log(str, num);//candy 18
 
+
 
+
 
+        // 第四题
 
+        // fn();//2
 
+        // function fn() { console.log(1) };
 
+        // fn();//2
 
+        // var fn = 13;
 
+        // fn();//报错 因为fn已经被赋值为13了 所以不是函数了
 
+        // function fn() { console.log(2) };
 
+        // fn();//报错 因为fn已经被赋值为13了 所以不是函数了
 
+
 
+        // 第五题
 
+        // (function f() {
 
+        //     function f() { console.log(1) };
 
+        //     f();
 
+        //     function f() { console.log(2) };
 
+        // })();
 
+
 
+        // var foo = function(){
 
+        //     console.log("hello");
 
+        // }
 
+        // foo();
 
+        // 立即执行函数
 
+        // (function(){
 
+        //     console.log("hello");
 
+        // })()
 
+
 
+
 
+        // 第六题
 
+        // var a;
 
+        // console.log(window.a);
 
+        // if (!("a" in window)) {
 
+        //     var a = 10;
 
+        // }
 
+        // alert(a);
 
+        // 函数提升 在大括号中 函数声明会被提升到作用域的顶部不包含函数体
 
+        // console.log(fn);
 
+        // if (8 == 8) {
 
+        //     function fn() {
 
+        //         alert(2);
 
+        //     }
 
+        // }
 
+
 
+        // var a = 10;
 
+        // console.log(window.a);
 
+        
+
 
+
 
+        // in 运算符 可以判断一个属性是否在对象中
 
+        // 如果在返回true 不在返回false
 
+        // var obj = {
 
+        //     a:1,
 
+        //     b:2
 
+        // }
 
+        // console.log("c" in obj);
 
+
 
+
 
+         // 第七题
 
+        function fn() {
 
+            var i = 5;
 
+            return function (n) {
 
+                console.log(n * i++);
 
+            }
 
+        }
 
+        var f = fn();
 
+        f(4);
 
+        fn()(5);
 
+        f(6);
 
+        
+    </script>
 
+</body>
 
+
 
+</html>