数组增加新的数据集合,操作数据无非就是数组的本质

目录

运行数据

数组的本质是数据的集合js 数组操作类库,对数据的操作无非就是数组的增删改查语法:

图片[1]-数组增加新的数据集合,操作数据无非就是数组的本质-唐朝资源网

 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

图片[2]-数组增加新的数据集合,操作数据无非就是数组的本质-唐朝资源网

       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()

图片[3]-数组增加新的数据集合,操作数据无非就是数组的本质-唐朝资源网

 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个季度

图片[4]-数组增加新的数据集合,操作数据无非就是数组的本质-唐朝资源网

    
        *{
            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(`
`)

© 版权声明
THE END
喜欢就支持一下吧
点赞134赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容