JavaScritp基础知识整理（五）

最新推荐文章于 2024-01-13 11:36:28 发布

原创最新推荐文章于 2024-01-13 11:36:28 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了JavaScript的基础知识，包括全局与局部作用域的概念，变量和函数的预解析过程，以及如何创建和使用JS对象。同时，探讨了内置对象如Math的应用，并通过实例展示了如何实现猜数字游戏，进一步理解JS的运用。

1.作用域
全局作用域：在整个js文件之内，或者在函数内部无声明，直接赋值
局部作用域：在函数内的变量（不能再外部使用）

<!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>
    <script>
        // 全局变量
        var num = 10;

        function fun() {
            // 局部变量
            var num1 = 20;
            // 全局变量
            num2 = 30;
        }
        console.log(num)
        // 不能使用
        console.log(num1)
        console.log(num2)
        
        // 作用域链
        function fun1() {
            var num3 = 10;
            function fun2() {
                var num3 = 333
                // 离得近的
                console.log(num3)
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

2.预解析
js运行时，js引擎先进行预解析，再执行代码。
预解析：分为变量预解析和函数预解析。分为变量预解析就是把所有var 变量名提到前面执行。函数预解析就是函数声明提升到前面
。

<!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>
    <script>
        console.log(num);
        // 会输出undefined,因为预解析，var num会被先执行
        var num = 10;

        fun();
        var fun = function(){
            console.log(44);
        }
        // 会报错，因为var fun，fun不是函数

        fun1();
        function fun1() {
            console.log(33312);
        }
        // 不会报错，因为预解析将函数声明提升到前面
    </script>
</head>
<body>
    
</body>
</html>

3.js对象
对象包括属性和行为
创建对象的方式：

<!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>
    <script>
        // 创建对象方法
        // 1.字面量
        var obj = {
            name: 'mingda',
            sex: '男',
            age: 18,
            sayHi: function() {
                console.log('hi');
            }
        };
        // 使用对象
        console.log(obj.age);
        console.log(obj['sex']);
        obj.sayHi();
        
        // 2.利用new
        var obj1 = new Object();
        obj1.name = 'di';
        obj1.age = 19;
        obj1.sayHello = function() {
            console.log('hello');
        }
        // 使用对象
        alert(obj1.name);
        alert(ob1['sex']);
        obj1.sayHello();

        //3.利用构造函数
        function King(name, sex, age) {
            this.name = name;
            this.sex = sex;
            this.age = age;
            this.say = function() {
                console.log('hi');
            }
        }
        bob = new King('bob', 'man', 19);
        alert(bob.name);
        al = new King('alice', 'woman', 20);
        al.say();
		
		// 遍历对象
        var obj2 = {
            name: 'mingda',
            sex: 'man',
            age: 18,
            fun: function() {
                console.log('hi')
            }
                    
        };

        for(var k in obj2) {
            // 输出对象属性
            console.log(k);
            // 输出对象值
            console.log(obj2[k]);
        }

    </script>
</head>
<body>
    
</body>
</html>

4.内置对象
常见Math，Date，Array，String
推荐查阅文档：https://developer.mozilla.org/zh-CN/docs/Web
Math

<!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>
    <script>
        // Math不是构造函数，使用不需要new
        console.log();(Math.max(1,2,3))
        console.log();(Math.PI)
        console.log(Math.max());
        // 取整
        console.log(Math.floor(1.2));
        console.log(Math.ceil(1.3));
        console.log(Math.round(3.4));
        // 0-1之间随机小数
        console.log(Math.random());
        // 返回任意数之间的
        function getRandom(max, min) {
            var ran = Math.floor(Math.random() * (max - min + 1) + min);
            return ran
        };
        getRandom(10, 20);

    </script>
</head>
<body>
    
</body>
</html>

猜数字游戏

<!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>
    <script>



        function getRandom(max, min) {
            var ran = Math.floor(Math.random() * (max - min + 1) + min);
            return ran
        };
        correct = getRandom(1, 100);
        status = true;
        while(status) {
            guess = parseInt(prompt('输入的数字'));
            if(correct == guess) {
                alert('你猜对啦！');
                status_1 = parseInt(prompt('输入的数字选择\n1.再玩一次\n2.退出'));
                if(status_1 = '2'){
                    status = false;
                    break;
                }else{
                    status =true
                }
            }else if(correct < guess) {
                alert('你猜大了！');
            }else if(correct > guess) {
                alert('你猜小了！');
            }
        };
        
    </script>
</head>
<body>
    
</body>
</html>