javascript - Switch 中的 ES6 模式匹配

Question

考虑以下代码片段:

if (msg.operation == 'create') {
  model.blocks.push(msg.block)
  drawBlock(msg.block);
} else if (msg.operation == 'select' && msg.properties.snap == 'arbitrary') {
  doStuff(msg.properties.x, msg.properties.y);
} else if (msg.operation == 'unselect') {
  doOtherStuff(msg.properties.geometry);
}

有没有办法重构它，以便我可以对 msg 进行模式匹配，类似于以下无效代码:

msg match {
  case { operation: 'create', block: b } => 
    model.blocks.push(b); 
    drawBlock(b);
  case { operation: 'select', properties: { snap: 'arbitrary', x: sx, y: sy } } => 
    doStuff(sx, sy);
  case { operation: 'unselect', properties: { snap: 'specific' }, geometry: geom } => 
    doOtherStuff(geom);
}

或者，在 ES6 中实现此目的最惯用的方法是什么，而不需要丑陋的 if-then-else 链？

<小时/>

更新。当然，这是一个简单的示例，可能不需要完整的模式匹配。但我们可以想象一种匹配长 AST 的任意分层片段的场景。

TL;博士;解构的力量，并自动检查是否可以这样做。

Answer 1

您可以编写这样的 match 函数，该函数(与箭头函数和对象解构结合使用时)与您的示例的语法非常相似:

/**
 * Called as:
 *   match(object,
 *     pattern1, callback1,
 *     pattern2, callback2,
 *     ...
 *   );
**/
function match(object, ...args) {
  for(let i = 0; i + 1 < args.length; i += 2) {
    const pattern = args[i];
    const callback = args[i+1];
    
    // this line only works when pattern and object both are JS objects
    // you may want to replace it with a more comprehensive check for
    //  all types (objects, arrays, strings, null/undefined etc.)
    const isEqual = Object.keys(pattern)
                          .every((key) => object[key] === pattern[key]);
    
    if(isEqual)
      return callback(object);
  }
}

// -------- //

const msg = { operation: 'create', block: 17 };

match(msg,
  { operation: 'create' }, ({ block: b }) => {
    console.log('create', b);
  },
  
  { operation: 'select-block' }, ({ id: id }) => {
    console.log('select-block', id);
  },
  
  { operation: 'unselect-block' }, ({ id: id }) => {
    console.log('unselect-block', id);
  }
);