前端js vue遇到的一些简单的数据处理-持续更新

24 篇文章 1 订阅

1. 数据处理: 直接从后台返回数据取出自己想要的属性,并将其修改成自己想要的属性名:

list - 为需要处理的数组
value label: 是想要需要的属性名
item.nichname item.nickname,是上面需要被修改属性名
背景:就是修改请求回来的数据中某些数据的字段名,修改成自己想要的字段名

 const list007 = list.map((item) => {
          return {
            value: item.platformUid,
            label: item.nickname,
          };
       });
       // 这样就会把后台返回的数据中我们不需要的属性剔除了,取出我们想要的属性 platformUid nickname ,然后我们只是要这两个字段对应的数据,不想要两个字段名,所以需要修改字段名修改为 value label, 最后就会返回一个数组如:
       [
       {
        value:'zs',  // zs 是 platformUid 字段对应的数据
        label:'张三'  // 张三 是 nickname 字段对应的数据
        }
       ]
       

2.数据已经修改了但是视图没有更新:

本次我遇到的是 修改数组中某个对象中的某一个属性,数据已经修改成功了,但是视图却没有修改成功。
解决办法使用this.$set,来修改数据,这样才会触发视图更新。
比如要修改:allCard数组中,某项(对象)中的某个属性值:

 allCard: [
        {
          iconUrl: '', 
          title: '请添加名称', 
          desc: '请用一句话描述',
          thumburl:
            'xxxx', 
          pagepath: '', 
          remark: 'xxx', // 备注
            isSelectAppletCard:false
        },
        {
          iconUrl: 'xxxx', 
          title: '请添加名称', 
          desc: '请用一句话描述', 
          thumburl: '', 
          pagepath: '', 
          isSelectAppletCard:false
        }
       ]
// this.allCard --为要修改的对象  val为修改数组中对象的索引值  { ...this.allCard[val] } 是要修改对象所有数据的数据
        this.allCard[val].isSelectAppletCard = true;  // 这里是对要修改数组中对象的某个属性,进行修改
    this.$set(this.allCard, val, { ...this.allCard[val] });  // 把修改后的该对象,重新用this.$set修改下,这样就会触发视图更新。

3.给数组中每一个对象添加一个属性:

// allCard 是一个数组  我们要给这个数组中的每一个对象添加一个属性,并赋予一个初始值。
this.allCard.filter((item) => (item.isSelectAppletCard = false)); // 选中

4.冻结对象,使该对象中的属性无法被修改,赋值。


function freezeObj(obj) {
    Object.freeze(obj)
    Object.keys(obj).forEach((key, i) => {
        if (
            typeof obj[key] === 'object' &&
            Object.prototype.toString.call(obj[key]) !== '[object Null]'
        ) {
            freezeObj(obj[key])
        }
    })
}

5. 判断对象属性中的值是否包含指定的值:

// 接口a获取的数据:
let array = [
    {
        value: 15, // value 注意:均是字符串类型,因为一般从接口获取的字符串类型的-我们公司
        label: '张三',
    },
    {
        value: 12,
        label: '李四',
    },
    {
        value: 14,
        label: '王五',
    },
    {
        value: 10,
        label: '王二麻子',
    },
]

//  接口b 获取的数据:

let array02 = [
    {
        age: 18,
        values: '可乐',
        traggerValue: '15',
    },
    {
        age: 19,
        values: '可乐',
        traggerValue: '14,13,10', // 注意:也是字符串类型
    },
]
需求: array02 是要渲染到页面的数据,要将 array02 中的 traggerValue 属性,在 array 中的数据找到 相同 value 对应的 label, 并用逗号将对应的 label 数据 拼接好

array.forEach((val, index) => {
    array02.forEach((item) => {
        item.selectWeChatIndex = item.weChatRobotIds.indexOf(val.value)
        if (item.selectWeChatIndex !== -1) {
            if (item.slectWeChatName === undefined) item.slectWeChatName = ''
            // item.slectWeChatName += val.label + ',';
            const values = index ? ',' + val.label : val.label
            item.slectWeChatName += values
        }
        return item
    })
})  // 注意这里使用 计算属性比较好


6. 工作中常用的深拷贝(简单,快速):

背景:工作中对于一些数据不是很复杂的,但又确实需要拷贝一份出来,不受其他数据影响,就可以用这个方法。

