JavaScript 的三元表达式中写函数、try catch、表达式

(一) 三元表达式的基本使用：
关于三元表达式的基本使用， MDN 上面已经给出了详尽的解释。条件(三元)运算符

(二) 三元表达式的返回值的问题：
注：三元表达式的问好后面必须返回函数或者是常量，不可以是表达式。

(1) 首先，打印一个表达式看看

console.log([].push('haha')); // 这里打印的是一个数字 1
console.log(typeof [].push('haha')); // 打印出 number

从上面两个 console.log 可以看出，当我们打印一个表达式的时候，会返回 number 类型。

(2) 第二步，测试一下三元表达式：

const obj = {};

function fn1(fruit) {
  console.log(obj[fruit]);  // 这里创建一个键为 fruit 的对象属性。
  // 然后使用三元表达式，为 fruit 属性更新赋值。
  obj[fruit] = obj[fruit] === undefined ? [['苹果', '香蕉']] : obj[fruit].push(['黄瓜', '西红柿']);
}

for (let i = 0; i < 3; i += 1) {
  const fruit = fn1('水果');
  console.log(fruit);
}

我们首先可能想到向上面这么写，当然结果是报错: obj[fruit].push is not a function。

这里报错是因为三元运算符不能返回表达式：
(a) 第一次循环的时候 obj[fruit] 为 undefind，并被成功赋值为 [['苹果', '香蕉']]。
(b) 第二次循环 obj[fruit] 已经不是 undefind，因此会遇到后面的表达式，而表达式的值是一个数字，所以第二次循环的时候，obj[fruit] 会被重新赋值为数字 2 （？？？？？）
(c) 当第三次循环的时候，就会是 2.push()，number 类型是没有 push 方法的，因此会报错。

(3) 第三步，改写为匿名函数试试：

function fn2(fruit) {
  console.log(obj[fruit]); //
  obj[fruit] = obj[fruit] === undefined ? [['苹果', '香蕉']] : (function () {
    obj[fruit].push(['黄瓜', '西红柿']); //
    return obj[fruit];
  });
  return obj;
}

for (let i = 0; i < 3; i += 1) {
  const fruit = fn2('水果');
  console.log(fruit);
}

这种情况下，在 for 的第二次和第三次循环的时候，obj[fruit] 的值又变成了函数，这说明三元表达式是可以返回函数的，可是这并不是我么想要的结果。因此，我们用立即执行函数的方式解决这个问题。

(4) 第四步，立即执行函数：

function fn3(fruit) {
  console.log(obj[fruit]); //
  obj[fruit] = obj[fruit] === undefined ? [['苹果', '香蕉']] : (function () {
    obj[fruit].push(['黄瓜', '西红柿']); // 为什么这里用一个 const 接收它，会返回 2 ？？？？
    return obj[fruit];
  }()); // 这里加一个括号，表示立即运行。
  return obj;
}

for (let i = 0; i < 3; i += 1) {
  const fruit = fn3('水果');
  console.log(fruit);
}

console.log(obj) //  { '水果': [ [ '苹果', '香蕉' ], [ '黄瓜', '西红柿' ], [ '黄瓜', '西红柿' ] ] }

此时我们得到了想要的数据：
(a) 当第一次循环， obj 为空的时候，obj[fruit] 为 undefined，此时将其赋值为 [[ '苹果', '香蕉' ]] (这里将 obj[fruit] 初始化为一个二维数组)。
(b) 第二次循环 obj[fruit] 已经不是 undefined 了，而是 [[ '苹果', '香蕉' ]] ，三元表达式立即执行匿名函数 obj[fruit] 被 push 了一个 ['黄瓜', '西红柿'] 数组。
(c) 第三步循环同样又被 push 了一个 ['黄瓜', '西红柿'] 的数组，因此打印出来的 obj 最后有两个 ['黄瓜', '西红柿'] 数组。

(5) 在三元表达式中使用 try/catch 语句。

同样使用立即执行函数返回需要的值
const a = 1;
const isError = true;
const result = a === 1 ? (function () {
  try {
    if (isError) {
      throw new Error('error');
    }
    return 'a = 1';
  } catch (e) {
    return e.message;
  }
}()) : 'a != 1';

console.log(result); // 'error'

最后编辑于：2019.08.15 11:48:00