01_变量

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    
    <script type="text/javascript">
        var n = Number.MAX_VALUE  // 数字最大值
        console.log(n)
        
        var age = 18
        console.log(`我今年${age}岁了`)
        
        console.log(Myname)
        var Myname
        console.log(addr)
        
        // 变量使用 var 关键字 声明
        // 注意由于13行变量提升的存在, 所以第12行不会报错,只是打印了undefined
    </script>
</html>

02_变量类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var name = 'zs'
        var age = 19
        var lover = ['小芳','小兰']  // typeof 无法正确检测array的类型,会统一返回 object,如果检测可以使用Array.isArray
        var u  // 这个变量只声明但是并没有保存变量
        console.log(typeof name,name)
        console.log(typeof age,age)
        console.log(typeof lover,Array.isArray(lover), lover instanceof Array)
        console.log(typeof u,u)
        console.log(typeof a,a)  // 没有赋值也没有声明,直接报错
        
        // 用来判断一个变量是否为数组可以使用 Array.isArray(lover), 或者 lover instanceof Array来判断该变量是否为数组对象
    </script>
</html>conso

03_ isNaN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        console.log(isNaN('hello'))  // is_NaN用来判断是否为非数字类型,如果是数字返回false,如果是非数字则返回true
        console.log(isNaN(1))
        
        // !! 注意对于空数组和只有一个数值成员的数组 isNaN也返回false
        console.log(isNaN([])) // false
        console.log(isNaN([123])) // false
        console.log(isNaN(['123'])) // false
        
        // NaN 不等于自身
        console.log('is_NaN 不等于自身', NaN == NaN)
        
    </script>
</html>

04_Boolean

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        console.log(true + 1)  // bool值在和数字相加的时候 true的值为1,false的值为0
        console.log(false + 1)
    </script>
</html>

05_数据类型转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        height = 184
        console.log(height.toString())  // 使用字符串的方法 toString可以强制转换该字符为字符串
        console.log(String(height))  // 使用函数 String 可以强制转换该字符为字符串
        console.log(height + '厘米')  // 字符串相加即可转换类型
        
        age = '18.9岁'
        console.log(parseInt(age))  // parseInt 会强制去掉字符串的的非数字字符并转为int类型数字
        rem = 'rem120px'
        console.log(parseInt(rem))  // parseInt如果第一个字符是非数字类型则无法转换
        console.log(parseFloat(age))  // parseFloat转换字符为float类型
        console.log(Number('2233'),Number('2233哈哈哈'))  // 使用Number转换一些纯数字字符串
        
        console.log(Boolean(1))  // 使用Boolean转换布尔值
        console.log(Boolean(0))
    </script>
</html>

06_前置递增/后置递增

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var num = 10
        num++ 
        console.log(num)
        ++num
        console.log(num )
        
        //  自增也是一个表达式
        // 1. 前置自增和后置自增如果单独使用,效果是一样的
        // 2. 后置自增: 先返回原值, 后自增 +1 , 前置反之,先自增 +1 再返回新值
        
        var num = 10
        console.log(num++ + 10)  // 后置自增先返回原值的10,返回到上层 + 10 所以结果是20
        console.log(num)  // 输出为 11 由于上方的自增表达式修改了num的值
        
        var num = 10
        console.log(++num + 10)  
        
        var e = 100
        console.log(e++ + ++e)  // e++是100  ++e是102(101+1) 所以返回202
        
        
    </script>
</html>

07_switch和if分支判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>


    let num="6";
    switch(num){
        case 7:
            alert("数字等于7");
        case "6":
            alert("数字等于6");
        case 5:
            alert("数字等于5");
            break
        case 4:
            alert("数字等于4");

    }
    // case 后面跟表达式,表达式的返回比去 "全等" 才可以达成条件
    // 一个值匹配成功后,如果没有break 那么下边的case不判断,直接执行
    
    // 当分支较少时 if...else语句的执行效率比switch语句要高
    // 当分支比较多是 switch语句的执行效率比较高,且结构清晰
</script>

</body>
</html>

08_循环for

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        for(var i=0;i<100;i++){
            console.log('2233')
        }
        
        let names = ['小明','小花']
        for(let i of names){
            console.log(i)
        }
        
        // for(初始化变量;条件表达式;操作表达式){
        //     循环体
        // }
        
        // 初始化变量: 就是用 var 声明的普通变量,通常作为计数器使用
        // 条件表达式: 就是循环执行的条件
        // 操作表达式: 每次循环最后执行的变量, 常用于更新初始化变量
        // 循环体: 循环的内部代码
    </script>
</html>

09_循环while

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        i = 1
        while (i <= 10) {
            console.log(i)
            i++ // 操作表达式
        }

        c = 1
        do {
            console.log(c)
            c++
        } while (c <= 10) {
        }
    
        // while 循环中也应该有操作表达式来改变初始化变量
        // do while 和 while不同的是 do while是先执行代码体然后再判断是否继续执行,while则是先判断是否满足执行条件
    </script>
</html>

10_array

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        arr = ['小明','小花']
        arr.length = 5  // 可以直接修改 array 的 length 来改变 array 的长度
        console.log(arr)
        console.log(arr[3])  // 强行修改的长度是没有值的 默认是 undefined
        
        arr = ['小明','小花']
        arr[4] = '小芳'  // 通过下标也可以直接增加元素
        console.log(arr)
        
        arr = []
        for (var i = 0; i < 10; i++){
            arr[i] = i
        }
        console.log(arr)
    </script>
</html>

11_函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    
    <script type="text/javascript">
        var func1 = function(num){
            var c = 0
            for (var i = 0; i <= num; i++) {
                c+=i
            }
            console.log(c)
        }
        func1(100)
        
        function func1(num){
            
        }
        
        // 声明函数的方式
        // function 函数名(形参1,形参2,形参3, ...){
        //     函数体
        // }
        
        // 匿名函数的声明方式
        // var 函数名 = function(形参1,形参2,形参3, ...){
            函数体
        // }
    </script>
</html>

12_函数的参数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var func = function(num1,num2){
            console.log(num1 + num2)
        }
        
        func(1)  // 如果没有传递正确数量的参数,则没传递的参数默认为 undefined
        func(1,2)
        func(1,2,3)
        
    </script>
</html>

13_函数的返回

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var func1 = function(num1,num2){
            return num1,num2
        }
        console.log(func1(1,2))  // 函数默认只能返回一个值,返回的结果是最后一个值
        
        function func2(){
        }
        console.log(func2())  // 如果函数没有返回值,则默认返回undefined
    </script>
</html>

14_函数收集参数arguments

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var func = function(){
            console.log(arguments.length)
            console.log(arguments)
            console.log(arguments[0])
        }
        
        // arguments 是当前函数的内置对象,所有函数都内置了, arguments对象中存储了所有传递进来的实参
        // arguments 是一个伪数组
        func('小明','小花','小芳')  
        
    </script>
</html>

15_函数的相互调用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var func1 = function(){
            console.log('func1')
            func2()  // 在函数中可以调用其他的函数
        }
        var func2 = function(){
            console.log('func2')
            // func1()  // 小心重复调用
        }
        func1()
    </script>
</html>

16_作用域和变量

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 在es6之前,变量一共分为两个作用域: 全局作用域. 局部作用域(写在函数内)
        var name = '小明'
        function func1(){
            var name = '小花'
            console.log(name)
            
            age = 15  // 没有声明直接赋值属于全局变量
        }
        
        func1()
        console.log(name)  // 打印了全局作用域的name
        console.log(age)  // 在函数内没有声明直接赋值的也归属于全局变量
        
    </script>
</html>

17_作用域链

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var a = 100
        function F1() {
            var b = 200
            function F2() {
                var c = 300
                console.log(a) // 自由变量,顺作用域链向父作用域找
                console.log(b) // 自由变量,顺作用域链向父作用域找
                console.log(c) // 本作用域的变量
            }
            F2()
        }
        F1()
        
        

                        

    </script>
</html>

