js练习题 - 《vue》

const arr = [{label: '男', value: 0},{label: '女', value: 1}]
function f(arr) {
// 写代码
// reduce
}
const obj = f(arr) // obj ===> {0: '男', 1:'女'}

答案:

const arr = [{label: '男', value: 0},{label: '女', value: 1}]
function f(arr) {
const obj = {}
arr.forEach(item => { obj[item.value] = item.label})
return obj
}
const obj = f(arr)
console.log(obj)

用数组方法 reduce（）方法 ```jsx const arr = [{label: ‘男’, value: 0},{label: ‘女’, value: 1}] function f(arr){ const obj = arr.reduce((acc,item) => { acc[item.value] = item.label return acc },{}) return obj } const obj = f(arr) console.log(obj)

//优化写法 function f(arr){ const obj = arr.reduce((acc,item) => ({…acc,[item.value]:item.label}),{}) return obj } const obj = f(arr) console.log(obj)


2.  
```jsx
const obj = { 0: '男', 1:'女'}
function f(obj) {
  // 写代码
}
const arr = f(obj) // arr ===>  [{label: '男', value: 0},{label: '女', value: 1}]

答案

const obj = { 0: '男', 1:'女'}
const arr = []
Object.keys(obj).forEach(item => {
  arr.push({label:obj[item],value:item})
})
console.log(arr)

用map方法

const obj = { 0: '男', 1:'女'}
const arr = Object.keys(obj).map(item =>{
  return {
    lable: obj[item],
      value: item
  }
})
console.log(arr)
//优化写法
    // 使用箭头函数省略return 必须用小括号包上，否则箭头函数会以为内容是一个函数
const arr = Object.keys(obj).map(item => ({
  lable: obj[item],
  value: item
}))
console.log(arr)

```jsx var 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){ // 完成代码 } 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){ // 完成代码

} const arr = f2(data, ‘小亮’) console.log(arr) // // [{id:”07”, name: “小丽”, pid:”02”, job: “产品经理”}, // {id:”08”, name: “大光”, pid:”02”, job: “产品经理”}]

    问题一
```jsx
// 找出与 小刘 处于统一领导下的同事 
function f(data, name){
  //获取小刘的pid
  const arr = data.find(item => item.name === name).id
  // 根据小刘的pid值来判断获取他的同事
  return data.filter(item=> item.pid === arr)
}
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: "后端工程师"}]

问题二

function f(data, name) {
   return data.filter(
        item => item.pid === data.find(item => item.name === name).id
 )
 }
 const arr = f(data, '小亮')
 console.log(arr) 
 // [{id:"07", name: "小丽", pid:"02", job: "产品经理"},
 // {id:"08", name: "大光", pid:"02", job: "产品经理"}]

数组转树


  const arr = []
  // 1.对data第一轮循环：
  //  1）给每一次list中的对象补充 children属性，直接赋值空数组
  //  2）建立一个字典（方便后期做查询），{属性名是id:值就是对象}
  const map = {}
  data.forEach(item => {
    item.children = []
    map[item.id] = item
  })
  // 2.对data第二轮循环
  //  根据 pid 找父子关系
  data.forEach(item => {
    // 对于当前的元素，如果它的pid对应的元素存在，说明它是下属，进入 children
    // 对于当前的元素，如果它的pid对应的元素不存在，说明它不是下属，是顶级元素，进入 arr
    const father = map[item.pid]
    if (father) {
      father.children.push(item) // item是father 下级
    } else { // 找不到上级，说明item就是顶级元素
      arr.push(item)
    }
  })
  return arr

```jsx var obj = {label:’男’,value: 1,age: 18}

function f(obj) { // 写代码，得到 } var arr = f(obj); console.log(arr) // arr = [‘男’, ‘1’, ‘18’] // 所有的属性值取出来，保存在数组中

答案
```jsx
var obj = {label:'男',value: 1,age: 18} 
var arr = []
for (let i in obj) {
    arr.push(obj[i]); 
}
console.log(arr);