猫先生头条

初学者：8个JavaScript技巧

2023-07-04 11:30 由 戎码1生 发表于 #前端开发

有很多方法可以优化我们的 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

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

热门相关：我的治愈系游戏   前任无双   花月颂   民国之文豪崛起   锦乡里