首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vue 使用数组splice方法失效,且总是删除最后一项的解决办法。

,把新增的节点push到自己定义的数组里,然后渲染出来,点击删除按钮,用splice方法从数组中删除掉当前的节点(很简单,很明确的思路嘛,但是却事与愿违) <div class...deleteTag(index){ this.tags.splice(index, 1) }, 当我点击删除的时候,总是删除的是最后一个添加的节点...于是我去网上搜(新手嘛,遇到了问题,你懂得…),网上也没有相关问题,只有一个说到了,说是vue的渲染问题,当你去删除标签时,他重复执行了方法,需要添加一个事件去重的方法,也没太看懂,就去翻阅了官网,查看了...我的问题之所以会产生,是因为在于key的绑定问题,我只是用下标来绑定每一个标签的key,而没有与数组中元素挂钩,因此当删除数组元素时,vue会采用一种叫做’就地复用‘的原则,将旁边的元素直接拿过来使用,...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

2.7K20

JavaScript数组方法总结

pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。 注意:pop()里面没有参数,及时有参数,也是删除最后一项。...unshift:将参数添加到原数组开头,并返回数组的长度 。 这组方法和上面的push()和pop()方法正好对应,一个是操作数组的开头,一个是操作数组的结尾。...这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。...替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。...第一次执行回调函数的时候,pre为1,cur为2,第二次,pre为3(1加2的结果),cur为3(数组的第三项),依次类推,直到将数组的每一项都访问一遍,最后返回结果。

