JSON.stringify 我們平時經常會用到JSON 物件，比如當我們要實現物件的深拷貝時，我們可以用JSON 物件的JSON.stringify和JSON.parse 來拷貝一個完全一樣的物件，而不會對原物件產生任何引用關係。在使用localStorage 時，也會用到它，因為localStorage 只能儲存字串格式的內容，所以，我們在存之前，將數值轉換成JSON字串，取出來用的時候，再轉成物件或陣列。

對於JSON.stringify 方法，它可以幫我們把一個物件或陣列轉換成一個JSON字串。我們通常只會用到它的第一個引數，其實它還有另外兩個引數，可以讓它實現一些非常好用的功能。 首先來看語法：

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

引數：

• value：將要被序列化的變數的值
• replacer：替代器。可以是函式或者是陣列，如果是一個函式，則value 每個屬性都要經過這個函式的處理，該函式的返回值就是最後被序列化後的值。如果是一個數組，則要求該陣列的元素是字串，且這些元素會被當做value 的鍵（key）進行匹配，最後序列化的結果，是隻包含該陣列每個元素為key 的值。
• space：指定輸出數值的程式碼縮排，美化格式之用，可以是數字或者字串。如果是數字（最大為10）的話，代表每行程式碼的縮排是多少個空格。如果是字串的話，該字串（最多前十個字元）將作顯示在每行程式碼之前。

這時候，你應該知道了。我們可以用JSON.stringify 來做序列化時的過濾，相當於我們可以自定義JSON.stringify 的解析邏輯。 使用函式過濾並序列化物件：

// 使用“函式”當替代器
function replacer(key, value) {
 if (typeof value === "string") {
 return undefined;
 }//歡迎加入全棧開發交流圈一起學習交流：864305860
 return value;
}//歡迎加入全棧開發交流圈一起學習交流：864305860
var foo = {
 foundation: "Mozilla", 
 model: "box", 
 week: 45, 
 transport: "car", 
 month: 7//面向1-3年前端人員
};//幫助突破技術瓶頸，提升思維能力
var jsonString = JSON.stringify(foo, replacer);
// {"week":45,"month":7}
 

使用陣列過濾並序列化物件：

// 使用“陣列”當替代器
const user = {
 name: 'zollero',
 nick: 'z',
 skills: ['JavaScript', 'CSS', 'HTML5']
};
JSON.stringify(user, ['name', 'skills'], 2);
// "{//歡迎加入全棧開發交流圈一起學習交流：864305860
// "name": "zollero",
// "skills": [
//  "JavaScript",
//  "CSS",
//  "HTML5"
// ]//歡迎加入全棧開發交流圈一起學習交流：864305860
// }"

還有一個有意思的東西，是物件的toJSON 屬性。 如果一個物件有toJSON 屬性，當它被序列化的時候，不會對該物件進行序列化，而是將它的toJSON 方法的返回值進行序列化。 見下面的例子：

var obj = {
 foo: 'foo',
 toJSON: function () {
 return 'bar';
 }//歡迎加入全棧開發交流圈一起學習交流：864305860
};//幫助突破技術瓶頸，提升思維能力
JSON.stringify(obj);  // '"bar"'
JSON.stringify({x: obj}); // '{"x":"bar"}'

用 Set 來實現陣列去重 在ES6 中，引入了一個新的資料結構型別：Set。而Set 與Array 的結構是很類似的，且Set 和Array 可以相互進行轉換。 陣列去重，也算是一個比較常見的前端面試題了，方法有很多種，這裡不多贅述。下面我們看看用Set 和...（拓展運算子）可以很簡單的進行陣列去重。

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

用塊級作用域避免命名衝突 在開發的過程中，通常會遇到命名衝突的問題，就是需要根據場景不同來定義不同的值來賦值給同一個變數。下面介紹一個使用ES6 中的塊級作用域 來解決這個問題的方法。 比如，在使用switchcase 時，我們可以這樣做：

switch (record.type) {
 case 'added': {
 const li = document.createElement('li');
 li.textContent = record.name;
 li.id = record.id;
 fragment.appendChild(li);
 break;
 }//歡迎加入全棧開發交流圈一起學習交流：864305860
 case 'modified': {
 const li = document.getElementById(record.id);
 li.textContent = record.name;
 break;
 }
}//幫助突破技術瓶頸，提升思維能力

