目录
运行数据
数组的本质是数据的集合js 数组操作类库,对数据的操作无非就是数组的增删改查语法:
let arr = ['pink','hotpink','deeppink']
//访问/查询
console.log(arr[0])
//2.改
arr[0]='lightpink'
console.log(arr[0])
1.向数组array.push()中添加新数据
array.push() 方法在数组末尾添加一个或多个元素,并返回数组的新长度(强调)
语法:
arr.push(元素1,元素2,..元素n)
let arr = ['red', 'green']
// 把blue 放到 arr后面
// arr.push('blue')
console.log(arr.push('blue'))//会把数组放入数组,而且返回数组新长度 3
console.log(arr)
Array.unshift()
arr.unshift(new) 方法将一个或多个元素添加到数组的开头并返回数组的新长度
语法:
arr.unshift(元素1,元素2,..元素n)
arr.unshift('pink','blue')
console.log(arr.unshift('pink','blue'))//返回数组新长度
console.log(arr)
(案例)–Array Filter 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= 10){
newArr.push(arr[i])
}
}
console.log(newArr)
(cases) – 数组变为 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.数组删除元素array.pop()
array.pop() 方法从数据中删除最后一个元素并返回该元素的值
语法:
arr.pop()
let arr = ['red','green','blue']
console.log(arr.pop())
console.log(arr)
Array.shift()
array.shift() 方法从数组中移除第一个元素并返回该元素的值
语法:
arr.shift()
例子
arr.shift()//删除第一个元素
console.log(arr.shift())//返回该元素的值
console.log(arr) //返回剩余数组
Array.splice() 方法
Array.splice() 删除指定元素
语法:
arr.splice(start,deleteCount)
//起始位置,删除几个元素
解释:
起始位置:指定修改的起始位置(从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[j+1]){
let temp=arr[j]
arr[j]=arr[j+1]
arr[j+1]=temp
}
}
}
console.log(arr)
综合案例——基于数据的柱状图
要求:用户输入四分之二的数据,可以制作柱形图
分析:
1.需要输入四次,所以可以将4个数据放入一个数组中
使用循环弹出4个弹窗,同时存入数组中
2.遍历change groupjs 数组操作类库,根据数据生成四个柱形图,渲染并打印在页面上
柱形图是div框,设置宽高固定,高是用户输入的数据
div中显示的数据是数字和第n个季度
*{
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;
}
let arr=[]
// 利用循环弹出4个输入框 得到4个数据 放到数组1里
for(let i=1;i<5;i++){
arr.push(prompt(`请输入第${i}个季度的数据`))
}
// 注意我们渲染循环的是柱子
document.write(``)
// 循环4个柱子
for(let i = 0; i < arr.length;i++){
document.write(`
${arr[i]}
第${i+1}季度
`)
}
document.write(``)
暂无评论内容