溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了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);//4434、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]看完上述內容，是不是對Vue數組響應式操作及如何使用高階函數有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
