初学者：8个JavaScript技巧

有很多方法可以优化我们的 JavaScript 代码，本文总结了我在工作中经常使用的 8 个 JavaScript 技巧，希望它也能帮助你。

减少使用 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); // ? ? 

Object.entries

如果你想知道仓库里食品的名称和价格，你应该怎么做？

const foodMap = {   '?': 30,   '?': 20,   '?': 10,   '?': 5, }; // pay attention here Object.prototype['?'] = 40; 

// ❌ for in遍历 for (const key in foodMap) {   console.log(key, foodMap[key]); } 

// ✅ Object.entries(foodMap).forEach(([key, value]) => {   console.log(key, value); }); 

使用 Object. entries 至少有两个好处：

只打印对象上的属性，原型上的属性被忽略。
直接获取对象的值，而不是用 obj[key]来读取。

扁平化数组

这里有一组这样的数据

const foods = [ [ '?', [ '?' ] ], [ '?', [ '?', [ '?' ] ] ] ] 

// ❌ const flattenFoods = (foods) => {   return foods.reduce((res, food) => {     return res.concat(Array.isArray(food) ? flattenFoods(food) : food);   }, []); }; console.log(flattenFoods(foods)); // ['?', '?', '?', '?', '?']  // ✅ 是不是很简单 foods.flat(Infinity); // ['?', '?', '?', '?', '?'] 

~~ 技巧

哇，今天是万圣节，为了庆祝这个节日，所有的食物都打折，小数点都被抹去。怎么实现

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); 

使用 reduce 来计算总和

计算总和：

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 

console.table

我们经常使用console.log来打印一些信息，但有时并不那么直观。

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) 

原文：https://javascript.plainenglish.io/8-javascript-tricks-to-make-you-a-better-programmer-8d59c75736d2

公号同步更新，欢迎关注 ?