数组语法总结

已于 2022-04-02 21:20:03 修改
阅读量922 收藏 2
点赞数
分类专栏： JS基础 文章标签： javascript
于 2022-03-22 18:15:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65100963/article/details/123656542
版权

什么是数组?

数组 : 是一种复杂数据类型
数组作用 : 可以在变量中 ‘存储多个数据’
数组内存原理 : 数组内存由三个部分组成(数组三要素)
元素: 数组中的数据
下标: 元素的位置
长度: 元素的数量

1.数组语法

1.1数组声明

数组声明： let 数组名 = [元素1,元素2,元素3,…]

let arr = [23, 56, 78, 89, 12]

1.2数组取值

数组取值 : 数组名[下标]

console.log(arr[2])

查询元素下标
indexOf()

let arr=[10,20,30,40]
log(arr.indexOf('10'))//0

1.3数组长度

数组长度 : 数组名.length

console.log(arr.length)

在这里插入图片描述

1.4数组遍历

数组遍历： 依次读取数组每一个元素
固定格式的for循环:

for(let i = 0;i < arr.length ;i++){
      arr[i]
 }

let arr = [3, 6, 7, 9, 3, 5]
for (i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

2.数组操作

2.1查询

数组取值(查) : 数组名[下标]

let arr = [2, 5, 6, 3, 7, 9]
console.log(arr[2])
console.log(arr[6])

在这里插入图片描述
(1)如果下标存在,则是获取元素值
(2)如果下标不存在,则是获取undefined

2.2修改

数组赋值(改): 数组名[下标] = 值

let arr = [2, 5, 6, 3, 7, 9]

arr[2] = 4
console.log(arr)

arr[6] = 10
console.log(arr)

arr[10] = 8
console.log(arr)

在这里插入图片描述
(1)如果下标存在,则是修改元素值
(2)如果下标不存在,则是新增元素

2.3新增

let arr = [10, 20, 30, 40]
arr.push(50, 60)
console.log(arr)
arr.unshift(1, 2)
console.log(arr)

在这里插入图片描述
(1)数组名.push(元素):一个或多个元素,添加到数组末尾
(2)数组名.unshift(元素):一个或多个元素,添加到数组开头

2.4删除

let arr = [10, 20, 30, 40, 50]
arr.pop() //删除最后一个元素
arr.shift() //删除开头一个元素

在这里插入图片描述
(1)数组名.pop() :删除数组最后一个元素
(2)数组名.shift() :删除数组第一个元素
()小括号里不写值

(3)数组名.splice(下标,数量) :从指定下标开始删除指定数量的元素

let arr = [10, 20, 30, 40, 50]
arr.splice(2, 1) //从下标2的元素开始删除一个


let arr1 = [10, 20, 30, 40, 50]
arr1.splice(2, 1, 60, 70)
console.log(arr1);

在这里插入图片描述
arr.splice(下标, 删除的个数)
arr1.splice(下标, 删除的个数, 在删除位置新增的数, 在删除位置新增的数)

3.数组应用

3.1数组求和

思路:
(1)声明一个变量存储结果
(2)遍历数组中每一个元素
(3)累加

//求一组数据的总和
 let arr = [11, 22, 33, 44, 55, 66]
let sum = 0
for (let i = 0; i < arr.length; i++) {
  sum += arr[i]
}
console.log(sum)

//求一组数据偶数的总和
let arr1 = [11, 22, 33, 44, 55, 66]
let sum1 = 0
for (let i = 0; i < arr1.length; i++) {
if (arr[i] % 2 == 0) {
  sum1 += arr1[i]
 }
}
console.log(sum1)

3.2数组求最大值/最小值

思路:
(1)声明变量默认为第一个元素
(2)遍历数组
(3)依次比较大小，然后赋值

//求最大值
let arr = [11, 88, 22, 66, 33, 44, 55]
let max = arr[0]
for (let i = 1; i < arr.length; i++) {
   if (arr[i] > max) {
     max = arr[i]
   }
}
console.log(max)

//求最小值
let arr1 = [11, 88, 22, 66, 33, 44, 55]
let min = arr[0]
for (let i = 1; i < arr.length; i++) {
   if (arr[i] < min) {
      min = arr[i]
   }
}
console.log(min)

3.3筛选数组

思路:
(1)声明新数组
(2)变量数组,找出符号条件的元素
(3)将符号条件的元素放入新数组中

 //需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
let newArr = []
for (let i = 0; i < arr.length; i++) {
    if (arr[i] > 10) {
      newArr.push(arr[i])
    }
}
console.log(newArr)

实际开发场景：去除数组中指定的元素，生成新数组
(1)微信账单： 收入 + 支出。 需求是只看收入(支出类型去除)
(2)商品列表 ： 京东自营(把非自营商品去除)

3.4数组去0

//需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
let newArr = []
for (let i = 0; i < arr.length; i++) {
   if (arr[i] != 0) {
     newArr.push(arr[i])
   }
}
console.log(newArr)

3.5根据数组生成柱状图

/*需求 
(1)让用户输入四个季度数据，存入数组中
(2)根据数组中的数据，生成页面柱状图
*/
<!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>
    .box {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      width: 800px;
      height: 500px;
      margin: 50px auto;
      border-bottom: 1px solid #000;
      border-left: 1px solid #000;
    }

    .box div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-wrap: nowrap;
      align-items: center;
      width: 50px;
      height: 50px;
      background-color: skyblue;
    }

    .box div span {
      margin-top: -20px;
    }

    .box div h3 {
      width: 80px;
      margin-bottom: -25px;
    }
  </style>
