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

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.labelitem.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: "张三"// 都是没有问题的，都是拷贝的是值，不是内存地址。但是注意：使用拓展运算符只能深拷贝一层数据结构， 多层次的（对象里面套对象），中这种拷贝的是内存地址，还是属于浅拷贝。 这里我是直接在控制台写的，可能不是很规范。

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

前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
针对Vue的后台权限功能实现思路(持续更新)
2019独角兽企业重金招聘Python工程师标准>>> 权限是一块设计挺繁琐的功能,尤其是设计到前端SPA应用,前后端的耦合性太强,先屡屡思路,再实现,如果您有好的建议,也可评论留言 ...
前端JS/VUE如何生成Vcard或其他文件--导出任意后缀的文件
有个需求是在前端由用户输入姓名+电话,然后生成一个Vcard,也就是.vcf格式文件,就是导入手机的通讯录中,这个做手机测试的都知道.其实不一定是.vcf格式的文件,其他的格式文件也可以,如.txt等 ...
前端js去重的常用的简单的三种方法
<script>//1 使用for双循环,首先循环原数组,然后循环新定义数组,它里面默认是原数组第一个元素,比较两个是否相等,function remove(arr) {let arr1 ...
JS 小程序 Vue 2022年最全面试题！持续更新
vue面试题核心原理部分 mvc mvvm和mvp的区别? MVVM 就是 Model-View-ViewModel 的缩写,MVVM 将视图和业务逻辑分开. View:视图层,Model 数据模型 ...
中级前端常见面试题（附答案），持续更新
文章目录 Q:JS有哪些数据类型? 7种基本类型 1种引用类型 Q:ES6数据结构 Set / Map Set Map Q:call, apply, bind 用法和区别 call() 和 apply ...
Vue经典面试题及答案汇总(持续更新）
1.虚拟DOM中key的作用: key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据[新数据]生成[新的虚拟DOM],随后Vue进行[新虚拟DOM]的差异比较,比较规则如下: ...
JS开发必须知道的常用技巧（持续更新...)
必收藏的JS技巧 1.数组 1.1数组去重 1.2数组交集 1.3数组并集 1.4数组差集 1.5数组排序 1.6数组最大值 1.6数组求和 1.7数组是否包含值 1.8数组转对象 2.字符串截取 2 ...

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

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

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

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

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

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

6. 工作中常用的深拷贝（简单，快速）:

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

最新文章

热门文章

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

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

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

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

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

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

6. 工作中常用的深拷贝（简单，快速）:

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

最新文章

热门文章

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