初學者：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

公號同步更新，歡迎關注 ??

標籤：JavaScript

上一篇：ArcMap鑲嵌資料集的創建、資料匯入與資料范圍修改方法

下一篇：返回列表