• Java系列技术之JavaScript基础（从入门开始）③

    JavaScript基础学习三

    今天，仍要介绍的是JavaScript的基础学习，这一节仍要学习的是【能思考】的JavaScript程序，那所谓的【能思考】之前也有介绍过，就是可以实现一定的 逻辑判断 和 程序条件性执行 的能力，这也是JavaScript程序流量控制的主要内容，但是今天我们主要也要涉及一个最简单是数据结构【数组】；不过，数组对于今后的开发过程来说都是极其重要的；

    所以今天主要介绍的内容有：
    七、FOR循环
    八、数组

    文章目录

    七、FOR循环

    那究竟什么是FOR循环呢？为什么要使用FOR循环呢？

    其实 for循环 同 while循环 一样，其实质都是在进行重复执行代码；但是相比于while循环结构来说，for循环会显得更加【自由】，所谓的自由就是可以有效的控制其循环次数，或者是更便捷的把 声明起始值 、循环条件 、变化值 写到一起，便于开发者一目了然；

    语法结构：

    for (起始条件; 退出条件; 变化量) {
   循环语句
}

    • 1
    • 2
    • 3

    ⭐注意： for循环 的最大价值： 循环数组 ，当然它也有另外一个名字叫 遍历数组 ，所以在理解方面，循环也可以被称为遍历；

    用法：
    ① 如果明确了循环的次数的时候推荐使用 for循环 ；
    ② 如果不明确循环的次数的时候推荐使用 while循环 ；

    退出循环：
    ① continue：结束本次循环，继续下次循环；
    ② break：跳出所在的循环；

    1. 循环嵌套：

    循环嵌套的目的是为了解决单循环无法完成的操作，比如冒泡排序这类数据结构，就必须使用循环嵌套才能完成；

    简单理解：一个循环里再套一个循环，一般用在for循环中，while中不用

    语法结构：

    for (外部声明记录循环次数的变量; 退出条件; 变化量) {
  for (内部声明记录循环次数的变量; 退出条件; 变化量) {
    循环语句
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5

    就如最常见案例《九九乘法表》，代码效果如下：

    ① 案例代码：

    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>Documenttitle>
    <style>
        div {
            display: inline-block;
            height: 25px;
            line-height: 25px;
            margin: 5px;
            background-color: rgb(105, 113, 255);
            padding: 0 10px;
            border: 1px solid rgb(200, 200, 200);
            color: rgb(255, 255, 255);
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
            text-align: center;
        }
    style>
head>
<body>
    <script>
        // 外层打印几行
        for (let i = 1; i <= 9; i++) {
            // 里层打印几个星星
            for (let j = 1; j <= i; j++) { 
                document.write(`
                
     ${j} x ${i} = ${j * i} 
    
                    `    )
            }
            document.write('
    '    )
        }
        script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    ② 实现效果如下：
    在这里插入图片描述

    八、数组

    说到数组，那什么是数组呢？为什么要用数组呢？该怎样声明数组呢？又该如何使用数组？

    在这里插入图片描述

    其实，数组就是有序的元素序列，英文名 Array ，它可以按顺序的用来存储多个数据元素，当然，数组的声明往往被分为的两个的部分，一个是 数组名称 ，另外一个是 数组字面量 ；

    而之所以用到数组是因为：方便有多个数据可以保存起来；

    数组部分相关的术语：

    ① 元素：数组中保存的每个数据都叫数组元素；
    ② 下标：数组中数据的编号；
    ③ 长度：数组中数据的个数，通过数组的length属性获得；

    数组的声明：

    //这里代表声明了一个空数组
let 数组名 = [数据1, 数据2, 数据3, 数据4, ...., 数据n]

    • 1
    • 2

    特点：
    ① 数组是按顺序保存，所以每个数据都有自己的编号；
    ② 计算机中的编号从0开始，所以数组第一个元素的编号为0，第二个为1，以此类推；
    ③ 在数组中，这种数据的编号也叫 索引或下标 ；
    ④ 数组可以存储任意类型的数据；

    1. 数组取值

    语法结构：

    数组名 [ 下标 ]

    • 1

    特点：
    ① 通过下标取数据；
    ② 取出数据是属于什么类型，就根据这种类型的特点来访问；

    2. 遍历数组

    说到遍历数组，这里就是发挥 for循环 最大价值的地方，其含义就是：用循环把数组中的每个元素都访问到；

    语法结构：

    for (let i = 0; i < 数组名称.length; i++) {
     数组名称[i]
}

    • 1
    • 2
    • 3

    当然这里有一个很重要的地方需要注意：

    ① i 必须从 0 开始，因为数组的索引号就是从 0 开始，所以用 i < 数组名.length ；

    ② 如果从 i =1开始时，还选择使用 i<数组名.length 或者 i<=数组名.length 的话 ，就会跳过下标为 0 的数据；

    3. 基本操作

    所谓的基本操作就是数据结构中最常提到的 增 、删 、改 、查 ，那么数组身为数据结构的一种，当然也是需要这些基本操作的，而且还不仅仅是需要；

    ⭐数组的 增 、删 、改 、查 对于项目的开发来说，是极为重要的;

    3.1 增

    增：就是给数组增加新的数据，通常用到 数组名.push() 和 数组名.unshift() 方法将一个或多个元素添加到数组中 ，不过虽然都是 增，但是它们依旧是存在很大区别的；

    ① 对于数组名.push() 而言：是将一个或多个元素添加到数组的 末尾 ，并返回该数组的新长度；

    语法结构：

    数组名.push(元素1 , 元素2 , ...)

    • 1

    ② 对于数组名.unshift() 而言：是将一个或多个元素添加到数组的 开头 ，并返回该数组的新长度；

    语法结构：

    数组名.unshift(元素1 , 元素2 , ...)

    • 1

    注意：在项目开发的过程中，数组名.push() 方法更为常用；

    3.2 删

    删：就是使数组删除元素，通常用到 数组名. pop() 、 数组名. shift() 和 数组名. splice() 方法将数组中的元素删除；不过虽然都是 删，但是它们依旧是存在很大区别的；

    ① 对于 数组名. pop() 而言：是将数组中最后一个元素删除，并返回该元素的值；

    语法结构：

    数组名.pop()
//括号内不用写任何内容，自动删除数组最后一个元素

    • 1
    • 2

    ② 对于 数组名. shift() 而言：是将数组中第一个元素删除，并返回该元素的值；

    语法结构：

    数组名.shift()
//括号内不用写任何内容，自动删除数组第一个元素

    • 1
    • 2

    ③对于数组名.splice() 而言：是删除数组中的指定一个或多个元素；

    语法结构：

    数组名.splice(start, deleteCount)

    • 1

    名词解释：
    ①start 起始位置：指定修改的开始位置（从0计数）；
    ②deleteCount：表示要移除的数组元素的个数， 如果省略则默认从指定的起始位置删除到最后；

    注意：在项目开发的过程中，数组名.splice() 方法是极为重要的；

    3.3 改

    改：就是更改数组中已存在某个或某些元素的值；

    语法结构：

    数组名[i] = 所要更改为的数值

    • 1

    3.4 查

    查：就是查找数组中已存在某个或某些元素的值，这里就需要用到遍历数组的方法了；

    语法结构：

    for(let i = 0; i < 数组名.length; i++){
    数组名[i] = 所要查询的数值
}

    • 1
    • 2
    • 3

    总结

    今天又是继续学习JS的一天，内容不多，但练习极为重要，今天所总结出来的所有知识，希望对大家有用，同时也希望这篇文章可以有一个好的展现量和得到更多人的支持，谢谢每一位浏览文章的人，要相信小柴码文，必是好文，欢迎各位 点赞+收藏+关注 啦! ! !

    以上就是所要介绍的JavaScript基础学习的第三节内容，后续即将更新移动Web的学习目标。感谢关注和支持，让我们一起成长！

    有兴趣可回顾一下Java系列技术之JavaScript基础（从入门开始）②的文章内容，再结合之前所介绍的CSS基础学习以及HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！

  • 相关阅读:
    Mongo 实现简单全文检索
    软件测试---产品需求文档测试
    VIT transformer详解
    NetCore使用Dapper查询数据
    CSS 不需要清除浮动的圣杯布局~面试可能会问
    VR全景广告：让消费者体验沉浸式交互，让营销更有趣
    【探索Linux】—— 强大的命令行工具 P.7（进程 · 进程的概念）
    数学问题-反射定律&折射定律的向量形式推导
    积雪草酸肌白蛋白纳米粒|野黄芩苷豆清白蛋白纳米粒|黄芩苷蓖麻蛋白纳米粒（齐岳）
    Centos8部署LNMP架构
  • 原文地址：https://blog.csdn.net/IAMLSD550/article/details/126772689