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

文章目录

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

Vue数组函数

在 Vue 中，处理列表时经常需要用到数组的内置方法，如 filter、map、reduce 以及检查数组长度的 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 拷贝

在 JavaScript 和 Vue 中，拷贝一个对象或数组可以通过多种方式实现，包括使用展开运算符 (...)、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，并且不会拷贝对象的原型链上的属性。

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