</head>

<body>



  <script>
    let arr = []
    for (let i = 1; i <= 4; i++) {
      let num = +prompt(`请输入第${i}个季度的数据`)
      arr.push(num)
    }
    console.log(arr)

    document.write('<div class="box">')
    for (let i = 0; i < arr.length; i++) {
      document.write(`<div style="height:${arr[i]}px">
         <span>${arr[i]}</span>
         <h3>第${i+1}季度</h3>
         </div>`)
    }
    document.write('</div>')
  </script>
</body>

</html>

在这里插入图片描述

3.6根据数组生成手风琴盒子

<!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>
        .box {
            overflow: hidden;
            display: flex;
            width: 1120px;
            height: 260px;
            margin: 50px auto;
        }

        .box div {
            width: 120px;
            border: 1px solid #fff;
            transition: all .5s;
        }

        .box div:hover {
            width: 400px;
        }
    </style>
</head>

<body>
    <script>
        let arr = [
            './images/1.jpg',
            './images/2.jpg',
            './images/3.jpg',
            './images/4.jpg',
            './images/5.jpg',
            './images/6.jpg',
            './images/7.jpg',
        ]

        document.write('<div class="box">')
        for (let i = 0; i < arr.length; i++) {
            document.write(`<div><img src="${arr[i]}" alt=""></div>`)
        }
        document.write('</div>')
    </script>
</body>

</html>

在这里插入图片描述

3.7案例

让用户输入五个有效年龄（0-100之间），放入数组中,必须输入五个``有效年龄年龄，如果是无效年龄，则不能放入数组中

思路一:
循环三要素:
循环次数:有效次数5次(for)
循环条件:i<=5
循环体:输入年龄

let arr = []
for (let i = 1; i <= 5; i++) {
     let age = +prompt(`请输入第${i}个有效年龄`)
     if (age >= 0 && age <= 100) {
         arr.push(age)
     } else {
            i--
            }
}

思路二:
循环三要素:
循环次数:没有次数(while)
循环条件:数组长度<5
循环体:如果是0~100间加入数组

