js 操作数组 push splice

本文介绍了一种根据表格中勾选项动态更新数组的方法。当勾选时将数据加入数组,取消勾选则从数组中移除。通过这种方法实现数据状态的实时同步。

一个可以根据table 勾选项把数据push进数组,取消勾选从数组里删除

主要代码:

data:

 data() {
    return {
     
      msg:[],
     
    };

methods:

this.msg.push(row.subscribeType);
       for(var i=0;i<this.msg.length;i++){
        for(var j=i+1;j<this.msg.length;j++){
          if(this.msg[i]==this.msg[j]){//第一个等同于第二个,splice方法删除第二个
            this.msg.splice(j,1);
            this.msg.splice(i,1);
            //j--;
          }
        }
      }
 console.log(this.msg,'msg')

table: 

 

### JavaScript 中 `splice` 方法详解 `splice()` 是一种非常强大的数组操作方法,可以用于向/从数组中添加/移除项目,并返回被移除的项。此方法会改变原数组。 #### 基本语法 ```javascript arrayObject.splice(index, howmany[, item1[, ...[, itemX]]]) ``` - **index**: 必需参数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 - **howmany**: 必需参数,定义应该删除多少个项目。如果设为 0,则不会删除任何项目。 - **item1,...,itemX**: 可选参数,要添加进数组的新项目。 当仅提供两个参数时,`splice()` 将作为删除工具;而提供了超过两个参数的情况下,则可以在指定索引处先删除一定数量元素后再插入新元素[^1]。 #### 实际应用案例 - 结合 Canvas 绘图 下面是一个综合示例,在该例子中不仅展示了如何利用 `splice()` 来管理表格数据,还实现了基于这些数据动态更新画布上的图表展示: 假设有一个成绩表(gradesTable),其中每一行代表一位学生的分数记录。现在想要实现的功能是在界面上显示柱状图表示各科目的平均分,并允许用户通过点击按钮来增删科目从而实时调整图表。 ##### HTML 部分 ```html <canvas id="scoreChart"></canvas> <button onclick="addSubject()">Add Subject</button> <select onchange="removeSelected()"> <!-- 动态填充选项 --> </select> ``` ##### CSS 简单样式省略... ##### JS 主体逻辑 ```javascript // 初始化模拟的成绩列表 [[subjectName,score],...] let gradesTable = [ ['Math',89], ['English',76], ]; function drawBarCharts(){ const canvas = document.getElementById('scoreChart'); const ctx = canvas.getContext('2d'); // 清空之前的绘图 ctx.clearRect(0, 0, canvas.width, canvas.height); let barWidth = 50; let spacing = 10; for(let i=0;i<gradesTable.length;i++){ let subjectInfo = gradesTable[i]; // 设置颜色和其他属性... ctx.fillStyle="#"+((1<<24)*Math.random()|0).toString(16); // 计算高度比例并绘制矩形条 let heightRatio = Math.min(subjectInfo[1]/100 * (canvas.height-2*spacing), canvas.height-(2*spacing)); ctx.fillRect(i*(barWidth+spacing)+spacing, canvas.height-heightRatio-barWidth, barWidth, heightRatio); // 添加文字标签 ctx.font='bold 14px Arial'; ctx.fillText(`${subjectInfo[0]}:${subjectInfo[1]}`,i*(barWidth+spacing)+spacing,canvas.height-spacing); } } // 向下拉菜单添加所有现有学科供选择 function populateSelectOptions(){ var selectBox=document.querySelector('select'); while(selectBox.firstChild){ selectBox.removeChild(selectBox.lastChild); } gradesTable.forEach(([name])=>{ let optionElement = document.createElement("option"); optionElement.value=name; optionElement.textContent=name; selectBox.appendChild(optionElement); }); } populateSelectOptions(); // 移除所选课程及其对应的数据点 function removeSelected(){ let selectedIndex = Array.from(document.querySelectorAll('option')).findIndex(opt=>opt.selected===true); if(selectedIndex!==-1){ gradesTable.splice(selectedIndex,1); // 应用 splice 进行删除 populateSelectOptions(); drawBarCharts(); // 更新视图 } } // 新建随机评分并加入到末尾 function addSubject(){ let newSubj=`New Sub.${parseInt(Math.random()*1e3)}`; gradesTable.push([newSubj, parseInt(Math.random()*100)]); populateSelectOptions(); drawBarCharts(); } drawBarCharts(); // 页面加载完成后立即渲染一次初始状态 ``` 在这个实例里,每当调用了 `removeSelected()` 函数时就会触发对 `gradesTable` 的修改动作——即根据当前选定项目的索引来执行相应的 `splice()` 操作以达到删除效果。与此同时,为了保持界面同步变化,每次变更后都会重新计算并重绘整个图表区域内的内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值