Pixel-Daze/code-pen

code-pen优秀项目仿写练习

**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