1. 程式人生 > 程式設計 >Vue陣列響應式操作及高階函式使用程式碼詳解

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,'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,55]

2、map高階函式

map函式同樣會遍歷陣列每一項,傳入回撥函式為引數,num是map遍歷的每一項,回撥函式function返回值會被新增到新陣列中

const nums = [2,55]

3、reduce高階函式

reduce函式同樣會遍歷陣列每一項,傳入回撥函式和‘0'為引數,0表示回撥函式中preValue初始值為0,回撥函式中引數preValue是每一次回撥函式function返回的值,currentValue是當前值

const nums = [2,200];
let new3Array = nums.reduce(function (preValue,currentValue) {
  //陣列為[2,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,2];
arr.sort(function (x,y) {
  if (x < y) {
    return -1;
  }
  if (x > y) {
    return 1;
  }
  return 0;
}); // [1,10,20]

//如果要倒序排序,我們可以把大的數放前面:
var arr = [10,y) {
  if (x < y) {
    return 1;
  }
  if (x > y) {
    return -1;
  }
  return 0;
}); // [20,1]

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。