【JavaWeb】JavaScript基础语法(下)

news/2025/1/12 10:47:11/

✨哈喽,进来的小伙伴们,你们好耶!✨

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

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

🚀🚀代码托管平台github:JavaWeb代码存放仓库!

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

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

目录

一、函数

传参类型如何规定?

 参数个数如何规定?

JS函数是"一等公民"!

作用域:

二、对象

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

 2. 使用 new Object 创建对象


一、函数

首先来看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)的相关知识点!


http://www.ppmy.cn/news/19334.html

相关文章

Elasticsearch7.8.0版本入门——JavaAPI操作(环境准备)

目录一、创建springboot项目二、pom.xml文件引入相关maven依赖三、创建客户端对象一、创建springboot项目 创建springboot项目步骤参考此博文链接:https://wwwxz.blog.csdn.net/article/details/91977374 二、pom.xml文件引入相关maven依赖 引入elasticsearch依赖…

CSS 艺术之心形-彩虹-加载动画

CSS 艺术之心形-彩虹-加载动画(居中抖动问题)参考描述效果HTMLCSS重置元素的部分默认样式bodyli动画定义指定animationul居中抖动问题代码总汇参考 项目描述搜索引擎BingMDNMDN Web Docs 描述 项目描述Edge109.0.1518.61 (正式版本) (64 位) 效果 HTML…

Allegro如何自动居中走线操作指导

Allegro如何自动居中走线操作指导 Allegro支持自动将走线居中到两个孔的中间,避免手动去调整的麻烦,类似下图 具体操作如下 点击Spread Between VoidsOptions选择需要居中走线的层面,并且Void clearance输入0

C Primer Plus 中关于*修饰符(抑制赋值)的一些总结

C Primer Plus 中关于*修饰符(抑制赋值)的一些总结printf()中的抑制赋值示例scanf()中的抑制赋值示例在比姓名宽度宽3的字段中打印名字示例printf()中的抑制赋值 当转换说明是%d,那么参数列表应该包括和d对应的值(这个技巧也适用于…

尚医通-手机登录-判断用户登录状态-用户网关整合(三十)

目录: (1)前台用户系统-手机登录-前端整合 (2)全局的登录事件-判断登录状态 (3)登录注册-用户认证和网关整合 (1)前台用户系统-手机登录-前端整合 service-user模块的配…

【Hadoop】HDFS+Shell实践(定时上传数据至HDFS)

这篇博客是一个结合HDFS的Shell练习,相对简单。现有需求:每天1:00需要从系统上传一份昨天的日志文件到HDFS,日志文件的格式为access_2023_01_01.log,HDFS目录格式为20230101。这个需求是相对简单的,分为以下几个步骤&a…

Issues with peer dependencies found

问题背景: 今天安装一些依赖,报了这个错误 Issues with peer dependencies found 那么这个错误是什么意思呢? WARN  Issues with peer dependencies found . └─┬ typescript-eslint/eslint-plugin ├── ✕ missing peer typescrip…

十二、创建和管理表

文章目录一、基础知识1.1 一条数据存储的过程1.2 标识符命名规则1.3 数据类型及数据库操作二、创建表三、查看表结构3.1 使用 SHOW COLUMNS 语句查看3.2 使用 DESCRIBE 语句查看3.3 查看表详细结构语句 SHOW CREATE TABLE四、修改表结构4.1 添加新字段和修改字段定义4.2 修改字…