?大廠面試題分享 面試題庫(kù)
前后端面試題庫(kù) （面試必備） 推薦：★★★★★
地址：前端面試題庫(kù)??web前端面試題庫(kù) VS java后端面試題庫(kù)大全文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-415244.html
三元運(yùn)算符
用三元運(yùn)算符代替簡(jiǎn)單的if else
if?(age?<?18)?{
??me?=?'小姐姐';
}?else?{
??me?=?'老阿姨';
}
復(fù)制代碼改用三元運(yùn)算符,一行就能搞定
me?=?age?<?18???'小姐姐'?:?'老阿姨';
復(fù)制代碼復(fù)雜的判斷三元運(yùn)算符就有點(diǎn)不簡(jiǎn)單易懂了
const?you?=?"董員外"
const?your?=?"菜雞本雞"
const?me?=?you?？"點(diǎn)再看":your？"點(diǎn)贊":"分享"
復(fù)制代碼判斷
當(dāng)需要判斷的情況不止一個(gè)時(shí),第一個(gè)想法就是使用?||?或運(yùn)算符
if(
????type?==?1?||
????type?==?2?||
????type?==?3?||
????type?==?4?||
){
???//...
}
復(fù)制代碼ES6中的includes一行就能搞定
if(?[1,2,3,4,5].includes(type)?){
???//...
}
復(fù)制代碼取值
在寫代碼的時(shí)候，經(jīng)常會(huì)用到取值的操作
const?obj?=?{
????a:1,
????b:2,
????c:3,
}
//老的取值方式
const?a?=?obj.a;
const?b?=?obj.b;
const?c?=?obj.c;
復(fù)制代碼老的取值方式，直接用對(duì)象名加屬性名去取值。如果使用ES6的解構(gòu)賦值一行就能搞定
const?{a,b,c}?=?obj;
復(fù)制代碼獲取對(duì)象屬性值
在編程的過(guò)程中經(jīng)常會(huì)遇到獲取一個(gè)值并賦給另一個(gè)變量的情況，在獲取這個(gè)值時(shí)需要先判斷一下這個(gè)對(duì)象是否存在，才能進(jìn)行賦值
if(obj?&&?obj.name){
??const?name?=?obj.name
}
復(fù)制代碼ES6提供了可選連操作符?.，可以簡(jiǎn)化操作
const?name?=?obj?.name;
復(fù)制代碼反轉(zhuǎn)字符串
將一個(gè)字符串進(jìn)行翻轉(zhuǎn)操作，返回翻轉(zhuǎn)后的字符串
const?reverse?=?str?=>?str.split('').reverse().join('');
reverse('hello?world');???//?'dlrow?olleh'
復(fù)制代碼生成隨機(jī)字符串
生成一個(gè)隨機(jī)的字符串，包含字母和數(shù)字
const?randomString?=?()?=>?Math.random().toString(36).slice(2);
//函數(shù)調(diào)用
randomString();
復(fù)制代碼數(shù)組去重
用于移除數(shù)組中的重復(fù)項(xiàng)
const?unique?=?(arr)?=>?[...new?Set(arr)];
console.log(unique([1,?2,?2,?2,?3,?4,?4,?5,?6,?6]));
復(fù)制代碼數(shù)組對(duì)象去重
去除重復(fù)的對(duì)象，對(duì)象的key值和value值都分別相等，才叫相同對(duì)象
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:?'小師妹'}]
復(fù)制代碼合并數(shù)據(jù)
當(dāng)我們需要合并數(shù)據(jù)，并且去除重復(fù)值時(shí)，你是不是要用for循環(huán)？ ES6的擴(kuò)展運(yùn)算符一行就能搞定?。。?/p>
const?a?=?[1,2,3];
const?b?=?[1,5,6];
const?c?=?[...new?Set([...a,...b])];//[1,2,3,5,6]
復(fù)制代碼判斷數(shù)組是否為空
判斷一個(gè)數(shù)組是否為空數(shù)組，它將返回一個(gè)布爾值
const?notEmpty?=?arr?=>?Array.isArray(arr)?&&?arr.length?>?0;
notEmpty([1,?2,?3]);??//?true
復(fù)制代碼交換兩個(gè)變量
//舊寫法
let?a=1;
let?b=2;
let?temp;
temp=a
a=b
b=temp
//新寫法
[a,?b]?=?[b,?a];
復(fù)制代碼判斷奇還是偶
const?isEven?=?num?=>?num?%?2?===?0;
isEven(996);?
復(fù)制代碼獲取兩個(gè)數(shù)之間的隨機(jī)整數(shù)
const?random?=?(min,?max)?=>?Math.floor(Math.random()?*?(max?-?min?+?1)?+?min);
random(1,?50);
復(fù)制代碼檢查日期是否為工作日
傳入日期，判斷是否是工作日
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
復(fù)制代碼高級(jí)
滾動(dòng)到頁(yè)面頂部
不用引入element-ui等框架，一行代碼就能實(shí)現(xiàn)滾動(dòng)到頂部
const?goToTop?=?()?=>?window.scrollTo(0,?0);
goToTop();
復(fù)制代碼瀏覽器是否支持觸摸事件
通過(guò)判斷瀏覽器是否有ontouchstart事件來(lái)判斷是否支持觸摸
const?touchSupported?=?()?=>?{
??('ontouchstart'?in?window?||?window.DocumentTouch?&&?document?instanceof?window.DocumentTouch);
}
console.log(touchSupported());
復(fù)制代碼當(dāng)前設(shè)備是否為蘋果設(shè)備
前端經(jīng)常要兼容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
復(fù)制代碼復(fù)制內(nèi)容到剪切板
使用 navigator.clipboard.writeText 來(lái)實(shí)現(xiàn)將文本復(fù)制到剪貼板
const?copyToClipboard?=?(text)?=>?navigator.clipboard.writeText(text);
copyToClipboard("雙十一來(lái)了~");
復(fù)制代碼檢測(cè)是否是黑暗模式
用于檢測(cè)當(dāng)前的環(huán)境是否是黑暗模式，返回一個(gè)布爾值
const?isDarkMode?=?window.matchMedia?&&?window.matchMedia('(prefers-color-scheme:?dark)').matches
console.log(isDarkMode)
復(fù)制代碼網(wǎng)站變成黑白
有時(shí)候網(wǎng)站在某種特定的情況下，需要使整個(gè)網(wǎng)站變成黑白的顏色
filter:grayscale(100%)
復(fù)制代碼只需要將這一行代碼filter:grayscale(100%)放到body上，一下就能致黑
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-415244.html
大廠面試題分享 面試題庫(kù)
前后端面試題庫(kù) （面試必備） 推薦：★★★★★
地址：前端面試題庫(kù)??web前端面試題庫(kù) VS java后端面試題庫(kù)大全
到了這里，關(guān)于一行代碼就能完成的事情，為什么要寫兩行？的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
