javascript簡(jiǎn)寫(xiě)常用的12個(gè)技巧（可以大大減少你的js代碼量）
前言
本文主要給大家分享了javascript簡(jiǎn)寫(xiě)常用的12個(gè)技巧，無(wú)論你是初學(xué)者還是資深人士，都值得一讀！下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹：
1. 空(null, undefined)驗(yàn)證
當(dāng)我們創(chuàng)建了一個(gè)新的變量，我們通常會(huì)去驗(yàn)證該變量的值是否為空(null)或者未定義(undefined)。這對(duì)于JavaScript編程來(lái)說(shuō)，是一個(gè)經(jīng)常要考慮到的驗(yàn)證。
如果直接寫(xiě)，像下面這樣：
if (variable1 !== null || variable1 !== undefined || variable1 !== ''){
let variable2 = variable1;
}
我們可以使用一個(gè)更加簡(jiǎn)潔的版本
let variable2 = variable1 || '';
如果你不信，可以在谷歌瀏覽器開(kāi)發(fā)者模式下的控制臺(tái)中試試！
//值為null的例子 let variable1 = null; let variable2 = variable1 || ''; console.log(variable2); //輸出: '' //值為undefined的例子 let variable1 = undefined; let variable2 = variable1 || ''; console.log(variable2); //輸出: '' //正常情況 let variable1 = 'hi there'; let variable2 = variable1 || ''; console.log(variable2); //輸出: 'hi there'
在這里要注意的是，你在調(diào)試完一組代碼后要刷新下頁(yè)面，或者定義不同的變量，不然會(huì)報(bào)錯(cuò)
不過(guò)腳本之家小編更喜歡用下面的代碼
if("undefined" != typeof downlm){
if(downlm=="soft"){
document.write('成功');
}
}
判斷downlm是否定義
2. 數(shù)組
這個(gè)好像比較簡(jiǎn)單！
非優(yōu)化代碼：
let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";
優(yōu)化代碼：
let a = ["myString1", "myString2", "myString3"];
3. if true .. else 的優(yōu)化
let big;
if (x > 10) {
big = true;
}
else {
big = false;
}
簡(jiǎn)化后：
let big = x > 10 ? true : false;
這是三目運(yùn)算，當(dāng)判斷條件和結(jié)果都只有一個(gè)的時(shí)候可以使用。
極大的簡(jiǎn)化了代碼量！
let big = (x > 10);
let x = 3,
big = (x > 10) ? "greater 10" : (x < 5) ? "less 5" : "between 5 and 10";
console.log(big); //"less 5"
let x = 20,
big = {true: x>10, false : x< =10};
console.log(big); //"Object {true=true, false=false}"
4. 變量聲明
盡管JavaScript會(huì)自動(dòng)講變量上提（hoist），使用該方法可以講所有的變量都在函數(shù)的頭部用一行搞定。
優(yōu)化錢(qián):
let x; let y; let z = 3;
優(yōu)化后：
let x, y, z=3;
5. 賦值語(yǔ)句的簡(jiǎn)化
簡(jiǎn)化前：
x=x+1; minusCount = minusCount - 1; y=y*10;
簡(jiǎn)化后：
x++; minusCount --; y*=10;
假設(shè)x=10，y=5，那么基本的算術(shù)操作可以使用如下的簡(jiǎn)寫(xiě)方式：
x += y // x=15 x -= y // x=5 x *= y // x=50 x /= y // x=2 x %= y // x=0
6. 避免使用RegExp對(duì)象
簡(jiǎn)化前：
var re = new RegExp("\d+(.)+\d+","igm"),
result = re.exrc("padding 01234 text text 56789 padding");
console.log(result);//"01234 text text 56789"
簡(jiǎn)化后：
var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"
7. If 條件優(yōu)化
簡(jiǎn)化前：
if (likeJavaScript === true)
簡(jiǎn)化后：
if (likeJavaScript)
我們?cè)賮?lái)個(gè)判斷非真的例子：
let c;
if ( c!= true ) {
// do something...
}
簡(jiǎn)化后：
let c;
if ( !c ) {
// do something...
}
9. 函數(shù)參數(shù)優(yōu)化
我個(gè)人傾向于使用獲取對(duì)象元素的方式來(lái)訪問(wèn)函數(shù)參數(shù)，當(dāng)然這個(gè)見(jiàn)仁見(jiàn)智啦！
通常使用的版本：
function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
// do something...
}
myFunction( "String", 1, [], {}, true );
我喜歡的版本：
function myFunction() {
/* 注釋部分
console.log( arguments.length ); // 返回 5
for ( i = 0; i < arguments.length; i++ ) {
console.log( typeof arguments[i] ); // 返回 string, number, object, object, boolean
}
*/
}
myFunction( "String", 1, [], {}, true );
譯者注：原文下方有評(píng)論表示不建議用樓主的方法，使用第一種方法函數(shù)參數(shù)的順序是可以變動(dòng)的，第二種你就要小心了。
10. charAt()的替代品
簡(jiǎn)化前：
"myString".charAt(0);
簡(jiǎn)化后：
"myString"[0];//返回'm'
譯者注：我相信用第一種方法的人已經(jīng)不多了吧！
11. 函數(shù)調(diào)用還可以更短
簡(jiǎn)化前：
function x() {console.log('x')};function y() {console.log('y')};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}
簡(jiǎn)化后：
function x() {console.log('x')};function y() {console.log('y')};let z = 3;
(z==3?x:y)();
12. 如何優(yōu)雅的表示大數(shù)字
在JavaScript中，有一個(gè)簡(jiǎn)寫(xiě)數(shù)字的方法，也許你忽略了。1e7表示10000000。
簡(jiǎn)化前：
for (let i = 0; i < 10000; i++) {
簡(jiǎn)化后：
for (let i = 0; i < 1e7; i++) {
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
譯者：Fundebug
相關(guān)文章
JS組件系列之使用HTML標(biāo)簽的data屬性初始化JS組件
這篇文章主要介紹了JS組件系列之使用HTML標(biāo)簽的data屬性初始化JS組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
利用babel將es6語(yǔ)法轉(zhuǎn)es5的簡(jiǎn)單示例
Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器,babel可以將ES6代碼完美地轉(zhuǎn)換為ES5代碼，所以下面這篇文章就來(lái)給大家詳細(xì)介紹了關(guān)于利用babel將es6語(yǔ)法轉(zhuǎn)es5的相關(guān)資料，文章通過(guò)示例介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
JsonServer安裝及啟動(dòng)過(guò)程圖解
這篇文章主要介紹了JsonServer安裝及啟動(dòng)過(guò)程圖解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了JavaScript 上傳文件限制參數(shù)案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
JavaScript變量作用域_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript變量作用域，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
關(guān)于RequireJS的簡(jiǎn)單介紹即使用方法
下面小編就為大家?guī)?lái)一篇關(guān)于RequireJS的簡(jiǎn)單介紹即使用方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
這篇文章主要介紹了js獲取當(dāng)前時(shí)間，一種是獲取昨天、今天、明天的準(zhǔn)確時(shí)間，一個(gè)精確到時(shí)分秒,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
基于js?+?html2canvas實(shí)現(xiàn)網(wǎng)頁(yè)放大鏡功能
最近接到任務(wù),需實(shí)現(xiàn)【網(wǎng)頁(yè)】放大鏡的效果,百度搜索?【js?放大鏡】關(guān)鍵字,千篇一律的都是一些仿淘寶/京東等電商網(wǎng)站中查看規(guī)格大圖的效果實(shí)現(xiàn),根本無(wú)法滿足我的需求,于是自己花了點(diǎn)時(shí)間調(diào)研實(shí)現(xiàn),在這里分享給大家,感興趣的朋友可以參考下2023-12-12
JS?requestVideoFrameCallback()?簡(jiǎn)單案例
這篇文章主要介紹了JS?requestVideoFrameCallback()簡(jiǎn)單案例，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-07-07
layui前端框架之table表數(shù)據(jù)的刷新方法
今天小編就為大家分享一篇layui前端框架之table表數(shù)據(jù)的刷新方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08