Vue判斷字符串(或數(shù)組)中是否包含某個(gè)元素的多種方法
Vue判斷字符串中是否包含某個(gè)字符串,方法有好多種,這里暫時(shí)先說(shuō)我知道的兩種,以后知道了別的,會(huì)繼續(xù)更新!
方法一: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ù)返回一個(gè)布爾值,表示該值是否存在。
方法二: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ù)組可以,字符串未測(cè))
如果字符串 string 中含有與 RegExpObject 匹配的文本,則返回 true,否則返回 false
var str = “123456”;
var reg = RegExp(/2/);
if(reg.exec(str)){
//包含}方法七:some() 方法
在搜索對(duì)象時(shí),include()檢查提供的對(duì)象引用是否與數(shù)組中的對(duì)象引用匹配。有時(shí)候這不是我們想要的,因?yàn)閷?duì)象可以有相同的字段和相應(yīng)的值,但引用不同。
我們可以使用some()方法根據(jù)對(duì)象的內(nèi)容進(jìn)行搜索。some()方法接受一個(gè)參數(shù),接受一個(gè)回調(diào)函數(shù),對(duì)數(shù)組中的每個(gè)值執(zhí)行一次,直到找到一個(gè)滿足回調(diào)函數(shù)設(shè)置的條件的元素,并返回true。
為了更好地理解它,讓我們看看一些 some()的實(shí)際應(yīng)用:
let animals = [{name: “dog”}, {name: “horse”}, {name: “cat”}]
let element = {name: “cat”}
animals.some(animal => animal.name === element.name)回調(diào)函數(shù)在前兩種情況下返回 false,但在第三個(gè)情況下返回 true,因?yàn)槊Q匹配。 此后,some()暫停執(zhí)行并返回 true。
由此可見(jiàn),some()函數(shù)可幫助我們根據(jù)對(duì)象的內(nèi)容搜索對(duì)象的存在。
總結(jié)
到此這篇關(guān)于Vue判斷字符串(或數(shù)組)中是否包含某個(gè)元素的文章就介紹到這了,更多相關(guān)Vue判斷是否包含某個(gè)元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue的Eslint配置文件eslintrc.js說(shuō)明與規(guī)則介紹
最近在跟著視頻敲項(xiàng)目時(shí),代碼提示出現(xiàn)很多奇奇怪怪的錯(cuò)誤提示,百度了一下是eslintrc.js文件沒(méi)有配置相關(guān)命令,ESlint的語(yǔ)法檢測(cè)真的令人抓狂,現(xiàn)在總結(jié)一下這些命令的解釋2020-02-02
Vue前端項(xiàng)目自適應(yīng)布局的簡(jiǎn)單方法
最近項(xiàng)目開(kāi)發(fā)中遇到一個(gè)需求,需要實(shí)現(xiàn)寬度自動(dòng)適應(yīng),所以下面這篇文章主要給大家介紹了關(guān)于Vue前端項(xiàng)目自適應(yīng)布局的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
Vue實(shí)現(xiàn)兩種路由權(quán)限控制方式
路由權(quán)限控制常用于后臺(tái)管理系統(tǒng)中,對(duì)不同業(yè)務(wù)人員能夠訪問(wèn)的頁(yè)面進(jìn)行一個(gè)權(quán)限的限制。本文主要介紹了兩種Vue 路由權(quán)限控制,具有一定的參考價(jià)值,感興趣的可以了解一下2021-10-10
淺談webpack SplitChunksPlugin實(shí)用指南
這篇文章主要介紹了淺談webpack SplitChunksPlugin實(shí)用指南,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue 使用iView組件中的Table實(shí)現(xiàn)定時(shí)自動(dòng)滾動(dòng)效果
要在css中設(shè)置table的高度,使數(shù)據(jù)過(guò)多時(shí)出現(xiàn)滾動(dòng)條,將縱向設(shè)置為overflow-y: auto;橫向設(shè)置隱藏 overflow-x: hidden,接下來(lái)通過(guò)本文介紹vue使用iView組件中的Table實(shí)現(xiàn)定時(shí)自動(dòng)滾動(dòng)效果,需要的朋友可以參考下2024-05-05

