JavaScript實(shí)用代碼小技巧

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

JSON.stringify

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

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

首先來看語(yǔ)法：

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

參數(shù)：

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

使用函數(shù)過濾并序列化對(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ù)組過濾并序列化對(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)行序列化。

見下面的例子：

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

用 Set 來實(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è)比較常見的前端面試題了，方法有很多種，這里不多贅述。下面我們看看用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í)作用域避免命名沖突

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

比如，在使用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í)，我們可以通過這個(gè)特性來做函數(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)賦值過濾對(duì)象屬性

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

比如，下面這段示例：

// 我們想過濾掉對(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è)。比如下面這段代碼：

// 通過解構(gòu)賦值獲取嵌套對(duì)象的值
const car = {
 model: 'bmw 2018',
 engine: {
 v6: true,
 turbo: true,
 vin: 12345
 }
};
// 這里使用 ES6 中的簡(jiǎn)單寫法，使用 { 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)算符，可以用來解構(gòu)數(shù)組，也可以用來解構(gòu)對(duì)象，它可以將對(duì)象中的所有屬性展開。

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

// 使用拓展運(yùn)算符合并對(duì)象，在后面的屬性會(huì)重寫前面相同屬性的值
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ì)出問題，比如：

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ì)比：

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com