Skip to content

Repository files navigation

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

About

code-pen优秀项目仿写练习

Topics

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages