什么是整洁的代码呢 ？答案可能因人而异，个人提倡以函数式风格编写代码
 ，初学如果做得正确的码整话，代码将更容易阅读、洁技分解和测试
。适合在开始函数式编程之前，初学学习一些小的码整技巧有助于编写整洁的代码 。最好的洁技方式是阅读开源项目 ，学习别人的适合方式。对于JavaScript，初学ES6 引入了许多新的码整特性
，也使得写代码多一种更加优雅的洁技方式
。

1. 数组合并

// 常规逻辑nconst apples = ["",适合 ""];nconst fruits = ["", "", ""].concat(apples);nnconsole.log(fruits); // ["", "", "", "", ""];nn// 优雅写法 1nconst apples = ["", ""];nconst fruits = ["", "", "", ...apples];nnconsole.log(fruits); // ["", "", "", "", ""];nn// 优雅写法 2nconst apples = ["", ""];nconst fruits = [...apples, "", "", ""];nconsole.log(fruits); // ["", "", "", "", ""];nn// 优雅去重nconst apples = ["", "", ""];nconst fruits = [...new Set(["", "", "", "", ...apples])];nconsole.log(fruits); // [ '', '', '', '', '' ]n

2. 数组中取值

// 常规逻辑nconst apples = ["", ""];nconst redApple = apples[0];nconst greenApple = apples[1];nnconsole.log(redApple); // nconsole.log(greenApple); // ;nn// 优雅写法nconst apples = ["", ""];nconst [redApple, greenApple] = apples; // 使用解构赋值nnconsole.log(redApple); // nconsole.log(greenApple); // ;n

3. 对象取值

// 常规逻辑nconst user = { n name: "DevPoint",n age: 30,n};nnconst name = user.name; // DevPointnconst age = user.age; // 30nconsole.log(name);nconsole.log(age);nn// 优雅写法nconst user = { n name: "DevPoint",n age: 30,n};nnconst { name, age } = user;nnconsole.log(name); // DevPointnconsole.log(age); // 30n

4. 数组循环

// 常规逻辑nconst fruits = ["", "", "", ""];nnfor (let i = 0; i < fruits.length; i++) { n console.log(fruits[i]);n}nn// 优雅写法nconst fruits = ["", "", "", ""];nnfor (fruit of fruits) { n console.log(fruit);n}n

5. 箭头函数作为回调

// 常规逻辑nconst fruits = ["", "", "", ""];nnfruits.forEach(function (fruit) { n console.log(fruit);n});nn// 优雅写法nconst fruits = ["", "", "", ""];nfruits.forEach((fruit) => console.log(fruit));n

6. 数组搜索

假设需要通过一个对象的属性从一个对象数组中查找一个对象，通常使用 for 循环：

// 常规逻辑nconst inventory = [n { name: "Bananas",初学 quantity: 5 },n { name: "Apples", quantity: 10 },n { name: "Grapes", quantity: 2 },n];nn// Get the object with the name `Apples` inside the arraynfunction getApples(arr, value) { n for (let index = 0; index < arr.length; index++) { n if (arr[index].name === "Apples") { n return arr[index];n }n }n}nnconst result = getApples(inventory);nconsole.log(result); // { name: 'Apples', quantity: 10 }nn// 优雅写法nconst inventory = [n { name: "Bananas", quantity: 5 },n { name: "Apples", quantity: 10 },n { name: "Grapes", quantity: 2 },n];nnfunction getApples(arr, value) { n return arr.find((obj) => obj.name === "Apples");n}nnconst result = getApples(inventory);nconsole.log(result);n

7.字符串转换为数字

// 常规逻辑nconst num = parseInt("10");nnconsole.log(num); // 10nconsole.log(typeof num); // "number";nn// 优雅写法nconst num = +"10";nconsole.log(num); //=> 10nconsole.log(typeof num); // "number"nconsole.log(+"10" === 10); // true;n

同样的方法可以用于判断是否为整数 ：

const isInteger = (val) => Number.isInteger(+val);nconsole.log(isInteger("DevPoint")); // falsenconsole.log(isInteger("30")); // truenconsole.log(isInteger(30)); // truen

8. null 值初始化

// 常规逻辑nfunction getUserRole(role) { n let userRole;n if (role) { n userRole = role;n } else { n userRole = "USER";n }n return userRole;n}nnconsole.log(getUserRole()); // "USER"nconsole.log(getUserRole("ADMIN")); // "ADMIN";nn// 优雅写法nfunction getUserRole(role) { n return role || "USER"; // 默认值定义的常见方法n}nnconsole.log(getUserRole()); // "USER"nconsole.log(getUserRole("ADMIN")); // "ADMIN";n

9. 字符串拼接

过去无尽的 + 号 ，再加上一些排版就更痛苦 。码整

// 常规逻辑nconst name = "DevPoint";nconst message = "Hi " + name + "!";nconsole.log(message); // Hi DevPoint!n// 优雅写法nconst name = "DevPoint";nconst message = `Hi ${ name}!`;nconsole.log(message); // Hi DevPoint!n

10 对象合并

// 常规逻辑nconst employee = { name: "DevPoint", age: 30 };nconst salary = { grade: "A" };nconst summary = salary;nfor (const key in employee) { n summary[key] = employee[key];n}nconsole.log(summary); // { grade: 'A', name: 'DevPoint', age: 30 }n// 优雅写法nconst employee = { name: "DevPoint", age: 30 };nconst salary = { grade: "A" };nconst summary = { ...employee, ...salary };nconsole.log(summary); // { name: 'DevPoint', age: 30, grade: 'A' }

作者
 ：天行无忌
链接：https://juejin.cn/post/7111302214945079310