AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS基础（四）

2023-10-19 104
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端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 = 0
      for (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~100
    function getSum(start, end) {   // end = 50
      // 形参  形式上的参数  
      // console.log(end)
      let sum = 0
      for (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 = 0
      for (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 = 10
    function fn() {
      // let num = 20
      function fun() {
        // let num = 30
        console.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 : h
      m = m < 10 ? '0' + m : m
      s = 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>

笔记

去看知识浓缩笔记：

JavaScript 基础 - 第4天笔记-CSDN博客

文章标签：
JavaScript
前端开发
API
关键词：
API实战
API入门
JavaScript实战
JavaScript语法
JavaScript JS
啊理八八
目录
相关文章
游客mass6jalwg5qm
|
7月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端，再到利用 APIPost 高效测试 API，适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式，还涉及数据库连接和前后端数据交互。通过实际代码示例，助你快速上手并优化应用性能。
游客mass6jalwg5qm
286 6
Bluening
|
8月前
|
JSON JavaScript 前端开发
菜鸟之路Day23一一JavaScript 入门
本文介绍了 JavaScript 的基础内容，包括 JS 的引入方式、基础语法、数据类型、运算符、类型转换、函数、对象（如 Array、String、自定义对象、JSON、BOM 和 DOM）、事件监听，以及 Vue 框架的初步使用。重点讲解了内部和外部脚本的引入、变量声明（var、let、const）、常见输出语句、数组与字符串的操作方法、DOM 操作及事件绑定，并通过实例展示了 Vue 的双向数据绑定和常用指令（v-bind、v-model、v-on、v-if、v-for 等）。
Bluening
221 7
游客lijmi4663rgsa
|
8月前
|
JavaScript 前端开发 API
JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等，array.map(）的使用详解（附实际应用代码）
array.map(）可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等，比for好用太多了，主要是写法简单，并且非常直观，并且能提升代码的可读性，也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
545 1
游客qf4jmczx4xu2y
|
12月前
|
JSON 缓存 JavaScript
深入浅出：使用Node.js构建RESTful API
在这个数字时代，API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始，逐步深入，不仅涉及代码编写，还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发，还是希望扩展你的技术栈，这篇文章都将是你的理想指南。
游客qf4jmczx4xu2y
316 53
李游Leo
|
10月前
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中，许多功能与API曾风光无限，但随着技术进步和语言演化，部分功能逐渐被淘汰或被更高效的替代方案取代。例如，`with`语句使代码作用域复杂、可读性差；`void`操作符功能冗余且影响可读性；`eval`函数存在严重安全风险和性能问题；`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代；`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势，开发者应紧跟技术步伐，学习新技能，适应新技术环境。
李游Leo
192 10
三三是该溜子
|
11月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作（大量举例）
JS引入方式，JS基础语法，JS增删查改，JS函数，JS对象
三三是该溜子
191 7
请看我回答~
|
11月前
|
JSON JavaScript 前端开发
深入浅出Node.js：从零开始构建RESTful API
在数字化时代的浪潮中，后端开发作为连接用户与数据的桥梁，扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界，通过实践操作，掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用，学习如何设计API端点，处理数据请求，并实现身份验证机制，最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者，这篇文章都将为您打开一扇通往后端开发深层知识的大门。
请看我回答~
255 12
程序员成长之路
|
12月前
|
JavaScript 前端开发 API
Vue.js 3：深入探索组合式API的实践与应用
Vue.js 3：深入探索组合式API的实践与应用
程序员成长之路
238 11
我不是游客20240119
|
12月前
|
JavaScript NoSQL API
深入浅出Node.js：从零开始构建RESTful API
在数字化时代的浪潮中，后端开发如同一座灯塔，指引着数据的海洋。本文将带你航行在Node.js的海域，探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应，以及实现数据库交互。准备好了吗？启航吧！
我不是游客20240119
142 2
想飞的雪糕
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
1009 14

热门文章

最新文章

  • 1
    前端如何存储数据：Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    构建AI智能体：一、初识AI大模型与API调用
  • 3
    淘宝拍立淘按图搜索API系列，json数据返回
  • 4
    快递鸟快递API技术指南：获取物流轨迹信息与轨迹地图的解决方案
  • 5
    百宝箱开放平台 ✖️ API 使用过程中的常见问题
  • 6
    抖音API全面解析：商品详情、视频详情、评论获取
  • 7
    小红书API接口文档：笔记详情数据开发手册
  • 8
    淘宝天猫上货API接口技术指南
  • 9
    阿里巴巴国际站关键字搜索 API 实战：3 步搞定多语言适配 + 限流破局，询盘量提升 40%
  • 10
    亚马逊商品评论API接口技术指南
  • 1
    仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
    2249
  • 2
    个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
    680
  • 3
    个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
    1064
  • 4
    征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
    1556
  • 5
    银行流水生成器在线制作，银行流水虚拟生成器app，h5+js+css【仅供学习用途】
    3439
  • 6
    制作b超单生成器， 假怀孕b超单图片制作， p图医院证明【css+html+js装逼恶搞神器】
    590
  • 7
    医院检查单子p图软件，在线制作仿真病历，js+css+html装逼神器
    737
  • 8
    处方单图片生成器， 处方单在线制作免费，js+css+html恶搞神器
    1321
  • 9
    病历单生成器在线制作，病历单生成器app，HTML+CSS+JS恶搞工具
    3100
  • 10
    抖音快手小红书虚拟评论截图生成器，模拟对话制作工具，html+js+css
    896

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 基于Assistant Api的旅游助手
  • 快速体验智能体API应用
    • 下一篇
    拔俗AI临床大数据科研分析平台：让医学研究更智能、更高效