js基础第三天

白昼苏打
275 阅读2分钟

1.数组 : 数组内存由三个部分组成(数组三要素)

    元素: 数组中的数据
    下标: 元素的位置
    长度: 元素的数量
 1.1  使用数组： 一个变量存储多个数据
    let array = ['小明', '小刚', '小花', '小美', '小白']
    console.log(array)
    
 1.2 数组语法
    1.数组声明：  let  数组名 = [元素1,元素2,元素3,.......]
    2.数组取值    数组名[下标]
    3.数组长度    数组名.length
    
   1.数组声明   let 数组名 = [ 元素1,元素2,元素3,…………………… ]
    let arr = [ 60 , 88 , 90 , 100 , 50 ]
    console.log( arr )//数组名

image.png

   2.数组元素取值  数组名[下标]
    console.log( arr[2] )//90

   3.数组长度  数组名.length
    console.log( arr.length)//5
    
  1.3 数组遍历： 依次读取数组每一个元素值
     固定格式的for循环:  
        for(let i = 0;i < arr.length ;i++){
            arr[i]
             }

2.数组遍历

     /* 
    1.数组声明：  let  数组名 = [元素1,元素2,元素3,.......]
    2.数组取值    数组名[下标]
    3.数组长度    数组名.length
    4.数组遍历 : 获取数组每一个元素的值
        数组遍历是一个固定格式for循环 :  for(let i = 0;i < 数组.length ;i++){  数组名[i] }
    */
    let arr = [ 60 , 88 , 90 , 100 , 50  ]
    
    for(let i = 0; i < arr.length ;i++){//i = 0 1 2 3 4
        console.log( arr[i] )
    }
    // console.log( arr[0] )//60
    // console.log( arr[1] )//88
    // console.log( arr[2] )//90
    // console.log( arr[3] )//100
    // console.log( arr[4] )//50

image.png

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

下标存在:则是"获取"元素值
下标不存在:则是"获取"undefined

let arr = [ 60,88,90,100,50 ]
console.log( arr[1] )//88
console.log( arr[5] )//undefined

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

下标存在:则是"修改"元素值
下标不存在:则是"新增"元素值

let arr = [ 60,88,90,100,50 ]
arr[0] = 70
console.log( arr )//[70, 88, 90, 100, 50]//把第一个数字60改为70

arr[5] = 200
console.log( arr )//[70, 88, 90, 100, 50, 200]//在数组最后添加200

5.数组新增有两个方法

数组名.push(元素)  : 一个或多个元素,添加到末尾
数组名.unshift(元素)  : 一个或多个元素,添加到开头
5.1.数组名.push(元素)  : 一个或多个元素,添加到末尾                            
    let arr = [30, 60, 50, 20, 10]
    arr.push(8)
    console.log(arr); //[30, 60, 50, 20, 10, 8 ]
5.2.数组名.unshift(元素)  : 一个或多个元素,添加到开头
    let arr1 = [30, 60, 50, 20, 10]
    arr1.unshift(1, 2)
    console.log(arr) //[1, 2, 30, 60, 50, 20, 10]

6.数组删除元素的两个方法

    数组删除
        数组名.pop() : 删除数组 最后一个元素
        数组名.shift() : 删除数组 第一个元素

    //数组名.pop() : 删除数组 最后一个元素
    let arr = [10,20,30,40,50]
    arr.pop()
    console.log( arr )//[10, 20, 30, 40]

    //数组名.shift() : 删除数组 第一个元素
    arr.shift()
    console.log( arr )//[20, 30, 40]

7.删除数组指定下标元素

 数组名.splice(下标,数量) : 从指定下标开始删除元素
  第一个值: 从哪个下标开始删除
  第二个值: 要删除几个元素(如果不写, 则会删除后面所有元素)
   
 let arr = [100, 90, 80, 70, 60, 50]
 arr.splice(2, 2) //从第2个下标开始,删除2个元素
 console.log(arr); //[100,90,60,50]
 
 let arr = [100, 90, 80, 70, 60, 50]
 arr.splice(2) //从第2个下标开始,删除后面所有元素
 console.log(arr); //[100,90]
 
 let arr2 = [10, 20, 30, 40, 50]
 arr2.splice(2, 1, 60)从第二个下标开始,删除一个元素并且增加一个元素
 console.log(arr2)//[10, 20, 60, 40, 50]

