JS基础Day3

PBA.

已于 2023-07-06 12:24:36 修改

阅读量83

点赞数

分类专栏：实践：黑马程序员前端JavaScript入门到精通2023版文章标签： javascript 前端开发语言

于 2023-07-06 11:48:01 首次发布

本文链接：https://blog.csdn.net/qq_46496981/article/details/131569654

版权

实践：黑马程序员前端JavaScript入门到精通2023版专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JS基础Day3

重点内容：for循环、数组

for语句

1 for循环的基本使用

练习（打印数组元素）

需求：请将数组['马超','赵云','张飞','关羽','黄忠']依次打印出来

let arr = ['马超','赵云','张飞','关羽','黄忠']
for (let i = 0; i < arr.length; i++) {
    document.write(arr[i] + "<br>");
}

2 嵌套循环

练习1（打印星星）

需求效果如下图：

let row = 5;
let col = 5;
for (let i = 0; i < row; i++) {
    for (let j = 0; j <= i; j++) {
        document.write('★');
    }
    document.write("<br>")
}

练习2（九九乘法表）

需求效果如下图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            padding: 5px 10px;
            border: 3px solid black;
            margin: 2px;
            width: 80px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgb(0, 0, 0, .4);
            background-color: rgb(0, 0, 0, .1);
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        let row = 9;
        let col = 9;
        for (let i = 1; i <= row; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`<span>${j} * ${i} = ${j * i}</span>`);
            }
            document.write("<br>")
}
    </script>
</body>
</html>

数组

1 增添操作

1,想要数组末尾增加数据元素利用那个方法？

arr.push()

可以添加一个或者多个数组元素

返回的是新数组的长度

2.想要数组开头增加数据元素利用那个方法？

arr.unshift()

可以添加一个或者多个数组元素

返回的是新数组的长度

3.重点记住那个？

arr.push()

练习1（数组筛选）

需求：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组

let arr = [2,0,6,1,77,0,52,0,25,7];
let arr2 = [];
for (let i = 0; i < arr.length; i++) {
    arr[i] >= 10 ? arr2.push(arr[i]) : arr2;
}
alert(arr2);

练习2（数组去0）

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

let arr = [2,0,6,1,77,0,52,0,25,7];
let arr2 = [];
for (let i = 0; i < arr.length; i++) {
    arr[i] !== 0 ? arr2.push(arr[i]) : arr2;
}
alert(arr2);

2 删除操作

1.想要数组末尾删除1个数据元素利用那个方法？带参数吗？

arr.pop()

不带参数

返回值是删除的元素

2.想要数组开头删除1个数据元素利用那个方法？带参数吗？

arr.shift()

不带参数

返回值是删除的元素

3.想要指定删除数组元素用那个？开发常用吗？有那些使用场景？

arr.splice(起始位置，删除的个数)

开发很常用，比如随机抽奖，比如删除指定商品等等

综合案例

需求：用户输入四个季度的数据，可以生成柱形图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 = 0; i < 4; i++) {
    let num = prompt(`请输入第${i}季度的数据：`);
    arr.push(num);
}
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>

PBA.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS基础Day3

需求：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组。需求：将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组。需求：请将数组['马超','赵云','张飞','关羽','黄忠']依次打印出来。3.想要指定删除数组元素用那个？1.想要数组末尾删除1个数据元素利用那个方法？2.想要数组开头删除1个数据元素利用那个方法？1,想要数组末尾增加数据元素利用那个方法？2.想要数组开头增加数据元素利用那个方法？
复制链接

扫一扫