JS奇技淫巧

隨機(jī)生成字母和數(shù)組的組合

Math.random().toString(36).substr(2);

格式化時(shí)間

const dateFormatter = (formatter, date) => {
    date = (date ? new Date(date) : new Date)
    const Y = date.getFullYear() + '',
          M = date.getMonth() + 1,
          D = date.getDate(),
          H = date.getHours(),
          m = date.getMinutes(),
          s = date.getSeconds()
    return formatter.replace(/YYYY|yyyy/g, Y)
                    .replace(/YY|yy/g, Y.substr(2, 2))
                    .replace(/MM/g, (M < 10 ? '0' : '') + M)
                    .replace(/DD/g, (D < 10 ? '0' : '') + D)
                    .replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
                    .replace(/mm/g, (m < 10 ? '0' : '') + m)
                    .replace(/ss/g, (s < 10 ? '0' : '') + s)
}

dateFormatter('YYYY/MM/DD hh:mm:ss',new Date()) // 2021/06/21 11:11:17

獲取變量的實(shí)際類型

const trueTypeOf = (obj) => {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
};

console.log(trueTypeOf(''));
// string
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf());
// undefined
console.log(trueTypeOf(null));
// null
console.log(trueTypeOf({}));
// object
console.log(trueTypeOf([]));
// array
console.log(trueTypeOf(0));
// number
console.log(trueTypeOf(() => {}));
// function

1. if多條件判斷

// 冗余
if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {}

// 簡(jiǎn)潔
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {}

2. if...else...

// 冗余
let test: boolean;
if (x > 100) {
    test = true;
} else {
    test = false;
}

// 簡(jiǎn)潔
let test = x > 10;
let text = x > 10 ? true : false
  • 多條件判斷同一執(zhí)行方法
if(status === 0 || status === 1 || status === 2 || status === 3) {
    console.log('按鈕可以點(diǎn)擊');
}
// =>

if([0, 1, 2, 3].includes(status)) {
    console.log('按鈕可以點(diǎn)擊');
}
  • 多種可能對(duì)應(yīng)不同情況
// status 非數(shù)值或數(shù)值過(guò)大
const statusTextObject = {
    100: '已刪除',
    101: '未開始',
    102: '上課中',
    103: '已下課',
    104: '已評(píng)估'
}
text = statusTextObject[status] || '--';

// 非數(shù)值我們將對(duì)象的 key 替換為對(duì)應(yīng)status的值即可宝恶。

3. Null, Undefined, 空值檢查

// 冗余
if (first !== null || first !== undefined || first !== '') {
    let second = first;
}

// 簡(jiǎn)潔
let second = first || '';

4. 函數(shù)條件調(diào)用

// 冗余
function test1() {
  console.log('test1');
};
function test2() {
  console.log('test2');
};
var test3 = 1;
if (test3 == 1) {
  test1();
} else {
  test2();
}

// 簡(jiǎn)單
(test3 === 1? test1:test2)();

5. switch多條件

// 冗余
switch (data) {
  case 1:
    test1();
  break;

  case 2:
    test2();
  break;

  case 3:
    test();
  break;
  // so on...
}

// 簡(jiǎn)潔
var data = {
  1: test1,
  2: test2,
  3: test
};

data[anything] && data[anything]();

6. 隱式返回

// 冗余
function getArea(diameter) {
  return Math.PI * diameter
}

// 簡(jiǎn)潔
getArea = diameter => (
  Math.PI * diameter;
)

7. 普通數(shù)組去重&對(duì)象數(shù)組去重

const uniqueArr = (arr) => [...new Set(arr)];

console.log(uniqueArr([1, 2, 3, 1, 2, 3, 4, 5]));
// [1, 2, 3, 4, 5]


const uniqueElementsBy = (arr, fn) =>arr
.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []);
 
uniqueElementsBy([{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}, 
{id: 1, name: 'Jhon'}], (a, b) => a.id == b.id)
// [{id: 1, name: 'Jhon'}, {id: 2, name: 'sss'}]

8. 從數(shù)組中取出相對(duì)應(yīng)屬性的值

const reducedFilter = (data, keys, fn) =>data.filter(fn)
.map(el =>keys.reduce((acc, key) => {acc[key] =el[key];return acc;}, {}));
const data = [
  {
    id: 1,
    name: 'john',
    age: 24
  },
  {
    id: 2,
    name: 'mike',
    age: 50
  }
];
 
let a = reducedFilter(data, ['id', 'name'], item => item.age > 24); // [{ id: 2, name: 'mike'}]

9.關(guān)于 return cur.push(v*2),cur之謎

let arr=[1,2,3,4]
const b=arr.reduce((cur,v)=> [...cur,v*2],[])
const b1=arr.reduce((cur,v)=> {
    //直接 return cur.push(v*2)報(bào)錯(cuò)是因?yàn)?push返回的不是數(shù)組,是push之后的長(zhǎng)度
    return cur.push(v*2),cur
},[])
const b2=arr.reduce((res, cur)=> { 
    res.push(cur * 2); 
    return res; 
}, [])
// [2,4,6,8]
  • return cur.push(v*2),cur等同于return cur
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末疟暖,一起剝皮案震驚了整個(gè)濱河市紊搪,隨后出現(xiàn)的幾起案子蜜葱,更是在濱河造成了極大的恐慌,老刑警劉巖耀石,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件牵囤,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡滞伟,警方通過(guò)查閱死者的電腦和手機(jī)揭鳞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)梆奈,“玉大人野崇,你說(shuō)我怎么就攤上這事∧吨樱” “怎么了乓梨?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵鳖轰,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我扶镀,道長(zhǎng)蕴侣,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任狈惫,我火速辦了婚禮睛蛛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘胧谈。我一直安慰自己忆肾,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布菱肖。 她就那樣靜靜地躺著客冈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪稳强。 梳的紋絲不亂的頭發(fā)上场仲,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音退疫,去河邊找鬼渠缕。 笑死,一個(gè)胖子當(dāng)著我的面吹牛褒繁,可吹牛的內(nèi)容都是我干的亦鳞。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼棒坏,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼燕差!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起坝冕,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤徒探,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后喂窟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體测暗,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年磨澡,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了碗啄。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡钱贯,死狀恐怖挫掏,靈堂內(nèi)的尸體忽然破棺而出侦另,到底是詐尸還是另有隱情秩命,我是刑警寧澤尉共,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站弃锐,受9級(jí)特大地震影響袄友,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜霹菊,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一剧蚣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧旋廷,春花似錦鸠按、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至扎运,卻和暖如春瑟曲,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背豪治。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工洞拨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人负拟。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓烦衣,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親齿椅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子琉挖,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容