8.案例:求数组偶数的和

  let sum = 0
    let arr = [30, 39, 50, 55, 99, 60]
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] % 2 == 0)
            sum += arr[i]
    }
    console.log(sum);

9.求一组数据的 总和

  (1)声明一个变量存储结果
  (2)遍历数组中每一个元素
  (3)累加
  let arr = [20, 50, 66, 88, 70]

  1.声明空变量存储结果
  let sum = 0
  2.遍历数组
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
    3.累加
    sum += arr[i]
  }

  console.log(sum, sum / arr.length)

10.求数组最大值

     let arr = [20, 50, 40, 80, 30]
     let max = arr[0]
     for (let i = 1; i < arr.length; i++) {
      if (arr[i] > max)
       max = arr[i]
     }
     console.log(max);
     1.声明变量默认为第一个元素
     2.遍历数组
     3.依次比较大小，然后赋值

11.求数组最小值

     let arr = [20, 50, 40, 80, 30]
     let min = arr[0]
     for (let i = 1; i < arr.length; i++) {
         if (arr[i] < min)
             min = arr[i]
     }
     console.log(min);

12.案例

     需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
     
    1.找出指定范围符合条件的数
    2.把符合条件的数放入新数组中（新增元素）
    let newArr = []
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    for (let i = 0; i <= arr.length; i++) {
        if (arr[i] >= 10)
            newArr.push(arr[i])
    }
    console.log(newArr);

13.案例

 需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组

    实际开发场景：去除数组中指定的元素，生成新数组
    (1)微信账单： 收入 + 支出。  需求是只看收入(支出类型去除)
    (2)商品列表 ： 京东自营(把非自营商品去除)
    let newArr = []
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] != 0)
            newArr.push(arr[i])
    }
    console.log(newArr);

14.根据数组生成柱状图

     .box {
        margin: 50px auto;
        width: 900px;
        height: 500px;
        border-left: 1px solid #000;
        border-bottom: 1px solid #000;
        display: flex;
        justify-content: space-around;
        align-items: flex-end;
        text-align: center;
    }
    
    .box div {
        width: 50px;
        height: 100px;
        background-color: pink;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .box>div>span {
        margin-top: -20px;
    }
    
    .box>div>h3 {
        margin-bottom: -25px;
    }
</style>

<script>
    /*需求 
    (1)让用户输入四个季度数据，存入数组中
    (2)根据数组中的数据，生成页面柱状图
    */

    //(1)让用户输入四个季度数据，存入数组中
    let arr = []
    for(let i = 1;i<=4;i++){
      let num =  +prompt(`请输入第${i}个季度数据`)
      arr.push(num)
    }
    console.log( arr )

    //(2)根据数组中的数据，生成页面柱状图
    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>

image.png

15.案例

     写一个程序，要求如下（★★）
    a.让用户输入五个有效年龄（0-100之间），放入数组中
      必须输入五个``有效年龄年龄，如果是无效年龄，则不能放入数组中
    b.打印出所有成年人的年龄 (数组筛选)
    c.打印出所有人的平均年龄 （累加）
    d.打印出最大年龄和最小年龄 （最大值）
    e.打印出所有人总年龄 （累加）
第一种方法:for循环
        let sum = 0
        let arr = []
        let age
    for (let i = 1; i <= 5; i++) {
        age = +prompt(`请输入第${i}个年龄`)
        if (age > 0 && age <= 100) {
            arr.push(age)
        } else {
            alert('请重新输入年龄 ')
            i--
        }
    }
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] >= 18) {
            console.log(arr[i]);
        }
        sum += arr[i]
    }
    console.log(sum / arr.length);
    let max = arr[0]
    let min = arr[0]
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i]
        }
        if (arr[i] < min) {
            min = arr[i]
        }
    }
    console.log(max, min, sum);
