JS的數(shù)據(jù)優(yōu)化處理

大家其實(shí)對(duì)es6語(yǔ)法瓶埋,類(lèi)似于let,cont肯定不陌生。所以就不介紹這些啦诊沪。
我列幾個(gè)我個(gè)人覺(jué)得挺實(shí)用的幾個(gè)對(duì)于數(shù)據(jù)處理的語(yǔ)法:
正文


前置:先給大家簡(jiǎn)單的說(shuō)幾句养筒,對(duì)象和數(shù)組的區(qū)別(可以略過(guò),知道的朋友)
數(shù)組:長(zhǎng)這樣[1,2,3,4 ] 端姚。 有l(wèi)ength/可以用forEach便利/沒(méi)有key
對(duì)象:長(zhǎng)這樣{name:'mika',age:18}晕粪。沒(méi)有l(wèi)ength,便利需要用for...in.. /其中name渐裸,age就是key巫湘。


一個(gè)最基礎(chǔ)的:請(qǐng)大家,簡(jiǎn)單語(yǔ)句橄仆,善用三元表達(dá)式剩膘!
條件表達(dá)式?表達(dá)式1:表達(dá)式2

      let isTrue = true
      let number
      //普通寫(xiě)法:多條if
      if (isTrue) {
        number = 333
      } else number = 222
      //  三元表達(dá)式:條件表達(dá)式?表達(dá)式1(為true):表達(dá)式2(為false)
      number = isTrue ? 333 : 222

...】 運(yùn)算符
合并數(shù)組、對(duì)象

      let array = [1, 2, 3]
      let Num = [4, 5, 6]
      let newArray = [...array, ...Num]
      console.log(newArray)
      //輸出:[1,2,3,4,5,6]
   (對(duì)象用法相同)

簡(jiǎn)單用法了解后盆顾,進(jìn)階一下怠褐,利用new set特性,進(jìn)行數(shù)組去重

      let array = [1, 2, 3]
      let Num = [1, 2, 3, 4, 5, 6]
      // let newArray = [...array, ...Num]
      const setArray = [...new Set([...array, ...Num])]//[1,2,3,5,6]
      console.log(setArray)
      //輸出:[1,2,3,4,5,6]

有了去重您宪,肯定也要有求差集的方法奈懒。
filter
filter() 方法創(chuàng)建一個(gè)新的數(shù)組,新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素宪巨。
includes
用法:判斷一個(gè)數(shù)組中是否包含某一個(gè)元素磷杏,并返回true 或者false。最基本的用法:
[1, 2, 3, 4, 5, 6].includes(2) //輸出true

      let array = [1, 2, 3]
      let Num = [1, 2, 3, 4, 5, 6]
      const setArray = array.filter(x => Num.includes(x))
      console.log(setArray)
      //輸出:[1,2,3]
      數(shù)組求差集

對(duì)比includes來(lái)說(shuō)捏卓,是每個(gè)條件都會(huì)便利一遍极祸,不管true或者false。可以用 &&運(yùn)算符理解一下
如果說(shuō)在一些判斷語(yǔ)句中遥金,想要一個(gè)為false就均為false浴捆,則推薦用find 。類(lèi)似于 || 運(yùn)算符
find()方法用于查找數(shù)組中符合條件的第一個(gè)元素


{ } 】對(duì)象解構(gòu)
很多場(chǎng)景是get到數(shù)據(jù)后稿械,需要得到里面的值选泻。

    let obj = { a: 1, b: 2, c: 3 }
      const a = obj.a
      const b = obj.b
      const c = obj.c
      //優(yōu)化
      const {a,b,c}=obj
      如果,名字是較為復(fù)雜的美莫,則可以這樣
      let obj = { a1: 1, b2: 2, c: 3 }
      const { a1: a, b2: b, c } = obj
      console.log(a,b,c)
      //1,2,3
    ----
     對(duì)象解構(gòu)
     // bad
    setForm (person) {
    this.name = person.name
    this.age = person.age    }

    // good
   setForm ({name, age}) {
    this.name = name
    this.age = age  }

?. 】可選鏈運(yùn)算符
渲染數(shù)據(jù)時(shí)有時(shí)候數(shù)據(jù)不穩(wěn)定页眯,會(huì)很擔(dān)心數(shù)據(jù)是否存在的問(wèn)題,所以渲染數(shù)據(jù)的時(shí)候會(huì)進(jìn)行一些判斷厢呵。比如tableData&&tableData.age 有時(shí)候就會(huì)覺(jué)得很麻煩窝撵,如果遇到單詞長(zhǎng)就更煩惱了。
使用?.運(yùn)算符可以簡(jiǎn)化一成tableData?.age述吸。意思是:tableData是否存在忿族,如果存在則取tableData.age,如果不存在就返回undefined
拓展一下蝌矛。?.可選鏈運(yùn)算符可以和??空值運(yùn)算符設(shè)置默認(rèn)值

let customer = {
  name: "Carl",
  details: { age: 82 }
};
let customerCity = customer?.city ?? "暗之城";
console.log(customerCity); // “暗之城”

??空值運(yùn)算符|| 邏輯或運(yùn)算符區(qū)別:道批、
?? :返回值為null或者undefined時(shí)候 返回左側(cè)操作數(shù)。
|| :返回值不只是null入撒、undefined的時(shí)候隆豹,任何假值(null、undefined茅逮、0璃赡、false、''献雅、NaN)都會(huì)為左側(cè)數(shù)碉考。如果你設(shè)置默認(rèn)值的時(shí)候,參數(shù)剛好是是以上的假值挺身,則很容易出錯(cuò)侯谁!


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市章钾,隨后出現(xiàn)的幾起案子墙贱,更是在濱河造成了極大的恐慌,老刑警劉巖贱傀,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件惨撇,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡府寒,警方通過(guò)查閱死者的電腦和手機(jī)魁衙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)报腔,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人纺棺,你說(shuō)我怎么就攤上這事榄笙⌒澳” “怎么了祷蝌?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)帆卓。 經(jīng)常有香客問(wèn)我巨朦,道長(zhǎng),這世上最難降的妖魔是什么剑令? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任糊啡,我火速辦了婚禮,結(jié)果婚禮上吁津,老公的妹妹穿的比我還像新娘棚蓄。我一直安慰自己,他們只是感情好碍脏,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布梭依。 她就那樣靜靜地躺著,像睡著了一般典尾。 火紅的嫁衣襯著肌膚如雪役拴。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,441評(píng)論 1 310
  • 那天钾埂,我揣著相機(jī)與錄音河闰,去河邊找鬼。 笑死褥紫,一個(gè)胖子當(dāng)著我的面吹牛姜性,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播髓考,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼部念,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了绳军?” 一聲冷哼從身側(cè)響起印机,我...
    開(kāi)封第一講書(shū)人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎门驾,沒(méi)想到半個(gè)月后射赛,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡奶是,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年楣责,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了竣灌。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡秆麸,死狀恐怖初嘹,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情沮趣,我是刑警寧澤屯烦,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站房铭,受9級(jí)特大地震影響驻龟,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜缸匪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一翁狐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧凌蔬,春花似錦露懒、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至计贰,卻和暖如春钦睡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背躁倒。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工荞怒, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人秧秉。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓褐桌,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親象迎。 傳聞我的和親對(duì)象是個(gè)殘疾皇子荧嵌,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

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