es6数组用法总结

1. find(callback) find查询出第一个符合条件的结果就会返回，返回是一个对象

1.基本查询
    const arrmock=[{name:'1',age:2},{name:'2'},{name:'1',age:'3'}]
    const findname=arrmock.find(o=>o.name==='1')
    console.log(findname); // { name: '1', age: 2 } 查询出第一个符合条件不在往后查询
2.嵌套查询，查询某一个子元素对应的父元素的值（已知某个子元素中的key值，查询父元素，再取出父元素key值）

const menuSlioder = [
  {
    key: '123123123',
    title: '账户管理',
    children: [
      {
        key: 'abcd',
        title: '钱包账户',
      },
    ],
  },
  {
    key: 'sfwfsdf',
    title: '账户管理',
    children: [
      {
        key: 'abc',
        title: '钱包账户',
      },
      {
        key: 'abcde',
        title: '账户流水明细',
      },
    ],
  },
];

const as = menuSlioder.find((item) => {
  return Boolean(item.children.find((o) => o.key === 'abcd'));
});
// 等价于  some的用法依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture，否则返回false
// const as = menuSlioder.find((item) => {
//   return item.children.some((o) => o.key === 'abcd');
// });
console.log(as); 
// {
//   key: '123123123',
//   title: '账户管理',
//   children: [
//     {
//       key: 'abcd',
//       title: '钱包账户',
//     },
//   ],
// }

2.filter(callback) 过滤数组，返回一个满足要求的数组，callback是一个条件语句

1.基本用法
const users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false },
  { 'user': 'ared',   'age': 24, 'active': false },
  { 'user': 'ered',   'age': 80, 'active': false },
  { 'abc': 'ered',   'age': 80, 'active': false }
]
// 筛选 age等于40或者age等于24的 数组对象
const filtered = users.filter(n => n.age===40 || n.age===24)
console.log('filter后的键名', filtered)   // => [{user: "fred", age: 40, active: false}，{user: "ared", age: 24, active: false}]
const  ac=users.filter(n => n.age===100)
console.log(ac);  // []

2.数组中的空字符串删除
const spread = ['A', '', 'B', null, undefined, 'C', '  ']
const filtered = spread.filter((item) => {
  return item && item.trim()
})
console.log('数组中的空字符串删掉', filtered) // => ["A", "B", "C"]

3.filter+map写法用于剔除某些元素的骚操作
const arr = [
  {
    gender: 'man',
    name: 'john',
  },
  {
    gender: 'woman',
    name: 'mark',
  },
  {
    gender: 'man',
    name: 'jerry',
  },
];
// filter : 有条件的筛选，返回条件为true的数组
// 筛选出性别为男性的名字集合
const newArr = arr
  .filter((n) => n.gender === 'man')
  .map((item) => {
    return {
      name: item.name,
    };
  });
console.log('男性名字集合', newArr); // => [{name: 'john'}, {name: 'jerry'}]

4.在案例find中使用filter
const as = menuSlioder.filter((pro) => pro.children.some((o) => o.key === 'abcde'))
// => [ { key: 'sfwfsdf', title: '账户管理', children: [ [Object], [Object] ] } ]
menuSlioder.filter((pro) => pro.children.some((o) => o.key === 'abcde')).map((item)=>console.log(item))
// {
//   key: 'sfwfsdf',
//   title: '账户管理',
//   children: [ { key: 'abc', title: '钱包账户' }, { key: 'abcde', title: '账户流水明细' } ]
// }

最后编辑于：2020.08.21 10:47:29