Vue數(shù)組響應(yīng)式操作及如何使用高階函數(shù)

這篇文章主要講解了Vue數(shù)組響應(yīng)式操作及如何使用高階函數(shù)，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

數(shù)組的響應(yīng)式操作

//this.letters.push('123');//在末尾添加一個(gè)元素

//this.letters.pop();//從末尾刪除一個(gè)元素
//this.letters.unshift('111');//在開端添加一個(gè)元素
//this.letters.shift();//從開端刪除一個(gè)元素
//this.letters.splice(1,2);//從下標(biāo)為1的元素開始刪除兩個(gè)元素
//this.letters.splice(1,2,'777','888');//從下標(biāo)為1的元素開始刪除兩個(gè)元素，并插入一個(gè)新元素
//this.letters.splice(1, 0, '777', '888'); //在下標(biāo)為1處插入兩個(gè)元素
//this.letters.splice(2);//保留前2個(gè)元素，其他的刪除掉

高階函數(shù)

1、filter過濾函數(shù)

filter也是一個(gè)常用的操作，它用于把Array的某些元素過濾掉，然后返回剩下的元素。

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，以此類推直到遍歷完成
  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)樽址?#39;1'比字符'2'的ASCII碼小。如果不知道sort()方法的默認(rèn)排序規(guī)則，直接對(duì)數(shù)字排序，絕對(duì)栽進(jìn)坑里！

//要按數(shù)字大小排序，我們可以這么寫：
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]

看完上述內(nèi)容，是不是對(duì)Vue數(shù)組響應(yīng)式操作及如何使用高階函數(shù)有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。