前言
本人是个切图仔，在写项目过程中，很多知识不常用就会忘记，所以我决定开始写文档，一是方便自己以后查看，二是也能为别人提供点参考。 话不多说，上车！
ES6 高阶用法
reduce()方法的使用技巧
1.二维数组转为一维数组
let array = [
[1, 2],
[3, 4],
[5, 6],
].reduce((pre, next) => {
return pre.concat(next);
}, []);
console.log(array); // [1, 2, 3, 4, 5, 6]
2.多维数组 扁平化
const arr = [1, [[2, 3], 4],5]
const flatten = (arr) =>{
return arr.reduce((pre, cur) =>{
return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
},[])
};
console.log(flatten(arr)) [ 1, 2, 3, 4, 5 ]
---------------------------------
// 注: flat 方法的语法：arr.flat ( [depth] ) 其中depth是flat的参数，
depth 是可以传递数组的展开深度（默认不填、数值是 1），即展开一层数组。
如果层数不确定，参数可以传进 Infinity，代表不论多少层都要展开;
```javascript
let arr = [1,[2,[3,4,5]]]
console.log(arr.flat(Infinity)) //[ 1, 2, 3, 4, 5 ]
> 3.求和的方法
```javascript
let total = [2, 3, 4].reduce((pre, next) => {
return pre + next;
}, 0);
console.log(total); // 9
4.获取数组中每个元素出现的次数
//字符串可以先拆分为数组
const list = 'abcabc'.split('') //['a', 'b', 'c','a', 'b', 'c']
let letters = ['aa', 'bb', 'cc', 'aa', 'bb'];
const countLetters = letters.reduce((allLetters, letter) => {
if (allLetters[letter]) {
allLetters[letter] ++;
} else {
allLetters[letter] = 1;
}
return allLetters;
}, {});
console.log(countLetters) // { aa: 2, bb: 2, cc: 1 }
---------------------------------------------
const arraySum = (arr, val) => arr.reduce((acc, cur) => {
return cur == val ? acc + 1 : acc + 0
}, 0);
let arr = [ 0, 1, 3, 0, 2, 0, 2, 3 ];
console.log(arraySum(arr,0)) //3
5.数组对象去重
let arr = [
{name: 'html', id:1},
{name: 'javascript', id:2},
{name: 'html', id:3},
{name: 'javascript', id:4},
]
//第一种
let obj = {}
let open = arr.reduce((pre,cur) => {
obj[cur.name] ? '' : obj[cur.name] = true && pre.push(cur)
return pre
},[]);
console.log(open) [ { name: 'html', id: 1 }, { name: 'javascript', id: 2 } ],
//第二种 扩展:
const newMap=new Map()
const newArrTwo=arr.filter(item=>
!newMap.has(item.id) && newMap.set(item.id,1)
)
console.log(newArrTwo) //[ { name: 'html', id: 1 }, { name: 'javascript', id: 2 } ]
一些简单实用技巧
1.扩展运算符
let arr = [1,2,3,4,4,4,5,6,6,7];
console.log([...new Set(arr)]) //[1, 2, 3, 4, 5, 6, 7]
console.log([...new Set(arr)].join("")) //1234567
console.log(new Set(arr)) // {1, 2, 3, 4, 5, …}
//附 合并
console.log([...[1, 2, 3], ...[2, 3, 4]]); // [1,2,3,2,3,4]
2.includes方法
此方法用于判断字符串是否包含指定的子字符串,或者判断数组中是否有指定的元素。
//Array.includes() 返回true/false，参数1为给定值，参数2为开始查找的位置
//Array.indexOf() 不够语义化 查找第一次出现的位置，所以要比较是否不等于-1，内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
干货分享
计算相差多少天
//注: 86400000为一天的毫秒数
const dayDiff = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000);
console.log(dayDiff(new Date("2023-02-01"),new Date("2023-02-14"))); //13
前端传值技巧
后端大哥说了,我只要a字段和c字段,其他多余字段给我后端,会报错,于是你就重新组装
const params = {
a: 1,
b: 2,
c: 3,
d: 4,
};
// 钻石级别组装
const { a, c } = params;
const param = { a, c };
// 王者级别组装
const { b, d, ...param } = params; // b和d字段是你需求排除的字段。params:{a:1,c:3}。
快速清空 vue data 里某个对象/数组里的值
方法一:
// 可以将初始状态的data复制到当前状态的data，实现重置效果
Object.assign(this.$data, this.$options.data())
// 如果你再data中获取了router的传值：this.$route.query，用this.$options.data()重置组件data时，data()里用this获取的props或method都为undefined解决办法如下。
Object.assign(this.$data, this.$options.data.call(this))；
方法二:
// 在大多数情况下，我们并不需要重置data中所有的数据，而只是需要重置data中的某一个对象或者属性：
this.form = this.$options.data().form
方法三:
// 清空对象： (主要用于form表单)Element
this.$refs.uploadForm.resetFields();
// 清空数组:
this.arrayList.splice(0, this.arrayList.length);
el-input 限制输入框只能输入数字
<el-input v-model.number="num" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"></el-input>
el-input type=number 去除聚焦时的上下箭头
<style scoped>
.clear-number-input ::v-deep input[type="number"]::-webkit-outer-spin-button,
.clear-number-input ::v-deep input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
</style>
避免不需要的三元表达式
// bad
const foo = a ? a : b;
const bar = c ? true : false;
const baz = c ? false : true;
// good
const foo = a || b;
const bar = !!c;
const baz = !c;
闲聊一下
如果你有更多干货/小技巧,欢迎下方讨论。 留个赞再走呀!
