VIP20/11_ES6/day-2/code/3.js

//! filter方法：过滤器
// 对原数组进行拷贝，同时保留满足回调函数中条件的那些值。
//  因此，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"]
console.log(words);

// filter示例
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

const iptEle = document.getElementById('fruit');
const dataListEle = document.getElementById('fruit-choose');

// 当text-input的值改变时 会触发input事件
iptEle.addEventListener('input', function () {
  let iptVal = iptEle.value; // 获取当前输入框的值
  let chooseFruits = fruits.filter((f) => f.includes(iptVal));
  // 每一次添加option的时候 记得清空上次结果
  dataListEle.innerHTML = '';
  chooseFruits.forEach((f) => {
    // 然后再创建新的option标签，并添加给datalist
    // 下面代码有性能问题？回流 与 重绘
    // 尽量避免在循环中动态的一个一个的向页面中添加元素，因为会频繁引起回流，引起性能问题
    let optionEle = document.createElement('option');
    optionEle.value = f;
    dataListEle.append(optionEle);
  });
});