js 简便方法

左手的ㄟ右手 2023-06-15 07:24 30阅读 0赞

***一，JS中filter()方法的使用***  
   filter用于对数组进行**过滤**。  
   它创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素：`filter()`把传入的函数依次作用于每个元素，然后根据返回值是`true`还是`false`决定保留还是丢弃该元素。  
   注意：filter()不会对空数组进行检测、不会改变原始数组  
  1. 用法：Array.filter(function(currentValue, indedx, arr), thisValue),其中，函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；  
  函数的第一个参数 currentValue 也为必须，代表当前元素的值。  
 2.实例  
    返回数组nums中所有大于0的元素

let arr = [-1, 2, -3, 4, -5, 6, -7, 8, 9-, 10];
    
    let res = arr.filter((num) => {
      return num > 0;
    });
    
    console.log(res);  // [2, 4, 6, 8, 10]

//去除空格
    var arr = ['0',1,2,3,4,"",5,1,4,'0',""];
    var arr_filter = arr.filter(function(x){
        return x;/* 筛选空格 */ 
    })
    console.log(arr_filter)

//利用filter，可以巧妙地去除Array的重复元素：
    var arr_repeat = ['A','B','A','B','B','C','A','D'];
    var arr_filter = arr_repeat.filter(function(element,index,self){
        return self.indexOf(element) == index;
    })
    console.log(arr_filter);//返回['A','B','C','D']
    //去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相//等，因此被filter滤掉了

`另外filter()`接收的回调函数，其实可以有多个参数。通常仅使用第一个参数，表示`Array`的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身；

***二，JS数组reduce()方法  
    ***reduce()方法是处理数组的方法，它接收一个函数和一个初始值，然后将数组中的每个元素和初始值当作参数传入这个函数中      进行处理，最后返回和初始值相同类型的值。  
   1.用法：

例如，将某个值减去数组中的每个元素：

var items = [5, 10, 15];
    var reducer = function minus(minusSum, item) {
        return minusSum - item;
    }
    var total = items.reduce(reducer, 61);
    console.log(total); // 31

把用户输入的不规范的英文名字，变为首字母大写，其他小写的规范名字。输入：`['adam', 'LISA', 'barT']`，输出：`['Adam', 'Lisa', 'Bart']`

reduce()是一个很强大的方法，我们还可以用它来处理更复杂的业务逻辑。  
例如，求购物车中商品的总价，购物车数据如下：

如果用户有10元的优惠券的话，我们只需要将 -10作为初始值传入reduce()方法中就可以了。

var count = goodList.reduce(function(prev, cur) {
        return cur.price + prev;
    }, -10);
    console.log(count); // 75

我们给例子增加一点难度，商城在搞促销，对商品有一定的折扣，我们应该如何求得商品的总价格呢？利用reduce方法也可以很容易解决的。

再举一个例子，如何求得一串字符串中每个字母出现的次数？如果我们不用reduce()方法也可以实现的，代码如下：

利用reduce()方法的代码如下：