JavaScript常用操作

两个对象数组 根据相同的id进行合并

var arr2 = [{ id: 1, name: '小明' }, { id: 2, name: '卢本伟' }, { id: 3, name: 'PDD' }, { id: 4, name: '大司马' }]
var arr1 = [{ id: 1, car: '奔驰' }, { id: 2, car: '宝马' }, { id: 3, car: '劳斯' }, { id: 5, car: '大众' }]
const combined = arr2.reduce((acc, cur) => {
  const target = acc.find(e => e.id === cur.id);
  if (target) {
    Object.assign(target, cur);
  } else {
    acc.push(cur);
  }
  return acc;
}, arr1);
console.log(combined)

找出数组中id为4的对象

var arr2 = [{ id: 1, name: '小明' }, { id: 2, name: '卢本伟' }, { id: 3, name: 'PDD' }, { id: 4, name: '大司马' }]
const res = arr2.find(item=>item.id===4)

统计所有商品价格

var arr2 = [{ id: 1, name: '小明',price:11 }, { id: 2, name: '卢本伟',price:78 }, { id: 3, name: 'PDD',price:15 }, { id: 4, name: '大司马',price: 23 }]
const totalAmount = arr2.reduce((sum,item)=>sum+=item.price,0)
console.log('totalAmount',totalAmount)

过滤数组中符合条件的对象 例如过滤价格大于15的商品

var arr2 = [{ id: 1, name: '小明',price:11 }, { id: 2, name: '卢本伟',price:78 }, { id: 3, name: 'PDD',price:15 }, { id: 4, name: '大司马',price: 23 }]
const newArr = arr2.filter(item=>item.price>15)
console.log('newArr',newArr)

对数组的对象属性处理返回新数组 例如价格保留两位小数

var arr2 = [{ id: 1, name: '小明',price:11 }, { id: 2, name: '卢本伟',price:78 }, { id: 3, name: 'PDD',price:15 }, { id: 4, name: '大司马',price: 23 }]
const newArr = arr2.map(item=>{
  Number(item.price).toFixed(2)
  return item
})
console.log('newArr',newArr)

同时发出多个异步，等待上一个异步回来下一个异步才执行

const arr = [1, 2, 3]
arr.reduce((p, x) => {
  return p.then(() => {
    return new Promise(r => {
      setTimeout(() => r(console.log(x)), 1000)
    })
  })
}, Promise.resolve())

// promise.all()
// promise.race()

防抖函数 debounce

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
  let timer = null //借助闭包
  return function() {
      if(timer){
          //进入该分支语句，说明当前正在一个计时过程中，
          //并且又触发了相同事件。所以要取消当前的计时，重新开始计时
          clearTimeout(timer) 
          // 保存此处的 this arguments，因为setTimeout是全局的
          // 所以需要需改this指向 如果不修改把定时器的function换成箭头函数
          var context = this;
          var args = arguments; 
          timer = setTimeout(function(){
            fn.apply(context,args)
          },delay) 
      }else{
          timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
      }
  }
}

节流throttle

function throttle(fn, delay) {
  let timer = null
  return function () {
    if (!timer) {
      //休息时间 暂不接客
      return false
    }
    // 保存此处的 this arguments，因为setTimeout是全局的
    // 所以需要需改this指向 如果不修改把定时器的function换成箭头函数
    var context = this;
    var args = arguments; 
    // 工作时间，执行函数并且在间隔期内把状态位设为无效
    timer = setTimeout(function() {
      fn.call(context, args);
      clearTimeout(timer)
    }, delay)
  }
}

获取某一个月的第一天和最后一天

// 0是指最后一天
const last = new Date(new Date().getFullYear(),new Date().getMonth() + 1,0).getDate()
const first = new Date(new Date().getFullYear(),new Date().getMonth() + 1,1).getDate()
console.log('最后一天',last)
console.log('第一天',first)

 

本文地址：https://blog.csdn.net/weixin_40983119/article/details/111143576