JavaScript03-循环和数组

JavaScript基础-Day3-循环，数组

一.for循环

1.for 循环-基本使用

for循环语法

• 也是重复执行代码
• 好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

for (let i = 0; i < arr.length; i++) { 循环体 }

<script>
        let arr = [1,2,3,4,5]
        for (let i = 0; i < arr.length; i++) {
            document.write(`数组的第${i + 1}个元素是：${arr[i]}<br>`)
            
        }
    </script>

for循环和while循环的区别：

• 当如果明确了循环的次数的时候推荐使用for循环
• 当不明确循环的次数的时候推荐使用while循环

2.for 循环嵌套

2.1打印n行n列图案

<script>
        let str = ''
        for (let i = 1; i < 5; i++) {
            for (let j = 1; j < 5; j++) {
            str += '※'
            }
            str += '<br>'
        }
        document.write(str)
    </script>

2.2打印倒三角

<script>
        let str = '';
        for (let i = 1; i <= 10; i++) { // 外层循环控制行数
            for (let j = i; j <= 10; j++) { // 里层循环打印的个数不一样  j = i
                str += '★';
            }
            str += '<br>';
        }
        document.write(str)
    </script>

2.3打印正三角

<script>
        let str = ''
        for(let i = 1; i <= 10; i++){
            for(let j = 1; j <= i; j++){
                str += '★'
            }
            str += '<br>'
        }
        document.write(str)
    </script>

2.4打印九九乘法表

<script>
        let str = ''
        for(let i = 1; i < 10; i++){
            for(let j = 1; j <= i; j++){
                str += `${j} x ${i}=${i * j}   `
            }
            str += '<br>'
        }
        document.write(str)
    </script>

二.数组

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

1.数组的基本使用

1.1声明语法：

let 数组名 = [ 数据1， 数据2， 数据3，…，数据n ]

1.2取值语法：

数组名 [ 下标 ]

一些术语：

• 元素：数组中保存的每个数据都叫数组元素
• 下标：数组中数据的编号
• 长度：数组中数据的个数，通过数组的length属性获得

1.3遍历数组：

<script>
        let arr = [1,2,3,4,5]
        for (let i = 0; i < arr.length; i++) {
            document.write(`数组的第${i + 1}个元素是：${arr[i]}<br>`)
            
        }
    </script>

1.4操作数组：

添加：

• 数组名.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)
• 数组名.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

案例：

数组筛选：

<script>
        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        let newArr = []
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                newArr.push(arr[i])
            }
        }
        document.write(newArr);
    </script>

数组去0：

<script>
        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        let newArr = []
        for (let i = 0; i < arr.length; i++) {
            if ( arr[i] !== 0) {
                newArr.push(arr[i])
            }
        }
        document.write(newArr)
    </script>

删除：

• 数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
• 数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
• 数组. splice() 方法 删除指定元素

arr.splice (startt, deleteCount)

start起始位置：

• 指定修改的开始位置（从0计数）

deleteCount：

• 表示要移除的数组元素的个数 可选的。
• 如果省略则默认从指定的起始位置删除 到最后

三.根据数据生成柱形图

css样式：

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

js脚本：

<script>
        //1.利用循环弹出五次输入框，会得到5个数据，放到数组里面
        let arr = []
        for (let i = 1; i <= 5; i++) {
            arr.push(prompt(`请输入第${i}季度的数据`))
        }
        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>