js之几个数组方法的常见的面试题

1.forEach的使用(遍历数组)

const arr = [{label:'男',value: 1}, {label:'女',value: 0}]
 
 function f(arr) {
   // 直接使用forEach给对象添加属性名和属性值
   const obj = {}
   arr.forEach(item => {
    obj[item.value] = item.label
   })
   return obj
 }
 const obj = f(arr);
 console.log(obj)
 obj = {'1': '男', '0': '女'}

2.map的使用(对数组进行加工,返回一个新数组)

const arr = [{label:'男',value: 1}, {label:'女',value: 0}]
 
function f(arr) {
  // 使用map遍历数组
  return arr.map(item => item.label)
}
const arr2 = f(arr);
console.log(arr2)
// arr2 = ['男', '女']

3.findIndex(查找元素下标，一般用于元素是引用类型),和 filter(筛选数组,选中符合条件的元素)

// 如果A的pid == B的id
// A是B的下属

// 如果A的pid == B的pid
// A和B是同事

const data = [
  {id:"01", name: "张大大", pid:"", job: "项目经理"},
  {id:"02", name: "小亮", pid:"01", job: "产品leader"},
  {id:"03", name: "小美", pid:"01", job: "UIleader"},
  {id:"04", name: "老马", pid:"01", job: "技术leader"},
  {id:"05", name: "老王", pid:"01", job: "测试leader"},
  {id:"06", name: "老李", pid:"01", job: "运维leader"},
  {id:"07", name: "小丽", pid:"02", job: "产品经理"},
  {id:"08", name: "大光", pid:"02", job: "产品经理"},
  {id:"09", name: "小高", pid:"03", job: "UI设计师"},
  {id:"10", name: "小刘", pid:"04", job: "前端工程师"},
  {id:"11", name: "小华", pid:"04", job: "后端工程师"},
  {id:"12", name: "小李", pid:"04", job: "后端工程师"},
  {id:"13", name: "小赵", pid:"05", job: "测试工程师"},
  {id:"14", name: "小强", pid:"05", job: "测试工程师"},
  {id:"15", name: "小涛", pid:"06", job: "运维工程师"}
]

// 问题1. 找出 与 小刘 处于统一领导下的同事 
function f(data, name){
  // 先用findIndex找到小刘的下标,再使用filter进行筛选
  const index = data.findIndex(item => {
    return item.name === name
  })
  const newArr = data.filter(item => {
    return item.pid === data[index].pid
  })
  return newArr
}
const arr = f(data, '小刘')
console.log(arr) 
//  [{id:"10", name: "小刘", pid:"04", job: "前端工程师"},
//  {id:"11", name: "小华", pid:"04", job: "后端工程师"},
//  {id:"12", name: "小李", pid:"04", job: "后端工程师"}]

// 问题2. 找出 小亮 的所有下属 
function f2(data, name){
  //  先用findIndex找到小亮的下标,再使用filter进行筛选
  const index = data.findIndex(item => item.name === name)
  const newArr = data.filter(item => item.pid === data[index].id)
  return newArr
}
const qbz = f2(data, '小亮')
console.log(qbz)  
// // [{id:"07", name: "小丽", pid:"02", job: "产品经理"},
// // {id:"08", name: "大光", pid:"02", job: "产品经理"}]

4.对象Object的静态方法values

const obj = {label:'男',value: 1,age: 18}
 
function f(obj) {
  // Object的静态方法values返回对象的属性值
  return Object.values(obj)
}
const arr = f(obj);
console.log(arr)
// arr = ['男', '1', '18'] // 所有的属性值取出来，保存在数组中