记录在工作中常用的方法,优化
JS篇
数组的常用方法
- Array.filter() 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。 不会改变原数组,它返回过滤后的新数组。
- Array.some() 数组元素中只要有一个元素满足条件。就返回 true, 否则 false 返回的是一个Boolean类型的值。
- Array.every() 数组元素中所有元素都满足条件, 就返回 true, 否则 false。
- Array.find() 返回数组中满足条件的第一个元素的值。否则返回 undefined 。
- Array.findIndex() 跟find 一样, 只不过返回的不是值,而是索引。
- Array.map() 映射出一个新数组
- Array.forEach() 相当于for循环
数组平扁化
- Flat 方法, 有一个可选参数,指定要提取嵌套数组的结构深度,默认值为 1。
const arr = [0, 1, 2, [3, 4]]; arr.flat() // [0, 1, 2, 3, 4] //使用 Infinity,可展开任意深度的嵌套数组 const arr1 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr1.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
- toString配合split使用
const arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]] arr.toString().split(',') // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
数组交集,差集
new Set 对象是值的集合,你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次,即 Set 中的元素是唯一的。正好我们可以用来去重。
- 交集
const arr1 = [0,2,4,5,6,7]; const arr2 = [6,8,2,9,4]; const arr = [...new Set(arr1)].filter(item => arr2.includes(item)) // [2, 4, 6]
- 差集
const arr1 = [0,2,4,5,6,7]; const arr2 = [6,8,2,9,4]; const arr = [...new Set(arr1), ...new Set(arr2)].filter(item => !arr1.includes(item) || !arr2.includes(item)) // [0, 5, 7, 8, 9]
数组求和,求最大值,最小值
实现方法有很多种, 这里我使用的是reduce
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 第一个参数 callback,callback包含四个参数:
accumulator累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。
currentValue
数组中正在处理的元素。
index 可选
数组中正在处理的当前元素的索引。 如果提供了initialValue,则起始索引号为0,否则从索引1起始。
array可选
调用 reduce() 的数组
reduce() 第二个参数 initialValue 如果没有提供初始值,则将使用数组中的第一个元素。
// 数组求和 const arr = [{x: 1}, {x:2}, {x:3}] arr.reduce((prev, cur) => prev + cur.x, 0); // 6 // 数组最大值 const arr = [4, 2, 1, 8, 7, 3] arr.reduce((prev, cur) => prev < cur ? cur : prev, 0); // 8 // 计算数组中每个元素出现的次数 const arr = ['北京', '上海', '南京', '北京', '深圳']; arr.reduce( (prev, cur) => { if (cur in prev) { prev[cur]++; } else { prev[cur] = 1; } return prev; }, {}); // {北京: 2, 上海: 1, 南京: 1, 深圳: 1} // reduce 来代替 map和filter使用 const arr = [0, 2, 3, 4] arr.map(a => a * 2).filter(b => b > 5) // [6, 8] app.reduce((p, c) => { return c * 2 > 5 ? [...p, c * 2] : p } , []) // [6, 8]