18_预解析

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        
        console.log(num)  // 打印 undefined 是因为预解析了(num的变量在最上面,但是还没有赋值)
        var num = 10  // 到这一步才开始赋值
        
        // 上面的两行代码预解析为下面的过程
        // var num
        // console.log(num)
        // num = 10
        
    
        fn1()  // 先调用,后声明
        function fn1(){
            console.log('fn1')
        }
        
        fn2()  
        var fn2 = function(){
            console.log('fn2')
        }
        // 匿名函数是无法进行预解析的,直接报错,上面的三行代码预解析为下面的过程
        // var fn2
        // fn2()  fn2是不可以调用的因为fn2在这时只是一个变量
        // fn2=function(){}
        
        
        
        // 1. js引擎运行js代码分为两步: 预解析后代码执行
            // (1). 预解析: js引擎会把代码中的 var 和 function 提升到当前作用域的最前面
            // (2). 代码执行: 按照代码书写的顺序从上往下执行
        // 2. 预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
            // (1). 变量预解析: 就是把所有的变量声明提升到当前的作用域最前面,但是不进行赋值操作
    </script>
</html>

19_预解析案例01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var num = 20
        func()  // 执行
        function func(){
            console.log(num)
            var num = 10
        }
        
        // 上面的代码相当于执行了下面的操作
        // var num
        // function func(){
        //     console.log(num)
        //     var num = 10
        // }
        // num = 20
        // func()  -->  function func(){
        //         -->        var num
        //         -->        console.log(num)  // 所以这行代码打印的是undefined
        //         -->        var num = 10
        //         -->        }
        
    </script>
</html>

20_预解析案例02

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
    </body>
    <script type="text/javascript">
        function func(){
            var a = b = c = 9  // 相当于 var a = 9 ; b = 9; c = 9 由于b和c是直接赋值所以变成了全局变量
            console.log(a)
            console.log(b)
            console.log(c)
        }
        func()
        console.log(c)  // 由于b和c变成了全局变量所以可以打印出来
        console.log(b)
        console.log(a)
    </script>
</html>

21_对象及创建

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // var obj = {}  // 创建了一个空对象
        // this 的指向此时为全局对象,  谁调用方法中的this就指向谁,类似Python中的self
        // 对象可以使用 . 来点出来属性,也可以类似Python中字典的方式取出相应的属性
        
        var obj = {  // 创建了一个有值的对象
            name:'小明',
            age:19,
            say:function(){
                console.log(`我叫${this.name},今年${this.age}岁了`)
            }
        }
        
        var stu = new Object({  // 使用 new方法 创建一个对象
            age:22
        })
        stu.name = '张三'
        console.log(stu.name)
        console.log(stu['age'])

        
        
        obj.say()  // 调用对象的方法

    </script>
</html>

22_对象new和构造函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 有时候需要创建的对象中有相同的属性,比如都有名字,性别,和年龄 就类似Python中的类,创建对象就是实例化这个类
        // new 构造函数可以在内存中创建一个空对象,this就会指向创建的实例,执行构造函数里面的代码就给这个空对象添加了属性和方法
        
        // 构造函数的语法格式:
        // function 函数名(){
        //     this.name
        //     this.age
        //     this.sex
        // }
        
        
        
        function Student(name,age,sex){  // 创建一个构造函数
            this.name = name
            this.age = age
            this.sex = sex
            this.say = function(){
                console.log(this)  // 打印this 就打印出来了实例对象
                console.log(`我叫${this.name},今年${this.age},性别${this.sex}`)
            }
        }
        
        var stu1 = new Student('小明',18,'男')  // 实例化
        
        console.log(stu1.name)
        
        
        stu1.say()
        
        
        // 这里创建一个 对象方法的引用 到外部, 在调用的时候 say() 等同于 window.say()
        var name = 'window_name'
        let say = stu1.say;
        say()
        
        
        
    </script>
</html>

23_遍历对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var stu = {
            name:"张三",
            age:18
        }
        
        for (var k in stu) {
            console.log(k,stu[k])
        }
    </script>
</html>

