欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript常用操作

程序员文章站 2022-06-16 11:34:17
两个对象数组 根据相同的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...

两个对象数组 根据相同的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

相关标签: JavaScript