Vue數(shù)組響應(yīng)式操作及高階函數(shù)使用代碼詳解
數(shù)組的響應(yīng)式操作
//this.letters.push(’123’);//在末尾添加一個(gè)元素
//this.letters.pop();//從末尾刪除一個(gè)元素//this.letters.unshift(’111’);//在開(kāi)端添加一個(gè)元素//this.letters.shift();//從開(kāi)端刪除一個(gè)元素//this.letters.splice(1,2);//從下標(biāo)為1的元素開(kāi)始刪除兩個(gè)元素//this.letters.splice(1,2,’777’,’888’);//從下標(biāo)為1的元素開(kāi)始刪除兩個(gè)元素,并插入一個(gè)新元素//this.letters.splice(1, 0, ’777’, ’888’); //在下標(biāo)為1處插入兩個(gè)元素//this.letters.splice(2);//保留前2個(gè)元素,其他的刪除掉
高階函數(shù)
1、filter過(guò)濾函數(shù)
filter也是一個(gè)常用的操作,它用于把Array的某些元素過(guò)濾掉,然后返回剩下的元素。
filter把傳入的函數(shù)依次作用于每個(gè)元素,然后根據(jù)返回值是true還是false決定保留還是丟棄該元素。
const nums = [2,3,5,1,77,55,100,200];let newArray = nums.filter(function (n) { //小于100就是true,進(jìn)入newArray數(shù)組 return n < 100;})console.log(newArray);//[2,3,5,1,77,55]
2、map高階函數(shù)
map函數(shù)同樣會(huì)遍歷數(shù)組每一項(xiàng),傳入回調(diào)函數(shù)為參數(shù),num是map遍歷的每一項(xiàng),回調(diào)函數(shù)function返回值會(huì)被添加到新數(shù)組中
const nums = [2,3,5,1,77,55,100,200];let newArray = nums.filter(function (n) { //小于100就是true,進(jìn)入newArray數(shù)組 return n < 100;})console.log(newArray);//[2,3,5,1,77,55]
3、reduce高階函數(shù)
reduce函數(shù)同樣會(huì)遍歷數(shù)組每一項(xiàng),傳入回調(diào)函數(shù)和‘0’為參數(shù),0表示回調(diào)函數(shù)中preValue初始值為0,回調(diào)函數(shù)中參數(shù)preValue是每一次回調(diào)函數(shù)function返回的值,currentValue是當(dāng)前值
const nums = [2,3,5,1,77,55,100,200];let new3Array = nums.reduce(function (preValue,currentValue) { //數(shù)組為[2,3,5,1,77,55,100,200],則回調(diào)函數(shù)第一次返回值為0+2=2,第二次preValue為2,返回值為2+3=5,以此類(lèi)推直到遍歷完成 return preValue+currentValue;},0);//第二個(gè)參數(shù)0是preValue的初始值console.log(new3Array);//443
4、sort排序算法
因?yàn)锳rray的sort()方法默認(rèn)把所有元素先轉(zhuǎn)換為String再排序,結(jié)果’10’排在了’2’的前面,因?yàn)樽址?’比字符’2’的ASCII碼小。如果不知道sort()方法的默認(rèn)排序規(guī)則,直接對(duì)數(shù)字排序,絕對(duì)栽進(jìn)坑里!
//要按數(shù)字大小排序,我們可以這么寫(xiě):var arr = [10, 20, 1, 2];arr.sort(function (x, y) { if (x < y) { return -1; } if (x > y) { return 1; } return 0;}); // [1, 2, 10, 20]//如果要倒序排序,我們可以把大的數(shù)放前面:var arr = [10, 20, 1, 2];arr.sort(function (x, y) { if (x < y) { return 1; } if (x > y) { return -1; } return 0;}); // [20, 10, 2, 1]
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. Warning: require(): open_basedir restriction in effect,目錄配置open_basedir報(bào)錯(cuò)問(wèn)題分析2. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執(zhí)行過(guò)程解析3. ASP調(diào)用WebService轉(zhuǎn)化成JSON數(shù)據(jù),附j(luò)son.min.asp4. SharePoint Server 2019新特性介紹5. ASP中常用的22個(gè)FSO文件操作函數(shù)整理6. React+umi+typeScript創(chuàng)建項(xiàng)目的過(guò)程7. php網(wǎng)絡(luò)安全中命令執(zhí)行漏洞的產(chǎn)生及本質(zhì)探究8. 無(wú)線標(biāo)記語(yǔ)言(WML)基礎(chǔ)之WMLScript 基礎(chǔ)第1/2頁(yè)9. 三個(gè)不常見(jiàn)的 HTML5 實(shí)用新特性簡(jiǎn)介10. php測(cè)試程序運(yùn)行速度和頁(yè)面執(zhí)行速度的代碼
