一行代码就能完成的事情,为什么要写两行

简介: 一行代码就能完成的事情,为什么要写两行

三元运算符


用三元运算符代替简单的if else

if (age < 18) {
  me = '小姐姐';
} else {
  me = '老阿姨';
}

改用三元运算符,一行就能搞定

me = age < 18 ? '小姐姐' : '老阿姨';

复杂的判断三元运算符就有点不简单易懂了

const you = "董员外"
const your = "菜鸡本鸡"
const me = you ?"点再看":your?"点赞":"分享"


判断


当需要判断的情况不止一个时,第一个想法就是使用 || 或运算符

if(
    type == 1 ||
    type == 2 ||
    type == 3 ||
    type == 4 ||
){
   //...
}

ES6中的includes一行就能搞定

if( [1,2,3,4,5].includes(type) ){
   //...
}


取值


在写代码的时候,经常会用到取值的操作

const obj = {
    a:1,
    b:2,
    c:3,
}
//老的取值方式
const a = obj.a;
const b = obj.b;
const c = obj.c;

老的取值方式,直接用对象名加属性名去取值。如果使用ES6的解构赋值一行就能搞定

const {a,b,c} = obj;


获取对象属性值


在编程的过程中经常会遇到获取一个值并赋给另一个变量的情况,在获取这个值时需要先判断一下这个对象是否存在,才能进行赋值

if(obj && obj.name){
  const name = obj.name
}

ES6提供了可选连操作符?.,可以简化操作

const name = obj?.name;


反转字符串


将一个字符串进行翻转操作,返回翻转后的字符串

const reverse = str => str.split('').reverse().join('');
reverse('hello world');   // 'dlrow olleh'


生成随机字符串


生成一个随机的字符串,包含字母和数字

const randomString = () => Math.random().toString(36).slice(2);
//函数调用
randomString();


数组去重


用于移除数组中的重复项

const unique = (arr) => [...new Set(arr)];
console.log(unique([1, 2, 2, 2, 3, 4, 4, 5, 6, 6]));


数组对象去重


去除重复的对象,对象的key值和value值都分别相等,才叫相同对象

const uniqueObj = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []);
uniqueObj([{id: 1, name: '大师兄'}, {id: 2, name: '小师妹'}, {id: 1, name: '大师兄'}], (a, b) => a.id == b.id)
// [{id: 1, name: '大师兄'}, {id: 2, name: '小师妹'}]


合并数据


当我们需要合并数据,并且去除重复值时,你是不是要用for循环? ES6的扩展运算符一行就能搞定!!!

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]


判断数组是否为空


判断一个数组是否为空数组,它将返回一个布尔值

const notEmpty = arr => Array.isArray(arr) && arr.length > 0;
notEmpty([1, 2, 3]);  // true


交换两个变量


//旧写法
let a=1;
let b=2;
let temp;
temp=a
a=b
b=temp
//新写法
[a, b] = [b, a];


判断奇还是偶


const isEven = num => num % 2 === 0;
isEven(996); 


获取两个数之间的随机整数


const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
random(1, 50);


检查日期是否为工作日


传入日期,判断是否是工作日

const isWeekday = (date) => date.getDay() % 6 !== 0;
console.log(isWeekday(new Date(2021, 11, 11)));
// false 
console.log(isWeekday(new Date(2021, 11, 13)));
// true


高级


滚动到页面顶部


不用引入element-ui等框架,一行代码就能实现滚动到顶部

const goToTop = () => window.scrollTo(0, 0);
goToTop();


浏览器是否支持触摸事件


通过判断浏览器是否有ontouchstart事件来判断是否支持触摸

const touchSupported = () => {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(touchSupported());


当前设备是否为苹果设备


前端经常要兼容andriod和ios

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
// Result: will return true if user is on an Apple device


复制内容到剪切板


使用 navigator.clipboard.writeText 来实现将文本复制到剪贴板

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("双十一来了~");


检测是否是黑暗模式


用于检测当前的环境是否是黑暗模式,返回一个布尔值

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)


网站变成黑白


有时候网站在某种特定的情况下,需要使整个网站变成黑白的颜色

filter:grayscale(100%)


只需要将这一行代码filter:grayscale(100%)放到body上,一下就能致黑


image.png





目录
相关文章
|
21天前
|
存储 人工智能 运维
摊牌了,代码不是我自己写的
本文介绍了如何使用阿里云函数计算FC部署Qwen2.5开源大模型。Qwen2.5支持128K上下文长度和92种编程语言,通过Ollama托管和Open WebUI交互界面实现快速部署与高效调用。函数计算FC提供免运维环境,支持弹性扩容,开发者只需简单配置即可上线新功能。部署流程包括创建Ollama应用、配置Open WebUI及获取内网访问地址等步骤。应用体验部分展示了如何通过Open WebUI调用Qwen2.5进行多语言交流、解答数学题和文档总结等功能。此外,函数计算FC的自动扩缩容机制可根据请求量动态调整实例数量,提高资源利用率并降低成本。
摊牌了,代码不是我自己写的
|
5月前
|
机器学习/深度学习 自然语言处理 算法
代码的前世今生详细介绍
7月更文挑战第8天
66 4
|
8月前
你写过的最蠢的代码是?
你写过的最蠢的代码是?
40 0
|
存储 设计模式 缓存
这45个小技巧,让你的代码突然又优雅了2
这45个小技巧,让你的代码突然又优雅了2
这45个小技巧,让你的代码突然又优雅了2
|
定位技术 数据处理 开发工具
如何优雅地统计代码(一)
*精美排版详见钉钉文档其实这个事情要从一个下午讲起,对我来说是个尤里卡时刻;其实一开始让我直接从数据里统计大家提交代码是有点无从下手的,前几天开始调研了一波代码统计方案后发现大部分都是基于文件来统计代码的各种行数并没有这种基于前后版本的变更代码统计,大家更多的使用Git自带的统计方法但显然我这里没有这样的环境(下面背景会详细展开),快要放弃今天的技术调研遂下楼散步刷新思维,我又回溯了我在这个项目中
|
前端开发 C++
这几行代码,真的骚!
这几行代码,真的骚!
这几行代码,真的骚!
|
设计模式 前端开发 Java
握草,你竟然在代码里下毒!
Java程序员👨‍💻‍,10个编码小技巧,用好了升职加薪,用不好开除走人!
911 0
握草,你竟然在代码里下毒!
|
数据可视化 开发工具 git
如何给你的代码祝寿?
前段时间 alibaba/x-render 突破 3K Star,一直寻思着怎么给开源社区贡献的同学做一个小礼物来“祝寿”,然后就想到了之前玩过的 gource 和 avconv 这两个库(参数不熟悉可查文档,此外不多加解释),前者用于处理提交日志可视化,后者用于视频处理。
|
设计模式 IDE Java
最好的代码是没有代码
对于大多数软件开发者来说,要让他们承认这一点是很痛苦的,因为他们爱他们的代码。你写的每一行新代码都需要经过调试,需要具备可阅读性和可维护性。
最好的代码是没有代码