當我們剛開始學習JS程式碼時，我們只需要掌握JS中對應知識點就好，隨著對JS程式碼的熟悉程度，我們就要思考如何寫出更優雅，更簡潔的程式碼。

接下來我分享10種常用JS程式碼功能，通過常規寫法和優雅寫法的對比，來體現其優雅和簡潔性。程式碼中用了ES6新特性，如果你對ES6不瞭解，可以先收藏好。在後期的VUE中，基本都在和ES6打交道。

1、數組合並

常規寫法

利用concat方法來合併陣列

const apples = ["紅蘋果", "綠蘋果"];
const fruits = ["西瓜", "草莓", "葡萄"].concat(apples);
console.log(fruits); // ['西瓜', '草莓', '葡萄', '紅蘋果', '綠蘋果']
 

優雅寫法

利用ES6中的...擴充套件運算子來合併陣列

const apples = ["紅蘋果", "綠蘋果"];
const fruits = ["西瓜", "草莓", "葡萄", ...apples];
console.log(fruits);//['西瓜', '草莓', '葡萄', '紅蘋果', '綠蘋果']

2、陣列中取值

常規寫法

利用陣列下標一個一個從陣列中取資料

const num = [1, 2];
const num1 = num[0];
const num2 = num[1];
console.log(num1, num2); //1 2

優雅寫法

利用ES6的解構賦值來取值

const num = [1, 2];
const [num1, num2] = num;
console.log(num1, num2);
 

3、物件取值

常規寫法

物件.屬性名 的方式獲取屬性值

const user = {
   name: "張三",
   age: 30,
};
const name = user.name;
const age = user.age;
console.log(name, age);//"張三" 30

優雅寫法

利用ES6的解構賦值來實現

const user = {
   name: "張三",
   age: 30,
};
const { name, age } = user;
console.log(name, age); // 張三 30

4、陣列迴圈

常規寫法

利用for迴圈來遍歷陣列，從而取值

const fruits = ["西瓜", "草莓", "葡萄", "蘋果"];
for (let i = 0; i < fruits.length; i++) {
   console.log(fruits[i]);
}
 

優雅寫法

利用ES6的for ... of來遍歷陣列取值

const fruits = ["西瓜", "草莓", "葡萄", "蘋果"];
for (fruit of fruits) {
   console.log(fruit);
}

5、回撥函式

常規寫法

forEach中回撥函式為普通函式

const fruits = ["西瓜", "草莓", "葡萄", "蘋果"];
fruits.forEach(function (fruit) {
   console.log(fruit); //西瓜 草莓 葡萄 蘋果
});

優雅寫法

forEach中回撥函式為箭頭函式，如果箭頭函式中只有一句程式碼，則可以省略{ }

const fruits = ["西瓜", "草莓", "葡萄", "蘋果"];
fruits.forEach((fruit) => console.log(fruit)); //西瓜 草莓 葡萄 蘋果

6、陣列搜尋

常規寫法

陣列中儲存著每一條水果的資訊，我們通過輸入水果名，到陣列中查詢到對應的資訊。

利用常規的for迴圈遍歷來查詢。

const fruits = [
  { name: "蘋果", order: 1 },
  { name: "李子", order: 4 },
  { name: "香蕉", order: 2 },
];
function getApples(arr, value) {
   for (let index = 0; index < arr.length; index++) {
       if (arr[index].name === value) {
           return arr[index];
      }
  }
}
const result = getApples(fruits, "蘋果");
console.log(result); // { name: "蘋果", order: 1 }

優雅寫法

利用陣列的find方法來實現搜尋

const fruits = [
  { name: "蘋果", order: 1 },
  { name: "李子", order: 4 },
  { name: "香蕉", order: 2 },
];
function getApples(arr, value) {
   return arr.find((obj) => obj.name === value);
}
const result = getApples(fruits, "李子");
console.log(result);

7、字串轉換為數字

常規寫法

利用parseInt來實現

const num = parseInt("10");
console.log(num,typeof num); // 10   "number"

優雅寫法

利用+ 號來實現，不過只針對純數字的字串有效

const num = +"10";
console.log(num,typeof num); //=> 10   "number"
console.log(+"10" === 10); // true;

8、null值初始化

常規寫法

通過if判斷，如果為null，則初始化值為“普通使用者”

//獲取使用者角色
function getUserRole(role) {
   let userRole;
   if (role) {
       userRole = role;
  } else {
       userRole = "普通使用者";
  }
   return userRole;
}
console.log(getUserRole()); //普通使用者
console.log(getUserRole("管理員")); //管理員

優雅寫法

通過 || 或短路運算子來實現

function getUserRole(role) {
   return role || "普通使用者"; // 預設值定義的常見方法
}
console.log(getUserRole()); // "普通使用者"
console.log(getUserRole("管理員")); // "管理員";

9、字串拼接

常規寫法

const name = "張三";
const age = 23;
const message = "大家好,我叫" + name + "今年" + age + "歲了！";
console.log(message); //大家好，我叫張三，今年23歲了！

優雅寫法

const name = "張三";
const age = 23;
const message = `大家好，我叫${name}，今年${age}歲了！`;
console.log(message); // Hi DevPoint!

10、物件合併

常規寫法

利用for迴圈來遍歷

const employee = { name: "張三", age: 30 };
const salary = { grade: "A" };
const summary = salary; //用來做合併後物件
for (const key in employee) {
   summary[key] = employee[key];
}
console.log(summary); // {grade: 'A', name: '張三', age: 30}

優雅寫法

利用es6的擴充套件運算子和解構賦值來實現

const employee = { name: "張三", age: 30 };
const salary = { grade: "A" };
const summary = { ...employee, ...salary };
console.log(summary); // { name: '張三', age: 30, grade: 'A' }

最後我想告訴大家一個好訊息，為了幫助關注我的同學，我們建立了《30天挑戰學習計劃》，全程免費，不涉及任何費用和利益，具體內容為以下4部分

1、HTML5+CSS3核心知識

2、30個HTML5+CSS3案例

3、2個PC+移動+響應式綜合專案實戰

4、網站全面上雲部署與釋出

接下來我來詳細介紹下這個課程體系！

為幫助到一部分同學不走彎路，真正達到一線網際網路大廠前端專案研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業專案開發，雲伺服器部署上線，從入門到精通

• PC端專案開發（1個）
• 移動WebApp開發（2個）
• 多端響應式開發（1個）

共4大完整的專案開發 ！一行一行程式碼帶領實踐開發，實際企業開發怎麼做我們就是怎麼做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行專案程式碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠專案的開發標準和設計規範，命名規範，專案程式碼規範，SEO優化規範

從藍湖UI設計稿 到 PC端，移動端，多端響應式開發專案開發

• 真機除錯，雲服務部署上線；
• Linux環境下 的 Nginx 部署，Nginx 效能優化；
• Gzip 壓縮，HTTPS 加密協議，域名伺服器備案，解析；
• 企業專案域名跳轉的終極解決方案，多網站、多系統部署；
• 使用 使用 Git 線上專案部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視訊+圖文教程+專案資料素材等。只為實力寵粉，真正一次掌握企業專案開發必備技能，不走彎路 ！

過程中【不涉及】任何費用和利益，非誠勿擾 。

如果你沒有新增助理老師微信，可以新增下方微信，說明要參加30天挑戰學習計劃，來自部落格園！老師會邀請你進入學習，並給你發放相關資料

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的部落格-艾程式設計