Vue的makeMap函數(shù)怎么使用

這篇文章主要介紹了Vue的makeMap函數(shù)怎么使用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue的makeMap函數(shù)怎么使用文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

前言

創(chuàng)建一個(gè)map，返回一個(gè)檢查key是否在map中的函數(shù)

主要用途： 判斷標(biāo)簽是原生組件還是自定義組件，直接通過(guò)map這種key-value一一對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)，實(shí)現(xiàn)快速判斷

  /**
   * Make a map and return a function for checking if a key
   * is in that map.
   */
function makeMap (
    str,
    expectsLowerCase
  ) {
    var map = Object.create(null);
    var list = str.split(',');
    for (var i = 0; i < list.length; i++) {
      map[list[i]] = true;
    }
    return expectsLowerCase
      ? function (val) { return map[val.toLowerCase()]; }
      : function (val) { return map[val]; }
  }

參數(shù)解釋

str：（字符串類型）

所傳入需要?jiǎng)?chuàng)建map的字符串

expectsLowerCase：（布爾型）

是否需要全部轉(zhuǎn)為小寫(xiě)——也就是說(shuō)，str中出現(xiàn)非小寫(xiě)字母 則不需要

若沒(méi)傳，則為undefined為falsy——假值（也就不會(huì)觸發(fā)小寫(xiě)轉(zhuǎn)換方法）

源碼解釋

首先通過(guò)Object.create創(chuàng)建一個(gè)對(duì)象，將傳入的字符串str以,分隔，生成一個(gè)list數(shù)組

對(duì)list數(shù)組進(jìn)行循環(huán)，通過(guò)[list[i]]創(chuàng)建一個(gè)key-value的map

• key：為字符串類型

• value：全部為true——布爾類型

判斷函數(shù)參數(shù)expectsLowerCase是否true

• true——返回一個(gè)忽略大小寫(xiě)，判斷key是否存在的函數(shù)

• false——返回一個(gè)判斷key是否存在的函數(shù)

源碼疑問(wèn)

為什么這里使用Object.create創(chuàng)建一個(gè)對(duì)象，而不直接使用{ }創(chuàng)建呢？

我們來(lái)做一個(gè)實(shí)驗(yàn)就明白了

這里直接用瀏覽器的控制臺(tái)實(shí)驗(yàn)

var objA = Object.create(null)

首先我們創(chuàng)建一個(gè)objA——通過(guò)Object.create(null)

打印出來(lái)看看

然后在創(chuàng)建一個(gè)objB，直接賦值{}

我們發(fā)現(xiàn)直接通過(guò)Object.create(null)創(chuàng)建的東西，十分干凈，也不存在原型鏈和原型方法

而通過(guò){ }創(chuàng)建出來(lái)的東西，很明顯出現(xiàn)了很多不需要的屬性

小結(jié)：

使用Object.create條件：

• 需要一個(gè)非常干凈和高可定制的對(duì)象

• 無(wú)需使用Object原型鏈中的方法

在其他正常情況下，直接使用{ }即可

很顯然，源碼這里是需要?jiǎng)?chuàng)建一個(gè)非常干凈的對(duì)象，從而使用的Object.create方法

為什么使用[ ]訪問(wèn)屬性

對(duì)象獲取屬性的方法有兩種，當(dāng)然還可以直接使用對(duì)象解構(gòu)獲取屬性

• 點(diǎn)屬性訪問(wèn)器

• 方括號(hào)屬性訪問(wèn)器

我們做一個(gè)實(shí)驗(yàn)區(qū)別兩者，看看為啥尤大大要這么使用

首先我們先創(chuàng)建一個(gè)obj

var objA = Object.create(null)

訪問(wèn)不存在的屬性

當(dāng)我們使用點(diǎn)屬性訪問(wèn)器訪問(wèn)一個(gè)不存在的屬性時(shí)，結(jié)果是undefined

現(xiàn)在試試使用方括號(hào)訪問(wèn)器試試

沒(méi)想到居然直接報(bào)錯(cuò)了

報(bào)錯(cuò)的信息是x 沒(méi)被定義，看來(lái)是把x當(dāng)成變量了

那我們直接使用字符串試試

結(jié)果居然也和.訪問(wèn)結(jié)果一致了??！

動(dòng)態(tài)創(chuàng)建屬性

現(xiàn)在我們使用點(diǎn)屬性訪問(wèn)器去創(chuàng)建一個(gè)不存在的屬性時(shí)

使用方括號(hào)屬性訪問(wèn)器創(chuàng)建時(shí)，結(jié)果一致

通過(guò)變量訪問(wèn)

定義一個(gè)temp變量，存放我們需要訪問(wèn)的key

var temp = 'x'

我們現(xiàn)在使用.訪問(wèn)這個(gè)變量

結(jié)果居然發(fā)現(xiàn)，這個(gè)東西的結(jié)果和訪問(wèn)不存在屬性一樣

而通過(guò)[]訪問(wèn)時(shí)

結(jié)果就是訪問(wèn)temp所代表的x

小結(jié)：

點(diǎn)屬性訪問(wèn)器：

• 直接訪問(wèn).后面的值——因此不支持變量訪問(wèn)

方括號(hào)屬性訪問(wèn)器

• 訪問(wèn)不存在變量時(shí)，若不是變量，需要以字符串形式出現(xiàn)

• 支持變量訪問(wèn)

當(dāng)然因?yàn)檫@里是需要直接動(dòng)態(tài)的獲取數(shù)組的內(nèi)容，相當(dāng)于

• 需要?jiǎng)討B(tài)的創(chuàng)建一個(gè)不存在的

• 屬性屬性是一個(gè)變量

因此，選擇使用方括號(hào)屬性選擇器

關(guān)于“Vue的makeMap函數(shù)怎么使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue的makeMap函數(shù)怎么使用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。