JavaScript(04)

104 阅读1分钟

题目讲解:

1

屏幕截图 2022-03-30 084220.jpg

let i =0,可以提到括号外面,console.log(i)循环外面输出

=============================================

2

屏幕截图 2022-03-30 084853.jpg

变量是在循环里面声明,所以输出不能再括号以外输出

案例:

输入星星行列:

body>
    <script>
      //  获取行
      let n = +prompt('请输入行数');
      // 获取列
      let m = +prompt('请输入列数');

      // 第一层循环的5 表示 行
      for (let index = 1; index <= n; index++) {
        for (let index1 = 1; index1 <= m; index1++) {
          document.write('⭐');
        }
        document.write('<br/>');
      }
    </script>
  </body>

九九乘法表:

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      span{
        border: 1px solid #000;
        padding: 10px 0 ;
        width: 100px;
        text-align: center;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <script>
 for (let index = 1; index <= 9; index++) {
        for (let index1 = 1; index1 <= index; index1++) {
          let num = index1 * index;
          document.write(`<span>  ${index1} * ${index} = ${num}     </span>`);
        }
        document.write('<br/>');
      }
    </script>
  </body>

数组

数组(Array)是一种可以按顺序保存数据的数据类型

屏幕截图 2022-03-30 100403.jpg

屏幕截图 2022-03-30 100525.jpg

代码演示:

屏幕截图 2022-03-30 101708.jpg

for循环+数组:

屏幕截图 2022-03-30 105408.jpg

代码:

<body>
    <script>
        let arr=['a','b','c','d','e','f']
        for (let index = 0; index < 6; index++) {
            console.log(arr[index]);
            
        }
    </script>
</body>

进阶:

数组求和:

代码:

<body>
    <script>
      // 数组
      let arr = [2, 6, 1, 7, 4];
      // 存放总的数据
      let sum = 0;
      // 循环
      for (let index = 0; index < arr.length; index++) {
        // 使用变量 来存放数组中的每一个数值
        sum += arr[index];
        // index=0   sum += arr[index]  sum += 2;
        // index=1   sum += arr[index]  sum += 6;
      }
      console.log(sum); // 和 20
      // 平均值 =   和 / 数组的长度
      console.log(sum / arr.length);
    </script>
  </body>

数组最大值及最小值:

最大值:

 <body>
    <script>
      let arr = [-2, -6, -1, -77, -52, -25, -7];
 		let max = arr[0];
 for (let i = 0; i < arr.length; i++) {
		if (arr[i] > max) {
 			max = arr[i];
        }
      }
      console.log(max);
    </script>
  </body>

最小值:

<body>
    <script>
        let arr=[2,6,1,77,52,25,7]
        let s=arr[0]
        for (let index = 0; index < arr.length; index++) {
            if(arr[index]<s){
                s=arr[index]
            }
            
        }
        console.log(s)
    </script>
</body>

操作数组:

屏幕截图 2022-03-30 114742.jpg

增:

push放末尾(用最多)

屏幕截图 2022-03-30 114952.jpg

代码演示:

body>
    <script>
        let arr=[]
        for (let i = 0; i < 4; i++) {
            let userName=prompt("请输入名字")
            arr.push(userName)
        }
        console.log(arr)
    </script>
</body>
案例:

数组的过滤

把大于10的数组增加到数组arr2中

<body>
    <script>
        let arr1=[2,0,6,1,77,0,52,0,25,7]
        let arr2=[]
        for (let i = 0; i < arr1.length; i++) {
            if(arr1[i]>=10){
                arr2.push(arr1[i])
            }
            
        }
        console.log(arr2)
    </script>
</body>
unshift放开头

代码演示:

 <body>
    <script>
      let arr = ['black', 'red'];
		arr.unshift("yellow");
		console.log(arr);
	</script>
  </body>

总结:

1 push和unshift 都可以做到给数组添加新元素

2 这两个代码在执行的时候 还可以返回 数组的长度(了解)

数组去零案例:

获取不等于零的数组元素

<body>
    <script>
 	let arr = [1, 3, 4, 5, 3, 2, 4, 0, 0, 3, 22, 98];
	let newArr = [];
	for (let index = 0; index < arr.length; index++) {
 		if (arr[index] !== 0) {
          newArr.push(arr[index]);
        }
      }
	console.log(newArr);
    </script>
  </body>

删:

屏幕截图 2022-03-30 145234.jpg

pop

删除最后一个元素

代码演示:

 <body>
    <script>
	let arr = ['西瓜', '香蕉', '麻瓜'];
 	// 希望删除掉最后的一个元素  麻瓜 不要
    arr.pop();
	console.log(arr); // ['西瓜', '香蕉']

====================================================

屏幕截图 2022-03-30 145552.jpg

shift

删除第一个元素

代码演示:

 <body>
    <script>
 	let arr = ['西瓜', '香蕉', '麻瓜'];
 	// 希望删除掉第一个元素  
     arr.shift();
	console.log(arr);
    </script>
  </body>
返回该元素解释:
 <body>
    <script>
let arr = ['西瓜', '香蕉', '麻瓜'];
      // let first = arr.shift(); 
      // console.log(first);
      // console.log(arr);// first = 西瓜  arr = 香蕉 麻瓜
 let last = arr.pop();
      // last =  麻瓜
      // arr =  西瓜 香蕉
      console.log(last);
      console.log(arr);
    </script>
  </body>

===================================================

splice

屏幕截图 2022-03-30 152200.jpg

屏幕截图 2022-03-30 153245.jpg

代码演示:

<body>
    <script>
      let arr = ['西瓜', '香蕉', '麻瓜'];
		// 在 1的位置,删除0个元素,增加一个红薯
      
      // ['西瓜', '红薯', '香蕉', '麻瓜'];
      arr.splice(1, 1, '红薯');
      console.log(arr);
    </script>
  </body>

综合案例:

动态生成柱状图:

关键代码:

<body>
    <script>
        let liHtml=`<ul>`
        let liHight=[];
            for (let index = 0; index < 4; index++) {
               let Hight= +prompt(`请输入你想要的第${index+1}个高度的数据`)
                liHight.push(Hight);
            }
            for (let index = 0; index <4; index++) {
                liHtml +=`<li style="height:${liHight[index]}px;">
                <span>${liHight[index]}</span>  
                <div>第${index+1}季度</div>
            </li>`
            }
            liHtml +=`</ul>`
           document.write(liHtml)
    </script>
</body>

数组补充:

1 获取数组中最后一个元素

​ 代码:

屏幕截图 2022-03-30 204242.jpg

===================================================

2 修改(新增或修改)元素

屏幕截图 2022-03-30 204952.jpg

屏幕截图 2022-03-30 205243.jpg

3 数组存放任意数据

屏幕截图 2022-03-30 205743.jpg

4 数组快速清空

屏幕截图 2022-03-30 210131.jpg