前端必会数组操作方法案例

一获取对象数组的值:(绑定键值对)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const arr = [{label:'男',value: 1}, {label:'女',value: 0}]
//  const arr1=(.
 function f(arr) {
   // 写代码，得到
   let obj1 = arr.map((item) => {
        return Object.assign({}, { value: item.value, label: item.label})
      })  
 }
 let obj = f(arr);
 console.log(obj)
 // obj = {'1': '男'， '0': '女'}
  </script>
</body>
</html>

二: 获取数组对象中某一属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script> 
    var arr = [{label:'男',value: 1}, {label:'女',value: 0}]
  
 function f(arr) {
   // 写代码，得到
   const obj=[]
   arr.forEach(item => {
   obj.push(item.label)
  })
  return obj
 }
 var arr2 = f(arr);
 console.log(arr2)
 // arr2 = ['男', '女']
   </script>
</body>
</html>

三条件操作数组对象

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

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

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){
    // 完成代码
    //找到小刘的下标 index
    const index = data.findIndex(item => item.name === name)
    // 找到与小刘pid相同的pid
    const newArr = data.filter(item => {
        return item.pid === data[index].pid
    })
    return newArr
  }
  const arr1 = f(data, '小刘')
  console.log(arr1) // 
  //  [{id:"10", name: "小刘", pid:"04", job: "前端工程师"},
  //  {id:"11", name: "小华", pid:"04", job: "后端工程师"},
  //  {id:"12", name: "小李", pid:"04", job: "后端工程师"}]
  
  
  // 问题2. 找出 小亮 的所有下属 
  function f2(data, name){
    // 完成代码
    //找到小亮的下标 index
    const index = data.findIndex(item => item.name === name)

    const newArr = data.filter(item => {
        //通过小亮的下标 找到他的id  和与之对应的pid
        return item.pid === data[index].id
    })
    return newArr
  }
  const arr3 = f2(data, '小亮')
  console.log(arr3) // 
  // [{id:"07", name: "小丽", pid:"02", job: "产品经理"},
  // {id:"08", name: "大光", pid:"02", job: "产品经理"}]

四将对象的属性值添加到新数组中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var obj = {label:'男',value: 1,age: 18}
 
 function f(obj) {
   // 写代码，得到
return Object.values(obj)
 }
 var arr = f(obj);
 console.log(arr)
 // arr = ['男', '1', '18'] // 所有的属性值取出来，保存在数组中
  </script>
</body>
</html>

附加题:

项目在加载首页时,载入的各个组件依赖关系网

前端必会数组操作方法案例

附加题:

猜你喜欢