大家其實(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ò)侯谁!