您现在的位置是:首页 > Javascript
当前栏目
5个能提高前端工作效率的操作
2023-03-14 09:36:07 时间
一些在前端项目中会用到的快捷操作,下面的代码都可以直接复制到控制台运行。
数字取整
- let floatNum = 100.5;
- let intNum = ~~floatNum;
- console.log(intNum); // 100
![5个能提高前端工作效率的骚操作](https://s2.51cto.com/oss/202101/08/584ad45894cf60763d5d0e9e24e89ba7.jpeg)
字符串转数字
- let str="10000";
- let num = +str;
- console.log(num); // 10000
![5个能提高前端工作效率的骚操作](https://s2.51cto.com/oss/202101/08/2befdbd17f9017291cf14b9d9cdf24cf.jpeg)
Falsy和Truthy值转boolean
Falsy为Javascript中所有可以转换为false的值的统称,共8个:false本身、空字符串、null、undefined、NaN、数字0、数字-0、大数字0n。
除Falsy值外其他所有值都是Truthy
- let falseNum = 0;
- let falseStr = "";
- let falseUndefined;
- let falseNull = null;
- let falseNaN = 0/0;
- let trueNum = 1;
- let trueStr = "何方";
- let trueObj = {name:"何方"};
- let trueArr = ["前端","后端"];
- console.log("falseNum", !!falseNum); // false
- console.log("falseStr", !!falseStr); // false
- console.log("falseUndefined", !!falseUndefined); // false
- console.log("falseNaN",!!falseNaN); // false
- console.log("trueNum",!!trueNum); // true
- console.log("trueStr",!!trueStr); // true
- console.log("trueObj",!!trueObj); // true
- console.log("trueArr",!!trueArr); // true
![5个能提高前端工作效率的骚操作](https://s6.51cto.com/oss/202101/08/b61f8b9b9b960a02cd74f532c80c5f3e.jpeg)
交换对象键值
- let obj = {
- key1: "value1",
- key2: "value2"
- };
- let revert = {};
- Object.entries(obj).forEach(([key, value]) => revert[value] = key);
- console.log(revert);
![5个能提高前端工作效率的骚操作](https://s3.51cto.com/oss/202101/08/4135a19de7ffb29c6faeab3e03ad0219.jpeg)
数组去重
值类型数组
- let arrNum = [
- 1, 2, 3, 4, 5, 6, 7, 8, 9, 0,
- 1, 2, 3, 4, 5, 6, 7, 8, 9, 0
- ];
- let arrString = [
- "1", "2", "3", "4", "5", "6", "7", "8", "9", "0",
- "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
- ];
- let arrMixed = [
- 1, "1", "2", true, false, false, 1, 2, "2"
- ];
- arrNum = Array.from(new Set(arrNum));
- arrString = [...new Set(arrString)];
- arrMixed = [...new Set(arrMixed)];
- console.log(arrNum); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
- console.log(arrString); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]
- console.log(arrMixed); // [1, "1", "2", true, false, 2]
![5个能提高前端工作效率的骚操作](https://s4.51cto.com/oss/202101/08/7baebd652ab433d47ae707359b224583.jpeg)
引用类型数组
- let arrObj = [
- {name: "何方"},
- {name: "王二"},
- {name: "何方"},
- {name: "何方"},
- {name: "何方"},
- {name: "何方"},
- {name: "王二"},
- {name: "王二"},
- {name: "王二"},
- {name: "王二"},
- ];
- let arrObj2 = [];
- arrObj.forEach(item => {
- arrObj2.find(find => find.name === item.name) || arrObj2.push(item)
- });
- console.log(arrObj2);
![5个能提高前端工作效率的骚操作](https://s5.51cto.com/oss/202101/08/d982f4723faa6af61d67abdfd53c50e9.jpeg)
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?