前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— 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><style>span {display: inline-block;width: 100px;padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);background-color: rgba(255, 192, 203, .1);text-align: center;color: hotpink;}</style>
</head><body><script>// // 1. 外层循环控制行数// for (let i = 1; i <= 9; i++) {//   // 2. 里层循环控制列数//   for (let j = 1; j <= i; j++) {//     document.write(`<span>${j} X ${i} = ${i * j}</span>`)//   }//   // 换行//   document.write('<br>')// }// // 1. 外层循环控制行数// for (let i = 1; i <= 9; i++) {//   // 2. 里层循环控制列数//   for (let j = 1; j <= i; j++) {//     document.write(`<span>${j} X ${i} = ${i * j}</span>`)//   }//   // 换行//   document.write('<br>')// }// // 1. 外层循环控制行数// for (let i = 1; i <= 9; i++) {//   // 2. 里层循环控制列数//   for (let j = 1; j <= i; j++) {//     document.write(`<span>${j} X ${i} = ${i * j}</span>`)//   }//   // 换行//   document.write('<br>')// }// 声明function sheet99() {for (let i = 1; i <= 9; i++) {// 2. 里层循环控制列数for (let j = 1; j <= i; j++) {document.write(`<span>${j} X ${i} = ${i * j}</span>`)}// 换行document.write('<br>')}}// 调用sheet99()sheet99()sheet99()sheet99()</script>
</body></html>

代码复用,生成多个99乘法表

函数使用

<!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>
</head><body><script>// let num = 10// console.log(num)// 1. 函数的声明   function sayHi() {console.log('hi~~~')}// 2. 函数调用   函数不调用,自己不执行sayHi()sayHi()sayHi()</script>
</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>
</head><body><script>// 1. 求2个数的和// function getSum() {//   let num1 = +prompt('请输入第一个数')//   let num2 = +prompt('请输入第二个数')//   console.log(num1 + num2)// }// getSum()// 2. 求 1~100 累加和function getSum() {let sum = 0for (let i = 1; i <= 100; i++) {sum += i}console.log(sum)}getSum()</script>
</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>
</head><body><script>// 2. 求 1~100 累加和// function getSum(end) {   // end = 50//   // console.log(end)//   let sum = 0//   for (let i = 1; i <= end; i++) {//     sum += i//   }//   console.log(sum)// }// getSum(50)  // 1~50// getSum(100)  // 1~100function getSum(start, end) {   // end = 50// 形参  形式上的参数  // console.log(end)let sum = 0for (let i = start; i <= end; i++) {sum += i}console.log(sum)}getSum(1, 50)  // 调用的小括号里面 实参 - 实际的参数getSum(100, 200)  // 实参 - 实际的参数</script>
</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>
</head><body><script>// 1. 封装函数// 给一个参数的默认值function getArrSum(arr = []) {// console.log(arr)let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}console.log(sum)}getArrSum([1, 2, 3, 4, 5])getArrSum([11, 22, 33])getArrSum()  // 0</script>
</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>
</head><body><script>// // 函数的返回值// function fn() {//   return 20// }// // fn() 调用者 相当于执行了    fn()   = 20// // return 的值返回给调用者// // console.log(fn())// // let num = prompt('请输入数字')// let re = fn()// console.log(re)// 求和函数的写法function getTotalPrice(x, y) {return x + y// return 后面的代码不会被执行}// console.log(getTotalPrice(1, 2))// console.log(getTotalPrice(1, 2))let sum = getTotalPrice(1, 2)console.log(sum)console.log(sum)function fn() {}let re = fn()console.log(re)  // undefined</script>
</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></head><body><div></div><script>// 1. 求最大值函数// function getMax(x, y) {//   return x > y ? x : y// }// let max = getMax(11, 234)// console.log(max)// //  2. 求任意数组的最大值,并且返回// function getArrValue(arr = []) {//   // (1)先准备一个max变量存放数组的第一个值//   let max = arr[0]//   // (2) 遍历比较//   for (let i = 1; i < arr.length; i++) {//     if (max < arr[i]) {//       max = arr[i]//     }//   }//   // (3) 返回值//   return max// }// // let max = getArrValue([1, 3, 5, 7, 9])// // let num = prompt('请输入')// let max = getArrValue([11, 3, 55, 7, 29])// console.log(max)//  3. 求任意数组的最大值和最小值,并且返回function getArrValue(arr = []) {// (1)先准备一个max变量存放数组的第一个值let max = arr[0]let min = arr[0]  // 最小值// (2) 遍历比较for (let i = 1; i < arr.length; i++) {// 最大值if (max < arr[i]) {max = arr[i]}// 最小值if (min > arr[i]) {min = arr[i]}}// (3) 返回值  返回的是数组return [max, min]// return min}let newArr = getArrValue([11, 3, 55, 7, 29])console.log(`数组的最大值是: ${newArr[0]}`)console.log(`数组的最小值是: ${newArr[1]}`)</script>
</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>
</head><body><script>// function getSum(x, y) {//   return x + y//   // 返回值返回给了谁? 函数的调用者  getSum(1, 2)//   // getSum(1, 2) = 3// }// // let result = getSum(1, 2) = 3// // let num = parseInt('12px')// let result = getSum(1, 2)// console.log(result)// 1. 函数名相同, 后面覆盖前面// function fn() {//   console.log(1)// }// function fn() {//   console.log(2)// }// fn()// 2. 参数不匹配function fn(a, b) {console.log(a + b)}// (1). 实参多余形参   剩余的实参不参与运算// fn(1, 2, 3)// (2). 实参少于形参   剩余的实参不参与运算fn(1)   // 1 + undefined  = NaN </script>
</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>
</head><body><script>let num = 10  // 1. 全局变量console.log(num)function fn() {console.log(num)}fn()// 2. 局部变量function fun() {let str = 'pink'}console.log(str)  // 错误</script>
</body></html>

函数内部,第一次出现的局部变量被当做全局变量

无let变量声明关键词,甚至覆盖同名全局变量(强烈不推荐)

<!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>
</head><body><script>// let num = 20// function fn() {//   num = 10  // 全局变量来看  强烈不允许// }// fn()// console.log(num)// function fun(x, y) {//   // 形参可以看做是函数的局部变量//   console.log(x)// }// fun(1, 2)// console.log(x)  // 错误的// let num = 10function fn() {// let num = 20function fun() {// let num = 30console.log(num)}fun()}fn()</script>
</body></html>

匿名函数

第三方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>
</head><body><script>// age = age + 1// 1. 用户输入let second = +prompt('请输入秒数:')// 2.封装函数function getTime(t) {// console.log(t)  // 总的秒数// 3. 转换// 小时:  h = parseInt(总秒数 / 60 / 60 % 24)// 分钟:  m = parseInt(总秒数 / 60 % 60)// 秒数: s = parseInt(总秒数 % 60) let h = parseInt(t / 60 / 60 % 24)let m = parseInt(t / 60 % 60)let s = parseInt(t % 60)h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : s// console.log(h, m, s)return `转换完毕之后是${h}小时${m}分${s}秒`}let str = getTime(second)document.write(str)console.log(h)</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/139525.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++之类和函数权限访问总结(二百二十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

黑马JVM总结(十七)

&#xff08;1&#xff09;G1_简介 下面介绍一种Grabage one的垃圾回收器&#xff0c;在jdk9的时候称为默认的回收器&#xff0c;废除了之前的CMS垃圾回收器&#xff0c;它的内部也是并发的垃圾回收器 我们可以想到堆内存过大&#xff0c;肯定会导致回收速度变慢&#xff0c;因…

时序预测 | MATLAB实现NGO-GRU北方苍鹰算法优化门控循环单元时间序列预测

时序预测 | MATLAB实现NGO-GRU北方苍鹰算法优化门控循环单元时间序列预测 目录 时序预测 | MATLAB实现NGO-GRU北方苍鹰算法优化门控循环单元时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现NGO-GRU北方苍鹰算法优化门控循环单元时间序列预测&#…

Matlab编程中函数的重命名方法

Matlab编程中函数的重命名方法 在进行matlab编程时候&#xff0c;有时需要根据自己的习惯&#xff0c;需要对函数重命名。本文简要介绍重命名的方法。 一、重命名的方法 通过和赋值号实现&#xff0c;如下所示&#xff1a; 新函数名原函数名二、具体举例 clc clear all %将…

C 初级学习笔记(基础)

目录 1.预处理器指令 预定义宏 预处理器运算符 &#xff08;\&#xff09; 参数化的宏 头文件 .h 引用头文件操作 2.函数&#xff08;标识符&关键字&运算符&#xff09;存储类 函数参数 a. 标识符&关键字 b. 运算符&#xff08;算术、关系、逻辑、位、赋…

手动部署 OceanBase 集群

手动部署一个 OB 单副本集群&#xff0c;包括一个 OBProxy 节点 部署环境 服务器信息 IP地址 192.168.0.26 网卡名 ifcfg-enp1s0 OS Kylin Linux Advanced Server release V10 CPU 8C 内存 32G 磁盘1 本地盘 /data/1 磁盘2 本地盘 /data/log1 机器和角色划分 …

软件设计模式

1.UML 1.1类图表示法 uml类图中&#xff0c;类使用包含类名、属性、方法 属性或方法前的加好和减号表示了这个方法的可见性&#xff0c;可见性的符号有三种&#xff1a; 表示public -表示private #表示protected 1.2 类与类之间关系 关联关系 单向关联 双向关系 自关联 聚合关…

WebRTC系列--sdp协商中的answer编解码协商过程

