【JavaWeb】JavaScript基础语法(下)

✨哈喽，进来的小伙伴们，你们好耶！✨

🛰️🛰️系列专栏:【JavaWeb】

✈️✈️本篇内容:JavaScript基础语法(上)！

🚀🚀代码托管平台github：JavaWeb代码存放仓库！

⛵⛵作者简介：一名双非本科大三在读的科班Java编程小白，道阻且长，星夜启程！

哈喽，大家好，我是辰柒。上篇博客已经介绍了js的基础语法大部分内容了，本期呢，也是对上篇博客剩下一点内容的补充，内容不是很多，但也是满满干货，抓紧来学习啦！

一、函数

首先来看JS中创建函数的格式：

function 函数名(形参列表) {
    函数体
    return 返回值;
}

那么有了创建函数，肯定有调用函数：

// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值

如何实现一个打印hello world并带返回值的函数并调用？

        function fun1(x){
            return "hello world";
        }
        let ret = fun1(1);
        console.log(ret);

运行结果：

观察上述代码我们可以发现，函数的参数是不需要写参数类型的；函数也是没有返回值类型的；

函数调用和Java是一样的，定义一个参数ret来接收这个函数值。

传参类型如何规定？

JS中函数传入的参数可以是任意的，只要支持内部逻辑不论什么类型都是可以作为参数。

        function fun2(x,y){
            return x+y;
        }
        let ret1 = fun2('hello',12);
        let ret2 = fun2('dodo',undefined);
        console.log(ret1);
        console.log(ret2);

运行结果：

参数个数如何规定？

JS中调用函数的时候传入的参数个数和函数给的个数可以是不一致的！比如：

        function fun3(a,b,c,d,e){
            return a+b+c+d+e;
        }
        let ret3 = fun3(10,20);
        let ret4 = fun3(30,40,50);
        let ret5 = fun3("hello",60,70);
        console.log(ret3);
        console.log(ret4);
        console.log(ret5);

运行结果：

解释：因为这里我们调用函数的时候只传了2个数字参数/3个数字参数，没被传参传到的形参就是undefined，返回结果就是一个NaN；如果把字符串写在前面就是一个拼接的效果，我们传了3个参数，最后两个形参是未定义的，所以就是undefined。

JS函数是"一等公民"！

在JS中，函数就像是一个普通的变量一样，可以被赋值给其他变量，也可以作为另一个函数的参数，也可以作为另一个函数的返回值。

函数赋值演示：

        function fun4(){
            console.log("hello JS");
        }
        let f = fun4;

注意fun4是一个函数名，fun4后面没有()，说明这不是函数调用，而是一个函数的赋值，这个f就是function类型的变量。

上述两个操作其实可以合并为一个操作：

        let f = function fun4(){
            console.log("hello JS");
        }

甚至可以出现以下的写法：

        let f = function(){
            console.log("hello JS");
        }

即没有名字的函数，也称为匿名函数，大家是否还记得lambda表达式呢？

这个操作即定义了一个没有名字的函数，并且把这个函数赋值给了f这个变量，后面就可以基于f来调用这个函数了。

作用域：

即某个标识符名字在代码中的有效范围。

在 ES6 标准之前, 作用域主要分成两个 全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效；
局部作用域/函数作用域: 在函数内部生效。

那么在JS中，作用域是支持"逐级向上"查找到的。

比如：

        let num = 10;
        function fun1(){
            let num = 20;
            function fun2(){
                return num;
            }
            fun2();
        }
        fun1();

即当前是在 hello 这个函数里, 尝试打印 num.但是在 hello 中,没有 num 变量。于是就往上级找，找到了 hello2 这里。

如果在 hello2 里, 也没有num，于是继续往上找,找到了全局作用域，找到了 num(如果最后的全局作用域也没找到,就会报错)。

二、对象

**1. 使用 字面量 创建对象 [常用] **

JS中，对象是不依托于类的，在JS所有对象中，都是一个类型，Object！

创建方式：直接通过 {} 的方式就可以创建对象。

        let student = {
            name: "小黑",
            age: 18,
            num: 201,
            eat: function(){
                console.log("吃饭");
            },

            drink: function(){
                console.log("喝水");
            }
        };

注意每个属性和方法，都是通过键值对的形式来定义的，键和值之间通过: 来分割；键值对之间使用,来分割。

对象的使用：

        console.log(student.name);
        console.log(student.age);
        student.eat();

运行结果：

**2. 使用 new Object ****创建对象 **

这种方式就简单记忆，对象点点点，创建属性和方法。

        var student = new Object(); // 和创建数组类似
        student.name = "大白";
        student.height = 170;
        student['weight'] = 150;
        student.sing = function () {
        console.log("hello JS");
        }
        console.log(student.name);
        console.log(student['weight']);
        student.sing();

运行结果：

还有一种方式就是使用 构造函数 创建对象，写起来感觉很麻烦，不建议大家使用，这里也就不介绍了，最常用的还是第一种方式，大家要牢记！

OK，那么我们今天的内容就到这里啦，我们下期继续讲解JavaScript(WebAPI)的相关知识点！