js基础（三）

最新推荐文章于 2023-06-10 03:40:26 发布

AtangHUANG

最新推荐文章于 2023-06-10 03:40:26 发布

阅读量320

点赞数 1

文章标签： html 前端 javascript vscode

本文链接：https://blog.csdn.net/AtangHUANG/article/details/124955990

版权

一、for循环

1、循环三要素

变量初始化条件判断变量更新

<script>
  // 1. 语法格式
  // for(起始值; 终止条件; 变化量) {
  //   // 要重复执行的代码
  // }

  // 2. 示例：在网页中输入标题标签
  // 起始值为 1
  // 变化量 i++
  // 终止条件 i <= 6
  for(let i = 1; i <= 6; i++) {
    document.write(`<h${i}>循环控制，即重复执行<h${i}>`)
  }

2、for循环基本语法
for（变量初始化；条件判断；变量更新）{
循环体代码需要重复执行的代码
}

for(let num = 1; num <= 20;num++){
      console.log(`加油努力 拉屎要用力
拉不出来没关系，至少放个屁，第${num}次`);
    }

3、执行规则

for（语句1；语句2；语句3）{
    循环体
}

① 执行语句1（变量初始化，只会执行一次）

② 判断语句2是否成立

成立，则执行循环体代码

不成立，循环结束，执行大括号后面的代码

③ 重复步骤“②”

4、退出循环

break ：退出整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用

  for(let i = 1;i <= 10;i++){
    if(i === 5){
      break
    }
  }

continue ：退出当前循环，退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue

  for(let i = 1;i <= 10;i++){
    if(i === 5){
      break
    }
  }

5、循环嵌套

for（外部声明记录循环的变量； 循环条件；变化量）{
		for（内部声明记录循环次数的变量；循环条件；变化量）{
				循环体
		}
}

注意：外层执行一次，内层执行多次

for(let i = 1;i <= 5;i++){
        for(let n = 1;n <= i;n++){
          document.write('★')
        }
        document.write('<br>')
      }

//打印小星星
//第一行一个，第二行两个，以此类推

<!--  九九乘法表  -->
<!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{
      border: 1px solid rgb(26, 255, 0);
      display: inline-block;
      padding: 5px 10px;
      margin: 2px;
      width: 99px;
      border-radius: 5px;
      text-align: center;
      color: rgba(255, 0, 0, 0.716);
      background-color: rgb(132, 249, 161);
    }
  </style>
</head>
<body>
  <script>
for(let i = 1;i <= 9;i++){
      for(let n = 1;n <= i; n++){
        document.write(`<div>${n} x ${i} = ${n * i}</div>`)
      }
      document.write('<br>')
    }
  </script>
</body>
</html>

6、死循环

while 构造死循环

while （true）{  }

for 构造无限循环没有起始值，也没有结束值

for（ ; ; ）{   }

for 循环和 while一样，如果不合理设置增量和终止条件，便会产生死循环

当明确循环次数的时候，推荐使用for循环

二、数组

1、声明数组

自变量 [ ]

let arr = [ ]   //它是空数组

使用new 关键字声明

let array = new Array（1,2,3,4）
console.log(array)   →  此时array为（1,2,3,4）

2、遍历数组（使用较多属于重点）

 //语法
for (let i = 0 ; i < 数组名.length ; i++) {
	console.log( 数组名 [ i ] )
}


//示例
for(let i = 0 ; i < arr.length ; i ++ ){
console.log(arr [ i ] )
}

可以理解为让数组循环

方便打印出数组内的每一个数据

3、通过索引值可以为数组里面的元素重新赋值

变量名[索引号] = '值'
console.log(变量名)

4、访问数组

语法：变量名[下标]

console.log(变量名[下标])

数组的下标是从 0 开始

 let classes = ['小明', '小刚', '小红', '小雪', '小丽']
索引值             0       1       2       3       4
  
  // 1. 访问数组，语法格式为：变量名[索引值]
  document.write(classes[0]) // 结果为：小明
  document.write(classes[1]) // 结果为：小刚
  document.write(classes[4]) // 结果为：小丽

5、数组长度

length 可以用来显示数组的长度

数组的长度是从 1 开始

// 定义一个数组
  let arr = ['张三', '李四', '王五']
  // 数组对应着一个 length 属性，它的含义是获取数组的长度
  console.log(arr.length) // 3

数组作为数据的集合，里面的元素可以是任意数据类型

三、操作数组

1、查询数组

数组名 [下标]

 let arr = ['孬蛋', '精豆']
//数组名    //下标

2、修改数组

数组[下标] = 新值

 let arr = ['孬蛋', '精豆']
let arr[1] = '小精豆'

3、新增数据

push( ) 末尾新增元素有返回值，返回的是数组的长度

语法：变量名.push('数据1'，'数据2'，...)

unshift（）在数组开头添加新的元素

语法：变量名.unshift('数据1'，'数据2'，...)

 let arr = ['孬蛋','精豆']
 let arr1 = []
   for (let i = 0;i < arr.length;i++){
    //  console.log(arr[i])
     arr1[i] = arr[i] + '挺闹腾'
   }
   arr1.push('小捣蛋')//在末尾新加一个 小捣蛋
   console.log(arr1)

   arr1.unshift('大捣蛋')//在数组开头新加一个大捣蛋
   console.log(arr1)

4、删除数据

pop( ) 删除最后一个元素

shift（）删除第一个元素

splice（）删除指定的元素

splice（对应的下标，从这个下标开始删除的个数）

splice（下标）表示从当前下标开始，后面所有的全部删除（包括自己）

  let arr = ['大捣蛋','孬蛋','精豆','小捣蛋']
    
    arr.pop()    // 删除最后一个数据
    console.log(arr)    //数组中还剩下 '大捣蛋','孬蛋','精豆'

    
    arr.shift()    // 删除第一个数据
    console.log(arr)    //数组中还剩下 '孬蛋','精豆','小捣蛋'

 
    arr.splice(下标,从当前下标对应的数据开始 往后删除数据的数量)
    arr.splice(1,2)    // 删除指定元素   从下标为 1 的数据开始，删除后边的两个数据
    console.log(arr)    //数组中还剩下 '大捣蛋','小捣蛋'