关于createAnswer的流程在前面的文章WebRTC系列-SDP之CreateAnswer这篇文章中有详细的分析。 这篇文章主要对于MediaSessionDescriptionFactory的AddAudioContentForAnswer做详细的分析,也就是说对于音频编码的匹配也是在这个方法里实现: 首先主要的函数调用如下图: 这篇文…

LabVIEW崩溃问题解决方法

LabVIEW崩溃问题解决方法 LabVIEW在运行中出现崩溃的情况&#xff0c;确实让人很崩溃。不过按照下面的方法可以逐步排查解决。 在LabVIEW开发环境中浏览时&#xff0c;LabVIEW崩溃并显示以下错误&#xff1a; 解决方案 LabVIEW内部错误和崩溃的初步故障排除步骤&#xff1a;…

【虚拟化】虚拟机vcpu绑核物理机

文章目录 一、NUMA二、虚拟机xml配置解析 参考文章 第一篇&#xff1a;KVM虚拟化CPU技术总结 第二篇&#xff1a;虚机cpu和mem的配置&#xff08;cputune和numatune&#xff09; 第三篇&#xff1a;libvirt 中cpu, numa 的配置 第四篇&#xff1a;如何提高虚拟机性能&#xff1…

数据结构与算法之动态规划算法(DP)

文章目录 前言1.0-1背包问题1.1 基本概念1.2 具体问题1.3 c代码求解1.4 测试 2.最长公共子序列 前言 前边我们讲过分治法&#xff0c;分治法的核心是将一个问题分解为n个小问题&#xff0c;最后合并结果。而动态规划算法的核心是穷举法,以及要寻找到一个状态方程&#xff0c;需…

电脑版剪映怎么倒放?

1.打开一个素材 2.添加到时间轨道 3.右击轨道素材 弹出的选项钟选择&#xff0c;基础编辑》倒放&#xff01;

计算机网络分类

按照覆盖范围分类 &#xff08;1&#xff09;个域网&#xff1a;通常覆盖范围在1&#xff5e;10m。 &#xff08;2&#xff09;局域网&#xff1a;通常覆盖范围在10m&#xff5e;1km。 &#xff08;3&#xff09;城域网&#xff1a;覆盖范围通常在5&#xff5e;50 km 。 &…

蓝桥杯 题库 简单 每日十题 day5

01 字符计数 字符计数 题目描述 给定一个单词&#xff0c;请计算这个单词中有多少个元音字母&#xff0c;多少个辅音字母。 元音字母包括a,e&#xff0c;i,o&#xff0c;u&#xff0c;共五个&#xff0c;其他均为辅音字母。 输入描述 输入格式&#xff1a; 输入一行&#xff0…

Xcode15+iOS17适配以及遇到的问题

今天更新了 Xcode15&#xff0c;遇到了一些问题&#xff0c;做下记录希望大家少走点坑。 1.iOS17 SDK 安装失败 Xcode更新完成后&#xff0c;打开项目一直显示 no fund iOS17 sdk&#xff0c;根据项目不同提示可能有区别&#xff0c;根据提示下载后提示安装失败&#xff0c;…

针对 SAP 的增强现实技术

增强现实技术是对现实世界的一种交互式模拟。这种功能受到各种企业和制造商的欢迎&#xff0c;因为它可以减少生产停机时间、快速发现问题并维护流程&#xff0c;从而提高运营效率。许多安卓应用都在探索增强现实技术。 使用增强现实技术&#xff08;AR&#xff09;的Liquid U…

svn(乌龟svn)和SVN-VS2022插件(visualsvn) 下载

下载地址: https://www.visualsvn.com/visualsvn/download/

备受以太坊基金会青睐的 Hexlink,构建亿级用户涌入 Web3的入口

早在 2021 年 9 月&#xff0c;以太坊创始人 Vitalik Buterin 就曾提出了 EIP-4337&#xff08;账户抽象&#xff09;提案&#xff0c;并在去年 10 月对该提案进一步更新&#xff0c;引发行业的进一步关注。在今年 3 月&#xff0c;EIP-4337 提案正式通过审计&#xff0c;并成为…

centos 7.9系统安装向日葵

1.下载地址 向日葵远程控制app官方下载 - 贝锐向日葵官网 2.下载依赖 yum install -y libappindicator-gtk3 安装好依赖之后&#xff0c;然后再安装向日葵软件 3.安装软件 sudo rpm -ivh 文件名.rpm 4.安装成功之后的位置

VR赋能红色教育,让爱国主义精神永放光彩

昨天的918防空警报长鸣&#xff0c;人们默哀&#xff0c;可见爱国主义精神长存。为了贯彻落实“把红色资源利用好、红色传统发扬好、红色基因传承好”的指示精神&#xff0c;许多红色景点开始引入VR全景展示技术&#xff0c;为游客提供全方位720度无死角的景区展示体验。 VR全…