JS 는 간단 한 것 부터 다 중 조건 까지 그룹 필터 링 을 실현 합 니 다.

상기 회사 에서 일 할 때 한 가지 수 요 는 전단 부분 에서 선별 기능 을 완성 하고 한 번 에 모든 데 이 터 를 얻 은 다음 에 조건 에 따라 선별 하 는 것 이다.일반적인 상황 에서 선별 은 백 엔 드 가 인 터 페 이 스 를 주 는 것 으로 데이터 양 이 많 지 않 은 상황 에서 도 전단 선별 과 같은 상황 에 부 딪 힐 수 있 습 니 다.특히 이 글 을 써 서 여러분 에 게 공유 하 였 습 니 다.문제 가 있 으 면 지적 하고 서로 공부 하 세 요.
일반적인 상황 에서 단일 조건 으로 선별 하면 배열 의 filter 방법 은 수 요 를 만족 시 킬 수 있 습 니 다.본 고 는 여러 조건 에서 의 복합 선별 에 중심 을 두 고 관련 지식 을 제시 하 는 데 중심 을 두 었 습 니 다.
다음은 여러 개.🌰🌰🌰🌰

//             
var aim = [
    {name:'Anne', age: 23, gender:'female'},
    {name:'Leila', age: 16, gender:'female'},
    {name:'Jay', age: 19, gender:'male'},
    {name:'Mark', age: 40, gender:'male'}
]

단일 조건 단일 데이터 선별
하나의 이름 에 따라 필터 방법 으로 name 이 대상 이름 인지 아 닌 지 를 판단 하면 됩 니 다.

//         
function filterByName(aim, name) {
    return aim.filter(item => item.name == name)
}
//    aim 'Leila'       [{name:'Leila', age: 16, gender:'female'}]
console.log(filterByName(aim,'leila'))

단일 조건 다 중 데이터 선별
여러 이름 에 따라 대상 배열 을 for 순환 으로 옮 겨 다 니 며 find 방법 으로 찾 은 후 push 를 결과 배열 에 넣 고 find 방법 으로 이름 을 바 꾸 는 경우 에 도 원 하 는 결 과 를 얻 을 수 있 습 니 다.for 순환 은 배열 의 일부 옮 겨 다 니 는 방법 으로 대체 할 수 있 습 니 다.코드 는 더욱 간소화 할 수 있 습 니 다.예 를 들 어 대충 의 미 를 표현 하 는 것 입 니 다.

//         
function filterByName1(aim, nameArr) {
    let result = []
    for(let i = 0; i < nameArr.length; i++) {
        result.push(aim.find(item => item.name = nameArr[i]))
    }
    return result
}
//    aim ['Anne','Jay'] 
//      [{name:'Anne', age: 23, gender:'female'},{name:'Jay', age: 19, gender:'male'}]
console.log(filterByName1(aim,['Leila','Jay']))
//  BUG    

다 중 조건 부 단일 데이터 선별
단일 이름 이나 단일 연령 에 따라 필터 방법 으로 조건 간 의 예 또는 관 계 를 판단 합 니 다.

//           
function filterByName2(aim, name, age) {
    return aim.filter(item => item.name == name || item.age == age)
}
console.log(filterByName2(aim,'Leila',19))

다 중 조건 다 중 데이터 선별
나 는 처음에 매우 멍청 한 쌍 for 순환 으로 했 는데 매우 느 리 고 기대 하 는 효과 에 이 르 지 못 했다.구체 적 인 심리 과정 이 너무 멀 어서 다음 과 같은 선별 알고리즘 을 간단하게 소개 합 니 다.
우선 선택 조건 을 한 대상 에 넣 고 object 대상 의 keys 방법 으로 선택 한 조건 명 을 얻 고 선택 해 야 할 조건 은 무엇 입 니까?name 입 니까?age? gender?
그리고 filter 방법 으로 대상 데 이 터 를 선별 합 니 다.🌰아래 와 같다⬇️
이름과 나이 에 따라 다 원소 선별

//            
export function multiFilter(array, filters) {
  const filterKeys = Object.keys(filters)
  // filters all elements passing the criteria
  return array.filter((item) => {
    // dynamically validate all filter criteria
    return filterKeys.every(key => {
        //ignore when the filter is empty Anne
      if(!filters[key].length) return true
      return !!~filters[key].indexOf(item[key])
    })
  })
}
/*
 *          ，               
 *    ：@author https://gist.github.com/jherax
 *            ，                     
 */

var filters = {
    name:['Leila', 'Jay'],
    age:[]
}
/*   ：
 * [{name: "Leila", age: 16, gender: "female"},
 *  {name: "Jay", age: 19, gender: "male"}]
 */