注意:使用拓展运算符来进行深拷贝,只能拷贝一层数据,既在对象中的对象,里面的对象拷贝的还是内存地址。
```javascript
let object02 = {name:'张三',age:18,deep:{name:'张三的小弟',age:177777},array:[1,2,3]}  // 假如这是从后台接口获取的数据
// 现在要克隆一份出来
let deepCopy= {...object02,deep:{...object02.deep}}; // {name:'张三',age:18,deep:{name:'张三的小弟',age:177777},array:[1,2,3]}  --已经拷贝成功

// 此时进行此时
object02.age=88;
console.log(object02 ) // {name: "张三", age: 88, deep: {…}, array: Array(3)}
console.log(deepCopy) // {name: "张三", age: 18, deep: {…}, array: Array(3)}

// 修改对象中的对象中的属性值:
object02.deep.age=99;
console.log(object02); 
// age: 18
// array: (3) [1, 2, 3]
// deep: {name: "张三的小弟", age: 99}
// name: "张三"

console.log(deepCopy)
// age: 18
// array: (3) [1, 2, 3]
// deep:{age: 177777
// name: "张三的小弟"}
//name: "张三"


// 都是没有问题的,都是拷贝的是值,不是内存地址。但是注意:使用拓展运算符只能深拷贝一层数据结构, 多层次的(对象里面套对象),中这种拷贝的是内存地址,还是属于浅拷贝。 这里我是直接在控制台写的,可能不是很规范。
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue.js是一种轻量级的前端JavaScript框架,用于快速构建用户界面。学习Vue的一种常见方式是通过官方文档,其中包含有关Vue的详细信息和示例。 步骤如下: 1. 安装Vue:可以在命令行中使用以下命令安装Vue: ``` npm install -g vue ``` 2. 创建一个Vue项目:可以使用Vue CLI来创建一个新的Vue项目。运行以下命令之一来安装Vue CLI: ``` npm install -g @vue/cli # OR yarn global add @vue/cli ``` 然后,使用以下命令创建一个新的Vue项目: ``` vue create my-project ``` 3. 学习Vue基础知识:Vue的基础知识包括模板语法、组件、数据绑定、计算属性、事件处理等。您可以在官方文档中找到有关这些主题的详细信息。 4. 进一步学习Vue:学习Vue的其他主题,如路由、状态管理、服务端渲染等。您可以在官方文档中找到有关这些主题的详细信息。 5. 实践:构建一个完整的Vue应用程序,并尝试使用Vue来解决实际问题。这将帮助您加深对Vue的理解,并提高您的编码能力。 希望这些信息能帮助 ### 回答2: 要学习前端Vue框架,以下是几个步骤和建议: 1. 学习HTML、CSS、JavaScript基础知识:Vue是基于这些技术的,掌握它们对于学习Vue很重要。 2. 了解Vue的基本概念:Vue是一个用于构建用户界面的渐进式JavaScript框架。了解Vue的核心概念,如组件、数据绑定、指令、事件等,是学习Vue的基础。 3. 官方文档:Vue官方提供了详细的文档和教程,从官方文档开始学习是一个很好的选择。官方文档提供了示例代码,可以帮助理解每个概念和用法。 4. 实践项目:通过实践项目来巩固所学的知识。可以先从简单的项目开始,逐渐提升难度。这有助于理解Vue的使用场景和开发方式。 5. 社区资源:参与Vue社区,查看和学习其他人的经验和代码。Vue有很多活跃的社区和资源,如GitHub、Stack Overflow、Vue论坛等。 6. 边学边用:在实际项目中应用所学的知识。通过实践中遇到的问题和挑战,不断提高自己的技能。 7. 持续学习:Vue框架不断更新和演进,保持学习的持续性非常重要。关注Vue的最新动态,学习新的特性和最佳实践。 总之,学习前端Vue框架需要坚实的HTML、CSS、JavaScript基础,通过官方文档、实践项目和社区资源来理解和应用Vue的概念和技术,同时保持持续的学习和实践。这样才能不断提升自己在Vue开发中的能力。 ### 回答3: 学习前端Vue框架可以按照以下步骤进行: 1. 理解基本概念:Vue是一个基于JavaScript的开源前端框架,因此在学习之前需要了解HTML、CSS和JavaScript的基础知识。同时,了解Vue的基本概念,如指令、组件、生命周期等,会有助于更好地理解和使用Vue。 2. 学习Vue的核心特性:Vue提供了丰富的特性来简化前端开发,比如数据绑定、组件化开发、路由、状态管理等。可以通过阅读官方文档、教程和示例来学习这些特性的使用方法和最佳实践。 3. 实践项目:学以致用是学习的最佳方式之一。通过实践项目能够更深入地理解Vue的用法和原理。可以选择一些简单的项目来开始,逐渐增加项目的复杂性和难度,提高自己的实践能力。 4. 多参与社区:前端开发是一个活跃的社区,通过参与社区可以与其他开发者交流、分享和学习经验。可以加入Vue的官方论坛、社交媒体社群或参加相关的技术会议,与其他开发者互动,获取更多的资源和指导。 5. 持续学习和更新知识:前端技术快速更新,因此需要保持持续学习的态度。关注Vue框架的最新版本和变化,并阅读相关的更新文档和技术博客,了解最新的发展趋势和前沿技术。 总之,学习前端Vue框架需要掌握基础知识、理解核心特性、实践项目、参与社区和持续学习。通过系统学习和不断实践,可以逐步掌握Vue框架的使用和进阶技巧,提升前端开发能力。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值