JavaScript技术基础—数组

艾小哲

于 2024-11-03 21:05:42 发布

阅读量989

点赞数 26

文章标签： javascript 前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/2302_81012520/article/details/143470679

版权

数组

数组是什么
- 数组：(Array)是一种可以按顺序保存数据的数据类型
- 为什么要数组？思考：如果我想保存一个班里所有同学的姓名怎么办？场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便
数组的基本使用
- 目标：能够声明数组并且能够获取里面的数据
- 声明语法
  //let 数组名 = [数据1，数据2，...，数据n] //let arr = new Array(数据1,数据2,..数据n) let names = ['小李'，'小明','小张','小米'] // 数组是按顺序保存，所以每个数据都有自己的编号 // 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推 // 在数组中，数据的编号也叫索引或下标 // 数组可以存储任意类型的数据
- 取值语法
  数组名[下标] let names = ['小李'，'小明','小张','小米'] names[0] //小李 names[2] //小张
  - 通过下标取数据取出来是什么类型的，就根据这种类型特点来访问
- 一些术语：
  let names = ['小李'，'小明','小张','小米'] console.log(names[0]) //小李 console.log(names[2]) //小张 console.log(names.length) // 4
  - 元素：数组中保存的每个数据都叫数组元素
  - 下标：数组中数据的编号
  - 长度：数组中数据的个数，通过数组的length属性获得
- 遍历数组(重点)
  //语法 for(let i = 0; i < 数组名.length; i++){ 数组名[i] } //例 let nums = [10,20,30,40,50] for(let i = 0; i < nums.length; i++){ document.write(nums[i]) } // 求数组 [2,6,1,7,4] 里面所有元素的和以及平均值 let arr = [2, 6, 1, 7, 4]; let sum = 0; for (let i = 0; i < arr.length; i++) { sum += arr[i]; } console.log(sum); // 18 console.log(sum / arr.length); // 3.6 //求数组 [2,6,1,77,52,25,7] 中的最大值 let arr = [2, 6, 1, 77, 52, 25, 7]; let sum = arr[0]; for (let i = 1; i < arr.length; i++) { if (arr[i] > sum) { sum = arr[i]; } } console.log(`最大值是：${sum}`); //求数组 [2,6,1,77,52,25,7] 中的最小值 let arl = [2, 6, 1, 77, 52, 25, 7]; let suml = arl[0]; for (let i = 1; i < arl.length; i++) { if (arl[i] < suml) { suml = arl[i]; } } console.log(`最小值是：${suml}`);
  - 目标：能够遍历输出数组里面的元素用循环把数组中每个元素都访问到,一般会用for循环遍历
  - 操作数组
  - - 查
      
      改
    - 增
    - 总结：
      - 1.想要数组末尾增加数据元素利用那个方法？
        
        arr.push()
        
        可以添加一个或者多个数组元素
        
        返回的是数组长度
      - 2.想要数组开头增加数据元素利用那个方法？
        
        arr.unshift()
        
        可以添加一个或者多个数组元素
        
        返回的是数组长度
      - 重点记住那个？
        
        arr.push()
      - 数组筛选需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
        
        分析：
        
        ①：声明一个新的数组用于存放新数据newArr
        
        ②：遍历原来的旧数组，找出大于等于 10 的元素
        
        ③：依次追加给新数组 newArr
      - 数组去0 需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
        
        分析：
        
        ①：声明一个新的数组用于存放新数据newArr
        
        ②：遍历原来的旧数组，找出不等于0的元素
        
        ③：依次追加给新数组 newArr
      - 删
      - 总结：
        
        想要数组末尾删除1个数据元素利用那个方法？带参数吗？
        
        arr.pop()
        
        不带参数
        
        返回值是删除的元素
        
        想要数组开头删除1个数据元素利用那个方法？带参数吗？
        
        arr.splice(起始位置, 删除的个数)
        
        开发很常用，比如随机抽奖，比如删除指定商品等
        
        arr.shift()
        
        不带参数
        
        返回值是删除的元素
        
        想要指定删除数组元素用那个？开发常用吗？有那些使用场景？
        
        arr.splice(起始位置, 删除的个数)
        
        开发很常用，比如随机抽奖，比如删除指定商品等等
      - 综合案例1：渲染柱形图
      - <!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> * { margin: 0; padding: 0; } .box { display: flex; width: 700px; height: 300px; border-left: 1px solid pink; border-bottom: 1px solid pink; margin: 50px auto; justify-content: space-around; align-items: flex-end; text-align: center; } .box>div { display: flex; width: 50px; background-color: pink; flex-direction: column; justify-content: space-between; } .box div span { margin-top: -20px; } .box div h4 { margin-bottom: -35px; width: 70px; margin-left: -10px; } </style> </head> <body> <script> // 1. 四次弹框效果 // 声明一个新的数组 let arr = [] for (let i = 1; i <= 4; i++) { // let num = prompt(`请输入第${i}季度的数据:`) // arr.push(num) arr.push(prompt(`请输入第${i}季度的数据:`)) // push记得加小括号，不是等号赋值的形式 } // console.log(arr) ['123','135','345','234'] // 盒子开头 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> <h4>第${i + 1}季度</h4> </div> `) } // 盒子结尾 document.write(` </div>`) </script> </body> </html>
        
        2.冒泡排序
      - // let arr = [5, 4, 3, 2, 1] let arr = [2, 4, 3, 5, 1] // for (let i = 0; i < arr.length - 1; i++) { // for (let j = 0; j < arr.length - i - 1; j++) { // // 开始交换但是前提第一个数大于第二个数才交换 // if (arr[j] > arr[j + 1]) { // // 交换2个变量 // let temp = arr[j] // arr[j] = arr[j + 1] // arr[j + 1] = temp // } // } // } // arr.sort() // 排序 // sort 升序排列 // arr.sort(function (a, b) { // return a - b // }) // sort() 降序 arr.sort(function (a, b) { return b - a }) console.log(arr) // let num1 = 10 // let num2 = 20 // let temp = num1 // num1 = num2 // num2 = temp

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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