js基础—数组的基本使用
站长
· 阅读数 10
数组的基本使用
数组是什么？
数组是用来存放多个数据的集合。
一、数组的基本使用
1-1 声明语法
let 数组名 = [数据1，数据2,......，数据n ]
//例
let names=[ '小明'，'小张'，'小红']
- 数组是按顺序保存，所以每个数据都有自己的编号
- 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
- 在数组中，数据的编号也叫索引或下标
- 数组可以存储任意类型的数据
1-2 取值语法
数组名[下标]
let arr=['苹果','香蕉','榴莲','水蜜桃','菠萝蜜' ]
console.log(arr) //数组元素全部输出
console.log(arr[2]) //取第三个数据
console.log(arr.length) //数组长度
- 通过下标取数据
- 取出来是什么类型的，就根据这种类型特点来访问
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);
案例：用户输入四个季度的数据，可以生成柱形图
分析：
①：需要输入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。