Vue判斷字符串(或數(shù)組)中是否包含某個元素的多種方法

更新時間：2022年09月06日 14:19:31 作者：Logan星

在我們前端日常開發(fā)中經(jīng)常會遇到判斷一個字符串中是否包含某個元素的需求,下面這篇文章主要給大家介紹了關于Vue判斷字符串(或數(shù)組)中是否包含某個元素的多種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

方法一：includes方法（數(shù)組，字符串都可以）

var str = “Hello World!”;
if(str.includes(“World”)){
}

數(shù)組兼用，舉例如下：

let animals = [“cat”, “dog”, “pig”, “deer”]
animals.includes(“deer”) // true
animals.includes(“horse”) // false

該函數(shù)返回一個布爾值，表示該值是否存在。

方法二：indexOf方法（數(shù)組，字符串都可以）

var str = “Hello World!”;
//注意：！=-1即為為真，可以找到得情況
if(str.indexOf(“World”) != -1){
}

數(shù)組兼用，舉例如下：

在需要查找的元素的確切位置的情況下，可以使用indexOf(param)方法，該方法在指定的數(shù)組中查找param并返回其第一次出現(xiàn)的索引，如果數(shù)組不包含param則返回-1。

例如，我們可以在包含 grade 的數(shù)組中查找第一次出現(xiàn)的 grade:

let grades = [“A”, “B”, “C”, “D”]
grades.indexOf(“A”) // 0
grades.indexOf(“F”) // -1

方法三：search方法

var str = “Hello World!”;
//注意：！=-1即為為真，可以找到得情況
if(str.search(“World”) != -1){
}

方法四：match方法

該方法類似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

var str=‘12334';
var reg=RegExp(/3/);
if(str.match(reg)){
//包含
}

方法五：text方法

如果字符串 string 中含有與 RegExpObject 匹配的文本，則返回 true，否則返回 false

var str = “123456”;
var reg = RegExp(/2/);
console.log(reg.test(str)); // true

方法六：exec方法（數(shù)組可以，字符串未測）

如果字符串 string 中含有與 RegExpObject 匹配的文本，則返回 true，否則返回 false

var str = “123456”;
var reg = RegExp(/2/);
if(reg.exec(str)){
//包含}

方法七：some() 方法

在搜索對象時，include()檢查提供的對象引用是否與數(shù)組中的對象引用匹配。有時候這不是我們想要的，因為對象可以有相同的字段和相應的值，但引用不同。

我們可以使用some()方法根據(jù)對象的內(nèi)容進行搜索。some()方法接受一個參數(shù)，接受一個回調函數(shù)，對數(shù)組中的每個值執(zhí)行一次，直到找到一個滿足回調函數(shù)設置的條件的元素，并返回true。

為了更好地理解它，讓我們看看一些 some()的實際應用：

let animals = [{name: “dog”}, {name: “horse”}, {name: “cat”}]
let element = {name: “cat”}
animals.some(animal => animal.name === element.name)

回調函數(shù)在前兩種情況下返回 false，但在第三個情況下返回 true，因為名稱匹配。此后，some()暫停執(zhí)行并返回 true。
由此可見，some()函數(shù)可幫助我們根據(jù)對象的內(nèi)容搜索對象的存在。

總結

到此這篇關于Vue判斷字符串(或數(shù)組)中是否包含某個元素的文章就介紹到這了,更多相關Vue判斷是否包含某個元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue?路由判斷方式
這篇文章主要介紹了vue?路由判斷方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue的Eslint配置文件eslintrc.js說明與規(guī)則介紹
最近在跟著視頻敲項目時，代碼提示出現(xiàn)很多奇奇怪怪的錯誤提示，百度了一下是eslintrc.js文件沒有配置相關命令，ESlint的語法檢測真的令人抓狂，現(xiàn)在總結一下這些命令的解釋
2020-02-02
Vue2.0 組件傳值通訊的示例代碼
本篇文章主要介紹了Vue2.0 組件傳值通訊的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
Vue前端項目自適應布局的簡單方法
最近項目開發(fā)中遇到一個需求,需要實現(xiàn)寬度自動適應,所以下面這篇文章主要給大家介紹了關于Vue前端項目自適應布局的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-06-06
Vue實現(xiàn)兩種路由權限控制方式
路由權限控制常用于后臺管理系統(tǒng)中，對不同業(yè)務人員能夠訪問的頁面進行一個權限的限制。本文主要介紹了兩種Vue 路由權限控制，具有一定的參考價值，感興趣的可以了解一下
2021-10-10
基于vue.js 2.x的虛擬滾動條的示例代碼
本篇文章主要介紹了基于vue.js 2.x的虛擬滾動條的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
淺談webpack SplitChunksPlugin實用指南
這篇文章主要介紹了淺談webpack SplitChunksPlugin實用指南，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
Vue snippets插件原理與使用介紹
這篇文章主要介紹了Vue snippets插件原理與使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-10-10
vue 使用iView組件中的Table實現(xiàn)定時自動滾動效果
要在css中設置table的高度,使數(shù)據(jù)過多時出現(xiàn)滾動條,將縱向設置為overflow-y: auto;橫向設置隱藏 overflow-x: hidden,接下來通過本文介紹vue使用iView組件中的Table實現(xiàn)定時自動滾動效果,需要的朋友可以參考下
2024-05-05
Vue?eventBus事件總線封裝后再用的方式
EventBus稱為事件總線,當兩個組件屬于不同的兩個組件分支,或者兩個組件沒有任何聯(lián)系的時候,不想使用Vuex這樣的庫來進行數(shù)據(jù)通信,就可以通過事件總線來進行通信,這篇文章主要給大家介紹了關于Vue?eventBus事件總線封裝后再用的相關資料,需要的朋友可以參考下
2022-06-06