JavaScript进阶

原创于 2026-05-17 18:26:04 发布 · 380 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #开发语言 #ecmascript

JavaScript函数

1.声明和调用函数

声明（定义）一个完整的函数包括关键字、函数名、形式参数、函数体、返回值五个部分。

函数调用可以被重复使用。

函数没有return时，函数默认返回值为undefined。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //声明函数
        function sayHello(content) {
            console.log('Hello World!,' + content);
         }


        var say = function(content){
            console.log('Hello World!,' + content);
        };

        //调用函数
        say('javascript')
    </script>
</head>
<body>

</body>
</html>

2.参数

形参：声明函数时小括号里的叫形参

实参：调用函数时小括号里的叫实参

1.形参个数过多，会自动补充undefined。

2.实参个数过多，则多余的实参会被忽略。

默认参数：给形参设置默认值，这个默认值只会在缺少实参传递或者实参是undefined才会被执行。

3.逻辑中断

存在于逻辑运算符&&和||中，左边如果满足一定条件会中断代码，也称为逻辑短路。

eg：false && anything // 逻辑与左边false则中断，如果左边为true，则返回右边代码的值
true || anything // 逻辑或左边true则中断，如果左边为false，则返回右边代码的值

4.作用域

全局作用域：作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。处于全局作用域内的变量，称为全局变量。

局部作用域：函数作用域，作用于函数内的代码环境；块级作用域，{ } 大括号内部。处于局部作用域内的变量称为局部变量。

访问原则：先找局部，再找全局。

5.匿名函数

将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式。当一个函数里面的参数要求传一个函数，使用匿名函数。

// 声明
let fn = function() {
    console.log('函数表达式')
}
// 调用
fn()

JavaScript对象

1.对象的定义与创建

对象（Object）：JavaScript里的一种数据类型（引用类型），也是用于存储数据的。由属性和方法组成。

第一种方法：字面量方式

<script type="text/javascript">
        var person = {
            "name":"zhangsan",
            "age":18,
            "gender":"Male"
        }

        
        let name = person.name;
        let age = person.age;
        let gender = person.gender;
        console.log(name,age,gender);

</script>

对象里面还可以嵌套对象

    <script type="text/javascript">
        var person = {
            "name":"zhangsan",
            "age":20,
            "gender":"Male",
            "friends":[
                {   "name":"lisi",
                    "age":22,
                    "gender":"Male",
                },
                {   "name":"wangwu",
                    "age":24,
                    "gender":"Male",
                }
            ]
        }

        let name = person.name;
        let age = person.age;
        let gender = person.gender;
        console.log(name,age,gender);

        let friends = person.friends;
        for (const friend of friends) {
            console.log(friend.name,friend.age,friend.gender);

        }
        
    </script>

第一种方法里面对象只有属性，没有方法，下面给它添加方法

<script type="text/javascript">
        var person = {
            "name":"zhangsan",
            "age":20,
            "gender":"Male",
            "friends":[
                {   "name":"lisi",
                    "age":22,
                    "gender":"Male",
                },
                {   "name":"wangwu",
                    "age":24,
                    "gender":"Male",
                }
            ],

             // 方法 say属性指向一个函数，当对象调用该方法时，会执行该方法中的代码
            "say":function () {
                console.log("hello world");
            },
        }

        let name = person.name;
        let age = person.age;
        let gender = person.gender;
        console.log(name,age,gender);


        person.say();

        let friends = person.friends;
        for (const friend of friends) {
            console.log(friend.name,friend.age,friend.gender);

        }

</script>

动态删除属性，以下代码打印会显示undefined。

    <script type="text/javascript">
        var person = {
            "name":"zhangsan",
            "age":20,
            "gender":"Male",
            "friends":[
                {   "name":"lisi",
                    "age":22,
                    "gender":"Male",
                },
                {   "name":"wangwu",
                    "age":24,
                    "gender":"Male",
                }
            ],

            // 方法 say属性指向一个函数，当对象调用该方法时，会执行该方法中的代码
            "say":function () {
                console.log("hello world");
            },
        }

        //动态删除属性
        delete person.name;
        console.log(person.name);
</script>

第二种方法：构造函数方式来创建对象（更推荐）

 <script type="text/javascript">
        function Person(name,age,gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
   
            //方法而言只需在内存中建立一份.因此将方法应该建立到该对象的原型上prototype
            
            //this.showInfo = function(){
            //    console.log(this.name + " " + this.age + " " + this.gender);
            //}

        }

        Person.prototype.showInfo = function(){
            console.log(this.name + " " + this.age + " " + this.gender);

        }
            
           

        //创建对象
        var person = new Person("张三",18,"男");
        person.showInfo();

 </script>

第三种方法：调用Person函数时，Person函数里面new了一个对象；注意要有返回值！

<script type="text/javascript">

        //要有返回值
        function Person(name,age,gender){
            var object = new Object()
            object.name = name
            object.age = age
            object.gender = gender

            object.showInfo = function(){
                console.log(object.name + " " + object.age + " " + object.gender);
            }

            return object
        }
        //创建对象
        var person = Person("张三",18,"男");
        person.showInfo();

</script>

2.遍历对象

for遍历对象的问题：对象没有长度length，而且是无序的。所以我们要利用for in遍历对象。

语法：

for (let 变量 in 对象) {
    console.log(变量) // 属性名
    console.log(对象[变量]) // 属性值
}

eg：

<script type="text/javascript">
    var person = {
        "name":"zhangsan",
        "age":20,
        "gender":"Male",
        "friends":[
             {   "name":"lisi",
                  "age":22,
                  "gender":"Male",
              },
              {   "name":"wangwu",
                  "age":24,
                  "gender":"Male",
              }
          ],

          // 方法 say属性指向一个函数，当对象调用该方法时，会执行该方法中的代码
          "say":function () {
             return "hello world";
           },
     }

     for (const item in person) {
            console.log(item);
     }


</script>

3.内置对象

JavaScript内部提供的对象，包含各种属性和方法给开发者调用。console就是JavaScript中内置的对象，该对象中存在一个方法叫 log ，然后调用 log 这个方法，即 console.log()。

Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。

属性/方法	作用	说明
PI	圆周率	Math.PI 属性，返回圆周率
max	找最大值	Math.max(8, 3, 1) 方法，返回 8
min	找最小值	Math.min(8, 3, 1) 方法，返回 1
abs	绝对值	Math.abs(-1) 方法，返回 1
ceil	向上取整	Math.ceil(3.1) 方法，返回 4
floor	向下取整	Math.floor(3.8) 方法，返回 3
round	四舍五入取整	Math.round(3.8) 方法，返回 4，遇到.5则舍入到相邻的在正无穷（+∞）方向上的整数