Operador de julgamento encadeado ES6

No desenvolvimento diário do front-end, muitas vezes nos deparamos com uma situação: um determinado atributo que precisa ser usado pode não existir nos dados retornados pela interface, como o back-end retorna para o front-end

let resData = {
    res:{
        data:[
            {a:1},
            {a:2}
        ]
    }    

Quando o formato dos dados está correto, podemos obter a matriz de destino por resData.res.data.

Mas se o back-end não encontrar os dados e retornar a matriz vazia resData = {} para o front-end, a lógica resData.res.data escrita diretamente no código relatará um erro Não é possível ler dados de propriedade de indefinido, indicando que a causa de o erro não é lido em indefinido para o atributo data. 

Operador hífen opcional ( ?. )

O operador de encadeamento opcional permite ler o valor de uma propriedade localizada no fundo de uma cadeia de objetos sem ter que verificar explicitamente se todas as referências na cadeia são válidas.

A função do operador ?. é semelhante à do operador . chain. A diferença é que não causará erro de sintaxe quando a referência estiver vazia ou indefinida e o valor de retorno de curto-circuito da expressão for indefinido    

Exemplo:

Uma instrução de atribuição comum, se você deseja chegar à segunda camada, primeiro deve certificar-se de que obj.first existe

let nestedProp = obj.first && obj.first.second;

Usando a instrução simplificada do operador de cadeia, o cálculo é curto-circuitado e, antes de acessar obj.first.second, é verificado implicitamente para garantir que obj.first não seja nulo nem indefinido . se obj.first for null ou undefined . As expressões causarão um curto-circuito na avaliação e retornarão indefinido diretamente.

let nestedProp = obj.first?.second;

A abreviação acima é equivalente a

let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

Encadeamento opcional para chamadas de função

O encadeamento opcional também pode ser usado ao tentar chamar um método que pode não existir.

Se o método chamado não existir quando a função for chamada, usar o encadeamento opcional pode fazer com que a expressão retorne automaticamente um indefinido em vez de gerar uma exceção.

let result = someInterface.customMethod?.();

Encadeamento opcional e expressões dinâmicas

let nestedProp = obj?.['prop' + 'Name'];

Acesso de encadeamento opcional aos elementos da matriz

let arrayItem = arr?.[42];

Nota: o encadeamento opcional não pode ser usado para atribuição

let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment

Usado com o operador de coalescência nula

O operador de união nula ( ??) é um operador lógico que retorna o operando da direita quando o operando da esquerda é  nulo  ou  indefinido  , caso contrário retorna o operando da esquerda

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”