JavaScript基礎(chǔ)之運(yùn)算符與表達(dá)式詳解
一、===
嚴(yán)格相等運(yùn)算符,用作邏輯判斷
1 == 1 // 返回 true 1 == '1' // 返回 true,會(huì)先將右側(cè)的字符串轉(zhuǎn)為數(shù)字,再做比較 1 === '1' // 返回 false,類型不等,直接返回 false
typeof查看某個(gè)值的類型
typeof 1 // 返回 'number' typeof '1' // 返回 'string'
二、||
需求,如果參數(shù)n沒有錯(cuò)傳遞,給它一個(gè)【男】
推薦做法:
function test(n = '男') { console.log(n); }
你可能的做法:
function test(n) { if(n === undefined) { n = '男'; } console.log(n); }
還可能是這樣:
function test(n) { n = (n === undefined) ? '男' : n; console.log(n); }
一些老舊代碼中的可能做法(不推薦):
function test(n) { n = n || '男'; console.log(n); }
它的語法是:
值1 || 值2
如果值1 是 Truthy,返回值1,如果值1 是 Falsy 返回值 2
三、??與?.
??
需求,如果參數(shù)n沒有傳遞或是null,給它一個(gè)【男】
如果用傳統(tǒng)辦法:
function test(n) { if(n === undefined || n === null) { n = '男'; } console.log(n); }
用??
function test(n) { n = n ?? '男'; console.log(n); }
語法:
值1 ?? 值2
- 值1 是 nullish,返回值2
- 值1 不是 nullish,返回值1
?.
需求,函數(shù)參數(shù)是一個(gè)對象,可能包含有子屬性
例如,參數(shù)可能是:
let stu1 = { name:"張三", address: { city: '北京' } }; let stu2 = { name:"李四" } let stu3 = { name:"李四", address: null }
現(xiàn)在要訪問子屬性(有問題)
function test(stu) { console.log(stu.address.city) }
現(xiàn)在希望當(dāng)某個(gè)屬性是 nullish 時(shí),短路并返回 undefined,可以用 ?.
function test(stu) { console.log(stu.address?.city) }
用傳統(tǒng)方法:
function test(stu) { if(stu.address === undefined || stu.address === null) { console.log(undefined); return; } console.log(stu.address.city) }
四、...
展開運(yùn)算符
作用1:打散數(shù)組,把元素傳遞給多個(gè)參數(shù)
let arr = [1,2,3]; function test(a,b,c) { console.log(a,b,c); }
需求:把數(shù)組元素依次傳遞給函數(shù)參數(shù)
傳統(tǒng)寫法:
test(arr[0],arr[1],arr[2]); // 輸出 1,2,3
展開運(yùn)算符寫法:
test(...arr); // 輸出 1,2,3
打散可以理解為【去掉了】數(shù)組外側(cè)的中括號(hào),只剩下數(shù)組元素
作用2:復(fù)制數(shù)組或?qū)ο?/strong>
數(shù)組:
let arr1 = [1,2,3]; let arr2 = [...arr1]; // 復(fù)制數(shù)組
對象:
let obj1 = {name:'張三', age: 18}; let obj2 = {...obj1}; // 復(fù)制對象
注意:展開運(yùn)算符復(fù)制屬于淺拷貝,例如:
let o1 = {name:'張三', address: {city: '北京'} } let o2 = {...o1};
作用3:合并數(shù)組或?qū)ο?/strong>
合并數(shù)組:
let a1 = [1,2]; let a2 = [3,4]; let b1 = [...a1,...a2]; // 結(jié)果 [1,2,3,4] let b2 = [...a2,5,...a1] // 結(jié)果 [3,4,5,1,2]
合并對象:
let o1 = {name:'張三'}; let o2 = {age:18}; let o3 = {name:'李四'}; let n1 = {...o1, ...o2}; // 結(jié)果 {name:'張三',age:18} let n2 = {...o3, ...o2, ...o1}; // 結(jié)果{name:'李四',age:18}
復(fù)制對象時(shí)出現(xiàn)同名屬性,后面的會(huì)覆蓋前面的
五、[] {}
[]
解構(gòu)賦值
用在聲明變量時(shí):
let arr = [1,2,3]; let [a, b, c] = arr; // 結(jié)果 a=1, b=2, c=3
用在聲明參數(shù)時(shí):
let arr = [1,2,3]; function test([a,b,c]) { console.log(a,b,c) // 結(jié)果 a=1, b=2, c=3 } test(arr);
{}
用在聲明變量時(shí):
let obj = {name:"張三", age:18}; let {name,age} = obj; // 結(jié)果 name=張三, age=18
用在聲明參數(shù)時(shí):
let obj = {name:"張三", age:18}; function test({name, age}) { console.log(name, age); // 結(jié)果 name=張三, age=18 } test(obj)
以上就是JavaScript基礎(chǔ)之運(yùn)算符與表達(dá)式詳解的詳細(xì)內(nèi)容,更多關(guān)于JavaScript運(yùn)算符 表達(dá)式的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript實(shí)現(xiàn)一個(gè)輸入框組件
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)一個(gè)輸入框組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09iscroll.js的上拉下拉刷新時(shí)無法回彈的解決方法
本文給大家分享的是在IOS瀏覽器中使用iscroll.js的上拉下拉刷新時(shí)當(dāng)手指劃出屏幕后無法回彈的解決方法,希望對大家能夠有所幫助。2016-02-02JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06漫談JS引擎的運(yùn)行機(jī)制 你應(yīng)該知道什么
javascript 從定義到執(zhí)行,你應(yīng)該知道的那些事,本文為大家一一列舉,希望對大家的學(xué)習(xí)有所幫助2016-06-06javascript中mouseover、mouseout使用詳解
這篇文章主要介紹了javascript中mouseover、mouseout使用詳解的相關(guān)資料,需要的朋友可以參考下2015-07-07微信小程序?qū)崿F(xiàn)可長按移動(dòng)控件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)可長按移動(dòng)控件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10JS取request值以及自動(dòng)執(zhí)行使用示例
在網(wǎng)頁中JS函數(shù)自動(dòng)執(zhí)行常用三種方法,下面為大家詳細(xì)介紹下JS取request值以及自動(dòng)執(zhí)行使用,需要的朋友可以參考下2014-02-02