js 技巧收集

279 阅读1分钟

代码优化逻辑判断

策略模式配合map结构

const fruitColor = new Map()
.set('red', ['apple''strawberry'])
.set('yellow', ['banana''pineapple'])
.set('purple', ['grape''plum']);

function pick(color) {
  return fruitColor.get(color) || [];
}

过滤器写法

const fruits = [
  { name: 'apple', color: 'red' }, 
  { name: 'strawberry', color: 'red' }, 
  { name: 'banana', color: 'yellow' }, 
  { name: 'pineapple', color: 'yellow' }, 
  { name: 'grape', color: 'purple' }, 
  { name: 'plum', color: 'purple' }
];

function pick(color) {
  return fruits.filter(f => f.color == color);
}

判断所有都符合条件

const fruits = [
  { name'apple'color'red' },
  { name'banana'color'yellow' },
  { name'grape'color'purple' }
];

function match() {
  // 条件:所有水果都必须是红色
  const isAllRed = fruits.every(f => f.color == 'red');

  console.log(isAllRed); // false
}

判断数组中是否有某一项满足条件

const fruits = [
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'grape', color: 'purple' }
  ];

// 条件:是否有红色水果 
const isAnyRed = fruits.some(f => f.color == 'red');

使用解构与默认参数

before:

const buyFruit = (fruit,amount) => {
 fruit = fruit || {};
 if(!fruit.name || !fruit.price){
   return;
 }
 ...
  amount = amount || 1;
  console.log(amount)
}

after:

const buyFruit = ({ name,price }={},amount) => {
  if(!name || !prices){
    return;
  }
  console.log(amount)
}