第二种方法:while循环
 循环三要素
    循环次数 :  有效次数5次(for )    没有次数(while)
    循环条件 :       i<=5               数组长度 < 5        
    循环体 ： (1)输入年龄 (2)如果是0-100之间，加入数组中
      let arr = []
      while (arr.length < 5) {

    let age = +prompt(`请输入第${ arr.length+1 }个人年龄`)

    if (age >= 0 && age <= 100) {
      //有效
      arr.push(age)
    }
  }

16.循环嵌套---双重for循环

   /* 
  循环嵌套(双重循环) :  循环里面 嵌套 一个循环
  举例： 打印 4行5列星星,一次只能打印一个
  ☆ ☆ ☆ ☆ ☆
  ☆ ☆ ☆ ☆ ☆
  ☆ ☆ ☆ ☆ ☆
  ☆ ☆ ☆ ☆ ☆
  */

  //外层循环：行
  for(let i = 1;i<=4;i++){
    //内层循环： 列
    for(let j = 1;j<=5;j++){
      document.write('☆ ')
    }
    document.write('<br>')
  }

image.png

17.案例:循环嵌套三角形

 /* 需求：打印一个三角形星星
    ☆
    ☆ ☆
    ☆ ☆ ☆
    ☆ ☆ ☆ ☆
    ☆ ☆ ☆ ☆ ☆
    */

    /* 
    i = 1 , 第一行，需要打印 1个星星   for(let j = 1; j<=1 ; j++){}
    i = 2 , 第二行，需要打印 2个星星   for(let j = 1; j<=2 ; j++){}
    i = 3 , 第三行，需要打印 3个星星   for(let j = 1; j<=3 ; j++){}
    */   

    //1.外层循环 : 行
    for( let i = 1;i<=5;i++){
        
        //2.内层循环
        for(let j = 1; j <= i ;j++){
            document.write('☆ ')
        }
        document.write('<br>')
    }

image.png

18.案例:九九乘法表

<style>
    span{
        display: inline-block;
        width: 80px;
        height: 30px;
        border: 1px solid pink;
        text-align: center;
        line-height: 30px;
        margin: 1px;
    }
</style>
</head>
<body>
<script>
    /* 
    外层循环： i = 9 行
    内层循环 : j <= j 列  
    */ 
    //1.外层循环   
    for(let i = 1;i<=9;i++){
        //2.内层循环
        for(let j = 1;j <= i;j++){
            document.write( `<span>${j} * ${i} = ${i*j}</span>` )
        }
        document.write( '<br>' )
    }
 </script>

image.png

19.需求：

将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中 5到10之间的元素选出来，放入新数组

 let arr = [2, 0,0, 6, 1, 77, 0, 52, 0, 25, 7]
    //1.声明新数组
    let newArr = []
    //2.遍历数组，找出符合条件的元素
    for(let i = 0;i<arr.length;i++){// i 下标   arr[i] 元素
       if(arr[i] >= 5 && arr[i] <= 10){
           //3.放入新数组中(新增元素)
           newArr.push( arr[i] )
       }
    }

    console.log( newArr )

image.png

20.案例

 <style>
    .box{
        width: 1120px;
        height: 260px;
        margin: 50px auto;
        display: flex;
        overflow: hidden;
    }

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

    .box>div:hover{
        width: 400px;
    }
</style>
</head>
<body>
<!-- <div class="box">
    <div><img src="./images/1.jpg" alt=""></div>
    <div><img src="./images/2.jpg" alt=""></div>
    <div><img src="./images/3.jpg" alt=""></div>
    <div><img src="./images/4.jpg" alt=""></div>
    <div><img src="./images/5.jpg" alt=""></div>
    <div><img src="./images/6.jpg" alt=""></div>
    <div><img src="./images/7.jpg" alt=""></div>
</div> -->

<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>

image.png

avatar
文章
阅读
粉丝