javascript簡寫常用的12個(gè)技巧（可以大大減少你的js代碼量）
前言
本文主要給大家分享了javascript簡寫常用的12個(gè)技巧，無論你是初學(xué)者還是資深人士，都值得一讀！下面話不多說了，來一起看看詳細(xì)的介紹：
1. 空(null, undefined)驗(yàn)證
當(dāng)我們創(chuàng)建了一個(gè)新的變量，我們通常會去驗(yàn)證該變量的值是否為空(null)或者未定義(undefined)。這對于JavaScript編程來說，是一個(gè)經(jīng)常要考慮到的驗(yàn)證。
如果直接寫，像下面這樣：
if (variable1 !== null || variable1 !== undefined || variable1 !== ''){
let variable2 = variable1;
}
我們可以使用一個(gè)更加簡潔的版本
let variable2 = variable1 || '';
如果你不信，可以在谷歌瀏覽器開發(fā)者模式下的控制臺中試試！
//值為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)試完一組代碼后要刷新下頁面，或者定義不同的變量，不然會報(bào)錯(cuò)
不過腳本之家小編更喜歡用下面的代碼
if("undefined" != typeof downlm){
if(downlm=="soft"){
document.write('成功');
}
}
判斷downlm是否定義
2. 數(shù)組
這個(gè)好像比較簡單！
非優(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;
}
簡化后：
let big = x > 10 ? true : false;
這是三目運(yùn)算，當(dāng)判斷條件和結(jié)果都只有一個(gè)的時(shí)候可以使用。
極大的簡化了代碼量！
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會自動講變量上提（hoist），使用該方法可以講所有的變量都在函數(shù)的頭部用一行搞定。
優(yōu)化錢:
let x; let y; let z = 3;
優(yōu)化后：
let x, y, z=3;
5. 賦值語句的簡化
簡化前：
x=x+1; minusCount = minusCount - 1; y=y*10;
簡化后：
x++; minusCount --; y*=10;
假設(shè)x=10，y=5，那么基本的算術(shù)操作可以使用如下的簡寫方式：
x += y // x=15 x -= y // x=5 x *= y // x=50 x /= y // x=2 x %= y // x=0
6. 避免使用RegExp對象
簡化前：
var re = new RegExp("\d+(.)+\d+","igm"),
result = re.exrc("padding 01234 text text 56789 padding");
console.log(result);//"01234 text text 56789"
簡化后：
var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"
7. If 條件優(yōu)化
簡化前：
if (likeJavaScript === true)
簡化后：
if (likeJavaScript)
我們再來個(gè)判斷非真的例子：
let c;
if ( c!= true ) {
// do something...
}
簡化后：
let c;
if ( !c ) {
// do something...
}
9. 函數(shù)參數(shù)優(yōu)化
我個(gè)人傾向于使用獲取對象元素的方式來訪問函數(shù)參數(shù)，當(dāng)然這個(gè)見仁見智啦！
通常使用的版本：
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 );
譯者注：原文下方有評論表示不建議用樓主的方法，使用第一種方法函數(shù)參數(shù)的順序是可以變動的，第二種你就要小心了。
10. charAt()的替代品
簡化前：
"myString".charAt(0);
簡化后：
"myString"[0];//返回'm'
譯者注：我相信用第一種方法的人已經(jīng)不多了吧！
11. 函數(shù)調(diào)用還可以更短
簡化前：
function x() {console.log('x')};function y() {console.log('y')};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}
簡化后：
function x() {console.log('x')};function y() {console.log('y')};let z = 3;
(z==3?x:y)();
12. 如何優(yōu)雅的表示大數(shù)字
在JavaScript中，有一個(gè)簡寫數(shù)字的方法，也許你忽略了。1e7表示10000000。
簡化前：
for (let i = 0; i < 10000; i++) {
簡化后：
for (let i = 0; i < 1e7; i++) {
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
譯者：Fundebug
相關(guān)文章
這篇文章主要介紹了JavaScript截取、切割字符串的技巧,文中給大家提到了substr 和 substring方法的區(qū)別，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2016-01-01
JS使用正則表達(dá)式實(shí)現(xiàn)關(guān)鍵字替換加粗功能示例
這篇文章主要介紹了JS使用正則表達(dá)式實(shí)現(xiàn)關(guān)鍵字替換加粗功能,涉及javascript基本正則匹配與替換操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
QQ強(qiáng)制聊天功能代碼(加強(qiáng)版，兼容QQ2010)
QQ強(qiáng)制聊天功能代碼,腳本之家以前也發(fā)布過，但已經(jīng)不能用了，這個(gè)是新版本，經(jīng)過測試，完全兼容新版本的qq.2010-06-06
JS 輸入字?jǐn)?shù)判斷實(shí)現(xiàn)代碼
判斷輸入的字?jǐn)?shù)2009-08-08
如果在使用javascript的時(shí)候涉及到event處理，就需要知道event在不同的瀏覽器中的差異。2009-12-12
這篇文章主要介紹了PHP 502bad gateway原因及解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
javascript中slice(),splice(),split(),substring(),substr()使用方法
這篇文章主要介紹了javascript中slice(),splice(),split(),substring(),substr()使用方法,需要的朋友可以參考下2015-03-03
本文主要介紹了常用的javascript設(shè)計(jì)模式:單體模式;工廠模式;單例模式;觀察者模式（發(fā)布訂閱模式）;策略模式等。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
事件（Event）知識整理,本文由網(wǎng)上資料整理而來,需要的朋友可以參考下2012-10-10
js特效,頁面下雪的小例子，需要的朋友可以參考一下2013-06-06