Cet article vous donnera une explication détaillée de l'opérateur d'appel de chaîne facultatif « ? » dans Vue2.

Cet article vous amènera à comprendre l'opérateur d'appel de chaîne facultatif " ? " dans Vue2 et à parler de la solution au rapport d'erreurs lors de l'utilisation de ? dans le modèle.

Parlons d'abord de ce qu'est ?.(opérateur d'appel en chaîne optionnel)

opérateur de chaînage optionnel (?. ?.  )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined ) permet de lire le valeur d'une propriété située au plus profond de la chaîne d'objets connectés sans avoir à vérifier explicitement que chaque référence de la chaîne est valide. L'opérateur ?. fonctionne de la même manière que l'opérateur chaîne ., sauf que lorsque la référence est vide (nullish ) (null ou indéfini

) ne provoquera pas d'erreur. La valeur de retour de court-circuit de cette expression est indéfini. Lorsqu'il est utilisé avec des appels de fonction, renvoie undefined si la fonction donnée n'existe pas. [Recommandations associées :

tutoriel vidéo vue.js]

Lien :

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chainingEn bref, il est Nous utilisons généralement l'opérateur "." pour obtenir une version améliorée
d'une certaine valeur d'un objet. Lorsque la valeur précédente

n'existe pas

empêche les éléments non définis de signaler des erreurs. Fini les bêtises, passons directement au code.

let obj = { a: { b: { c: ['冰墩墩', '冬奥会'] } } }

// 当我们想获取“冰墩墩”的时候
// 如果直接obj.a.b.c[0]的话a、b、c任意一项不存在的话都会报错

// 正确的做法是
obj && obj.a && obj.a.b && obj.a.b.c && obj.a.b.c[0] // 冰墩墩

// 而采用?.操作符的话 
obj?.a?.b?.c?.[0] // 冰墩墩

Lorsque nous rencontrons des structures de données profondément imbriquées dans notre travail, nous utilisons && pour vérifier si les attributs existent. Le code devient très volumineux. La lisibilité et la maintenance sont ahurissantes. Mais utiliser ?. est beaucoup plus simple et la lisibilité est grandement améliorée

2. Problèmes d'utilisation de ?. dans le modèle Vue2

Lorsque nous apprenons une nouvelle compétence, nous voulons être dans le monde du code avec beaucoup intérêt Lorsque j'ai montré mes compétences, j'ai découvert qu'il pouvait être utilisé normalement dans js sous l'environnement Vue2
?, mais une erreur a été signalée dans

template.

L'opérateur ?. ne peut pas être reconnu normalement dans le modèle Vue2. Cela peut être dû au fait que la syntaxe de la chaîne facultative ?. est relativement nouvelle et qu'il n'y a aucune gestion de cet aspect dans le modèle

Je crois. que vous n'êtes pas des gens ordinaires, puisqu'il peut être utilisé dans

js, alors nous suivrons l'idée pour résoudre ce problème

3. Solution

• La méthode _get dans la bibliothèque tierce. lodash
• est actuellement mis à niveau vers vue3. vue3 est devenue la version par défaut, l'écologie approche de sa maturité et le modèle prend en charge les opérateurs de chaîne facultatifs
• Utilisé dans les propriétés calculées ?.
• Pour intercepter les modifications apportées au modèle code source, le code est trop intrusif

Écrivez-en un. Le hook est attaché à global/mixins et peut être appelé à tout moment

Après y avoir réfléchi un moment, seule la dernière solution est la plus fiable. Faisons-le. Écrivons d'abord notre propre fonction

let obj = { a: { b: { c: ['冰墩墩', '冬奥会'] } } }

function variableJudge(obj, keyName, tag = '?.') {
  if (!obj) return undefined
  let keys = keyName.split(tag)
  return keys.reduce((objNew, keyItem) => {
    if (keyItem === '') return objNew
    if (keyItem.indexOf('.') !== -1) return variableJudge1(objNew, keyItem, '.')
    return objNew?.[keyItem]
  }, obj)
}
//------------------------------ Proxy 版本 --------------------------------------
function variableJudgeProxy(obj, tag = '?.') {
  if (!obj) return undefined
  return new Proxy(obj, {
    get: (obj, key) => {
      const keys = key.split(tag)
      return keys.reduce((objNew, keyItem) => {
        if (keyItem === '') return objNew
        if (keyItem.indexOf('.') !== -1) return variableJudgeProxy(objNew, '.')[keyItem]
        return objNew?.[keyItem]
      }, obj)
    }
  })
}
  console.log(variableJudge(obj, '?.a?.b?.c?.0')) //冰墩墩
  console.log(variableJudgeProxy(obj)['?.a?.b?.c?.0']) //冰墩墩

attendez, attendez. Puisque nous voulons écrire notre propre fonction ?, pourquoi devrions-nous définir que le keyName transmis contient ?.? Pourquoi ne pas laisser keyName être directement la syntaxe . et avoir également la fonction de ?. Ceci est conforme à nos habitudes de développement et peut répondre à nos attentes, ne serait-ce pas beau

Et il va de soi que si la valeur précédente est indéfini, nous devrions directement reutrn, mais la méthode de réduction ne peut pas être interrompue à l'avance.

Nous avons donc optimisé une autre version du code

let obj = { a: { b: { c: ['冰墩墩', '冬奥会'] } } }

const variableJudge = (obj, keyName) => {
  if (!obj) return null
  let keys = (keyName + '').split('.')
  let tempObj = obj
  for (let i = 0; i < keys.length; i++) {
    if (!tempObj) return
    if (keys[i] !== &#39;&#39;) tempObj = tempObj?.[keys[i]]
  }
  return tempObj
}
console.log(variableJudge(obj, &#39;.a.b.c.0&#39;)) //冰墩墩

Ensuite, nous l'avons connecté au prototype Vue et pouvons l'utiliser à tout moment

Vue.prototype.$vj = variableJudge

Voyons comment l'utiliser dans le modèle

// 省去了臃肿的代码为空判断 是不是赏心悦目了
<div>{{ $vj(ugc, &#39;.itemList.item.pic.picList.1.picUrl&#39;) }}</div>

IV . Résumé

?. (

Opérateur d'appel en chaîne facultatif

) En fait, il existe de nombreuses fonctions merveilleuses qui attendent que tout le monde les découvre ?. Si l'article/le code est là. S'il y a des points qui peuvent être optimisés, n'hésitez pas à les suggérer. Si cet article vous est utile, vous pouvez le partager avec d'autres. Maintenant que vous avez vu cela,

la création ne l'est pas. facile, alors s'il vous plaît laissez un petit j'aime.

Pour plus de connaissances sur la programmation, veuillez visiter :
Vidéo de programmation

 ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!