10種常用JS代碼功能常規寫法和優雅寫法的對比發現，這差異也太大了吧

當我們剛開始學習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老師的博客-艾編程