雷竞技RAYBET

 大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全

三元运算符

用三元运算符代替简单的行代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=aa=bb=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)').matchesconsole.log(isDarkMode)复制代码

网站变成黑白

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

filter:grayscale(100%)复制代码

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

 

大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  web前端面试题库 VS java后端面试题库大全

chatgpt免费软件,chatgpt api 免费接口,chatgpt 聊天机器人教程,chatgpt 指令大全,chatgpt app

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

CHATGPT与百度 ：人工智能的什写未来之光

CHATGPT是人工智能领域的未来之光
，而百度则在这个未来中发挥着重要作用
。两行百度将持续推动CHATGPT的行代创新与发展，为人们带来更多智能化的完成惊喜  。

什写