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

news/2024/12/19 16:24:31/

文章目录

        • 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/news/1556426.html

相关文章

NSDT 3DConvert:高效实现大模型文件在线预览与转换

NSDT 3DConvert 作为一个 WebGL 展示平台&#xff0c;能够实现多种模型格式免费在线预览&#xff0c;并支持大于1GB的OBJ、STL、GLTF、点云等模型进行在线查看与交互&#xff0c;这在3D模型展示领域是一个相当强大的功能。 平台特点 多格式支持 NSDT 3DConvert兼容多种3D模型…

TCP 三次握手四次挥手

目录 TCP 三次握手四次挥手 一、TCP基础 二、TCP数据报结构 三、名词术语 四、TCP的三次握手 ✍️过 程描述: 举例说明: 总结: 思考 &#x1f914; : 五、TCP的四次挥手 ✍️ 过 程描述: ☕️ 川 航图举例: 思考 &#x1f914;: TCP 三次握手四次挥手 一、TCP基础…

【Spring】Spring框架概述与IoC容器—Spring设计理念:弱耦合、强内聚

在软件开发中&#xff0c;尤其是在Java开发中&#xff0c;设计理念的好坏直接影响到应用程序的可维护性、可扩展性和可测试性。Spring框架作为一个流行的Java开发框架&#xff0c;其设计理念中的“弱耦合”和“强内聚”是非常重要的概念。这些理念帮助开发者构建灵活、可扩展的…

Python爬虫之Selenium的应用

【1】Selenium基础介绍 1.什么是selenium&#xff1f; &#xff08;1&#xff09;Selenium是一个用于Web应用程序测试的工具。 &#xff08;2&#xff09;Selenium 测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。 &#xff08;3&#xff09;支持通过各种driv…

Linux 打印队列功能解析

在 Linux 系统中&#xff0c;打印队列是一个管理和处理打印任务的机制。通过打印队列&#xff0c;用户可以将多个打印任务排队等待打印机处理&#xff0c;而打印机按顺序处理这些任务。Linux 使用 CUPS&#xff08;Common UNIX Printing System&#xff09;或 LPD&#xff08;L…

docker安装、升级、以及sudo dockerd --debug查看启动失败的问题

1、docker安装包tar下载地址 Index of linux/static/stable/x86_64/ 2、下载tgz文件并解压 tar -zxvf docker-24.0.8.tgz 解压后docker文件夹下位docker相关文件 3、将老版本docker相关文件&#xff0c;备份 将 /usr/bin/docker下docker相关的文件&#xff0c;mv到备份目录…

获取github容器注册表

登录 GitHub 容器注册表&#xff08;GitHub Container Registry&#xff09;。要使其正常工作&#xff0c;请将 username 和 token 替换为你自己的 GitHub 用户名和相应的个人访问令牌。完整步骤如下&#xff1a; 生成 GitHub Personal Access Token 登录 GitHub&#xff0c;进…

【阅读笔记】Android AMS forcestop停止应用

根据这篇文章作的笔记 基于Android 12的force-stop流程分析_android forcestop-CSDN博客 在AMS中&#xff0c;停止指定的应用是一个常用的功能&#xff0c;在代码里可以看到 Override 6806 public void forceStopPackage(final String packageName, int userId) { 6807 …