예 를 들 어 모든 데이터 의 name 값 이 filers.name 배열 에 있 는 지 판단 합 니 다.예 를 들 어 true 로 돌아 갑 니 다.filers.age 가 빈 배열 이 라 고 판단 하면 true 로 돌아 갑 니 다.빈 배열 은 age 조건 이 비 어 있 는 상황 을 모 의 한 것 입 니 다.우 리 는 정확 한 선별 데 이 터 를 얻 을 수 있 습 니 다.
지식 포인트 1:Object.key()배열 색인 또는 대상 속성 가 져 오기

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); 
// ["0", "1", "2"]


var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); 
// ["0", "1", "2"]


var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); 
// ["2", "7", "100"]     ？

지식 포인트 2:js 의 falsy
falsy : 0 , false, "", null, undefined, NaN
판단 문 에서 위의 6 가지 상황 만 false 이 고 나머지 는 모두 true 이다.

var a;
if(a!=null&&typeof(a)!=undefined&&a!=''){
    //a           
}

if(!!a){
    //a         ...  
}

지식 포인트 3:Array.every 와 Array.some 의 차이
나의 이 해 는 배열 을 옮 겨 다 닐 때 이다.
4.567917.Array.every 의 조건 은'와'의 관계 이 고 전체 진실 이 며 조건 이 모두 true 이면 true 이 고 false 가 있 으 면 false 로 돌아 갑 니 다

Array.some 의 조건 은'또는'의 관계 이 고 진실 이 있 으 면 조건 이 true 가 있 으 면 true 로 돌아 가 고 조건 이 모두 false 일 때 만 false 로 돌아 갑 니 다

아래🌰

//         Anne?
let dataEvery = aim.every(item => item.name === 'Anne') // false
let dataEvery = aim.some(item => item.name === 'Anne') // true

//            ？
let dataEvery = aim.every(item => typeof item.name === 'string') // true
let dataEvery = aim.some(item => typeof item.name === 'string') // true

지식 포인트 4:배열 의 깊 은 복사 와 얕 은 복사
최근 에 전단 면접 에 참 여 했 는데 깊 은 복사 와 얕 은 복사 가 제 가 가장 즐겨 묻 는 질문 중 하나 입 니 다.한 가지 문 제 는 데이터 유형,배열 조작,재 귀 알고리즘 등 을 고찰 했다.
배열 은 js 의 인용 유형 이기 때문에 단순 복사 할 때 인용 관 계 를 복사 합 니 다.가 져 온 데 이 터 를 선별 할 때 저 는 원시 데이터 에 영향 을 주 고 싶 지 않 습 니 다.그래서 저 는'딥 복사'를 사용 하여 원시 데이터 구조 와 똑 같 고 서로 독립 된 데 이 터 를 얻 으 려 고 합 니 다.인용 관계 만 복사 하 는 것 이 아 닙 니 다.

//      ，      ，   
let obj1 = JSON.parse(JSON.stringify(obj))

// deepclone
function deepClone(o1, o2) {
    for (let k in o2) {
        if (typeof o2[k] === 'object') {
            o1[k] = {};
            deepClone(o1[k], o2[k]);
        } else {
            o1[k] = o2[k];
        }
    }
}

생각해 보 니 재 귀 알고리즘 최적화
이 지식 점 은 본문 과 관계 가 크 지 않다.😄 죄송합니다.
이것 은 금 소 책 전단 면접 안내 서 를 보고 알고리즘 을 말 할 때 재 귀 알고리즘 의 최적화 를 제 시 했 고 처음 만 났 을 때 놀 라 서 프로젝트 에 사용 되 지 않 았 습 니 다.관심 있 는 것 은 해 보 세 요.이것 은 피 보 나치 수열 과.브 라 우 저 에서 직접 두 드 려 보 세 요.캐 시 를 사용 하지 않 는 것 과 캐 시 를 사용 하 는 연산 횟수 의 차 이 를 시험 해 보 세 요.

let count = 0;
function fn(n) {
    let cache = {};
    function _fn(n) {
        if (cache[n]) {
            return cache[n];
        }
        count++;
        if (n == 1 || n == 2) {
            return 1;
        }
        let prev = _fn(n - 1);
        cache[n - 1] = prev;
        let next = _fn(n - 2);
        cache[n - 2] = next;
        return prev + next;
    }
    return _fn(n);
}

let count2 = 0;
function fn2(n) {
    count2++;
    if (n == 1 || n == 2) {
        return 1;
    }
    return fn2(n - 1) + fn2(n - 2);
}

JS 구현 배열 필터 에 관 한 간단 한 것 부터 여러 조건 으로 선별 한 글 까지 소개 합 니 다.더 많은 JS 배열 필터 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!