善于利用JS中的小技巧，不僅可以使代碼更加簡(jiǎn)潔，而且逼格更高。
1.使用!!模擬Boolean()函數(shù)
原理：邏輯非操作一個(gè)數(shù)據(jù)對(duì)象時(shí)，會(huì)先將數(shù)據(jù)對(duì)象轉(zhuǎn)換為布爾值，然后取反，兩個(gè)!!重復(fù)取反，就實(shí)現(xiàn)了轉(zhuǎn)換為布爾值的效果。
2. 使用一元加(+)模擬Number()函數(shù)
原理：對(duì)非數(shù)值類型的數(shù)據(jù)使用一元加(+)，會(huì)起到與Number()函數(shù)相同的效果。
- null轉(zhuǎn)換為0
- undefined轉(zhuǎn)換為NaN
- false轉(zhuǎn)換為0，true轉(zhuǎn)換為1
- 對(duì)于字符串：
- 空字串轉(zhuǎn)換為0
- 含有數(shù)字或者浮點(diǎn)數(shù)或者十六進(jìn)制格式的數(shù)據(jù)(11, 0.3, 0xfe等)，轉(zhuǎn)換為相應(yīng)的數(shù)值
- 含有其他格式字符，無法轉(zhuǎn)換為數(shù)值的字符串，轉(zhuǎn)換為NaN
- 對(duì)于對(duì)象，先調(diào)用valueOf()方法，在轉(zhuǎn)換，若結(jié)果為NaN，那么再調(diào)用toString()方法，之后再轉(zhuǎn)換
3.使用邏輯與(&&)進(jìn)行短路操作
if(connected){
login();
}
以上代碼可以簡(jiǎn)寫為:
connected && login();
也可用這種方法來檢查對(duì)象中是否擁有某個(gè)屬性
user && user.name
原理：邏輯與(&&)會(huì)首先對(duì)第一個(gè)操作數(shù)進(jìn)行求值，只有求值結(jié)果為true時(shí)才會(huì)對(duì)第二個(gè)操作數(shù)求值。connected && login()中，若判斷connected不為true,則不再進(jìn)行下一步操作。
所謂的短路操作即第一個(gè)操作數(shù)可以決定結(jié)果，則不再對(duì)第二個(gè)操作數(shù)進(jìn)行求值。
4. 使用邏輯或(||)設(shè)置默認(rèn)值
邏輯或(||)也屬于短路操作，即當(dāng)?shù)谝粋€(gè)操作數(shù)可以決定結(jié)果時(shí)，不再對(duì)第二個(gè)操作數(shù)進(jìn)行求值。利用這個(gè)特點(diǎn)，我們可以給賦值語句設(shè)置默認(rèn)值。只有當(dāng)?shù)谝粋€(gè)操作數(shù)為null或者undefined時(shí)，才會(huì)把第二個(gè)操作數(shù)賦值給目標(biāo)。
function User(name, age){
this.name = name || "Liming";
}
上述代碼中，如果函數(shù)中沒有傳入name參數(shù)，name的值為undefined，那么就會(huì)給this.name賦值為"Liming"。
ES6中可以為函數(shù)設(shè)置默認(rèn)值，所以這種方法可能要成為過去式，但是其他地方還是很有用的。
ES6 寫法 簡(jiǎn)潔了許多
let User = (name="Liming", age) => { }
5. 獲取數(shù)組最后n個(gè)元素
可以使用以下代碼獲取數(shù)組中最后n個(gè)元素
var array = [1, 2, 3, 4, 5, 6];
console.log(array.slice(-1)); //[6]
console.log(array.slice(-2)); //[5, 6]
原理:Array.prototype.slice(begin,end)可以用來裁剪數(shù)組，第二個(gè)參數(shù)的默認(rèn)值是數(shù)組的長(zhǎng)度值。若值傳入一個(gè)參數(shù)，則會(huì)返回從指定索引開始到數(shù)組結(jié)尾的所有值。
而slice()方法還可以接收負(fù)值，當(dāng)傳入負(fù)值時(shí)，會(huì)自動(dòng)加上數(shù)組的長(zhǎng)度值使其轉(zhuǎn)換為正值，于是便得到了最后的n個(gè)值。
6. 合并大數(shù)組
常用的合并數(shù)組的方式是使用Array.concat()函數(shù)。該函數(shù)會(huì)創(chuàng)建一個(gè)新數(shù)組，將兩個(gè)數(shù)組連接起來存儲(chǔ)到新數(shù)組中，這會(huì)大量消耗內(nèi)存。可以使用Array.push.apply(arr1, arr2)，它不會(huì)創(chuàng)建新數(shù)組，而是將第二個(gè)數(shù)組合并到第一個(gè)數(shù)組中，以減少內(nèi)存的消耗。
var a = [1,2];
var b = [3,4];
console.log(a.push.apply(a, b)); // [1,2,3,4]
//或者
Array.prototype.push.apply(a, b); // a變成了[1,2,3,4]
console.log(a); //[1,2,3,4]
原理: Array.push()是在數(shù)組的末尾增加元素，但是如果使用a.push(b)會(huì)把整個(gè)數(shù)組b當(dāng)作一個(gè)元素添加到數(shù)組a中。
而apply()方法，則允許將某個(gè)方法的參數(shù)以數(shù)組的形式傳入，所以起到了將數(shù)組b中的元素追加到數(shù)組a中的效果。
7. NodeList轉(zhuǎn)換為數(shù)組
使用document.querySelectorAll('div')返回的是NodeList對(duì)象，雖然它很像數(shù)組，但是并不能使用諸如sort()，filter()等方法。你可以將其轉(zhuǎn)換為真正的數(shù)組。
var eles = document.querySelectorAll('p'); //NodeList
var arrayElements = [].slice.call(eles); //轉(zhuǎn)化為數(shù)組
// 或者
var arrayElements = Array.prototype.slice.call(eles);
// 或者
var arrayElements = Array.from(eles);
原理:
- [].slice.call(eles):
首先創(chuàng)建了一個(gè)空數(shù)組[]，然后調(diào)用他的slice()方法，但是在slice()方法的執(zhí)行中，把this對(duì)象指向了eles,所以會(huì)對(duì)eles進(jìn)行裁減，由于對(duì)slice()方法沒有傳入?yún)?shù)，所以相當(dāng)于slice(0,eles.length),會(huì)按照元長(zhǎng)度返回一個(gè)數(shù)組。 - Array.prototype.slice.call(eles): 原理與上面相似，只不過這次沒有創(chuàng)建空數(shù)組，而是直接使用了原型中的方法
