Web前端系列技术之JavaScript基础（从入门开始）③

努力学前端的小柴

已于 2022-09-13 14:42:24 修改

阅读量367

点赞数 5

分类专栏： JavaScript基础学习文章标签： javascript 前端开发语言 web 数据结构

于 2022-09-08 21:36:12 首次发布

本文链接：https://blog.csdn.net/IAMLSD550/article/details/126772689

版权

JavaScript基础学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript基础学习三

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

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

七、FOR循环

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

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

语法结构：

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

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

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

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

1. 循环嵌套：

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

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

语法结构：

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

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

① 案例代码：

<!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>
        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(`
                <div> ${j} x ${i} = ${j * i} </div>
                `)
            }
            document.write('<br>')
        }
    </script>
</body>
</html>

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

八、数组

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

在这里插入图片描述

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

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

数组部分相关的术语：

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

数组的声明：

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

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

1. 数组取值

语法结构：

数组名 [ 下标 ]

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

2. 遍历数组

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

语法结构：

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

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

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

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

3. 基本操作

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

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

3.1 增

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

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

语法结构：

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

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

语法结构：

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

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

3.2 删

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

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

语法结构：

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

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

语法结构：

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

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

语法结构：

数组名.splice(start, deleteCount)

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

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

3.3 改

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

语法结构：

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

3.4 查

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

语法结构：

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

总结

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

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

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

努力学前端的小柴

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端系列技术之JavaScript基础（从入门开始）③

今天所要介绍的内容是：FOR循环 + 数组小柴码文，必是好文，欢迎各位++关注啦!!!以上就是所要介绍的JavaScript基础学习的第一节内容，后续即将更新移动Web的学习目标。有兴趣可回顾一下Java系列技术之JavaScript基础（从入门开始）②的文章内容，再结合之前所介绍的CSS基础学习以及HTML基础学习，大脑里的内容会更加丰富而充实的，毕竟综合性复习和学习是更会加深印象的哟！！！
复制链接

扫一扫