17個vue常用的數(shù)組方法總結與實例演示
1. join()
join(’參數(shù)‘)把數(shù)組的元素以傳入的參數(shù)為分割符,轉換成字符串。
let arr = [1,2,3,4,5]; let str = arr.join(','); console.log(str) // -> '1,2,3,4,5';
2.push()和pop()
push(): 可以接收任意數(shù)量的參數(shù),把它們逐個添加到數(shù)組末尾,并返回修改后數(shù)組的長度。
pop():數(shù)組末尾移除最后一項,減少數(shù)組的 length 值,然后返回移除的項。
let arr = ['張三','李四','王五']; let count = arr.push('馬六'); console.log(arr) // -> ['張三','李四','王五','馬六'] console.log(count) // -> 4 let item = arr.pop(); console.log(item) // -> 馬六;
3.shift() 和 unshift()
shift():刪除原數(shù)組第一項,并返回刪除元素的值;如果數(shù)組為空則返回undefined 。
unshift:將參數(shù)添加到原數(shù)組開頭,并返回數(shù)組的長度 。
let arr = ['張三','李四','王五']; let item = arr.shift(); console.log(arr) // -> ['李四','王五'] console.log(item); // -> 張三 let count = arr.unshift('馬六'); console.log(arr) // -> ['馬六','李四','王五'] console.log(count) // -> 3
4.reverse();
將數(shù)組的數(shù)據(jù)進行反轉,并且返回反轉后的數(shù)組,會改變原數(shù)組
let arr = [1,2,3,4,5]; let arr1 = arr.reverse(); console.log(arr1) // -> [5,4,3,2,1] console.log(arr) // -> [5,4,3,2,1]
5.sort();
對數(shù)組內的數(shù)據(jù)進行排序(默認為升序),并且返回排過序的新數(shù)組,會改變原來的數(shù)組
let arr = [12,2,43,5,2,5]; console.log(arr.sort()) // -> [12, 2, 2, 43, 5, 5] // 注意:通過上面的案例,你會發(fā)現(xiàn) 打印的數(shù)組和原數(shù)組比較還是有變化的 [12,2,43,5,2,5] -> [12, 2, 2, 43, 5, 5];但是有沒有達到我們想要的結果,這是為什么呢? // 因為排序是針對字符的排序,先使用數(shù)組的toString()方法轉為字符串,再逐位比較,3是大于12的,因為首位3>1,不要與Number型的數(shù)據(jù)排序混淆。 5.1那如果需要數(shù)值排序怎么辦呢? // 如果需要數(shù)值排序,sort(callback) 需要傳入一個回調涵數(shù),該函數(shù)應該具有兩個參數(shù),比較這兩個參數(shù),然后返回一個用于說明這兩個值的相對順序的數(shù)字(a-b); 例如: let arr = [12,2,43,5,2,5]; console.log(arr.sort((a,b)=>a-b)) // -> [2, 2, 5, 5, 12, 43]
6.slice();
截取指定位置的數(shù)組,并且返回截取的數(shù)組,不會改變原數(shù)組
// 注意:slice(startIndex, endIndex)可以有兩個參數(shù),startIndex為必選,表示從第幾位開始;endIndex為可選,表示到第幾位結束(不包含endIndex位),省略表示到最后一位;startIndex和endIndex都可以為負數(shù),負數(shù)時表示從最后一位開始算起,如-1表示最后一位。 let arr = ['張三','李四','王五','馬六']; console.log(arr.slice(1,3)); // -> ['李四', '王五'] console.log(arr) // -> ['張三','李四','王五','馬六']; 原數(shù)組是沒有改變的。
7.splice();
向數(shù)組中添加,或從數(shù)組刪除,或替換數(shù)組中的元素,然后返回被刪除/替換的元素。
// 注意:splice(start,num,val1,val2,...); 所有參數(shù)全部可選。和 slice 相比 splice 是會改變原數(shù)組的。 // start 是開始位置,可以為負數(shù),-1就代表從最后一位開始,num代表要刪除或者替換的長度,不能為負數(shù)。 let arr = ['張三','李四','王五','馬六']; console.log(arr.splice(2,1)) // -> ['王五'] console.log(arr) // -> ['張三','李四','馬六'] let arr = ['張三','李四','王五','馬六']; console.log(arr.splice(2,1,'七郎')) // -> ['王五'] console.log(arr) // -> ['張三', '李四', '七郎', '馬六']
8.toString();
將數(shù)組轉換成字符串,類似于沒有參數(shù)的join()。該方法會在數(shù)據(jù)發(fā)生隱式類型轉換時被自動調用,如果手動調用,就是直接轉為字符串。不會改變原數(shù)組
let arr = [1,2,3,4,5,6]; console.log(arr.toString()) // -> '1,2,3,4,5,6' // 注意:沒有參數(shù)。
9.indexOf();
根據(jù)指定的數(shù)據(jù),從左向右,查詢在數(shù)組中出現(xiàn)的位置,如果不存在指定的數(shù)據(jù),返回-1,找到了指定的數(shù)據(jù)返回該數(shù)據(jù)的索引
// 注意:indexOf(value, start);value為要查詢的數(shù)據(jù);start為可選,表示開始查詢的位置,當start為負數(shù)時,從數(shù)組的尾部向前數(shù);如果查詢不到value的存在,則方法返回-1 let arr = ['張三','李四','王五','馬六']; console.log(arr.indexOf('李四')) // -> 1 console.log(arr.indexOf('李四',2)) // -> -1 10.forEach() ES5新增的方法,用來遍歷數(shù)組,沒有返回值, // 注意:forEach(callback);callback默認有三個參數(shù),分別為value(遍歷到的數(shù)組的數(shù)據(jù)),index(對應的索引),self(數(shù)組自身)。 let arr = ['張三','李四','王五','馬六'] let a = arr.forEach((item,index,self)=>{ console.log(value + "--" + index + "--" + (arr === self)); }) // 打印結果為: // 張三--0--true // 李四--1--true // 王五--2--true // 馬六--3--true console.log(a); // -> undefined---forEach沒有返回值 //該方法為遍歷方法,不會修改原數(shù)組
11.map();
1.同forEach功能;
2.map的回調函數(shù)會將執(zhí)行結果返回,最后map將所有回調函數(shù)的返回值組成新數(shù)組返回。
//注意:map(callback);callback默認有三個參數(shù),分別為value,index,self。跟上面的forEach()的參數(shù)一樣 let arr = ['張三','李四','王五','馬六']; let arr1 = arr.map(item => { return '你好:'+item }) console.log(arr1) // -> ['你好:張三', '你好:李四', '你好:王五', '你好:馬六']
12.filter();
1.同forEach功能;2.filter的回調函數(shù)需要返回布爾值,當為true時,將本次數(shù)組的數(shù)據(jù)返回給filter,最后filter將所有回調函數(shù)的返回值組成新數(shù)組返回(此功能可理解為“過濾”)。
// 注意:filter(callback);callback默認有三個參數(shù),分別為value,index,self。 let arr = [1,2,3,4,5,6]; let arr1 = arr.filter((value,index,self)=>{ console.log(item) // -> 1,2,3,4,5,6 console.log(index) // -> 0,1,2,3,4,5 console.log(self) // -> [1,2,3,4,5,6] return item > 3 }) console.log(arr1) // -> [4,5,6]
13.find();
數(shù)組的循環(huán),查找到符合條件的值并且打斷循環(huán)返回找到的值;
let arr = ['張三','李四','王五','馬六']; let str = arr.find(item => item == '李四'); console.log(str); // -> '李四'
14.findIndex();
數(shù)組的循環(huán),查找到符合條件的索引并且打斷循環(huán)返回找到的索引值
let arr = ['張三','李四','王五','馬六']; let index = arr.findIndex(item => item == '李四'); console.log(index); // -> 1;
15.every();
判斷數(shù)組中每一項是否都滿足條件,只有所有項都滿足條件,才會返回true。
// 注意: every()接收一個回調函數(shù)作為參數(shù),這個回調函數(shù)需要有返回值,every(callback);callback默認有三個參數(shù),分別為value,index,self。 let arr = [1,2,3,4,5,6]; let bool = arr.every(item => item > 0); console.log(bool); // -> true; let bool = arr.every(item => item > 3); console.log(bool); // -> false;
16.some();
判斷數(shù)組中是否存在滿足條件的項,只要有一項滿足條件,就會返回true。否側就會返回false
//注意: some()接收一個回調函數(shù)作為參數(shù),這個回調函數(shù)需要有返回值,some(callback);callback默認有三個參數(shù),分別為value,index,self。 let arr = [1,2,3,4,5,6]; let bool = arr.some(item => item > 3); console.log(bool) // -> true; let bool = arr.some(item => item > 6); console.log(bool) // -> false;
17.reduce();
數(shù)組的第一項開始,逐個遍歷到最后,迭代數(shù)組的所有項,然后構建一個最終返回的值。
// 注意: 參數(shù):reduce()接收一個或兩個參數(shù):第一個是回調函數(shù),表示在數(shù)組的每一項上調用的函數(shù);第二個參數(shù)(可選的)作為歸并的初始值,被回調函數(shù)第一次執(zhí)行時的第一個參數(shù)接收。 reduce(callback,initial);callback默認有四個參數(shù),分別為prev,now,index,self。 callback返回的任何值都會作為下一次執(zhí)行的第一個參數(shù)。 如果initial參數(shù)被省略,那么第一次迭代發(fā)生在數(shù)組的第二項上,因此callback的第一個參數(shù)是數(shù)組的第一項,第二個參數(shù)就是數(shù)組的第二項。 let arr = [10,20,30,40,50]; let sum = arr.reduce((prev,now) => prev+now) console.log(sum); // -> 150; let sum = arr.reduce((prev,now) => prev+now,110) console.log(sum)
本文為大家講解了17個vue常用的數(shù)組方法總結與實例演示,包括:VUE數(shù)組轉換字符串,VUE數(shù)組遍歷,VUE數(shù)組過濾,VUE數(shù)組查詢等功能,更多關于VUE數(shù)組操作請查看下面的相關鏈接
相關文章
使用electron-builder將項目打包成桌面程序的詳細教程
這篇文章主要介紹了使用electron-builder把web端的項目打包生成桌面程序,并可安裝程序,文中通過代碼示例和圖文結合的方式給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-08-08vue?Element?UI擴展內容過長使用tooltip顯示
這篇文章主要為大家介紹了vue?Element?UI擴展內容過長使用tooltip展示鼠標hover時的提示信息,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(二)
這篇文章主要介紹了Vue.js 實現(xiàn)微信公眾號菜單編輯器功能,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-05-05解決vue的touchStart事件及click事件沖突問題
這篇文章主要介紹了解決vue的touchStart事件及click事件沖突問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07