likes
comments
collection
share

js基础—数组的基本使用

作者站长头像
站长
· 阅读数 39

数组的基本使用

数组是什么？

数组是用来存放多个数据的集合。

一、数组的基本使用

1-1 声明语法

let 数组名 = [数据1，数据2,......，数据n ]
//例

let names=[ '小明'，'小张'，'小红']
  1. 数组是按顺序保存，所以每个数据都有自己的编号
  2. 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
  3. 在数组中，数据的编号也叫索引或下标
  4. 数组可以存储任意类型的数据

1-2 取值语法

​ 数组名[下标]

 let arr=['苹果','香蕉','榴莲','水蜜桃','菠萝蜜' ]
        console.log(arr)     //数组元素全部输出
		console.log(arr[2])   //取第三个数据
        console.log(arr.length)  //数组长度
  1. 通过下标取数据
  2. 取出来是什么类型的，就根据这种类型特点来访问

1-3 遍历数组

用循环把数组中每个元素都访问到，一般会用到for循环遍历

let arr=['宋祖儿','刘亦菲','迪丽热巴','古力娜扎','富婆' ]
        for (let index = 0; index < arr.length; index++) {
            console.log(arr[index])
        }

二、操作数组

数组本质是数据集合, 操作数据无非就是 增 删 改 查 语法：

2-1 增-数组添加新的数据

let arr=['麻瓜','西瓜','南瓜']
        arr.push('冬瓜')    //在数组的末尾添加
        arr.unshift('金瓜') //在数组的前面添加
         arr.splice(1,0,'火龙果') // 指定增加数组元素
        console.log(arr)

2-2 删- 删除数组的数据

 let arr=['麻瓜','西瓜','南瓜','冬瓜','金瓜']
            arr.pop()  //将数组末尾的数据删除
            arr.shift() //将数组中前面的数剧删除
    		arr.splice(1,2)  // 指定删除数组元素  arr.splice(操作的下标,删除的个数)

2-3 查-查询数组的数据

数组[下标]

2-4 改-重新赋值

数组[下标]=新值

2-5 数组筛选

将筛选出的值存入新数组

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

2-6 数组使用小技巧

  /* 
      1 获取数组的最后一个元素 arr[arr.length - 1]  常用的规则！！ 

      2 新增或者修改数组元素 
        arr[10]='南瓜'   
        1 如果 10这个位置已经有元素 那么 就是修改
        2 如果 10这个位置没有元素  添加就可以了  最终数组的度变成 10+1  

      3 数组 可以存放任意类型的数据   可以这么做，但是不建议 我们建议 一个数组内的数据类型要统一！！ 
        let arr = ['西瓜', 100, null, true, NaN, undefined, 80];

      4 数组快速清空或者删除元素的方式 
        arr.length = 0 
       */

      // let arr = ['西瓜', '香蕉', '麻瓜','香瓜','苦瓜','傻瓜'];
      // // let arr = ['西瓜', '香蕉', '麻瓜'];
      // // 获取数组中最后的一个元素
      // // arr.length - 1
      // console.log(arr[arr.length - 1]);

      // let arr = ['西瓜', '香蕉', '麻瓜'];

      // 想要把香蕉修改成葡萄
      // arr[1] = '葡萄'; // 修改

      // console.log( arr[3] );// 输出什么 undefined

      // 添加元素
      // arr[3] = '南瓜';
      // console.log(arr);

      // arr[10] = '南瓜';
      // console.log(arr[8]);

      // 存放其他类型 数据
      // let arr = ['西瓜', 100, null, true, NaN, undefined, 80];

      let arr = ['西瓜', 100, null, true, NaN, undefined, 80];

      // 把数组 清空掉！！  不想要里面的元素了！！
      // arr = [];

      // 保留 3个元素 其他不要了
      // arr.length = 3;
      arr.length = 0;

      console.log(arr);

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

js基础—数组的基本使用

分析：

①：需要输入4次，所以可以把4个数据放到一个数组里面；

​ 利用循环，弹出4次框，同时存到数组里面

②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中；

​ 柱形图就是div（li）盒子，设置宽度固定，高度是用户输入的数据

​ div里面包含显示的数字和 第n季度

<!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-sizing: border-box;
        }

        ul{
            list-style: none;
            width: 1000px;
            height: 600px;
            border-left: 1px solid #000;
            border-bottom: 1px solid #000;
            margin: 50px auto;
            /* background-color: aqua; */
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
        }

        li{
            position: relative;
            width: 100px;
            height: 200px;
            background-color: pink;
        }

        span{
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
        }

        div{
            position: absolute;
            width: 100%;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- <ul>
        <li>
            <span>1</span>
            <div>一</div>
        </li>
        <li>
            <span>2</span>
            <div>二</div>
        </li>
        <li>
            <span>3</span>
            <div>三</div>
        </li>
        <li>
            <span>4</span>
            <div>四</div>
        </li>
    </ul> -->
<!-- ==================================== -->
    <script>
        let liHtml = '<ul>', num = +prompt('需要几个柱状图'), liHeight = [];
            for (let index = 0; index < num; index++) {
                liHeight.push(+prompt(`第${index + 1}季度数据`));
                liHtml += `<li style="height:${liHeight[index]}px">
                    <span>${liHeight[index]}</span>
                    <div>第${index + 1}季度</div>
                    </li>`;  
            }
            liHtml += '</ul>';
            document.write(liHtml);
    </script>
</body>
</html>

先写好页面结构，在写css样式，最后js。

转载自:https://juejin.cn/post/7081618732191055908
评论
请登录