数组
数组是一种可以按顺序保存数据的数据类型
-
声明语法： let 数祖名称=[值]
-
比如：let names=[123,232,23,13]
-
数组的元素获取：数组名[下标]
-
names[123]
-
计算机中的编号从0开始，数组中的数据编号叫索引或下标 。
-
.length 长度属性 arr.length=10;
-
元素：数组中保存的每个数据都叫数组元素 下标：数组中数据的编号 长度：数组中数据的个数，通过数组的length属性获得
-
遍历数组
数组基本使用
-
取值语法：数组ming[下标]
-
let names['12',23,23]
-
获取值的时候，如果索引越界，那么就会返回undefined
-
获取当前的数组的长度，长度就是当前数组中的元素的数量。
-
names.length;
-
如果数组的长度为0，相当情空数组的元素
-
如果我们获取的元素超过数组的长度，会返回undefined （未定义类型）
-
names.length=0;
数组的最大值和最小值
let min=arr[0]
//遍历数组
for(let i=0; i<=arr.length;i++){
//判断大小
if(max<arr[i]){
max=arr[i]
}else if(min>arr[i]){
min=arr[i]
}
}
console.log(`最大值是${max}`);
console.log(`最小值是${min}`);
数组循环输出
<script>
//数组
let arr=["王五","张三","李四","周杰伦"]
//输出数组中的每一个元素
//遍历数组 判断循环的条件 i<数组的长度
for(let i=0;i<arr.length; i++){
//i=0; 1 2 3
console.log(arr[i]);
}
</script>
数组操作（删除，添加，修改
数组元素的添加
-
push();最后添加数据
在末位新增元素
-
arr.push(342,324);
-
arr.unshift();开头添加元素
-
arr.unshift(33434,44)
数组添加元素
<script>
let arr=['zhang','张的','ping']
//多增加一元as
arr.push('xigu');
console.log(arr);
</script>
获取不等于0数组元素
<script>
let arr=[2,0,6,1,777,9,6];
let newArr=[];
for(let i=0; i<arr.length;i++){
if(arr[i]>=10){
newArr.push(arr[i]);
}
}
console.log(newArr);
</script>
数组元素的删除：
pop();在最后一个元素删除
shift();在最开头一个元素删除
splice();指定下标来删除元素
arr.splice(要删除的元素的下标，删除几个)
//数组操作
let arr =['苹果',`香蕉`,'梨']
//在最后一个元素删除
let lasrt =arr.pop();
// 最开头删除
let last =arr.shift();
splice();可以指定位置删除,splice(1,2)
也可以用来添加、修改数组中的元素
splice(1,0,'红薯') splice(1,1,'红薯')
//splice (1,1) 从1的位置开始，想要删除删除
arr.splice(1,1);
arr.splice(1,0.'红薯');
数组补充
1.获取数组中最后的一个元素 arr.length-1;
2.薪增或者修改数组元素 arr[10] =“元素”
3.数组可以存放任意类型的数据 let arr=[1,"abc",null,true]
但是不建议这样存储数据，最好是数据类型一致的。
3.数组快速删除元素的方式：
arr.length=0; 清空数组数据
arr=[] 重新赋值 清空数据
数组的长度是可以动态变化
综合案例
需求：1打开页面 弹出了4个对话框 让我们来输入高度
2.写完了4个输入框的高度之后，页面中的自然出现对应的高度
3.每一个柱子有特定样式和自己的高度
解决 1.先写布局
2.动态生成ul 和4个li
3.自己定义一高度数组，按标签样式 按个设置行内样式
4.循环来获取4次用户的输入 来组成一个高度数组继续使用
<script>
/*
动态获取用户输入的高度 ，然后把高度都设置到一个数组即可
1 弹出4个窗口，让用户输入数据
*/
let liHtml = `<ul>`;
let liHeight = [];
// for循环来弹出4个窗口 获取内容
for (let index = 0; index < 4; index++) {
// 弹窗获取用户的输入的高度
let height = +prompt(`请输入你想要的第${index + 1}个高度数据`);
// 把数据 添加到数组中
liHeight.push(height);
}
for (let index = 0; index < 4; index++) {
liHtml += `
<li style="height:${liHeight[index]}px;">
<span>${liHeight[index]}</span>
<div>第${index + 1}季度</div>
</li>`;
}
liHtml += `</ul>`;
document.write(liHtml);
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 1000px;
height: 600px;
margin: 100px auto;
display: flex;
justify-content: space-around;
background-color: aqua;
align-items: flex-end;
}
li {
width: 100px;
background-color: pink;
position: relative;
}
span {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
}
div {
position: absolute;
width: 100%;
text-align: center;
/* 相对于父元素的高 */
top: 100%;
background-color: red;
}
