vue3下filter和map联合使用

//通过map实现遍历返回数组对象
const meals = mealOptions.value.map(({ id, title }) => ({ id, title }));

//通过filter实现数据的过滤，这里是过滤掉title为空的对象
const meals = mealOptions.value.filter(({ title }) => title).map(({ id, title }) => ({ id, title }));

//上面的filter实际上可以展开为如下内容
(item) => {
  const title = item.title;
  return title;
}


//分析
const arr = [
  { title: 'Hello' },
  { title: '' },
  { title: 'World' },
  { title: null },
];

const result = arr.filter(item => {
  const title = item.title;
  return title; // 实际上会被转成 Boolean(title)
});

console.log(result);
输出: [ { title: 'Hello' }, { title: 'World' } ]

//原理
因为 filter 的机制是这样的：
array.filter(callback) // callback 要返回 true（保留）或 false（过滤掉）

//以下是转换结果
Boolean('abc')       // true
Boolean('')          // false
Boolean(null)        // false
Boolean(undefined)   // false
Boolean(0)           // false
Boolean(1)           // true


//关于解构和返回值
filter(({ title }) => title) // 参数其实是item对象的展开, 这里只需要title, 返回普通值（比如字符串、布尔、数字、变量）不用括号

map(({ id, title }) => ({ id, title })) // 参数其实是item对象的展开，这里需要id 和 title, 返回“对象字面量”要加括号 { id, title }  等给于 { id:id, title:title }

//原理
JavaScript 对象属性的简写规则：
当你写对象字面量时，如果：键名和变量名相同，就可以省略 key: value 中的 value

解构是按需取字段，不需要全取；
解构对象时字段顺序无所谓；
没有解构的字段就不会创建变量，省内存、提性能，也更干净！


//直接赋值使用obj1 和 obj2 内容是等价的
const id = 1;
const title = 'Hello';

const obj1 = { id, title };
const obj2 = { id: id, title: title };