美文网首页让前端飞前端开发笔记
关于es6的函数基础应用——第一篇

关于es6的函数基础应用——第一篇

作者: 发发呆哟 | 来源:发表于2018-10-22 23:44 被阅读19次

    30-seconds-of-code提供了大量精彩的函数片段,你可以花30s或者更短的时间来理解这些代码段,理解这些函数的应用相信对自己会有一定的帮助。
    本系列只涉及数组处理方面函数,为了方便阅读,每篇8-10条,总计10篇,**生产环境慎用!**,**生产环境慎用!**,**生产环境慎用!**重要的事情说三遍。

    all

    如果所提供的判定函数对集合中的所有元素都返回true,则返回true,否则返回false
    使用Array.prototype.every()来测试集合中所有元素是否都基于fn返回true。第二个参数fn可以缺省,使用Boolean作为默认值,等价于return new Boolean(x)

    every(fn) 方法使用fn检测数组中的所有元素:

    • 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
    • 如果所有元素都满足条件,则返回 true
    /**
     * @name all
     * @param {Array} arr 
     * @param {Function} fn 
     * @returns {Boolean}
     */
    const all = (arr, fn = Boolean) => arr.every(fn);
    
    all([1, 2, 3]); // true
    all([0]); // false
    all([2, 3, 4], x => x > 1); // true
    

    allEqual

    检查数组内所有元素是否都相等。
    Array.prototype.every()检查是否数组中的所有元素都和数组中第一个元素相同。

    /**
     * @name allEqual
     * @param {Array} arr 
     * @returns {Boolean}
     */
    const allEqual = arr => arr.every(val => val === arr[0]);
    
    allEqual([1, 2, 3, 4, 5, 6]); // false
    allEqual([1, 1, 1, 1]); // true
    

    any

    如果提供的判定函数对集合中至少一个元素返回true,则返回true,否则返回false
    使用Array.prototype.some()来测试集合中所有元素是否都基于fn返回true。第二个参数fn可以缺省,使用Boolean作为默认值,等价于return new Boolean(x)

    some(fn) 方法使用fn检测数组中的所有元素:

    • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
    • 如果没有满足条件的元素,则返回false
    /**
     * @name any
     * @param {Array} arr 
     * @param {Function} fn 
     * @returns {Boolean}
     */
    const any = (arr, fn = Boolean) => arr.some(fn);
    
    any([1, 2, 3], x => x > 2); // true
    any([1, 2, 3], x => x > 4); // false
    any([0]); // false
    

    arrayToCSV

    将一个二维数组转化为一个用逗号分隔的字符串。
    使用Array.prototype.map()Array.prototype.join(delimiter)将单独的一维数组组合成字符串。使用Array.prototype.join('\n')将所有行组合成CSV字符串,用新的一行分隔字符串。第二个参数delimiter可以缺省,使用,作为默认分隔符。

    map(fn)方法将原数组中的每个元素调用fn后,返回返回值组成的新数组。

    /**
     * @name arrayToCSV
     * @param {Array} arr 
     * @param {String} delimiter 
     * @returns {String}
     */
    const arrayToCSV = (arr, delimiter = ',') =>
        arr.map(v => v.map(x => `'${x}'`).join(delimiter)).join('\n');
    
    arrayToCSV([['x', 'y'], ['a', 'b', 'c']]); // "'x','y'/n'a','b','c'"
    arrayToCSV([[1, 2, 3], ['a', 'b', 'c']], ';')// "'1';'2';'3'/n'a';'b';'c'"
    

    bifurcate

    将值拆分成两组。如果一个元素在filter中是true,则在集合中对应的元素属于第一个组,否则它就属于第二个组。
    使用Array.prototype.reduce()Array.prototype.push()并根据filter向组中添加元素。

    reduce(callback,[initialValue])方法为数组中的每一个元素依次执行回调函数(不包括数组中被删除或从未被赋值的元素),返回一个具体的结果。

    • callback (执行数组中每个值的函数,包含四个参数)
      • previousValue (第一项的值或者上一次叠加的结果值,或者是提供的初始值(initialValue))
      • currentValue (数组中当前被处理的元素)
      • index (当前元素在数组中的索引)
      • array (数组本身)
    • initialValue (作为第一次调用 callback 的第一个参数,可以控制返回值的格式)

    注:根据bifurcate表现,箭头函数函数体中,代码用()包裹,用,隔开,返回最后一句代码,mdn上未提供该写法。

    /**
     * @name bifurcate
     * @param {Array} arr 
     * @param {Array} filter 
     * @returns {Array}
     */
    const bifurcate = (arr, filter) =>
        arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);
        
    bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]); // [ [ 'beep', 'boop', 'bar' ], [ 'foo' ] ]
    

    bifurcateBy

    根据判定函数将值拆分成两组,判定函数指定输入集合中的元素属于哪一个组。如果判定函数返回true,则在集合中对应的元素属于第一个组,否则它就属于第二个组。
    使用Array.prototype.reduce()Array.prototype.push()并根据fn向组中添加元素。

    /**
     * @name bifurcateBy
     * @param {Array} arr 
     * @param {Function} fn 
     * @returns {Array}
     */
    const bifurcateBy = (arr, fn) =>
        arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);
    
    bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b'); //[ [ 'beep', 'boop', 'bar' ], [ 'foo' ] ]
    

    chunk

    将数组拆分为指定大小的更小的数组。
    使用Array.from()创建一个新数组,这个数组长度长度为生成的块的数量。使用Array.prototype.slice()将新数组的每一个元素映射到长度为size的块中。如果原始属组不能被平均分,最后一个数组将会包含剩余元素。

    /**
     * @name chunk
     * @param {Array} arr 
     * @param {Number} size 
     * @returns {Array}
     */
    const chunk = (arr, size) => 
        Array.from({ length: Math.ceil(arr.length / size) }, (v, i) => 
            arr.slice(size * i, size * i + size)
        );
    
    chunk([1, 2, 3, 4, 5], 2); // [ [ 1, 2 ], [ 3, 4 ], [ 5 ] ]
    

    compact

    移除数组中的false值。
    使用Array.prototype.filter()来过滤掉false值(false, null,0,"", undefined, and NaN)。

    filter(fn) 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

    /**
     * @name compact
     * @param {Array} arr 
     * @returns {Array}
     */
    const compact = arr => arr.filter(Boolean);
    
    compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]); // [ 1, 2, 3, 'a', 's', 34 ]
    

    countBy

    根据给定函数对数组的元素进行分组,并返回每个组中元素的数量。
    使用Array.prototype.map()将数组中的值映射到一个方法或者属性名。通过Array.prototype.reduce()创建一个对象,对象的属性由前面的映射结果生成。

    /**
     * @name countBy
     * @param {Array} arr 
     * @param {*} fn 
     * @returns {Object}
     */
    const countBy = (arr, fn) => 
        arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => {
            acc[val] = (acc[val] || 0) + 1;
            return acc;
        }, {});
    
    countBy([6.1, 4.2, 6.3], Math.floor); // { '4': 1, '6': 2 }
    countBy(['one', 'two', 'three'], 'length'); // { '3': 2, '5': 1 }
    

    countOccurrences

    计算数组中的值出现的次数。
    每次你遇见数组中的某个具体值,就用Array.prototype.reduce()来增加计数器。

    /**
     * @name countOccurrences
     * @param {Array} arr 
     * @param {*} val 
     * @returns {Number}
     */
    const countOccurrences = (arr, val) => arr.reduce((a, v) => v === val ? a + 1 : a, 0);
    
    countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3
    

    第一篇就此结束ヾ(◍°∇°◍)ノ゙

    相关文章

      网友评论

        本文标题:关于es6的函数基础应用——第一篇

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