vue js 高级函数

定义集合

nums: [1, 2, 6, 7, 3, 4, 5]
objectNums:[
    {count:1, value:2},
    {count:2, value:3},
    {count:3, value:4},
    {count:4, value:5}
]

map

遍历集合中的所有元素，对每一个元素进行单独的相同的操作

1.每个成员乘以2倍;对象数组计算

          return this.nums.map(function (n) {
            return n * 2
          });

          return this.objectNums.map(function(n){
            return n.count * n.value
          })
       

结果

[ 2, 4, 12, 14, 6, 8, 10 ]
[ 2, 6, 12, 20 ]

2.lambda

return this.nums.map(n => n * 2)

return this.objectNums.map(n=>n.count * n.value)

reduce

遍历整个集合，每次对一个元素和一个结果集进行操作，并将结果存入结果集

1.整个数组相加

          return this.nums.reduce(function (preResult, currentValue) {
            return preResult + currentValue
          }, 0)

          return this.nums.reduce(function (currentValue, nextValue) {
            return currentValue + nextValue
          })

当reduce有2个参数的时候，第二个参数会在第一次计算的时候赋值给preResult,而currentValue则为数组的第一个值，而计算的结果则会保存在preResult中，以便后续继续计算

当reduce只有一个参数的时候，第一次计算会直接传入数组中的2个数，然后将结果保存在currentValue中，这时候总的遍历次数比上面要少一次

2.lambda

return this.nums.reduce((x, y) => x + y);

return this.nums.reduce(((x, y) => x + y),0);

filter

遍历整个集合，保留符合条件的元素，去除不符合条件的元素

1.筛选小于5的元素

          return this.nums.filter(function(n){
            return n < 5
          })

筛选位置小于4的元素

          return this.nums.filter(function(n,index){
            return index < 4
          })

去重

          return this.nums.filter(function (n, index, self) {
            return self.indexOf(n) === index;
          })

2.lambda

          return this.nums.filter(n => n < 5);

          return this.nums.filter((n, index) => index < 4);

          return this.nums.filter((n, index, self) => self.indexOf(n) === index);

sort

排序，默认按照字符串，从小到大排序

集合

nums: [1, 2, 6, 7, 3, 4, 5, 10]

1.默认排序

return this.nums.sort();

结果

[ 1, 10, 2, 3, 4, 5, 6, 7 ]

2.按数字从小到大排序

          return this.nums.sort(function(x,y){
            return x > y
          })

结果

[ 1, 2, 3, 4, 5, 6, 7, 10 ]

3.按数字从大到小排序

          return this.nums.sort(function(x,y){
            return x < y
          })

结果

[ 10, 7, 6, 5, 4, 3, 2, 1 ]

 

lambda

return this.nums.sort((x, y) => x < y);
return this.nums.sort((x, y) => x > y);