24_简单数据类型/复杂数据类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 简单数据类型: 数据存放在栈中 string number boolean undefined null,内存中存放的是具体的值,类似Py中的不可变对象
        // 简单数据类型 null, 是一个对象, 如果有个变量打算存储为对象暂时没有想好存啥可以用null
        var t = null
        console.log(typeof t)
        
        // 复杂数据类型: 数据存放在堆中 引用类型,在栈中存的仅仅是真实数据在堆中的内存地址,而不是具体的值,类似Py中的可变对象
        // 通过new关键字创建的对象(系统对象,自定义对象),如Object Array Date 等
        
        function Student(name){
            this.name = name
        }
        
        function change_name(stu){
            stu.name = '2020新生--' + stu.name
        }
        
        小明 = new Student('小明')
        console.log(小明.name)
        
        change_name(小明)  // 调用了函数, 
        
        console.log(小明.name)
        
        
    </script>
</html>

25_对象方法keys

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
         类似python中的keys  返回字典对象所有的属性名字
         -->
        <script type="text/javascript">
            var obj = {
                name: '小明',
                age: 18
            };
            
            console.log(Object.keys(obj))
        </script>
    </body>
</html>

26_数组方法indexof

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // indexOf 方法接收一个参数,会找到该参数在array中位置的第一个元素的下标并返回
        // lastIndexOf 方法会从后往前寻找对应参数的下标
        // 如果没有找到匹配的参数则返回 -1
        
        
        li = ['zh','ls','ww','ls']
        
        idx = li.indexOf('ls')
        console.log(idx)
        
        idx = li.lastIndexOf('ls')
        console.log(idx)
        
        idx = li.indexOf('小明')
        console.log(idx)
    </script>
</html>

27_数组方法filter

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
         filter 返回一个新的数组,根据过滤条件
         -->
        <script type="text/javascript">
            var arr = [2333, 1123, 214, 754]
            var new_arr = arr.filter(function(value,idx,arr){
                if (value > 1000) {
                    console.log('发现了符合条件的元素:',value)
                    return value
                }
            })
            console.log(new_arr)
        </script>
    </body>
</html>

28_数组方法foreach

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
         foreach 循环遍历数组中的每个元素传入回调函数内 类似Python中的 for i in li:pass
         -->

        <script type="text/javascript">
            var arr = [2333, 1123, 214, 754]
            arr.forEach(function(value, idx, arr) {
                console.log('数组的元素:', value, ',数组的索引:', idx, ',数组本身:', arr)
            })
        </script>
    </body>
</html>

29_数组方法push/pop

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // push 方法会在array末尾追加元素
        // unshift 方法会在arry头部添加元素
        // pop 会弹出array末尾的最后一个元素
        
        let li = [1,2]
        
        li.unshift('a')
        
        li.push(3,4,5,6)
        console.log(li)
        
        li.pop()
        console.log(li)
    </script>
</html>

30_数组方法reverse/sort

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // reverse 方法会让array本身发生反转
        // sort 方法会让array从小到大排序(冒泡排序),注意本身sort方法会有bug(会按照Unicode位置进行排序)
        
        
        let li = [1,5,12,65,2]
        
        li.reverse()
        console.log(li)
        
        li.sort()  // 会有bug
        console.log(li)
        
        li.sort((a,b)=>b-a)  // 需要传入回调函数  a-b:升序, b-a降序
        console.log(li)
        
    </script>
</html>

31_数组方法some

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
         用来检测数组中是否有符合条件的元素,并返回布尔值
         -->
        
        <script type="text/javascript">
            var arr = [2333, 1123, 214, 754]
            var ret = arr.some(function(value,idx,arr){
                return value > 2000
            })
            console.log(ret)
        </script>
    </body>
</html>

32_字符串方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // trim 返回一个消除了字符串两端空白字符的新字符串
        var str = '    a  b   c     '
        console.log(str.trim())
        
        // concat  用来拼装两个字符串
        var str = 'green'
        console.log(str.concat('red'))
        
        // substr(开始下标,截取长度) 用来截取字符串
        var str = 'abcdefg'
        console.log(str.substr(2,3))
        
        // replace(被替换的字符串,替换后的字符串) 替换字符串
        var str = 'aabbcc'
        console.log(str.replace('cc','aa'))
        
        // split(分隔符)  从分隔符的地方切开转为array
        var str = 'a-b-c'
        console.log(str.split('-'))
        
        
        
    </script>
