使用yield*和function*修改默认的对象（key-value）或数组遍历顺序

需求：在v-for一个对象Object时，需要按照对象内某个键值对内的值进行遍历。
对象类型如下：

let itemTypes = {
    A:{
      bestPrice: 5
    },
    B:{
      bestPrice: 1
    },
    C:{
      bestPrice: 3
    },
    D:{
      bestPrice: 2
    }
  }

期望 v-for=“(value, key) in itemTypes” 遍历顺序，根据bestPrice价格升序遍历

[ "B", { "bestPrice": 1 } ]
[ "D", { "bestPrice": 2 } ]
[ "C", { "bestPrice": 3 } ]
[ "A", { "bestPrice": 5 } ]

解决方案

• 使用yield* 和function*修改默认的遍历逻辑。

/*
* Symbol.iterator代表对象itemTypes对象的默认迭代器。
* function*用来在表达式内定义构造器函数
* yield*操作用来委托例如构造器函数给另一个可迭代对象
* Object.entries()方法获取键值对数组
*/
itemTypes[Symbol.iterator] = function* () {
  yield* [...Object.entries(this)].sort((a, b) => a[1].bestPrice - b[1].bestPrice);
};

全部示例代码

<script setup>
import {reactive} from "vue";

let  itemTypes = reactive({
  A:{
    bestPrice: 5
  },
  B:{
    bestPrice: 1
  },
  C:{
    bestPrice: 3
  },
  D:{
    bestPrice: 2
  }
})


itemTypes[Symbol.iterator] = function* () {
  yield* [...Object.entries(this)].sort((a, b) =>b.bestPrice -  a.bestPrice );
};

</script>

<template>
  <div >
    <div v-for="(value, key) in itemTypes" :key="key">
      {{value}}
    </div>
  </div>
</template>

拓展

• 修改期望遍历顺序和结果
  期望 v-for=“(value, key) in itemTypes” 遍历顺序，根据bestPrice价格降序遍历，并且value不包含键key

/*
* 期望的结果
*/
{ "bestPrice": 5 }
{ "bestPrice": 3 }
{ "bestPrice": 2 }
{ "bestPrice": 1 }

/*
* 解决方案
*
* Symbol.iterator代表对象itemTypes对象的默认迭代器。
* function*用来在表达式内定义构造器函数
* yield*操作用来委托例如构造器函数给另一个可迭代对象
* Object.values获取对象内值数组，不包含key
*/
itemTypes[Symbol.iterator] = function* () {
  yield* [...Object.values(this)].sort((a, b) => a[1].bestPrice - b[1].bestPrice);
};

• 知识点解析
  • Symbol.iterator这个静态数据属性指代的是 @@iterator符号。 遍历协议(iterable protocol) 在遍历对象时，
    会寻找这个符号对应的方法作为该对象的迭代器返回。而一个对象必须拥有@@iterator符号，才是可迭代的。
  • function 用于定义函数。
  • function* 用于定义生成器函数，返回值为Generator对象，符合 可迭代协议(iterable protocol) 和 迭代器协议(iterator protocol)，主要用于迭代。
  • yield 用于暂停和恢复一个生成器函数
  • yield* 用于委托生成器函数给一个可迭代对象。
  • Object.values(obj) 可获取对象内的值数组。
  • Object.entries(obj) 可获取对象内的键值对数组。