目录
操作数据
数组的本质就是数据集合，操作数据无非就是数组的增删改查语法：
let arr = ['pink','hotpink','deeppink']
//访问/查询
console.log(arr[0])
//2.改
arr[0]='lightpink'
console.log(arr[0])1.数组增加新的数据
数组.push()
数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度（重点）
语法：
arr.push(元素1，元素2，..元素n) let arr = ['red', 'green']
// 把blue 放到 arr后面
// arr.push('blue')
console.log(arr.push('blue'))//会把数组放入数组，而且返回数组新长度 3
console.log(arr)数组.unshift（）
arr.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并且返回数组新长度
语法：
arr.unshift(元素1，元素2，..元素n)
arr.unshift('pink','blue')
console.log(arr.unshift('pink','blue'))//返回数组新长度
console.log(arr)（案例）--数组筛选11
需求：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组
分析：
1.声明一个新的数组用于存放新数据newArr
2.遍历原来的旧数组，找出大于等于 10 的元素
3.依次追加给新数组newArr
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])
}
}
console.log(newArr)（案例）-数组去0案例
需求：将一个数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组
分析：
1.声明一个新数组用于存放新数据newArr
2.遍历原来的数组，找不不等于0的元素
3.依次追加给新数据newArr
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])
}
}
console.log(newArr)2.数组删除元素
数组.pop()
数组.pop（） 方法从数据中删除最后一个元素，并且返回该元素的值
语法：
arr.pop()
let arr = ['red','green','blue']
console.log(arr.pop())
console.log(arr)数组.shift（）
数组.shift（） 方法从数组中删除第一个元素，并返回该元素的值
语法：
arr.shift()例
arr.shift()//删除第一个元素
console.log(arr.shift())//返回该元素的值
console.log(arr) //返回剩余数组数组.splice() 方法
数组.splice() 删除指定元素
语法：
arr.splice(start,deleteCount)
//起始位置，删除几个元素 解释：
start起位置：指定修改的开始位置（从0计数）
deletCount：表示要移除元素的个数（可选的）如果省略则默认从指定的起始位置删除到最后
let arr = ['red','green','blue']
// 把green 删除 第一个1是位置 第二个1是个数
arr.splice(1,1)
arr.splice(1)//从green，后面删完
console.log(arr)删除元素的使用场景：
1.随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖
冒泡排序
1.一共需要的趟数 我们用外层for循环
2.每一趟交换 我们 用里层for循环
3.交换两个变量即可
let arr = [5,4,3,2,1]
// 1.外层循环控制 躺数 循环4次 arr.length-1
for(i = 0; i < arr.length-1; i++){
// 2.内层循环控制一趟交换几次 arr.length-i-1次数
for(j = 0 ;j < arr.length-i-1;j++){
// 交换两个变量
if(arr[j] > arr[j+1]){
let temp=arr[j]
arr[j]=arr[j+1]
arr[j+1]=temp
}
}
}
console.log(arr)
综合案例-根据数据生产柱形图
需求：用户输入四个季度的数据，可以生产柱形图
分析：
1.需要输入四次，所以可以把4个数据放到一个数组里面
利用循环，弹出4次弹窗，同时存入数组中
2.遍历改数组，根据数据生产四个柱形图，渲染打印到页面中
柱形图就是div盒子，设置宽高固定，高度就是用户输入的数据
div里面包含显示的数据就是数字和第n季度
<style>
*{
margin: 0;
padding: 0;
}
.box{
display: flex;
width: 700px;
height: 300px;
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=[]
// 利用循环弹出4个输入框 得到4个数据 放到数组1里
for(let i=1;i<5;i++){
arr.push(prompt(`请输入第${i}个季度的数据`))
}
// 注意我们渲染循环的是柱子
document.write(`<div class="box">`)
// 循环4个柱子
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>
841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
