|
這篇文章收集了JavaScript中一些常見的和新穎的編碼技巧，并基于ES6增加了新的內(nèi)容；附有長短版本的比較，以便讀者更好地理解，所有的JavaScript開發(fā)者不防都看一下。 1、條件操作符使用條件操作符可以在一行代碼中完成 if…else 語句的功能。 const x = 20;let answer;if (x > 10) { answer = 'is greater';} else { answer = 'is lesser';}使用條件操作符： const answer = x > 10 ? 'is greater' : 'is lesser';2、短路驗(yàn)證1當(dāng)把一個(gè)變量的值賦給另一個(gè)變量時(shí)，有時(shí)需要驗(yàn)證這個(gè)變量是否為null、undefined或?yàn)榭?。?dāng)然你可以在if語句中添加多個(gè)條件完成驗(yàn)證，但不妨試試下面這個(gè)簡寫版本。 if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1;}使用短路運(yùn)算符： let variable2 = variable1 || ' ';如果有懷疑可在瀏覽器控制臺粘貼如下代碼進(jìn)行測試： let variable1;let variable2 = variable1 || '';console.log(variable2 === ''); // 打印 truevariable1 = 'foo';variable2 = variable1 || '';console.log(variable2); // 打印 foo3、變量聲明當(dāng)需要同時(shí)聲明多個(gè)變量時(shí)，使用簡寫的形式能夠節(jié)省不少的時(shí)間和空間，不僅JavaScript中如此，不少語言都支持類似的寫法。 let x;let y;let z = 3;簡寫形式： let x, y, z=3;（注：原文中的形式為 let x, y, z=3;我認(rèn)為是不妥的，當(dāng)變量較多時(shí)，會變得不易閱讀；采用上面的形式，容易閱讀，且方便對變量添加注釋。） 4、如果為真這算是非常常見的，但仍然提一下。 if (likeJavaScript === true)簡寫： if (likeJavaScript)如果非真： if (likeJavaScript !== true)簡寫： if ( !likeJavaScript )5、for循環(huán)簡寫在某些情況下，可以使用for-in語句簡化for循環(huán)。 for (let i = 0; i < allimgs.length;="">簡寫： for (let index in allImgs)數(shù)組的forEach()方法簡寫（適用于代碼重用的情況下）： function logArrayElements(element, index, array) { console.log('a[' + index + '] = ' + element);}[2, 5, 9].forEach(logArrayElements);// 控制臺輸出：// a[0] = 2// a[1] = 5// a[2] = 96、短路驗(yàn)證2下面的6行代碼實(shí)現(xiàn)當(dāng)預(yù)期參數(shù)為null或undefined時(shí)，賦給變量一個(gè)默認(rèn)值。如果我們使用短路邏輯操作符的話，只需要一行代碼即可。 let dbHost;if (process.env.DB_HOST) { dbHost = process.env.DB_HOST;} else { dbHost = 'localhost';}簡寫： const dbHost = process.env.DB_HOST || 'localhost';7、大數(shù)的指數(shù)形式縮寫for (let i = 0; i <>10000; i++) {}指數(shù)形式： for (let i = 0; i <>1e4; i++) {}//1e0 === 1;//1e1 === 10;//1e2 === 100;//1e3 === 1000;//1e4 === 10000;//1e5 === 100000;8、對象屬性簡寫ES6給對象字面量添加了幾個(gè)重要的便利拓展，其中一個(gè)就是簡約屬性。 let x = 2, y = 3;let obj = { x: x, y: y};如果 let x = 2, y = 3;let obj = { x, y};9、箭頭函數(shù)縮寫經(jīng)典函數(shù)的原始形式是容易書寫和閱讀的，但一旦將其嵌套在其他函數(shù)的調(diào)用中，就會顯得冗長而混亂。ES6中新的箭頭函數(shù)為我們提供了新的解決方案。（關(guān)于ES6的內(nèi)容建議讀者參看《你所不知道的JS：ES6及未來》：https://github.com/getify/You-Dont-Know-JS/blob/1ed-zh-CN/es6%20&%20beyond/ch2.md） function sayHello(name) { console.log('Hello', name);}setTimeout(function() { console.log('Loaded')}, 2000);list.forEach(function(item) { console.log(item);});使用箭頭函數(shù)： sayHello = name => console.log('Hello', name);setTimeout(() => console.log('Loaded'), 2000);list.forEach(item => console.log(item));10、隱式 returnreturn 是我們返回函數(shù)最終結(jié)果的常用關(guān)鍵詞，一個(gè)單語句的箭頭函數(shù)會隱式地返回結(jié)果（該函數(shù)必須省略大括號 {} 才能省略 return 關(guān)鍵詞）。 function calcCircumference(diameter) { return Math.PI * diameter}簡寫： calcCircumference = diameter => ( Math.PI * diameter;)11、參數(shù)默認(rèn)值你可以在函數(shù)體中使用 if 語句為參數(shù)指定默認(rèn)值，而在ES6中，你可以在函數(shù)聲明中定義參數(shù)默認(rèn)值。 function volume(l, w, h) { if (w === undefined) w = 3; if (h === undefined) h = 4; return l * w * h;}簡寫： volume = (l, w = 3, h = 4 ) => (l * w * h);volume(2) //output: 2412、模板字面量ES6提供了一種新的方式來將多個(gè)變量連接成字符串，而不再需要蠢蠢地使用 const welcome = 'You have logged in as ' + firstname + ' ' + lastname + '.';const db = 'http://' + host + ':' + port + '/' + database;簡寫： const welcome = `You have logged in as ${first} ${last}`;const db = `http://${host}:${port}/${database}`;13、解構(gòu)賦值簡寫如果你使用了某種流行的web框架，那么很有可能你會以對象字面量的形式在組件與API間傳遞信息。一旦數(shù)據(jù)對象到達(dá)組件，即需要解包。 const observable = require('mobx/observable');const action = require('mobx/action');const runInAction = require('mobx/runInAction');const store = this.props.store;const form = this.props.form;const loading = this.props.loading;const errors = this.props.errors;const entity = this.props.entity;簡寫： import { observable, action, runInAction } from 'mobx';const { store, form, loading, errors, entity } = this.props;也可以自定變量名： const { store, form, loading, errors, entity:contact } = this.props;14、多行字符串簡寫const lorem = 'the first line.\n\t' + 'the second line.\n\t' + 'the third line.\n\t';使用反引號簡寫： const lorem = `the first line. the secong line. the third line.`;15、使用拓展操作符簡寫ES6中引入的拓展操作符（…）有多種使用場景，使得JavaScript代碼更加高效易用。例如可用來替代特定的數(shù)組方法。 // 連接數(shù)組const odd = [1, 3, 5];const nums = [2 ,4 , 6].concat(odd);// 克隆數(shù)組const arr = [1, 2, 3, 4];const arr2 = arr.slice()簡寫： // 連接數(shù)組const odd = [1, 3, 5 ];const nums = [2 ,4 , 6, ...odd];console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]// 克隆數(shù)組const arr = [1, 2, 3, 4];const arr2 = [...arr];與 concat() 方法不同的是，使用拓展操作符可以在數(shù)組的任意位置插入另一個(gè)數(shù)組： const odd = [1, 3, 5 ];const nums = [2, ...odd, 4 , 6];也可將拓展運(yùn)算符與解構(gòu)符號組合使用： const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };console.log(a) // 1console.log(b) // 2console.log(z) // { c: 3, d: 4 }16、強(qiáng)制性參數(shù)說明在JavaScript中，未傳值的函數(shù)參數(shù)會被設(shè)置為 undefined ，而在其他語言中會直接拋出警告或錯誤。為了保證參數(shù)能夠被賦值，我們可以使用 if 語句拋出一個(gè)錯誤；或者我們也可以使用強(qiáng)制參數(shù)說明。 function foo(bar) { if(bar === undefined) { throw new Error('Missing parameter!'); } return bar;}簡寫： mandatory = () => { throw new Error('Missing parameter!');}foo = (bar = mandatory()) => { return bar;}17、Array.find在以前，我們通常會使用 for 循環(huán)來實(shí)現(xiàn)查找，而在ES6中，引入了一種新的數(shù)組方法 find()。 const pets = [ { type: 'Dog', name: 'Max'}, { type: 'Cat', name: 'Karl'}, { type: 'Dog', name: 'Tommy'},]function findDog(name) { for(let i = 0; i簡寫： pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');console.log(pet); // { type: 'Dog', name: 'Tommy' }18、Object[key]你知道 Foo.bar 可以寫成 Foo[‘bar’] 嗎？看起來似乎我們完全沒有理由這么寫，但這個(gè)符號可為編寫可重用代碼提供構(gòu)建塊。 考慮下面這個(gè)簡化的驗(yàn)證函數(shù)： function validate(values) { if(!values.first) return false; if(!values.last) return false; return true;}console.log(validate({first:'Bruce',last:'Wayne'})); // true這個(gè)函數(shù)完美地實(shí)現(xiàn)了所需功能，但是考慮下面的場景。如果現(xiàn)在有許多表單需要使用這樣的函數(shù)進(jìn)行驗(yàn)證，但卻有不同的字段。如果有一個(gè)通用的函數(shù)能夠在運(yùn)行時(shí)進(jìn)行配置豈不是非常好？ // object validation rulesconst schema = { first: { required:true }, last: { required:true }}// universal validation functionconst validate = (schema, values) => { for(field in schema) { if(schema[field].required) { if(!values[field]) { return false; } } } return true;}console.log(validate(schema, {first:'Bruce'})); // falseconsole.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true這樣我們就擁有了一個(gè)可在所有表單中重復(fù)使用的驗(yàn)證函數(shù)。 19、雙按位非可以使用雙按位非運(yùn)算符來代替 Math.floor()，其執(zhí)行速度相比起來更快。 Math.floor(4.9) === 4 //true使用雙按位非： ~~4.9 === 4 //true
|
|
|
