美文网首页
reduce,some,every函数的用法

reduce,some,every函数的用法

作者: 付出的前端路 | 来源:发表于2018-08-01 10:19 被阅读0次

    reduce

    reduce-MDN

    描述

    reduce为数组中的每一个元素依次执行callback函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:

    • accumulator

    • currentValue

    • currentIndex

    • array

    回调函数第一次执行时,accumulatorcurrentValue的取值有两种情况:调用reduce时提供initialValueaccumulator取值为initialValuecurrentValue取数组中的第一个值;没有提供 initialValueaccumulator取数组中的第一个值,currentValue取数组中的第二个值。

    注意:如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

    如果数组为空且没有提供initialValue,会抛出TypeError 。如果数组仅有一个元素(无论位置如何)并且没有提供initialValue, 或者有提供initialValue但是数组为空,那么此唯一值将被返回并且callback不会被执行。

    提供初始值通常更安全。

    数组里所有值的和

    var sum = [0, 1, 2, 3].reduce(function (a, b) {
      return a + b;
    }, 0);
    // sum is 6
    

    你也可以写成箭头函数的形式:

    var total = [ 0, 1, 2, 3 ].reduce(
      ( acc, cur ) => acc + cur,
      0
    );
    

    将二维数组转化为一维

    var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
      function(a, b) {
        return a.concat(b);
      },
      []
    );
    // flattened is [0, 1, 2, 3, 4, 5]
    

    你也可以写成箭头函数的形式:

    var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
     ( acc, cur ) => acc.concat(cur),
     []
    );
    

    计算数组中每个元素出现的次数

    var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
    
    var countedNames = names.reduce(function (allNames, name) { 
      if (name in allNames) {
        allNames[name]++;
      }
      else {
        allNames[name] = 1;
      }
      return allNames;
    }, {});
    // countedNames is:
    // { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
    

    使用扩展运算符和initialValue绑定包含在对象数组中的数组

    // friends - an array of objects 
    // where object field "books" - list of favorite books 
    var friends = [{
      name: 'Anna',
      books: ['Bible', 'Harry Potter'],
      age: 21
    }, {
      name: 'Bob',
      books: ['War and peace', 'Romeo and Juliet'],
      age: 26
    }, {
      name: 'Alice',
      books: ['The Lord of the Rings', 'The Shining'],
      age: 18
    }];
    
    // allbooks - list which will contain all friends' books +  
    // additional list contained in initialValue
    var allbooks = friends.reduce(function(prev, curr) {
      return [...prev, ...curr.books];
    }, ['Alphabet']);
    
    // allbooks = [
    //   'Alphabet', 'Bible', 'Harry Potter', 'War and peace', 
    //   'Romeo and Juliet', 'The Lord of the Rings',
    //   'The Shining'
    // ]
    

    数组去重

    let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
    let result = arr.sort().reduce((init, current)=>{
        if(init.length===0 || init[init.length-1]!==current){
            init.push(current);
        }
        return init;
    }, []);
    console.log(result); //[1,2,3,4,5]
    

    some

    some-MDN

    示例

    测试数组元素的值

    下面的例子检测在数组中是否有元素大于 10。

    function isBiggerThan10(element, index, array) {
      return element > 10;
    }
    
    [2, 5, 8, 1, 4].some(isBiggerThan10);  // false
    [12, 5, 8, 1, 4].some(isBiggerThan10); // true
    

    使用箭头函数测试数组元素的值

    Arrow functions provide a shorter syntax for the same test.

    [2, 5, 8, 1, 4].some(x => x > 10);  // false
    [12, 5, 8, 1, 4].some(x => x > 10); // true
    

    判断数组元素中是否存在某个值

    To mimic the function of the includes() method, this custom function returns true if the element exists in the array:

    var fruits = ['apple', 'banana', 'mango', 'guava'];
    
    function checkAvailability(arr, val) {
      return arr.some(function(arrVal) {
        return val === arrVal;
      });
    }
    
    checkAvailability(fruits, 'kela');   // false
    checkAvailability(fruits, 'banana'); // true
    

    使用箭头函数判断数组元素中是否存在某个值

    var fruits = ['apple', 'banana', 'mango', 'guava'];
    
    function checkAvailability(arr, val) {
      return arr.some(arrVal => val === arrVal);
    }
    
    checkAvailability(fruits, 'kela');   // false
    checkAvailability(fruits, 'banana'); // true
    

    将任意值转换为布尔类型

    var TRUTHY_VALUES = [true, 'true', 1];
    
    function getBoolean(value) {
      'use strict';
       
      if (typeof value === 'string') { 
        value = value.toLowerCase().trim();
      }
    
      return TRUTHY_VALUES.some(function(t) {
        return t === value;
      });
    }
    
    getBoolean(false);   // false
    getBoolean('false'); // false
    getBoolean(1);       // true
    getBoolean('true');  // true
    

    every

    every-MDN

    例子:检测所有数组元素的大小
    下例检测数组中的所有元素是否都大于 10。
    
    function isBigEnough(element, index, array) {
      return (element >= 10);
    }
    var passed = [12, 5, 8, 130, 44].every(isBigEnough);
    // passed is false
    passed = [12, 54, 18, 130, 44].every(isBigEnough);
    // passed is true
    

    相关文章

      网友评论

          本文标题:reduce,some,every函数的用法

          本文链接:https://www.haomeiwen.com/subject/tgrlvftx.html