let arr = []
while (arr.length < 5) {
   let age = +prompt(`请输入第${arr.length+1}个有效年龄`)
   if (age >= 0 && age <= 100) {
     arr.push(age)
   }
}
九九nine9
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
二维数组向稀疏数组的相互转换
m0_47014744的博客
09-21 237
实现二维数组向稀疏数组的转换 以及稀疏数组向二维数组的转换 代码块如下： public static void main(String[] args) { //创建一个原始二维数组，其中0表示没棋子，1表示白棋，2表示黑棋 int arr[][]=new int[11][11]; arr[2][1]=1; arr[6][5]=1; arr[3][4]=2; arr[10][9]=2; .
js从数组中取值
wya201106100115的博客
03-21 5785
js数组中取值 后面我采用first和last的方式：这种获取方式就可以了，就可以获取父级和同级的元素。在这里做个记录。
基础语法——数组
最新发布
m0_72578310的博客
03-01 329
第一种较常用。
JAVA 的四种数组创建 和取值
2301_77276823的博客
04-15 1925
JAVA 的四种数组创建 和取值（带详解）
数组基础语法
Wallace的博客
10-10 135
Java的数组
Ruby创建数组方法总结
08-26
另一种创建数组的方式是使用数组文字，这是一种简洁的语法，特别适用于预先知道数组内容的情况。数组文字是用方括号`[]`包围的一系列由逗号分隔的值。例如，`days = ["Monday", "Tuesday", "Wednesday", "Thursday",...
Python语法总结
08-17
Python语法总结，语法学习讲义和笔记。 部分目录： 1. Python 3 1.1. 数据类型： 3 1.1.1. 整数，浮点数，字符串，布尔值（True、False），空值（None） 3 1.1.2. 数据类型list——数组： 3 1.1.3. tuple——常值...
PHP基本语法总结
10-25
【PHP基本语法总结】 PHP（Hypertext Preprocessor，超文本预处理器）是一种广泛使用的开源服务器端脚本语言，尤其适合Web开发，并可嵌入HTML中。PHP的强大之处在于其灵活性和广泛的功能，几乎可以实现任何Web应用...
C++语法总结
07-03
下面是对C++语法的详细总结： 1. **基本语法**： - C++程序由一个或多个源文件组成，每个源文件包含一系列函数定义和声明。 - 源文件以`.cpp`或`.cc`为扩展名。 - 程序入口点通常是`main()`函数。 - 注释可以...
JAVA基础语法总结
04-13
这篇总结将深入探讨Java的基础语法，帮助初学者理解并掌握Java编程的核心概念。 **1. Java程序结构** Java程序由类（Class）组成，每个类都包含方法（Method）。程序执行始于main方法。例如： ```java public class...
数组的基础语法及代码示例
静水流深，不显不露，喜欢迎难而上！
03-08 1397
目录 1.什么是数组 2.一维数组 3.一维数组存放空间示意图 4.一维数组的初始化 5.一维数组经典例题 --斐波那契数列 6.二维数组 7.二维数组的初始化 8.二维数组例题 --找出矩阵最大值和最小值所在位置 1.什么是数组 是一组相同类型的数据的有序集合。 数组中的元素在内存中都是连续存放，每个元素都属于同一种数据类型数组中的 数组中的数据数据按照一定的顺序排列存放 2.一维数组 定义：类型名 数组名 [数组长度] int a [10] //int为数据.
JavaScript基础知识——练习巩固（2）
weixin_48719464的博客
10-16 1312
使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24]使用for循环 - 求出数组里大于5的i和 [4, 9, 5, 20, 3, 11]使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5]计算[2, 6, 18, 15, 40] 中能被3整除的偶数的个数。计算[2, 6, 18, 15, 40] 中能被3整除的偶数的和。例如: [88,20,10,100,50] 打印 2。例如: [88,20,30,100,50] 打印-1。
数组的定义和声明，以及数组在方法中的使用
2301_76822545的博客
03-11 571
第一种：声明的同时也为数组中的元素赋值。数据类型[] 数组的名字 = {值1, 值2, 值3,...};或数据类型 数组的名字 []= {值1, 值2, 值3,...};第二种：声明的是空的数组，后续要进行赋值。数据类型[] 数组的名字 = new 数据类型[容量];或者数据类型 数组的名字[] = new 数据类型[容量];可以利用for循环对数组进行赋值，也可以用for循环对数组进行取值。第三种：了解就可以了，并不常用。
Java基础语法——数组
qq_52519008的博客
05-08 1601
每日正能量 世上还有很多美好的事物等着你，别抱怨更不要放弃，所以你要内心温柔，安静努力。 1. 首先我们引入几个问题： 1.1 什么是数组？ 数组就是具有相同数据类型且按一定次序排列的一组变量的集合体。即用一个变量名表示一组数据。 1.2什么是数组元素？ 构成一个数组的每一个数据称为数组元素。 1.3什么是数组下标 各元素通过下标来区分。下标表明了数组元素在数组中的位置。在一个数组中，数组下标是用整数表示的，从0开始，...
java:数组取值的过程
Y.z-努力才有成功的机会...
08-06 3728
  package day02; public class Array { public static void main(String[]args){ int[] arr = new int[3]; int[] arr = {11,22,33,44,55}; } } * A:栈(掌握)-栈针的概念，比如压子弹一样，先进后出 * 存储局部变量 ...
vue遍历对象中的数组取值
热门推荐
amily8023的博客
12-13 3万+
前几天小项目，没考虑周全，让后端改接口，改成数组中包含对象中包含数组的形式，后来越琢磨越不对，后台把所有数据放在了一个对象里，我拿弹窗数据不好拿，索性又改了回来，把后端折腾够呛，自己也折腾够呛，发上来，以示警戒 改前拿数据 &lt;div class='your-container'&gt; &lt;div class="sortText"&gt; &lt;div&gt;综合排序&...
c语言练习题.pdf
09-26
从选择题中可以看出，对于数组的声明和初始化需要理解清楚数组的语法和规则，特别是多维数组的声明和初始化可能比较复杂，需要多加练习。同时，通过编程题可以进一步加深对数组的操作和运用，比如对数组的复制、排序...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值