Vue.js前端框架教程5:Vue数据拷贝和数组函数

embedded/2024/12/19 22:19:43/

文章目录

        • Vue数组函数
      • filter
      • map
      • reduce
      • length
      • 使用示例
        • Vue 拷贝
          • 展开运算符 (`...`)
          • `Object.assign()`
          • `JSON.stringify()` 和 `JSON.parse()`
          • 注意事项

Vue数组函数

Vue 中,处理列表时经常需要用到数组的内置方法,如 filtermapreduce 以及检查数组长度的 length 属性。这些方法可以帮助你进行数据转换、条件过滤和数据聚合等操作。以下是如何在 Vue 中使用这些数组方法的示例:

filter

filter 方法创建一个新数组,包含通过所提供函数实现的测试的所有元素。

computed: {filteredItems() {return this.items.filter(item => item.isVisible);}
}

map

map 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

computed: {itemNames() {return this.items.map(item => item.name);}
}

reduce

reduce 方法对数组中的每个元素执行一个由你提供的reducer函数(升序执行),将其结果汇总为单个返回值。

computed: {totalItems() {return this.items.reduce((total, item) => total + item.count, 0);}
}

length

length 属性返回数组中元素的数量。

computed: {itemsCount() {return this.items.length;}
}

使用示例

假设我们有一个商品列表,我们想要展示过滤后的商品数量、商品名称列表以及按特定条件过滤后的商品列表。

<template><div><p>商品总数:{{ itemsCount }}</p><ul><li v-for="name in itemNames" :key="name">{{ name }}</li></ul><ul><li v-for="item in filteredItems" :key="item.id">{{ item.name }} - {{ item.price }}</li></ul></div>
</template><script>
export default {data() {return {items: [{ id: 1, name: '商品A', price: 100, isVisible: true },{ id: 2, name: '商品B', price: 200, isVisible: false },{ id: 3, name: '商品C', price: 300, isVisible: true }]};},computed: {itemsCount() {return this.items.length;},itemNames() {return this.items.map(item => item.name);},filteredItems() {return this.items.filter(item => item.isVisible);}}
}
</script>

在这个示例中:

  • itemsCount 计算属性返回数组的长度。
  • itemNames 计算属性使用 map 方法返回所有商品的名称。
  • filteredItems 计算属性使用 filter 方法返回所有可见的商品。

这些数组方法在处理列表数据时非常有用,尤其是在你需要对数据进行转换或聚合时。通过将这些方法与 Vue 的响应式系统结合使用,你可以创建动态且高效的数据视图。

Vue 拷贝

JavaScriptVue 中,拷贝一个对象或数组可以通过多种方式实现,包括使用展开运算符 (...)、Object.assign() 方法、JSON.stringify()JSON.parse() 方法等。以下是这些方法的介绍和使用示例:

展开运算符 (...)

展开运算符可以用来拷贝数组或对象。对于数组,它将数组的所有元素拷贝到新数组中;对于对象,它将对象的所有可枚举属性拷贝到新对象中。

// 拷贝数组
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];// 拷贝对象
const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };

Vue 组件中,你可以这样使用:

export default {data() {return {originalList: [{ name: 'John' }, { name: 'Jane' }]};},computed: {copiedList() {return this.originalList.map(item => ({ ...item }));}}
}
Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

const originalObject = { a: 1, b: 2 };
const copiedObject = Object.assign({}, originalObject);

Vue 中使用:

export default {data() {return {originalItem: { name: 'John', age: 30 }};},computed: {copiedItem() {return Object.assign({}, this.originalItem);}}
}
JSON.stringify()JSON.parse()

这种方法适用于对象,它通过将对象转换为 JSON 字符串,然后再将字符串解析回对象来实现深拷贝。

const originalObject = { a: 1, b: 2 };
const stringified = JSON.stringify(originalObject);
const copiedObject = JSON.parse(stringified);

Vue 中使用:

