我也觉得三元运算太长了，可读性不好。但是你例子中不算太复杂。
var b1 = true, b2 = true, v1 = 'v1', v2 = 'v2', v3 = 'v3'console.log(b1 ? b2 ? v1 : v2 : v3)
b1 = false
console.log(b1 ? b2 : v1 ? v2 : v3)
console.log(b1 ? b2 ? v1 : v2 : v3)
像上边这种有嵌套的，一般是从右边开駋找到一对?:算单独的一组，再把这一组作为一个独立的元素看，比如上边最后一行，从右向左发现”b2 ? v1 : v2“可以看作一个运算单元，
console.log(b1 ? （b2 ? v1 : v2） : v3)
b1为false,直接返回了v3.如果b1为true，将返回（b2 ? v1 : v2）的结果。
?. 表示可选链，就是如果对象存在，就获取.后面的属性值。
举个例子，假定对象obj未定义（或者说不存在），那么下面的语句会报错：
let type = obj.type
而改成这样就不报错了：
let type = obj?.type
当obj不存在时，变量type的值为undefined。
?? 则是空值合并运算符，就是如果??左边的表达式是null或undefined，则获取??右边的表达式的值。
比如
let type = x ?? 'haha'
意思就是如果x是空值，则type='haha'，否则type=x
以上两种合起来用的话，比如
let type = obj?.type ?? ''
意思就是，如果obj存在，且obj.type不是null或undefined，则type=obj.type，否则的话type就赋值为空字符串。
如果用常规写法，那么代码就复杂得多：
if (obj &&obj.type) {
let type = obj.type
}else{
let type = ''
}
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<script>标签，输入js代码：$('body').append('<img src="https://www.baidu.com/img/bd_logo1.png" />')。
3、浏览器运行index.html页面，此时图片被js成功显示到页面上。
