不必要的代码📰

我们在编码的过程中会编写一些与核心逻辑不直接相关的辅助代码！这些代码可能是不必要的也可能会直接影响代码可读性！有些代码可能又臭又长，你有没有想过如何精简你的代码！

本文我会介绍12个javaScript代码块，帮助你编写干净的代码。

1️⃣ 将*if…else*** 语句缩减为一行

当我们进行条件检查时，我们会使用if…else语句。但是在条件赋值的情况下，下面这个if…else在 5-6 行中进行简单的赋值。

let x = 10;
let result;

//long-hand
if(x%2 === 0)
{
    result = "x is an even number"; 
} else {
    result = "x is an odd number";
}

但是我们完全可以使用三元运算符将赋值操作在一行中完成。

let x = 10;

//short-hand
let result = x % 2 === 0 ? "x is an even number" :  "x is an odd number";

2️⃣对象值到数组

假设我们有一个对象，我们想取出这个对象的所有值并生成一个数据？我们在for循环中进行操作

let person = {
    name: "Anurag",
    role: "Front-end Developer",
    country: "India"
}

//Long-hand
let personData = [];
for(let key in person) {
    personData.push(person[key]);
}

但是我们完全可以使用Object.values()。

let person = {
    name: "Anurag",
    role: "Front-end Developer",
    country: "India"
}

//short-hand
let personData = Object.values(person);

3️⃣在 Array 中查找一个元素

通过索引可以很快的查到，但是没有索引，我们使用 for + if 来查找元素！

const number= [5, 10, 15, 50, 97];
let found;

//Long-hand
for(let i = 0; i < numbers.length; i++) {
    if(number[i] === 15){
            found = number[i];
    }
}

console.log(found);

如果我们想要在一行代码中实现查找，我们可以使用数组的find()方法！
此方法将返回与指定条件匹配的第一个元素，如果条件不满足则返回undefined 。

const number= [5, 10, 15, 50, 97];

//short-hand
const found = number.find(element => element === 15);

console.log(found);

4️⃣ if 块的简写

if和else并不是每次都成对出现的，例如基于变量值显示加载动画时，如果条件失败，将不做任何事情。

//Long-hand
if(loading) {
    showLoading();
}

但是，如果我们可以删除所有这些花括号 { } 并将这个逻辑写在一行中，那看起来会更干净。

//short-hand
loading && showLoading();

这个简写在 React 应用程序中非常有用，你会发现自己在 React 中经常使用它。

//short-hand
<div>{this.state.isLoading && <Loading />}</div>

5️⃣ 解构对象

通过解构我们可以将对象值存储到单独的变量中，并使用它们而不是点 (.) 表示法。

const person = {
    name: "Anurag",
    age: "25",
    country: "India",
    state: "M.P."
};

//long-hand
const name = person.name;
const age = person.age;
const location = {country: person.country,state: person.state};

6️⃣对象分配

上面的例子演示了如何在一行中解构对象，但是为对象分配值呢？

对象，赋值时需要键和值。通常，在动态创建对象时，可以使用存储的值来创建对象。

const name = "Anurag";
const age = 25;
const country = "India";
const state = "M.P.";

//long-hand
const personObj = {
    name : name,
    age : age,
    country : country,
    state : state
};

这段代码看上去就很臃肿，我们是不是也可以在一行中做到？

const name = "Anurag";
const age = 25;
const country = "India";
const state = "M.P.";

//short-hand
const personObj = {name,age,country,state};

JavaScript 将使用变量名隐式创建键并将值分配给该键。

7️⃣检查该项目是否存在于数组中

查找数组中是否存在元素，需要使用 if…else 编写一个循环来存储布尔结果，然后再编写一个 if…else 以根据获得的结果执行操作。

const numbers = [1,6,15,2,11];
let result = false;

//long-hand
for(let i = 0 i < numbers.length; i++) {
    if(numbers[i] === 15){
        result = true;
        break;
    } 
}

if(result) {
    console.log("15 is present");
}else {
    console.log("15 is not present");
}

