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);
}
它的語(yǔ)法是：
值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);
}
語(yǔ)法：
值1 ?? 值2
- 值1 是 nullish，返回值2
- 值1 不是 nullish，返回值1
?.
需求，函數(shù)參數(shù)是一個(gè)對(duì)象，可能包含有子屬性
例如，參數(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ù)組
對(duì)象：
let obj1 = {name:'張三', age: 18};
let obj2 = {...obj1}; // 復(fù)制對(duì)象
注意：展開運(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]
合并對(duì)象：
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ù)制對(duì)象時(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á)式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本篇文章主要是對(duì)js日期對(duì)象兼容性的處理方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
基于zepto.js簡(jiǎn)單實(shí)現(xiàn)上傳圖片
這篇文章主要介紹了基于zepto.js簡(jiǎn)單實(shí)現(xiàn)上傳圖片的相關(guān)資料,需要的朋友可以參考下2016-06-06
JS實(shí)現(xiàn)的相冊(cè)圖片左右滾動(dòng)完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的相冊(cè)圖片左右滾動(dòng)效果,結(jié)合完整實(shí)例形式分析了javascript事件觸發(fā)與頁(yè)面元素屬性動(dòng)態(tài)變換的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
詳解webpack之scss和postcss-loader的配置
本篇文章主要介紹了詳解webpack之scss和postcss-loader的配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
微信小程序判斷手機(jī)號(hào)是否合法的實(shí)例代碼
我們?cè)谖⑿判〕绦蜷_發(fā)的時(shí)候,手機(jī)號(hào)的驗(yàn)證是經(jīng)常需要操作的,那么如何驗(yàn)證手機(jī)號(hào)呢?這篇文章主要給大家介紹了關(guān)于微信小程序判斷手機(jī)號(hào)是否合法的相關(guān)資料,需要的朋友可以參考下2021-09-09
如何用JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表
如何用JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表？下面小編就為大家?guī)硪黄狫avaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表的方法。希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2016-05-05
這篇文章主要給大家介紹了關(guān)于js面試題之異步問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
.net MVC+Bootstrap下使用localResizeIMG上傳圖片
這篇文章主要為大家詳細(xì)介紹了.net MVC和Bootstrap下使用 localResizeIMG上傳圖片，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
原生JS實(shí)現(xiàn)動(dòng)態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法
這篇文章主要介紹了原生JS實(shí)現(xiàn)動(dòng)態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法,涉及javascript動(dòng)態(tài)創(chuàng)建頁(yè)面元素、事件監(jiān)聽、回調(diào)函數(shù)使用等相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript仿百度切換皮膚功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07