有很多方法可以优化我们的 JavaScript 代码，本文总结了我在工作中经常使用的 8 个 JavaScript 技巧，希望它也能帮助你。
<!-- more -->
减少使用 if-else
在编写两个以上的 if ... else 时，是否有更好的优化方法?
如下代码，我们需要根据一个汉堡包的名字来计算它的价格。
const getPriceByName = (name) => {
if (name === '🍔') {
return 30;
} else if (name === '🍨') {
return 20;
} else if (name === '🍿') {
return 10;
}
};
console.log(getPriceByName('🍔')); // 30更好的写法 ✅
const getPriceByName = (name) => {
const foodMap = {
'🍔': 30,
'🍨': 20,
'🍿': 10,
// 其他食物
// ...
};
return foodMap[name];
};
console.log(getPriceByName('🍔')); // 30使用 "filter"和 "map"
现在，如果让你找到属于第 1 组的食物，你会如何找到它？比如下面这样数据：
const foods = [
{
name: '🍔',
group: 1,
},
{
name: '🍨',
group: 1,
},
{
name: '🍿',
group: 2,
},
{
name: '🍵',
group: 1,
},
];// ❌
const names = [];
for (let i = 0, len = foods.length; i < len; i++) {
if (foods[i].group === 1) {
names.push(foods[i].name);
}
}
// ✅
const names = foods.filter((food) => food.group === 1).map((food) => food.name);
console.log(names); // [ '🍔', '🍨', '🍵' ]使用解构法交换两个值
现在我有汉堡包，你有巧克力。我们是好朋友，想交换食物。我们通常怎么做呢？
// ❌
let myFood = '🍔';
let yourFood = '🍫';
let tempFoot = myFood;
myFood = yourFood;
yourFood = tempFoot;
console.log(myFood, yourFood); // 🍫 🍔
// ✅
let myFood = '🍔';
let yourFood = ('🍫'[(myFood, yourFood)] = [yourFood, myFood]);
console.log(myFood, yourFood); // 🍫 🍔</code></pre><h3 id="item-0-4">Object.entries</h3><p>如果你想知道仓库里食品的名称和价格，你应该怎么做？</p><pre><code class="js">const foodMap = {
'🍔': 30,
'🍨': 20,
'🍿': 10,
'🍫': 5,
};
// pay attention here
Object.prototype['🌭'] = 40;</code></pre><pre><code class="js">// ❌ for in遍历
for (const key in foodMap) {
console.log(key, foodMap[key]);
}</code></pre><p></p><pre><code class="js">// ✅
Object.entries(foodMap).forEach(([key, value]) => {
console.log(key, value);
});</code></pre><p><br>使用 Object. entries 至少有两个好处：</p><p>只打印对象上的属性，原型上的属性被忽略。<br>直接获取对象的值，而不是用 obj[key]来读取。</p><h3 id="item-0-5">扁平化数组</h3><p>这里有一组这样的数据</p><pre><code>const foods = [ [ '🍔', [ '🍫' ] ], [ '🍨', [ '🍿', [ '🍵' ] ] ] ]</code></pre><pre><code class="js">// ❌
const flattenFoods = (foods) => {
return foods.reduce((res, food) => {
return res.concat(Array.isArray(food) ? flattenFoods(food) : food);
}, []);
};
console.log(flattenFoods(foods)); // ['🍔', '🍫', '🍨', '🍿', '🍵']
// ✅ 是不是很简单
foods.flat(Infinity); // ['🍔', '🍫', '🍨', '🍿', '🍵']</code></pre><h3 id="item-0-6">~~ 技巧</h3><p>哇，今天是万圣节，为了庆祝这个节日，所有的食物都打折，小数点都被抹去。怎么实现</p><pre><code class="js">const foods = [ { name: '🍔', price: 30.89, }, { name: '🍨', price: 20.71, }, { name: '🍿', price: 10.31, }, ];
const discountedFoods = foods.map((it) => {
return {
name: it.name,
price: ~~it.price,
};
});
console.log(discountedFoods);</code></pre><p></p><h3 id="item-0-7">使用 reduce 来计算总和</h3><p>计算总和：</p><pre><code class="js">const foods = [ { name: '🍔', price: 30, amount: 10, }, { name: '🍨', price: 20, amount: 3, }, { name: '🍿', price: 10, amount: 5, }, { name: '🍵', price: 5, amount: 9, }, ];
// ❌
let sum = 0;
foods.forEach((food) => {
sum += food.price * food.amount;
});
console.log(sum); // 455
// ✅
let sum = foods.reduce((res, food) => res += food.price * food.amount, 0)
console.log(sum) // 455</code></pre><h3 id="item-0-8">console.table</h3><p>我们经常使用console.log来打印一些信息，但有时并不那么直观。</p><pre><code class="js">const foods = [ { name: '🍔', price: 30.89, group: 1, }, { name: '🍨', price: 20.71, group: 1, }, { name: '🍿', price: 10.31, group: 2, }, { name: '🍵', price: 5.98, group: 2, }, ]
console.log(foods)</code></pre><p></p><p></p><blockquote>原文：<a href="https://link.segmentfault.com/?enc=deift0gfnUXTk51aIG1QUg%3D%3D.CRZmW1oYxnkFeiWqxm6Xu44SMiQ9Y%2FYqBtpUazr7%2F2KMRhl0t06hFAqGfOTPjL0ocq9L1pN1EkTWOtEsiZYL1MTMDpsYgrPgXnG2Db4Vf3mzUtoeQWVIxoT%2FA2yZYh4RvG%2FqrjGKRQ%2BQSk%2Fw1aBZTQ%3D%3D" rel="nofollow" target="_blank">https://javascript.plainenglish.io/8-javascript-tricks-to-mak...</a></blockquote><p>公号同步更新，欢迎关注 👻<br></p>
