网络知识 娱乐 适合初学者的 10 个JavaScript 代码整洁技巧

适合初学者的 10 个JavaScript 代码整洁技巧

适合初学者的 10 个JavaScript 代码整洁技巧

什么是整洁的代码呢?答案可能因人而异,个人提倡以函数式风格编写代码,如果做得正确的话,代码将更容易阅读、分解和测试。在开始函数式编程之前,学习一些小的技巧有助于编写整洁的代码。最好的方式是阅读开源项目,学习别人的方式。对于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