vue Set Map Array 基本用法

本文详细介绍了JavaScript中的Set和Map数据结构的添加、删除、查找、遍历等基本操作,以及如何转换为数组。同时,展示了数组的生成、删除、查找、转换等常见操作。此外,还涵盖了数组的合并、过滤、排序等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Set

1.添加

        let mySet = new Set();
        //添加
        mySet.add("a")
          .add("b")
          .add("a")
          .add("c")
        console.log("add:", mySet)

2.删除

        //删除
        mySet.delete("a")
        console.log("delete:", mySet)

3.查找

        let contain = mySet.has("a")
        console.log("contains", contain)

4.遍历

        //遍历
        mySet.forEach(a => {
          console.log("forEach:", a)
        })

5.转换成数组

 let setGroup = [...mySet]
 console.log(setGroup)

6.清除

 //清除
  mySet.clear()

Map

1.添加

        let myMap = new Map()

        //添加
        myMap.set("a", "1")
          .set("b", "2")
          .set("c", "3")
        console.log("myMap:", myMap)

2.获取

        //获取
        let val = myMap.get("a")
        console.log("val", val)

3.是否存在某个值

        //是否存在
        let has = myMap.has('b')
        console.log("has", has)

4.删除

        //删除
        myMap.delete("a")
        console.log("delete", myMap)

5.keys

        for (let key of myMap.keys()) {
          console.log("key:", key)
        }

6.values

        //values
        for (let value of myMap.values()) {
          console.log("value", value)
        }

7.遍历

        //遍历
        myMap.forEach((value, key) => {
          console.log("value:" + value, "key:" + key)
        })

8.合并

        //合并
        let myMap2 = new Map()
        myMap2.set("d", "5")
            .set("e", 6)
        let merge = new Map([...myMap, ...myMap2])
        console.log("merge:", merge)

9.转换成数组

        //转换成数组
        let mapToArray = [...myMap]
        console.log("mapToArray", mapToArray)
        let keyArray = [...myMap.keys()]
        console.log("keyArray", keyArray)
        let valueArray = [...myMap.values()]
        console.log("valueArray", valueArray)

Array

1.生成

        //添加
        let arr = new Array()
        arr.push("1")
        arr.push("2")
        arr.push("3")
        arr.push("4")
        arr.push("4")
        console.log("arr", arr)
        let arr2 = ["5", "6", "7"]
        console.log("arr2", arr2)

        //填充
        let arr3 = new Array(5)
        arr3.fill(1)
        console.log("arr3", arr3)

2.删除

        //删除第一个元素
        let del = arr.splice(0, 1)
        console.log("del", del)

        //删除最后一个
        let pop = arr.pop()
        console.log("pop", pop)

3.查找

        //查找第一个,返回下标
        let idx = arr.indexOf("3")
        console.log("idx:", idx)
        //查找最后一个,返回下标
        let lastIdx = arr.lastIndexOf("4")
        console.log("lastIdx:", lastIdx)
        //查找返回元素
        let find = arr.find(a => a == "3")
        console.log("find", find)

        //包含
        let cont = arr.includes("4")
        console.log("contains:", cont)

4.拼接字符串

        //拼接成字符串
        let mergeStr = arr.join(" ")
        console.log("merge:", mergeStr)

5.过滤

        //过滤
        let filer = arr.filter(a => a != "4")
        console.log("filter:", filer)

6.合并

        //两个数组合并
        let mergeArr = arr.concat(arr2)
        console.log("mergeArr", mergeArr)
        let mergeArr2 = [...arr, ...arr2]
        console.log("mergeArr2", mergeArr2)

7.转换


        //转换
        let objArr = [
          {'name': '小明', 'age': 10},
          {'name': '小红', 'age': 9}
        ]
        let convert = objArr.map(a => a.name)
        console.log("conver", convert) //["小明", "小红"]

8.规约

        //规约
        let sum = objArr.reduce((a, b) => a.age + b.age)
        console.log("sum:", sum)     //19

9.反转

        //反转
        let reverse = arr.reverse()
        console.log("reverse:", reverse)

10.截取

        //截取
        let slice = arr.slice(2, 3)
        console.log("slice:", slice)

11.排序

        //排序
        let sort = arr.sort((a, b) => a - b)
        console.log("sort:",sort)