export default {data() {return {originalData: { message: 'Hello', value: 42 }};},computed: {copiedData() {return JSON.parse(JSON.stringify(this.originalData));}}
}
注意事项
  • 展开运算符和 Object.assign() 都只能进行浅拷贝,意味着如果对象属性中包含其他对象或数组,这些内部对象或数组不会被拷贝,而是它们的引用被复制。
  • JSON.stringify()JSON.parse() 可以进行深拷贝,但它们有一些限制,比如不能拷贝函数、undefined 或循环引用的对象。
  • JSON.stringify()JSON.parse() 还会将对象中的 undefined 值转换为 null,并且不会拷贝对象的原型链上的属性。

根据你的具体需求选择合适的拷贝方法,并注意它们的限制和差异。


http://www.ppmy.cn/embedded/147120.html

相关文章

数据版本管理和迁移工具Flyway用法最简说明

简介 数据库迁移及版本控制工具, 用于维护不同环境下数据库的一致性 使用 引入依赖 implementation(“org.flywaydb:flyway-core:7.1.1”) 配置 spring:flyway:enabled: truelocations: classpath:sqlbaseline-on-migrate: trueclean-disabled: trueenabled: true # 开启Fl…

Vue.js前端框架教程4:Vue响应式变量和指令(Directives)

文章目录 Vue 2.x 中的响应式变量Vue 3.x 中的响应式变量 指令&#xff08;Directives&#xff09;v-modelv-onclick 其他常用指令 在 Vue 中&#xff0c;响应式变量是与 Vue 实例的数据绑定系统紧密相关的。它们允许你创建数据和 DOM 之间的双向绑定&#xff0c;这意味着当响应…

李沐 X 动手学深度学习--第七章 现代卷积神经网络

导入&#xff1a;本章介绍的神经网络是将人类直觉和相关数学见解结合后&#xff0c;经过大量研究试错后的结晶。本章按时间顺序介绍这些模型&#xff0c;在追寻历史的脉络的同时&#xff0c;帮助培养对该领域发展的直觉&#xff08;炼丹的直觉&#xff09;&#xff0c;这有助于…

tomcat的优化和动静分离

tomcat的优化 1.tomcat的配置优化 2.操作系统的内核优化 注意&#xff1a;设置保存后&#xff0c;需要重新ssh连接才会看到配置更改的变化 vim /etc/security/limits.conf # 65535 为Linux系统最大打开文件数 * soft nproc 65535 * hard nproc 65535 * soft nofile 65535 *…

C语言 文件操作

按格式读写文件 按格式 读文件 格式&#xff1a; int fscanf(FILE *stream, const char* format, [argument...]); FILE *stream 为文件指针 const char *format 为格式化字符串 [argument] 为输入列表 fscanf() 格式化输出与 scanf () 是相同的 fscanf(stdin,……) 等…

深度解析相对路径、绝对路径与URL映射策略、MVC架构

一、相对路径与绝对路径的概念与应用 路径管理是Web开发中的核心概念之一。理解不同类型的路径如何影响文件和资源的访问对于确保代码的灵活性、可维护性和可移植性至关重要。 1. 相对路径 相对路径是指相对于当前文件或目录的位置来指定目标资源的路径。它不依赖于绝对的服…

软件架构设计——通用表单UI—未来之窗行业应用跨平台架构

.东方仙盟_小世界 {margin-top: 2%;padding: 0 3%;background: #fff; } .东方仙盟_小世界 li span {width: 55px;padding-left: 0px; }.东方仙盟_小世界 li span {display: block;position: absolute;left: 0px;padding-left: 10px;width: 55px;font-size: 16px;background-siz…

centos上配置yum源

1. 进入yum源repo的目录 cd /etc/yum.repos.d/然后可以通过ls查看下面所有的后缀为.repo的文件 2. 新建一个备份目录&#xff0c;将原有的.repo文件放到其中 mkdir yum.repos.d.backup mv *.repo yum.repos.d.backup/3. 获取阿里提供的repo配置文件 这里使用到了wget命令&a…