JS循环、判断和数组的简记

一、if语句

0 代表假,除此以外其他数字都为真

空字符串代表假,除此以外其他数字都为真

二、数组的增删改查

数组增加:

arr.push(新增的内容)

arr.unshift(新增的内容)

数组删除:

arr.pop():删除数组中最后一个元素,并返回该元素的值。

arr.shift():删除数组的第一个元素。

arr.splice(起始元素,删除几个元素):删除指定元素,两个参数要写准确。

                arr.splice(1,1) //从1的位置开始删,只删除一个元素

数组增加:

arr.push():

综合案例:

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>
    let arr = []
    for (let i = 1; i <= 4; i++) {
      arr.push(+prompt('请输入第一个数'))
    }
    //先打印盒子的头部
    document.write(`<div class="box">23`)
    //盒子中间
    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 arr2 = [5, 4, 3, 2, 1]
    for (let i = 0; i < arr2.length; i++) {
      for (let j = 0; j < arr2.length - i; j++) {
        if (arr2[j] > arr2[j + 1]) {
          let temp = arr2[j + 1]
          arr2[j + 1] = arr2[j]
          arr2[j] = temp
        }
      }
    }
    console.log(arr2);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值