關(guān)于一些代碼的優(yōu)化寫法

看到一篇文章牺蹄,很是受用忘伞,稍作總結(jié)。

一、取值

ES5例子:

const obj = { 'name':'小明', 'age':25,'subject':'英語'}
const name = obj.name;
const age = obj.age;
const subject = obj.subject;

解決方案 :ES6的解構(gòu)氓奈,寫法如下

const {name, age, subject} = obj;

也可以重新命名

const {name:new_name, age:new_age, subject} = obj;

要注意解構(gòu)的對象不能為undefined翘魄、null。所以一般要給解構(gòu)的對象一個(gè)默認(rèn)值舀奶。

const {name, age, subject} = obj || {};

二暑竟、合并對象

ES5例子

// 數(shù)組合并
const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b); // [1,2,3,1,5,6]
// 對象合并
const obj1 = { a: 1 }
const obj1 = { b: 1 }
const obj = Object.assgin({}, obj1, obj2); // {a:1,b:1}

ES6的改進(jìn),利用new Set實(shí)現(xiàn)數(shù)組的去重合并

// new Set()合并去重
const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])]; // [1,2,3,5,6]
// ...實(shí)現(xiàn)對象解構(gòu)合并
const obj1 = { a:1 }
const obj2 = { b:1}
const obj = {...obj1,...obj2}; // {a:1,b:1}

三育勺、字符串拼接

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考試成績及格`; 
}else{
  result = `${name}的考試成績不及格`; 
}

這種寫法看著就很冗余啰嗦但荤,正確高效的使用字符串模板

const name = '小明';
const score = 59;
const result = `${name}的考試成績${score > 60?'及格':'不及格'}`;

四、關(guān)于if

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

這可真是硬傷涧至,用ES6的includes吧

const arr = [1,2,3,4];
if( arr.includes(type) ){
   //...
}

五腹躁、扁平化處理

ES5寫法:

const deps = {
'采購部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'運(yùn)輸部':[3,64,105],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]

看著就不想去解讀的代碼,何不用ES6的Object.values和flat呢化借?一下子十幾行的代碼就用幾行就解決了潜慎,看著清清爽爽捡多,也更便于別人去看你的代碼

const deps = {
    '采購部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '運(yùn)輸部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);

六蓖康、獲取對象屬性值

let obj = {};
let index = 1;
let key = `topic${index}`;
obj[key] = '話題內(nèi)容';

改進(jìn)

let obj = {};
let index = 1;
obj[`topic${index}`] = '話題內(nèi)容';

七、關(guān)于非空的判斷

我們在處理業(yè)務(wù)代碼時(shí)經(jīng)常會(huì)需要作判空處理

if(value !== null && value !== undefined && value !== ''){
    //...
}

ES6中新出的空值合并運(yùn)算符是不是會(huì)更簡潔

if(value??'' !== ''){
  //...
}

八垒手、關(guān)于異步函數(shù)

const fn1 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 300);
  });
}
const fn2 = () =>{
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2);
    }, 600);
  });
}
const fn = () =>{
   fn1().then(res1 =>{
      console.log(res1);// 1
      fn2().then(res2 =>{
        console.log(res2)
      })
   })
}

照這么寫下去可真是人間地獄蒜焊,回調(diào)再回調(diào),還好有ES6

const fn = async () =>{
  const res1 = await fn1();
  const res2 = await fn2();
  console.log(res1);// 1
  console.log(res2);// 2
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末科贬,一起剝皮案震驚了整個(gè)濱河市泳梆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌榜掌,老刑警劉巖优妙,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異憎账,居然都是意外死亡套硼,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進(jìn)店門胞皱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來邪意,“玉大人,你說我怎么就攤上這事反砌∥砉恚” “怎么了?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵宴树,是天一觀的道長策菜。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么做入? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任冒晰,我火速辦了婚禮,結(jié)果婚禮上竟块,老公的妹妹穿的比我還像新娘壶运。我一直安慰自己,他們只是感情好浪秘,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布蒋情。 她就那樣靜靜地躺著,像睡著了一般耸携。 火紅的嫁衣襯著肌膚如雪棵癣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天夺衍,我揣著相機(jī)與錄音狈谊,去河邊找鬼。 笑死沟沙,一個(gè)胖子當(dāng)著我的面吹牛河劝,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播矛紫,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼赎瞎,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了颊咬?” 一聲冷哼從身側(cè)響起务甥,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎喳篇,沒想到半個(gè)月后敞临,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡麸澜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年挺尿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片痰憎。...
    茶點(diǎn)故事閱讀 38,566評論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡票髓,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出铣耘,到底是詐尸還是另有隱情洽沟,我是刑警寧澤,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布蜗细,位于F島的核電站裆操,受9級特大地震影響怒详,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜踪区,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一昆烁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧缎岗,春花似錦静尼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至眷细,卻和暖如春拦盹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背溪椎。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工普舆, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人校读。 一個(gè)月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓沼侣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親地熄。 傳聞我的和親對象是個(gè)殘疾皇子华临,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評論 2 348

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