函式引數值校驗 我們知道，在ES6 中，為函式增加了引數預設值的特性，可以為引數設定一些預設值，可以讓程式碼更簡潔，可維護。 其實，我們可以通過這個特性來做函式引數值的校驗。 首先，函式的引數可以是任意型別的值，也可以是函式，比如下面這個：

function fix(a = getA()) {
 console.log('a', a)
}
function getA() {
 console.log('get a')
 return 2//歡迎加入全棧開發交流圈一起學習交流：864305860
}//面向1-3年前端人員
fix(1);//幫助突破技術瓶頸，提升思維能力
// a 1
fix();
// get a
// a 2

可以看出，如果在呼叫fix 時傳了引數a ，則不會執行函式getA，只有當不傳遞引數a 時，才會執行函式getA。 這時候，我們可以利用這一特性，為引數a 新增一個必傳的校驗，程式碼如下：

function fix(a = require()) {
 console.log('a', a)
}//歡迎加入全棧開發交流圈一起學習交流：864305860
function require() {
 throw new Error('缺少了引數 a')
}
fix(1);
// a 1
fix();
// Uncaught Error: 缺少了引數 a

用解構賦值過濾物件屬性 在前面我們介紹了使用JSON.stringify 來過濾物件的屬性的方法。這裡，我們介紹另外一種使用ES6 中的解構賦值 和拓展運算子 的特性來過濾屬性的方法。 比如，下面這段示例：

// 我們想過濾掉物件 types 中的 inner 和 outer 屬性
const { inner, outer, ...restProps } = {
 inner: 'This is inner',
 outer: 'This is outer',
 v1: '1',
 v2: '2',
 v4: '3'
};//歡迎加入全棧開發交流圈一起學習交流：864305860
console.log(restProps);
// {v1: "1", v2: "2", v4: "3"}

用解構賦值獲取巢狀物件的屬性 解構賦值 的特性很強大，它可以幫我們從一堆巢狀很深的物件屬性中，很方便地拿到我們想要的那一個。比如下面這段程式碼：

// 通過解構賦值獲取巢狀物件的值
const car = {
 model: 'bmw 2018',
 engine: {
  v6: true,
  turbo: true,
  vin: 12345
 }//歡迎加入全棧開發交流圈一起學習交流：864305860
};//幫助突破技術瓶頸，提升思維能力
// 這裡使用 ES6 中的簡單寫法，使用 { vin } 替代 { vin: vin }
const modalAndVIN = ({ model, engine: { vin }}) => {
 console.log(`model: ${model}, vin: ${vin}`);
}
modalAndVIN(car);
// "model: bmw 2018, vin: 12345"

合併物件 ES6 中新增的拓展運算子，可以用來解構陣列，也可以用來解構物件，它可以將物件中的所有屬性展開。 通過這個特性，我們可以做一些物件合併的操作，如下：

// 使用拓展運算符合並物件，在後面的屬性會重寫前面相同屬性的值
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} }
//歡迎加入全棧開發交流圈一起學習交流：864305860

使用 === 代替 == 在JavaScript 中，=== 和== 是有很大的不同的，== 會將兩邊的變數進行轉義，然後將轉義後的值進行比較，而=== 是嚴格比較，要求兩邊的變數不僅值要相同，它們自身的型別也要相同。 JavaScript 經常被調侃成一個神奇的語言，就是因為它的轉義的特性，而用== 可能會引入一些深埋的bug。遠離 bug，還是要用===：

[10] == 10  // true
[10] === 10  // false
'10' == 10  // true
'10' === 10  // false
 [] == 0  // true
 [] === 0  // false
 '' == false // true
 '' === false // false
//歡迎加入全棧開發交流圈一起學習交流：864305860

當然，在用=== 時，也會出問題，比如：

NaN === NaN // false

ES6 中提供了一個新的方法：Object.is()，它具有=== 的一些特點，而且更好、更準確，在一些特殊場景下變現的更好：

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

結語

感謝您的觀看，如有不足之處，歡迎批評指正。