Vue數組響應式操作及高階函數使用代碼詳解
數組的響應式操作
//this.letters.push(’123’);//在末尾添加一個元素
//this.letters.pop();//從末尾刪除一個元素//this.letters.unshift(’111’);//在開端添加一個元素//this.letters.shift();//從開端刪除一個元素//this.letters.splice(1,2);//從下標為1的元素開始刪除兩個元素//this.letters.splice(1,2,’777’,’888’);//從下標為1的元素開始刪除兩個元素,并插入一個新元素//this.letters.splice(1, 0, ’777’, ’888’); //在下標為1處插入兩個元素//this.letters.splice(2);//保留前2個元素,其他的刪除掉
高階函數
1、filter過濾函數
filter也是一個常用的操作,它用于把Array的某些元素過濾掉,然后返回剩下的元素。
filter把傳入的函數依次作用于每個元素,然后根據返回值是true還是false決定保留還是丟棄該元素。
const nums = [2,3,5,1,77,55,100,200];let newArray = nums.filter(function (n) { //小于100就是true,進入newArray數組 return n < 100;})console.log(newArray);//[2,3,5,1,77,55]
2、map高階函數
map函數同樣會遍歷數組每一項,傳入回調函數為參數,num是map遍歷的每一項,回調函數function返回值會被添加到新數組中
const nums = [2,3,5,1,77,55,100,200];let newArray = nums.filter(function (n) { //小于100就是true,進入newArray數組 return n < 100;})console.log(newArray);//[2,3,5,1,77,55]
3、reduce高階函數
reduce函數同樣會遍歷數組每一項,傳入回調函數和‘0’為參數,0表示回調函數中preValue初始值為0,回調函數中參數preValue是每一次回調函數function返回的值,currentValue是當前值
const nums = [2,3,5,1,77,55,100,200];let new3Array = nums.reduce(function (preValue,currentValue) { //數組為[2,3,5,1,77,55,100,200],則回調函數第一次返回值為0+2=2,第二次preValue為2,返回值為2+3=5,以此類推直到遍歷完成 return preValue+currentValue;},0);//第二個參數0是preValue的初始值console.log(new3Array);//443
4、sort排序算法
因為Array的sort()方法默認把所有元素先轉換為String再排序,結果’10’排在了’2’的前面,因為字符’1’比字符’2’的ASCII碼小。如果不知道sort()方法的默認排序規則,直接對數字排序,絕對栽進坑里!
//要按數字大小排序,我們可以這么寫: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]//如果要倒序排序,我們可以把大的數放前面: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]
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。
相關文章: