在上次的 “Chrome DevTools 你可能不知道的小技巧” 文中，得到很多開(kāi)發(fā)朋友的反饋確實(shí)不知道這些小技巧。今天，我們來(lái)聊一聊在 EcmaScript5/6+ 中的一些小技巧，歡迎評(píng)論區(qū)討論下更多技巧。

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為當(dāng)涂等服務(wù)建站，當(dāng)涂等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為當(dāng)涂企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

JSON.stringify

我們平時(shí)經(jīng)常會(huì)用到JSON 對(duì)象，比如當(dāng)我們要實(shí)現(xiàn)對(duì)象的深拷貝時(shí)，我們可以用JSON 對(duì)象的JSON.stringify和JSON.parse 來(lái)拷貝一個(gè)完全一樣的對(duì)象，而不會(huì)對(duì)原對(duì)象產(chǎn)生任何引用關(guān)系。在使用localStorage 時(shí)，也會(huì)用到它，因?yàn)閘ocalStorage 只能存儲(chǔ)字符串格式的內(nèi)容，所以，我們?cè)诖嬷?，將?shù)值轉(zhuǎn)換成JSON字符串，取出來(lái)用的時(shí)候，再轉(zhuǎn)成對(duì)象或數(shù)組。

對(duì)于JSON.stringify 方法，它可以幫我們把一個(gè)對(duì)象或數(shù)組轉(zhuǎn)換成一個(gè)JSON字符串。我們通常只會(huì)用到它的第一個(gè)參數(shù)，其實(shí)它還有另外兩個(gè)參數(shù)，可以讓它實(shí)現(xiàn)一些非常好用的功能。

首先來(lái)看語(yǔ)法：

JSON.stringify(value[, replacer [, space]])

參數(shù)：

• value：將要被序列化的變量的值
• replacer：替代器?？梢允呛瘮?shù)或者是數(shù)組，如果是一個(gè)函數(shù)，則value 每個(gè)屬性都要經(jīng)過(guò)這個(gè)函數(shù)的處理，該函數(shù)的返回值就是最后被序列化后的值。如果是一個(gè)數(shù)組，則要求該數(shù)組的元素是字符串，且這些元素會(huì)被當(dāng)做value 的鍵（key）進(jìn)行匹配，最后序列化的結(jié)果，是只包含該數(shù)組每個(gè)元素為key 的值。
• space：指定輸出數(shù)值的代碼縮進(jìn)，美化格式之用，可以是數(shù)字或者字符串。如果是數(shù)字（最大為10）的話，代表每行代碼的縮進(jìn)是多少個(gè)空格。如果是字符串的話，該字符串（最多前十個(gè)字符）將作顯示在每行代碼之前。

這時(shí)候，你應(yīng)該知道了。我們可以用JSON.stringify 來(lái)做序列化時(shí)的過(guò)濾，相當(dāng)于我們可以自定義JSON.stringify 的解析邏輯。

使用函數(shù)過(guò)濾并序列化對(duì)象：

// 使用“函數(shù)”當(dāng)替代器
function replacer(key, value) {
 if (typeof value === "string") {
 return undefined;
 }
 return value;
}
var foo = {
 foundation: "Mozilla", 
 model: "box", 
 week: 45, 
 transport: "car", 
 month: 7
};
var jsonString = JSON.stringify(foo, replacer);
// {"week":45,"month":7}

使用數(shù)組過(guò)濾并序列化對(duì)象：

// 使用“數(shù)組”當(dāng)替代器
const user = {
 name: 'zollero',
 nick: 'z',
 skills: ['JavaScript', 'CSS', 'HTML5']
};
JSON.stringify(user, ['name', 'skills'], 2);
// "{
// "name": "zollero",
// "skills": [
//  "JavaScript",
//  "CSS",
//  "HTML5"
// ]
// }"

還有一個(gè)有意思的東西，是對(duì)象的toJSON 屬性。

如果一個(gè)對(duì)象有toJSON 屬性，當(dāng)它被序列化的時(shí)候，不會(huì)對(duì)該對(duì)象進(jìn)行序列化，而是將它的toJSON 方法的返回值進(jìn)行序列化。

見(jiàn)下面的例子：

var obj = {
 foo: 'foo',
 toJSON: function () {
 return 'bar';
 }
};
JSON.stringify(obj);  // '"bar"'
JSON.stringify({x: obj}); // '{"x":"bar"}'

用 Set 來(lái)實(shí)現(xiàn)數(shù)組去重

在ES6 中，引入了一個(gè)新的數(shù)據(jù)結(jié)構(gòu)類型：Set。而Set 與Array 的結(jié)構(gòu)是很類似的，且Set 和Array 可以相互進(jìn)行轉(zhuǎn)換。

數(shù)組去重，也算是一個(gè)比較常見(jiàn)的前端面試題了，方法有很多種，這里不多贅述。下面我們看看用Set 和...（拓展運(yùn)算符）可以很簡(jiǎn)單的進(jìn)行數(shù)組去重。

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

用塊級(jí)作用域避免命名沖突

在開(kāi)發(fā)的過(guò)程中，通常會(huì)遇到命名沖突的問(wèn)題，就是需要根據(jù)場(chǎng)景不同來(lái)定義不同的值來(lái)賦值給同一個(gè)變量。下面介紹一個(gè)使用ES6 中的塊級(jí)作用域 來(lái)解決這個(gè)問(wèn)題的方法。

比如，在使用switchcase 時(shí)，我們可以這樣做：

switch (record.type) {
 case 'added': {
 const li = document.createElement('li');
 li.textContent = record.name;
 li.id = record.id;
 fragment.appendChild(li);
 break;
 }
 case 'modified': {
 const li = document.getElementById(record.id);
 li.textContent = record.name;
 break;
 }
}

函數(shù)參數(shù)值校驗(yàn)

我們知道，在ES6 中，為函數(shù)增加了參數(shù)默認(rèn)值的特性，可以為參數(shù)設(shè)定一些默認(rèn)值，可以讓代碼更簡(jiǎn)潔，可維護(hù)。

其實(shí)，我們可以通過(guò)這個(gè)特性來(lái)做函數(shù)參數(shù)值的校驗(yàn)。

首先，函數(shù)的參數(shù)可以是任意類型的值，也可以是函數(shù)，比如下面這個(gè)：

function fix(a = getA()) {
 console.log('a', a)
}
function getA() {
 console.log('get a')
 return 2
}
fix(1);
// a 1
fix();
// get a
// a 2

可以看出，如果在調(diào)用fix 時(shí)傳了參數(shù)a ，則不會(huì)執(zhí)行函數(shù)getA，只有當(dāng)不傳遞參數(shù)a 時(shí)，才會(huì)執(zhí)行函數(shù)getA。

這時(shí)候，我們可以利用這一特性，為參數(shù)a 添加一個(gè)必傳的校驗(yàn)，代碼如下：

function fix(a = require()) {
 console.log('a', a)
}
function require() {
 throw new Error('缺少了參數(shù) a')
}
fix(1);
// a 1
fix();
// Uncaught Error: 缺少了參數(shù) a

用解構(gòu)賦值過(guò)濾對(duì)象屬性

在前面我們介紹了使用JSON.stringify 來(lái)過(guò)濾對(duì)象的屬性的方法。這里，我們介紹另外一種使用ES6 中的解構(gòu)賦值 和拓展運(yùn)算符 的特性來(lái)過(guò)濾屬性的方法。

比如，下面這段示例：

// 我們想過(guò)濾掉對(duì)象 types 中的 inner 和 outer 屬性
const { inner, outer, ...restProps } = {
 inner: 'This is inner',
 outer: 'This is outer',
 v1: '1',
 v2: '2',
 v4: '3'
};
console.log(restProps);
// {v1: "1", v2: "2", v4: "3"}

用解構(gòu)賦值獲取嵌套對(duì)象的屬性

解構(gòu)賦值 的特性很強(qiáng)大，它可以幫我們從一堆嵌套很深的對(duì)象屬性中，很方便地拿到我們想要的那一個(gè)。比如下面這段代碼：

// 通過(guò)解構(gòu)賦值獲取嵌套對(duì)象的值
const car = {
 model: 'bmw 2018',
 engine: {
  v6: true,
  turbo: true,
  vin: 12345
 }
};
// 這里使用 ES6 中的簡(jiǎn)單寫(xiě)法，使用 { vin } 替代 { vin: vin }
const modalAndVIN = ({ model, engine: { vin }}) => {
 console.log(`model: ${model}, vin: ${vin}`);
}
modalAndVIN(car);
// "model: bmw 2018, vin: 12345"

合并對(duì)象

ES6 中新增的拓展運(yùn)算符，可以用來(lái)解構(gòu)數(shù)組，也可以用來(lái)解構(gòu)對(duì)象，它可以將對(duì)象中的所有屬性展開(kāi)。

通過(guò)這個(gè)特性，我們可以做一些對(duì)象合并的操作，如下：

// 使用拓展運(yùn)算符合并對(duì)象，在后面的屬性會(huì)重寫(xiě)前面相同屬性的值
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { c: 5, d: 9 };
const merged = { ...obj1, ...obj2 };
console.log(merged);
// {a: 1, b: 2, c: 5, d: 9}
const obj3 = { a: 1, b: 2 };
const obj4 = { c: 3, d: { e: 4, ...obj3 } };
console.log(obj4);
// {c: 3, d: {a: 1, b: 2, e: 4} }

使用 === 代替 ==

在JavaScript 中，=== 和== 是有很大的不同的，== 會(huì)將兩邊的變量進(jìn)行轉(zhuǎn)義，然后將轉(zhuǎn)義后的值進(jìn)行比較，而=== 是嚴(yán)格比較，要求兩邊的變量不僅值要相同，它們自身的類型也要相同。

JavaScript 經(jīng)常被調(diào)侃成一個(gè)神奇的語(yǔ)言，就是因?yàn)樗霓D(zhuǎn)義的特性，而用== 可能會(huì)引入一些深埋的bug。遠(yuǎn)離 bug，還是要用===：

[10] == 10  // true
[10] === 10  // false
'10' == 10  // true
'10' === 10  // false
 [] == 0  // true
 [] === 0  // false
 '' == false // true
 '' === false // false

當(dāng)然，在用=== 時(shí)，也會(huì)出問(wèn)題，比如：

NaN === NaN // false

ES6 中提供了一個(gè)新的方法：Object.is()，它具有=== 的一些特點(diǎn)，而且更好、更準(zhǔn)確，在一些特殊場(chǎng)景下變現(xiàn)的更好：

Object.is(0 , ' ');   //false
Object.is(null, undefined); //false
Object.is([1], true);  //false
Object.is(NaN, NaN);  //true

下圖，是關(guān)于==、=== 和Object.is 的對(duì)比：