《中医基础理论》

<think>好的,用户想了解在Vue.js中如何使用Vue.set数组map方法来更新响应式数据。首先,我需要回忆Vue的响应式原理,尤其是Vue 2.x和3.x的区别。因为用户提到了Vue.set,这应该是针对Vue 2.x的,因为Vue 3.x使用Proxy不需要这个方法。 接下来,用户的问题有两个部分:Vue.set的使用和数组map方法的应用。我需要分别给出示例,并说明注意事项。 对于Vue.set,记得在Vue 2.x中,直接通过索引设置数组元素或添加对象属性时,不会触发响应式更新。这时候需要使用Vue.set或者实例的$set方法。需要举一个数组更新和对象属性添加的例子,比如修改数组中的某个元素,或者给对象添加新属性。 然后是数组map方法。用户可能认为直接使用map返回新数组替换旧数组可以达到响应式更新的效果。需要说明map方法本身不会修改原数组,而是返回新数组,因此需要将新数组赋值给响应式变量。例如,将每个元素乘以2,然后替换原数组。 还要注意,在Vue 2.x中,数组的某些变异方法如push、pop等是经过重写的,可以触发更新,但map不是变异方法,所以必须替换整个数组。这时候需要提醒用户正确使用赋值操作。 另外,用户提供的引用中有提到Vue 3.x的响应式系统使用Proxy,不需要Vue.set,所以可能需要对比一下版本差异,避免混淆。但用户的问题明确提到了Vue.set,所以重点在2.x的示例。 最后,检查示例代码是否正确,确保使用Vue 2.x的语法,比如Vue.set的调用方式,以及data函数返回对象的结构。同时,数组map的使用是否正确,比如是否重新赋值给this.items。 可能还需要提到,在Vue 3.x中,使用reactive或ref来创建响应式对象,直接修改属性或数组索引即可触发更新,不需要Vue.set,这样用户了解不同版本的差异。 总结回答结构:先介绍Vue.set在2.x中的使用场景和示例,再说明数组map方法的应用示例,最后对比Vue 3.x的情况,确保用户明确不同版本的处理方式。</think>### Vue.js 使用 Vue.set数组 map 方法更新数据示例 #### 1. Vue.set 的使用 在 **Vue 2.x** 中,直接通过索引修改数组元素或添加对象属性时,**不会触发响应式更新**,需使用 `Vue.set`(或 `this.$set`)显式更新。 **示例场景:** - **修改数组元素** ```javascript // 修改数组中第二个元素的 name 属性 this.$set(this.items, 1, { name: 'New Item' }); ``` - **添加对象属性** ```javascript // 为 user 对象动态添加 age 属性 this.$set(this.user, 'age', 30); ``` #### 2. 数组 map 方法更新数据 `map` 方法本身不修改原数组,需通过**替换整个数组**实现响应式更新。 **示例场景:** ```javascript // 将数组中所有元素的 price 字段翻倍 this.items = this.items.map(item => ({ ...item, price: item.price * 2 })); ``` #### 3. Vue 2.x 与 Vue 3.x 的差异 - **Vue 2.x** 依赖 `Object.defineProperty`,需通过 `Vue.set` 解决动态属性监听问题[^4]。 - **Vue 3.x** 使用 `Proxy` 实现响应式,直接修改属性或索引即可触发更新: ```javascript // Vue 3.x 中直接操作数组索引 const items = reactive([{ name: 'Item1' }, { name: 'Item2' }]); items[1].name = 'New Item'; // 自动触发更新 ``` #### 完整示例(Vue 2.x) ```html <template> <div> <button @click="updateArray">修改数组</button> <button @click="mapArray">Map处理数组</button> <ul> <li v-for="item in items" :key="item.id">{{ item.name }} - \${{ item.price }}</li> </ul> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Apple', price: 2 }, { id: 2, name: 'Banana', price: 1 } ] }; }, methods: { updateArray() { // 使用 $set 修改第二个元素 this.$set(this.items, 1, { id: 2, name: 'Orange', price: 3 }); }, mapArray() { // 使用 map 生成新数组并替换 this.items = this.items.map(item => ({ ...item, price: item.price * 1.5 })); } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

古智云开

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值