</html>

33_异常处理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    
    <script>
        console.log(123)
        try{
            console.log(a)  // 这里使用一个未定义的变量
        }catch(e){
            //TODO handle the exception
            console.log(`出错了; ${e}`)
        }finally{
            console.log('finally 是最后会执行的')
        }
        
        try{
            throw new Error("自己抛出的错误")
        }catch(e){
            //TODO handle the exception
            console.log(`出错了; ${e}`)
        }
        
        
        
        
    </script>
    
</html>

34_类的定义

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
         1. 在创建类时,类中的 constructor 是在类初始化 new 时自动调用的方法,类似init
         2. constructor 如果不写这个函数,类也会自动生成这个函数
         3. this
         4. 实例化时 new 不能省略,因为需要进行初始化
         5. 类是没有预解析 进行变量提升的
         -->
        <script type="text/javascript">
            // 创建一个学生类
            class stu {
                constructor(args) {
                    this.name = args
                    this.flag = '22333'
                }
                say(args) {
                    console.log('hello 我是', this.name, args, '岁了')
                }
            }

            // 实例化两个对象
            var xiaoming = new stu('小明')
            var xiaohua = new stu('小花')

            // 打印两个对象的属性
            console.log(xiaohua.name)
            console.log(xiaoming.name)

            // 调用对象中的方法
            xiaohua.say(18)
            xiaoming.say(15)
            
            // 打印继承过来的属性
            console.log(xiaohua.flag)
            
            console.dir(xiaohua)
        </script>
    </body>
</html>

35_类的继承

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <script type="text/javascript">
            // 1. 继承需要使用 extends 语法
            // 2. 继承会自动继承类的 init 方法不会使用自己的
            // 3. super() 会调用父类中的构造方法,且子类想覆盖父类的方法 需要把super
            // 4. 写在子类的构造函数内的上方
            // 5. super 代表的是父类,可以使用super调用父类的方法
            class Father {
                constructor(x, y) {
                    this.x = x
                    this.y = y
                }
                money() {
                    console.log(this.x + this.y)
                }
                say(){
                    console.log('Father--')
                }

            }

            class Son extends Father {
                constructor(x, y) {
                    super(x, y)  // 需要先执行父类的构造方法
                    this.x = x
                    this.y = y
                }
                
                say(){
                    super.say()
                }
                money (){
                    console.log(this.x - this.y)
                }
            }
            var son = new Son(1, 2)
            var son_1 = new Son(1, 3)
            son.money()
            son_1.money()
            
            // son.sum(2,5)
            
            son.say()
        </script>
    </body>
</html>

36_let关键字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <!-- 
         let 是用来声明一个块级作用域(if for)的变量的,声明的变量只能在当前域中使用,  和var不同的是 var声明的变量是可以在外部使用的
         使用 let 防止循环中的变量 污染外部变量
         使用 let 声明的变量,只能先声明,再使用,没有变量提升
         使用 let 声明的变量会有 暂时性死区
         使用 let 声明的变量可以不需要初始值  let name;
         暂时性死区: 只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。
         -->

        <script type="text/javascript">
            // // 使用 var 声明的变量
            // if (true) {
            //     var age = 19
            // }
            // console.log(age)  // 可以打印得到

            // // 使用 let 声明的变量
            // if (true) {
            //     let name = '小明'
            //     if (true) {
            //         let gender = 'man'
            //     }
            //     console.log(gender)  // 访问不到
            // }
            // console.log(name)  // 访问不到
            
            
            // // 暂时性死区
            // var num = 100
            // if(true){
            //     console.log(num)
            //     let num = 20
            // }
            
            
            // 由于下面使用了 var 定义了 i ,而且没有立即执行函数,而是,所以 下面执行的代码 打印了全局变量中的i
            var arr = []
            for (var i = 0; i < 2; i++) {
                arr[i] = function(){
                    console.log(i)
                }
            }
            arr[0]()
            i = 3  // 修改了一下全局作用域中的 i 值, 可以观察得到内部的函数执行的时候调用的是外部的 i 值
            arr[1]()
            
            
            console.log('下面使用 let 声明:')
            var arr = []
            for (let i = 0; i < 2; i++) {
                arr[i] = function(){
                    console.log(i)
                }
            }
            arr[0]()
            i = 3  // 修改 i 的值 也不会影响函数内部的调用
            arr[1]()
            
        </script>
    </body>
</html>

37_const关键字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <script type="text/javascript">
            // 1. const 声明的变量也具有块级作用域的特点
            // 2. 使用 const 声明的变量必须要有值
            // 3. 使用 const 声明的变量 不能进行修改
            
            
            // if (true) {
            //     const age = 18
            //     if (true) {
            //         const age = 20
            //     }
            //     console.log(age)
            // }
            // console.log(age)
            
            // 必须要有初始值
            // const name
            
            // // 声明的变量不能更改
            // const age = 18
            // age = 20
            // // 如果声明的是一个列表等 类似 python 中的可变对象,那对象内部是可以更改数值的
            // const name = ['xiaoming','huahua']
            // name[0] = 'daniu'
            // console.log(name)
            
            
        </script>
    </body>
</html>

38_Promise基本使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>

    <script type="text/javascript">
        // 1. Promise 是一个构造函数,可以通过 new 创建一个 Promise 实例
        // 2. Promise new的时候可以指定需要执行的异步操作,并且 立即执行 这个异步操作
        // 3. Promise 的原型对象 prototype 身上有一个 then 方法,用来预先为这个Promise指定分别叫做 resolve(成功之后的回调函数必须传) 和 reject(失败的回调函数可以不传)
        // 4. Promise 表示一个异步操作,每当 new 一个实例,这个实例就表示一个具体的异步操作
        // 5. 由于Promise 是一个异步操作, 所以内部拿到执行的成功和结果后,无法把结果return出去,这时候使用回调函数进行返回
        // 6. 在本身的Promise实例成功的回调函数上可以返回一个新的 Promise 对象 在外面继续 .then() 详情见下案例

        console.dir(Promise)
        // 7. 在Promise还有一些对象方法
        // 7.1 Promise.all(),并发处理多个异步任务,所有异步任务执行完毕才能得到结果
        // 7.2 Promise.rece(), 并发处理多个异步任务,只要有一个任务完成就能得到结果


        // // new一个Promise方法,并指定一个异步操作,每次new都会立即执行这个异步操作
        // var promise = new Promise(function() {
        // console.log('开始执行异步操作')
        //     setTimeout(function() {
        //         console.log('执行成功')
        //     }, 1000)
        // })

        // // 有时候我们不想new出一个 Promise 实例后立即执行这个异步操作,可以给这个Promise封装一层函数
        // // 使其函数执行时才调用 Promise
        // let func = function(){
        //     let promise = new Promise(function(){
        //         console.log('开始执行异步操作')
        //         setTimeout(function() {
        //             console.log('执行完毕')
        //         }, 1000);
        //     })
        //     return promise
        // }
        // func()


        let func = function() {
            // 将异步操作的实例 return 到外部,用于外部设置 promise实例的.then 方法中的成功和失败的回调
            return new Promise(function(resolve, reject) {
                
                // 模拟一个耗时操作
                for (var i = 0; i < 599999999; i++) {
                    continue
                }
                let flag = 1
                // 判断是否执行成功
                if (flag == 0) { // 如果成功执行成功的回调函数
                    resolve(flag)
                }else{
                    reject(flag) // 如果失败执行失败的回调函数
                }
            })
        }

        // 指定成功和失败的回调
        func().then(function(flag) {
            console.log('成功了', flag)
        }, function(flag) {
            console.log('失败了', flag)
        })
    </script>
</html>

