如何优雅的处理函数式调用中的undefined

Question

例子: 根据id获取一个对象数组中的某个对象的属性

const stage = [
        { id: 0, name: 'a' },
        { id: 1, name: 'b' },
        { id: 2, name: 'c' },
        { id: 3, name: 'd' },
        { id: 4, name: 'e' },
        ]

// 写法1：
// 存在的问题：如果没有找到对象，find()就会返回undefined，导致获取name属性的时候会报错。
let name = stage.find(v => v.id ===id).name

// 写法2：
// 存在的问题：重复计算
let name = stage.find(v => v.id ===id) ? stage.find(v => v.id ===id).name : '';

// 写法3：
// 存在的问题：需要引入额外的步骤
let find = stage.find(v => v.id ===id)
let name = find && find.name

期望

希望像写法1那样一行完成所有方法的调用同时能避免中间方法 返回undefined 而出错的问题。

Answer 1

包装，借用函数式编程中的Maybe

Answer 2

在 @followWinter 的思路上可以进一步简化

(stage.find(v => v.id === text) || {}).name

// 如果需要非 undefined 的默认值
(stage.find(v => v.id === text) || {}).name || ''

Answer 3

用解构赋值+默认参数+||取值：

let  {name='-'} = stage.find(v => v.id ===8)||{}

右边的stage.find(v => v.id ===8)||{}返回找到的对象或者一个空对象
左边let {name}解构赋值有软失败的特点，如果右边没有找到导致右边是空对象，name就是undefined
但是左边又有默认值，所以如果没有找到，name的结果是-

({name='-'}=stage.find(v => v.id ===1)||{})
console.log(name) // b

({name='-'}=stage.find(v => v.id ===1)||{})
console.log(name) // '-'