ES6高级使用技巧(reduce,filter篇)
本周总结
这几天在写Echarts自定义需求的时候发现了,图形化算法和函数式编程的应用场景,很多时候我们现在学的东西并一定在当前的这种状态有用,但是兴趣吧,喜欢就去学呗,没准在日后的工作日常中用到了
我喜欢这种既学习到东西还能随便给我发发工资的生活
热情只有在某个年龄段才会有的,所以把握现在,失去热情就等于失去了生活的乐趣
以前我写过几遍关于reduce 的文章,但是可能没有连贯性或者说没有单一,就在前几天在解决Echarts自定义需求的时候,终于发现了结合的用武之地了
随便把filter也介绍下,毕竟我也用的少
reduce 特性
[1,2,3,4,4].reduce((acc,val)=>
//第一种
acc.concat(xxx),[]
//第二种
(acc.push(xxx),acc),[]
//第三种 单个值
acc+xxx,0
//第四种,如果是字符串
acc+xxx,''
//第五种,对象
acc[val]=xxx,{}
)
最普通的格式
[xxx].reduce((acc,val)=>{
操作
return acc
},[])
第一个参数是函数,第二个参数是格式,0/{},[],''
注意当使用concat应该直接return
[1,2,3,4,[1,2,3]].reduce((acc,val)=>{
return acc.concat(val)
},[])
['beep', 'boop', 'foo', 'bar'], [true, true, false, true]
//简单的例子
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [1, 0, 1, 0, 1];
第一种方法
let arr3 = [];
for (let i in arr2) {
if (arr2[i]) {
arr3.push(arr1[i])
}
}
console.log(arr3);
第二种方法
arr1.reduce((acc, item, index) =>
( arr2[index] && acc.push(item), acc)
, []);
观察特点
(acc,val,i)=>(操作,acc) 最后返回的是acc
[] Array.from({length:0})
[[],[]]
有没有想过用 Array.from来实现
Array.from({length:2}).map(v=>[])
我们可以知道
length的值不可能是死的
如果二维的数组可以是
length:Math.max(...arr.map(x=>x.length))
删选出数组中每个数首字母是否含有'b'
let arr = ['beep', 'boop', 'foo', 'bar'];
console.log(arr.reduce((acc, val) => (val[0] === 'b' && acc.push(val), acc), []));
进阶 每个数是否含有'b'
arr.reduce((acc, val) =>
(val.indexOf('b') >-1 && acc.push(val), acc),
[])
计算次数
计算一个数组中某值的次数
[1, 2, 3, 4, 1, 1, 1, 1, 2, 3, 4].reduce(
(acc, val) => val === 1? acc + 1 : acc, 0,
)
细节解读
0代表从0开始,acc是迭代的值,默认为0
console.log(['one', 'two', 'three','one', 'two', 'three'].reduce((acc, val) =>
(acc[val] = (acc[val] || 0) + 1, acc), {},
));
细节解读
(acc[val] = (acc[val] || 0) + 1
第一次进入的时候 acc[val] 肯定是不存在的所以默认给0,后面给值了就叠加了
升级理解
计算长度的次数
console.log(['one', 'two', 'three', 'one', 'two', 'three'].map(v => v.length).reduce(
(acc, val) =>
(acc[val] = (acc[val] || 0) + 1, acc), {},
));
数组扁平化
连接两个数组用concat方法
[1, 2, 3, 4, 5, [1, 3, 4], 5].reduce((acc, val) =>
acc.concat(val),[]
);
const flatter=(arr,depth=1)=>
arr.reduce((acc,val)=>
acc.concat(depth>1&&Array.isArray(val)?flatter(val,depth-1):val),[]
);
console.log(flatter([1,[2,3,4,[2,3,4,[1,2,3]]]],3));
// 细节
&& 做判断
递归注意是把改变后的值作为参数再次传入函数
查找某个数在数组的位置
let arr = [1, 2, 3, 4, 1, 2, 1, 3, 1];
arr.reduce((acc, val, i) =>
(val === 2 && acc.push(i), acc), [],
);
字符串操作
需求在数组的偶数项或者奇数项插入特定的字符
['pen', 'pineapple', 'apple', 'pen'].reduce(
(acc, val, i) =>
i % 2 === 0 ?
acc + val + '我'
: acc + val + '你'
, '',
); //pen我pineapple你apple我pen你
返回数组每一项中最长的那项
['this', 'is', 'a', 'testcase'].reduce(
(acc, val) =>
(acc.length > val.length ? acc : val), 0,
)
// 求和
[1,2,3,4,5].reduce(
(acc,val)=>acc+val,0
)
把两个数组合并成一个对象
let arr1 = [1, 2, 3];
let arr2 = arr1.map(v => v * 3);
arr1.reduce((acc, val, i) =>
(acc[val] = arr2[i], acc), {},
);
// { '1': 3, '2': 6, '3': 9 }
reduce里面嵌套高阶函数
可以对数组中的多个对象进行分组
const partition = (arr, fn) =>
arr.reduce(
(acc, val, i, arr) => {
acc[fn(val, i, arr) ? 0 : 1].push(val);
return acc;
},
[[], []]
);
const users = [{ user: 'barney', age: 36, active: false }, { user: 'fred', age: 40, active: true }];
partition(users, o => o.active); // [[{ 'user': 'fred', 'age': 40, 'active': true }],[{ 'user': 'barney', 'age': 36, 'active': false }]]
用普通函数定义变量
arr.reduce((acc, val) => {
let a = val.age;
acc[a ? 0 : 1].push(val);
return acc
},[[],[]]);
复杂的数组交换位置 (底层逻辑暂时不懂,先留着等技术提高了再来解决)
[1,2,3] => 每两个数之间交换位置,递归,遍历
首先判断当数组是两个数,两个数之间交换位置
const permutations = arr => {
if (arr.length <= 2) return arr.length === 2 ? [arr, [arr[1], arr[0]]] : arr;
return arr.reduce(
(acc, val, i) => {
//就是这块合并,分解,再遍历
return acc.concat(
permutations([...arr.slice(0, i), ...arr.slice(i + 1)])
.map(item => [val, ...item]),
);
}, [],
);
};
console.log(permutations([1, 2, 3, 4]));
对数组进行对象删选再进行属性删选
const data = [
{
id: 1,
name: 'john',
age: 24
},
{
id: 2,
name: 'mike',
age: 50
}
];
let obj = ['id', 'name'];
data.filter(v=>v.age>24)
.map(item=>
obj.reduce((acc,val)=>(acc[val]=item[val],acc),{}))
reduce 实现排序
// 升序
[0,1,2,3].reduce((acc,val)=>acc-val>=0?acc:val);
//降序
[0,1,2,3].reduce((acc,val)=>val-acc>=0?acc:val);
reduce对数组的对象属性进行去重
let arr = [
{id: 0, value: 'a'},
{id: 1, value: 'b'},
{id: 2, value: 'c'},
{id: 1, value: 'd'},
{id: 0, value: 'e'},
];
fn=(a,b)=>a.value===b.value;
console.log(arr.reduce((acc, val) => {
if (!acc.some(x => fn(val, x))) acc.push(val);
return acc
}, []));
//[ { id: 0, value: 'a' },
// { id: 1, value: 'b' },
// { id: 2, value: 'c' },
// { id: 1, value: 'd' },
// { id: 0, value: 'e' } ]
多个数组的每项进行拆成独立的数组
const unzip = arr =>
arr.reduce(
(acc, val) => (val.forEach((v, i) => acc[i].push(v)), acc),
Array.from({
length: Math.max(...arr.map(x => x.length))
}).map(x => [])
);
unzip([['a', 1, true], ['b', 2, false]]); // [['a', 'b'], [1, 2], [true, false]]
filter
取出自身数组不重复的数
let arr=[1,3,3,4,4,5,6];
arr.filter((v,i,array)=>array.indexOf(v)==array.lastIndexOf(v))
let arr = [1, 2, 3, 1, 2, 5];
const fn = (a, b) => a === b;
console.log(arr.filter((v, i) => arr.every((w, j) => (j === i) === fn(w, v))));
filter筛选出相同或者不同的数
//第一种方式
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [1, 0, 1, 0, 1];
console.log(arr1.filter(v => !arr2.includes(v)));
//第二种形式
const intersection = (a, b) => {
const s = new Set(b);
return a.filter(x => s.has(x));
};
intersection([1, 2, 3], [4, 3, 2]); // [2, 3]
//第三种形式
a中不存在b中的数
let arr1 = [1, 3, 4, 5, 6, 7,6,6,7,7,20];
let arr2 = [3, 4, 5, 8, 9, 20, 12];
console.log(arr1.filter(v => arr2.findIndex(w => w === v) === -1));
如果是小数可以先进行处理再比较
let arr1 = [1, 1.2, 1.5, 3, 0];
let arr2 = [1.9, 3, 0, 3.9];
console.log(arr1.filter(v => arr2.findIndex(w => Math.round(w)=== Math.round(v)) === -1));
##############################################################################################.......................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
决定自己的高度的是你的态度，而不是你的才能
记得我们是终身初学者和学习者
总有一天我也能成为大佬