39_Promise解决回调地狱

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        function func(flag) {
            // 将异步操作的Promise实例 return 到外部,用于外部设置 Promise实例的.then 方法中的成功和失败的回调
            return new Promise(function(resolve, reject) {

                // 模拟一个耗时操作
                for (var i = 0; i < 999; i++) {
                    continue
                }

                // 判断是否执行成功
                if (flag != 0) { // 如果成功执行成功的回调函数
                    resolve(flag)
                } else {
                    reject(flag) // 如果失败执行失败的回调函数
                }
            })
        }

        // 1. 在本身的Promise实例成功的回调函数上可以返回一个新的 Promise 对象 在外面继续 .then()
        // 2. 如果 返回的是一个普通值 比如是 hello 那么会产生一个默认的 Promise 对象,保证可以一直操作
        // 3. then 方法,用来预先为这个Promise指定分别叫做 resolve(成功之后的回调函数必须传) 和 reject(失败的回调函数可以不传)
        // 4. 如果前面的任务失败了但是若不想影响到后面任务的正常执行,我们可以单独为每个Promise指定失败的回调
        // 5. catch 如果前面的任务有出错我们不想后面的任务继续执行,可以指定 catch 捕获异常,并终止后续回调的执行,异常捕捉采用就近原则
        // 6. 通过 finally 可以指定回调链中不论成功或者失败 都会执行

        func(0).then(function(flag) { // 指定任务1 的回调
            console.log('成功了', flag)
            // 成功之后返回任务1的回调实例
            return func(1)
        }, function(flag) {
            // 失败了之后也返回任务2的实例
            console.log('失败了', flag)
            return func(2)
        }).then(function(flag) { // 指定任务2 的成功回调
            console.log('成功了', flag)
            // 成功之后返回任务3的回调实例
            return func(3)
        }).then(function(flag) { // 指定任务3 的成功回调
            console.log('成功了', flag)
            return 'hello'  // 返回一个普通的值让下面接收,会产生一个默认的Promise对象
        }).then(function(flag) {
            console.log(flag)
        }).then(function(flag) {
            console.log(flag)
        })


        // func(1).then(function(flag) { // 指定任务1 的回调
        //     console.log('成功了', flag)
        //     // 成功之后返回任务2的回调实例(这里手动让他出错 )
        //     return func(0)
        // }).then(function(flag) { // 指定任务2 的成功回调
        //     console.log('成功了', flag)
        //     // 成功之后返回任务3的回调实例
        //     return func(3)
        // }).then(function(flag) { // 指定任务3 的成功回调
        //     console.log('成功了', flag)
        // }).catch(function(err) {  // 捕捉错误
        //     console.log('捕捉到一个异常:',err)
        // }).finally(function(){
        //     console.log('不论成功与失败或者报错都会执行')
        // })

        console.log('ok')
    </script>
</html>

40_async/await关键字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        // 1. async声明的函数会立即返回一个Promise对象,(async函数的返回值其实也是Promise实例对象),可以.then .catch
        // 2. await关键字只能用于 async 函数中只有await后面的表达式执行完毕之后,代码才会继续往下执行
        // 3. await 后面的参数需要跟一个 Promise 实例对象来表示需要异步执行的操作,如果传其他的东西会自动转成Promise对象
        // 5. 注意!  let ret = await fn(1); console.log(ret)等价于 fn('1').then((args)=>{console.log(args)}) 的语法糖
        // 6. 只要 await 预计后面的 Promise 状态变成 reject 那么整个async函数会终止执行
        // 7. async函数中如果有错误会影响到后面代码的执行,可以通过 try catch 进行局部捕捉异常
        // 8. 也可以通过 Promise 本身提供的 catch 进行异常捕捉,异常捕捉会就近原则


        // 创建一个 Promise 相关的函数
        function fn(flag) {
            return new Promise(function(resolve, reject) {
                setTimeout(function() {
                    if (flag) {
                        resolve(flag)
                    } else {
                        reject('失败:' + flag)
                    }
                }, 1000)
            })
        }

        async function func() {
            // 手动引发一个异常,并局部进行捕捉
            await Promise.reject('出现问题了').catch(err=>{})
            
            let ret_1 = await fn(1)
            console.log(ret_1)
            let ret_2 = await fn(2)
            console.log(ret_2)
            let ret_3 = await fn(3)
            console.log(ret_3)
        }
        
        // 由此可见 async 函数执行后会立即返回一个 Promise对象
        let fn_obj = func()
        console.log(fn_obj)

        fn_obj.then(res => {
            console.log(res)
        }).catch(err => {
            console.log('捕捉到异常:',err)
        })
    </script>
</html>

41_axios基本使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="axios.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        // axios的post请求默认传递的是json 格式的数据
        // axios的API 第二个参数可以接收一个对象用来传递多个参数
        // 表单请求需要实例化一个URLSearchParams对象用于创建数据
        // 后台返回的json格式的数据 axios 会封装成一个对象方便调用


        // // 查询字符串传参
        // axios.get('http://192.168.72.136:5000/hello?user_id=849317537')
        // .then(function(ret){
        //     console.log(ret)
        //     console.log(ret.data)
        // })

        // // 请求路径传参
        // axios.get('http://192.168.72.136:5000/say/849317537')
        // .then(function(ret){
        //     console.log(ret)
        //     console.log(ret.data)
        // })

        // // 多个查询字符串传参
        // axios.get('http://192.168.72.136:5000/hello',{
        //     params:{
        //         user_id:'849317537',
        //         age:'12'
        //     }
        // }).then(function(ret){
        //     console.log(ret.data)
        // })

        // // POST请求(默认json格式)
        // axios.post('http://192.168.72.136:5000/post_test',{
        //     user_id:'13673429931',
        //     gender:'man'
        // }).then(function(ret){
        //     console.log(ret.data.user_id,ret.data.gender)
        // })

        // // form表单请求
        // let params = new URLSearchParams()
        // params.append('user_id','13673429931')
        // params.append('pwd','1234')
        // axios.post('http://192.168.72.136:5000/form_test',params).then(function(ret){
        //     console.log(ret.data.user_id,ret.data.pwd)
        // })

        // put请求
        axios.put('http://192.168.72.136:5000/post_test', {
            user_id: '13673429931',
            gender: 'man'
        }).then(ret=> {
            console.log(ret.data.user_id, ret.data.gender)
        })



        console.log(123)
    </script>
</html>

42_axios配置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    
    <script src="axios.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        axios.defaults.timeout = 3000  // 超时时间
        axios.defaults.baseURL = 'http://192.168.72.136:5000'  // 设置基础请求路径
        axios.defaults.headers = {'token':'23333'}  // 设置请求头
        
        // // 因为设置了 baseURL 可以省略前面的路径
        // axios.get('/hello?user_id=849317537')
        // .then(function(ret){
        //     console.log(ret)
        //     console.log(ret.data)
        // })
        
        axios.get('/token')
        .then(function(ret){
            console.log(ret)
            console.log(ret.data.Token)
        })
    </script>
</html>

43_axios拦截器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="axios.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        axios.defaults.baseURL = 'http://192.168.72.136:5000'
        
        
        // 1. 请求拦截器会在请求发送到服务器之前进行一些相关的配置
        // 2. 在拦截器中的函数中,接收两个形参用于处理配置和失败的调用函数
        // 3. 配置axios的选项的函数接收一个形参用来表示axios的设置选项,这个形参必须要return出去
        axios.interceptors.request.use(function(cfg) {
            cfg.headers['Token'] = '23333'  // 在拦截器中设置请求头
            console.log(cfg)  // 打印一下拦截器的配置
            return cfg
        }, function(err) {
            console.log(err)
        })Authorization
        
        // 1. 响应拦截器,会在服务器返回时,对响应做一些处理
        // 2. 拦截器接收两个函数用来处理配置和错误的处理
        // 3. 其中配置的函数会接收一个形参用于接收 服务器返回的 response,进行加工后可以对外部返回数据
        axios.interceptors.response.use(function(res) {
            console.log(res)
            let data = res.data
            return data
        }, function(err) {
            console.log(err)
        })

        axios.get('/token')
            .then(function(ret) {
                console.log(ret.Token)
                // console.log(ret.data.Token)
            })
            
        
    </script>
</html>
Last modification:October 16th, 2020 at 11:16 am
安安,亲觉得有用, 请随意打赏嗷