1.7K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    19个JavaScript数组常用方法总结

    "); // 从数组开头推入两项 alert(count); // 2 splice 传入三个参数,分别是开始位置、0(要删除的元素数量)、插入的元素,返回空数组 let colors = ["red...,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组,不会影响原始数组 let colors = ["red", "green", "blue"]; let colors2 = colors.concat...,最后一项不影响原数组: pop() shift() splice() slice() pop() pop() 方法用于删除数组的最后一项,同时减少数组的length 值,返回被删除的项 let colors...) // 1 shift() shift()方法用于删除数组的第一项,同时减少数组的length 值,返回被删除的项 let colors = ["red", "green"] let item =...,删除元素的数量,返回包含删除元素的数组 let colors = ["red", "green", "blue"]; let removed = colors.splice(0,1); // 删除第一项

    33910

    10 个超有用的 JavaScript 技巧

    新的 ES2020 引入了许多很棒的功能。你可以通过很多不同的方式去编写代码。他们会达到相同的目标,但其中一些会更短、更清晰。你可以凭借一些小技巧来使代码更清晰。...(Falsy Value) 在某些情况下,你可能想从数组中删除虚值。...1[0,10,4,9,123,54,1].sort((a,b) => a-b); 2>>> [0, 1, 4, 9, 10, 54, 123] 这里提供了一个将数字数组中的两个元素与 sort 方法进行比较的函数...---- 使用别名进行解构 解构赋值语法是一种 JavaScript 表达式,可以将数组中的值或对象的值或属性分配给变量。解构赋值能让我们用更简短的语法进行多个变量的赋值。...renaming it as otherNumber 7const { number: otherNumber } = object; 8console.log(otherNumber); //10 ---- 获取数组中的最后一项

    79220

    js数组的操作

    unshift:将参数添加到原数组开头,并返回数组的长度 。 这组方法和上面的push()和pop()方法正好对应,一个是操作数组的开头,一个是操作数组的结尾。...这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。...,也就是说concat方法只能将传入数组中的每一项添加到数组中,如果传入数组中有些项是数组,那么也会把这一数组项当作一项添加到arrCopy2中。...替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。...reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

    2.8K00

    JS数组常用方法大全

    数组的方法有数组原型方法,也有从object对象继承来的方法, 常用方法: join 数组转字符串 split 字符串转数组 push 将数据添加到数组尾部 pop 数组末尾移除最后一项 shift 删除原数组第一项...unshift:将参数添加到原数组开头,并返回数组的长度 。 这组方法和上面的push()和pop()方法正好对应,一个是操作数组的开头,一个是操作数组的结尾。...这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。...替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。...reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

    3K30

    第203天:js---Array对象常用方法

    1、shift:删除原数组的第一项,返回删除元素的值;如果数组为空则返回undefined 1 //shift:删除原数组的第一项,返回删除元素的值;如果数组为空则返回undefined 2 var...var out = arr.shift(); 8 console.log(arr); //[] 9 console.log(out); //undefined 2、unshift:将参数添加到原数组开头...,返回数组的长度(ie6下返回undefined) 1 //unshift:将参数添加到原数组开头,返回数组的长度(ie6下返回undefined) 2 var arr = [1, 2]; 3...var out = arr.unshift(-1, 0); 4 console.log(arr); //[-1,0,1,2] 5 console.log(out); //4 3、pop:删除原数组的最后一项...,返回数组删除的值;如果数组为空则返回undefined 1 //pop:删除原数组的最后一项,返回数组删除的值;如果数组为空则返回undefined 2 var arr = [1, 2, 3,

    99720

    重要!理解Python列表索引和切片

    : append():将项目元素添加到列表中 extend():向列表中添加项目元素。...append和extend的区别,append添加1个项目,extend添加一个列表。 remove():从列表中删除项目元素。 pop():从列表中删除最后一项元素,并将其返回。...在下列情况下,可以省略起始索引或结束索引: 从开头开始:li[:5],返回前5项:['A','B','C','D','E'] 以最后一项结尾:li[5:],返回最后5项:['F','G','H','I'...extend()方法合并两个列表,然后将结果列表赋值给原始列表。 +符号也合并两个(或多个)列表,但不会覆盖原始列表。 图7 从列表中删除重复值 列表可以包含任何类型的数据项,包括重复项。...有几种方法可以删除重复的值,这里将介绍一种更具python风格的方法。为此,我们需要了解另一种数据结构:集(set)。集是不同项的无序集合,使用一对花括号来表示集。

    2.5K20

    js常用的数组方法

    2.当把一个值在超出当前数组大小的位置的时候,数组机会重新计算其长度,长度值等于最后一项的索引值。 3.数组的属性 属性 描述 constructor 返回对创建此对象的数组函数的引用。...4.数组对象的方法 4.1添加属性:   1.push():将数组添加到原数组末尾,并返回数组的长度。  ...var a=[1,2,3] var b = a.push(5,6) //b = [1,2,3,5,6]   2.unshift() 将参数添加 到原数组的开头,并返回数组的长度。...1.pop():删除原数组最后一项,并返回删除元素的值,如果数组为空,返回undefined。...2.sort():用于对数组中的元素进行排序。     2.1:即使数组中的每一项都是数组,sort方法比较的也是字符串。     2.2:sort()方法可以接受一个比较函数作为参数。

    1.9K20

    手把手教你学会Python函数式编程

    map函数允许我们将函数应用于iterable中的每一项。 Map需要2个输入,它们分别是要应用的函数和可迭代对象。...列表的乘积是每个单独的数字相乘。要做到这一点你将编写如下代码: 但是使用reduce你可以这样写: 获得相同的功能,代码更短,并且在使用函数式编程的情况下更整洁。...它将函数应用于列表中的每一项,如果该函数返回True,则不执行任何操作。如果返回False,则从列表中删除该项。...高阶函数 高阶函数可以将函数作为参数并返回函数。一个非常简单的例子如下: 第二个返回函数的例子: 开头我说过纯函数式编程语言没有变量。更高阶的函数使这变得更容易。...语法是: 让我们对列表中的每个数字进行平方,例如: 我们可以看到如何将函数应用于列表中的每一项。我们如何应用filter呢?

    1.1K21

    一篇文章完全掌握 JavaScript 数组操作

    opera mini'); 3console.log(browsers); 4// ["chrome", "firefox", "edge", "safari", "opera mini"] pop() 此方法删除数组的最后一项并返回...firefox', 'edge']; 2browsers.pop(); // "edge" 3console.log(browsers); // ["chrome", "firefox"] shift() 此方法删除数组的第一项..., 'edge']; 2browsers.shift(); // "chrome" 3console.log(browsers); // ["firefox", "edge"] unshift() 此方法将一个项添加到数组的开头...concat - 将两个数组组合在一起,或者将更多项添加到数组中,然后返回一个新数组。 push() - 将项目添加到数组的末尾,改变原始数组。...pop() - 删除数组的最后一项并返回 shift() - 删除数组的第一项并返回 unshift() - 将一个项添加到数组的开头,改变原始数组。

    1.1K30

    JavaScript(五)

    而 pop() 方法则从数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。...实现这一操作的数组方法就是 shift(),它能够移除数组中的第一个项并返回该项,同时将数组长度减1。结合使用 shift() 和 push() 方法,可以像使用队列一样使用数组。...concat() 方法可以基于当前数组中的所有项创建一个新数组。具体来说,这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。...splice() 的主要用途是向数组的中部插入项,但使用这种方法的方式则有如下3种: 删除: 可以删除任意数量的项,只需指定 2 个参数: 要删除的第一项的位置和要删除的项数。...这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。其中,reduce() 方法从数组的第一项开始,逐个遍历到最后。而 reduceRight() 则从数组的最后一项开始,向前遍历到第一项。

    90920

    Array类型

    ; //2 队列方法 shift()能够移除数组中的第一个项并返回该项,同时数组长度减1 var books = new Array(); var count = books.push("English...()按照升序排列数组项,该方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,然后这种方法并不是最佳的,即使数组中每一项都是数值,但是最后比较的都是字符串,因此sort()方法可以接受一个比较函数座位参数...concat()方法可以基于当前数组中的所有项创建一个新数组 var books = ["English", "math"]; //传递给concat()方法的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中...删除 指定两个参数, 要删除的第一项的位置和要删除的项数 插入 指定三个参数,起始位置、0(要删除的项数),要插入的项 替换 指定三个参数, 起始位置,要删除的项数和要插入的任意数量的项 //删除第一项...传入这些方法中的函数会接收三个参数,数组项的值、该项在数组中的位置和数组对象本身 //对数组中每一项都运行指定函数,如果这个函数对每一项的结果都是true,就返回true var num = [1,

    75330

    闰土说JS进阶之「戏说数组」

    Tips:利用length属性可以方便的在数组末尾添加新项。举个例子: ? 由于数组最后一项的索引始终是length-1,因此下一个新项的位置就是length。...而pop()技能则从数组末尾移除最后一项,减少length的值,返回值是移除的项。请看下面的例子: ? 技能攻略2:队列方法 刚看完栈方法,接下来我们介绍下Array的队列方法。...这个例子中创建了一个数组并使用unshift()方法先后推入了3个值,数组中的顺序为:black、red、green。在调用pop()方法时,移除并返回的是最后一项,即“green”。...替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置,要删除的项个数和要插入的任意数量的项。插入的项不必与删除的项个数相等。...其中,reduce()方法从数组的第一项开始,逐个遍历到最后。而reduceRight()正好相反,它从数组的最后一项开始,向前遍历到第一项。

    1K120

    怒肝 JavaScript 数据结构 — 数组篇(一)

    [1,2,3,...,99,100] 上面代码是因为 new Array() 接受一个参数,表示数组的长度,然后用 fill 方法填充每个数组项,最后再 map 方法将每项加一,得出最终值。...删字诀 删除是指在一个数组中删除已有的数组项,我们可以决定删除的位置,比如第一个,最后一个,或者指定下标的某几个。...假设现有一个数组 nums 如下: var arr = [4, 5, 6, 7, 8, 9] 如果我要删除最后一个,用 pop 方法: arr.pop() // arr 的值 = [4, 5, 6,...通过索引直接修改数据 cities[index] = '广州' splice 方法本质上也有修改的功能,我们前面单独介绍了添加和删除,如果同时使用添加和删除的参数,就可以实现修改。...):纯粹的遍历数组 map():有返回值,可返回一个新数组 5.检测数组 some():检测数组中是否有一项满足条件 every():检测数组的每一项是否都满足条件 这些数组绝大部分都属于迭代器函数,下一篇我会详细介绍这些函数的用法

    48631

    js数组方法,常用数组Api的基本使用

    (arr2) // 10=20=30=40 3 pop() 删除数组的最后一个元素 返回值就是最后被删除的元素 会改变原数组 var arr = [10,20,30,40] var arr2...= arr.pop() console.log(arr2) // 40 console.log(arr) // [10,20,30] 4 reverse() 翻转数组 将数组进行翻转 最后一项变为第一项...); // [10,20] console.log(arr) // [50,60,70,30,40] 8 shift() 删除原数组第一项,并返回删除元素的值,如果数组为空则返回undefined...方法会改变原数组 var arr = [1,2,3,4] arr.shift() // [1] console.log(arr) // [2,3,4] 9 unshift(): 将参数添加到原数组开头...index 为对应下标 }) 13 map() 对数组每一项一个给定的函数 返回一个新数组 1 每一项都有return var arr = [1, 2, 3, 4, 5]; var arr2 =

    2.1K10

    如何在JavaScript中使用数组方法:Mutator方法

    pop()方法不需要额外的参数。 转移() 另一种mutator方法, shift()方法从数组的开头移除第一个元素。...因此,通常首选的是尽可能使用pop()方法,因为其他数组元素将保持其索引位置。 推() push() mutator方法将一个新的元素添加到数组的末尾。...不印字() unshift() mutator array方法将一个新的元素添加到数组的开头。...下面我们来看几个例子,说明splice()如何添加和删除数组中的项。 添加splice() 如果我们将第二个参数(要删除的项目)设置为0 ,则splice()将删除零项。...如果删除了第二个参数,则将删除数组末尾的所有项目。 使用splice()添加和删​​除 一次使用所有参数,我们可以同时添加和删除数组中的项目。

    1.8K20
    领券