这个简单的任务需要 10 多行代码。如果我告诉你，你可以将这段代码减少到一行，那是不是很不可思议。

这将节省编码时间，写一个比写 10 行要快得多。另一个好处是提高了代码的可读性。

让我们看看如何在单行中编写它

const numbers = [1,6,15,2,11];

//short-hand
numbers.includes(15) ? console.log("15 is present") : console.log("15 is not present");

8️⃣从数组中删除重复项

我们通常使用for循环来删除数组中的重复元素。

const numbers = [1,3,5,1,3,2,6];

//long-hand
let uniqueNums = [];
numbers.forEach((n) => {
    if (!uniqueNums .includes(n)) {
        uniqueNums.push(n);
    }
});

让我展示一下，如何在没有循环和一行的情况下做到这一点。

const numbers = [1,3,5,1,3,2,6];

//short-hand
const uniqueNums = [...new Set(numbers)];

9️⃣找出数组中的最大值和最小值

使用数组需要循环 90% 的时间。在大多数情况下，它是循环和条件的组合。查找最大和最小数字也不例外。

const numbers = [1,5,9,3,2,4];
let max = numbers[0];
let min = numbers[0];

//long-hand
forEach(num => {
    if(num > max) {
        max = num;    
    }else if(num < min) {
        min = num;
    }
});

我们可以使用reduce()方法编写此逻辑来缩小它，但下面的代码展示一个更简单的方法来编写它，这会让您大吃一惊🤯

const numbers = [1,5,9,3,2,4];

//short-hand
let max = Math.max(...numbers);
let min = Math.min(...numbers);

1️⃣0️⃣多层次对象的深度克隆

我们可以使用扩展运算符来复制普通对象！但是这种做法只是进行了浅拷贝！要创建深层副本，必须编写一个递归函数并遍历每个键值对。

let person = {
    name : "Anurag",
    age: 25,
  location: {
        country: "India",
        state: "Madhya Pradesh"
    }
};

//long-hand
const makeClone = (obj) => { 
  let newObject = {}; 
  Object.keys(obj).map(key => { 
    if(typeof obj[key] === 'object'){ 
      newObject[key] = makeClone(obj[key]); 
    } else { 
      newObject[key] = obj[key]; 
    } 
  }); 
 return newObject; 
} 

const deepClone = makeClone(person);

这么多代码只是为了复制一个对象；完全没有必要。简单的任务应该简单地完成。

let person = {
    name : "Anurag",
    age: 25,
  location: {
        country: "India",
        state: "Madhya Pradesh"
    }
};

//short-hand
cosnt deepClone = JSON.parse(JSON.stringify(person));

1️⃣1️⃣将嵌套数组展平

使用嵌套数组很困难，通过索引访问值，并且无法知道哪个索引具有嵌套数组。最好的事情是，使数组变平。

有多种方法可以解决这个问题，可以使用**reduce() 和concat() **方法来获得扁平数组。

const numbers = [1, [2, 3, [4, [5]], 6], 7];

//long-hand
function flatten(arr) {
    return arr.reduce((acc, cur) => acc.concat(Array.isArray(cur) ? flatten(cur) : cur), []);
};

const flattened = flatten(numbers);

1️⃣2️⃣为变量分配默认值

分配默认值是一种条件操作，您已经看到***三元运算符***可用于以更简洁的方式在一行中执行这些简单的操作。

//long-hand
let name = assignedName ? assignedName : "Not assigned";

你可以说，这种方法很好，而且代码容易阅读！但是我们还可以使用？？或者||来实现这个效果！

//short-hand
let name = assignedName ?? "Not assigned";

//short-hand
let name = assignedName || "Not assigned";

结论

编写干净、可读的代码会有很大的不同，它更容易调试，其他开发人员更容易理解，当你删除所有不必要的行时，你可以真正看到你写的内容。

保持代码干净和可读有很多优点，使用这些简写可以方便地编写干净、可读的代码，这将使你在其他开发人员中脱颖而出。