前端模拟列表的数组数据进行筛选

 这个方法支持模糊搜索

const list = [{name: 'zs', age: 18}, {name: 'ls', age: 16}];
const filterArray = (arrayList, form) => {
  return arrayList.filter(item => {
    return Object.entries(form).every(([key, val]) => {
      const itemValue = String(item[key]);
      //当选项是全部的时候,直接通过
      if (val === '全部') return true;
      return itemValue.includes(val);
    });
  });
};

const obj = {name: 'ls', age: 16}
console.log(filterArray(list, obj), 'list')

 filter() 方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

 Object.entries() 静态方法返回一个数组,包含给定对象自有的可枚举字符串键属性的键值对。

const object1 = {
  a: 'somestring',
  b: 42
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// Expected output:
// "a: somestring"
// "b: 42"

 every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// Expected output: true

includes() 方法执行区分大小写的搜索,以确定是否可以在另一个字符串中找到一个字符串,并根据情况返回 true 或 false

const sentence = 'The quick brown fox jumps over the lazy dog.';

const word = 'fox';

console.log(`The word "${word}" ${sentence.includes(word) ? 'is' : 'is not'} in the sentence`);
// Expected output: "The word "fox" is in the sentence"

方法解释例子来源于mdn:MDN Web Docs

你可能感兴趣的:(前端例子,前端技巧,前端)