개요

본고에서 소개한 모든 방법은 매우 강력하다. 왜냐하면 그들은 우리가 더 적은 코드를 작성하고 더 많이 할 수 있기 때문이다.
우리가'진실'데이터 집합을 처리하기 시작했을 때, 특히 그렇다. 보통 대상 문자의 그룹이다.

부하 초강대국

앞의 세 항목은 특정 임무에 유용하다.하면, 만약, 만약...🦸🏽‍♂️ 예를 들면, 만약 네가 원한다면, 이 사람들은 아마도 견습생일 것이다.

발견하다

사용find.그룹 중 일부 진/가짜 조건을 충족시키는 첫 번째 요소를 찾아서 되돌려줍니다.

const todos = [
  {
    "id": 1,
    "text": "Take out the trash",
    "completed": false
  },
  {
    "id": 2,
    "text": "Shop at Fresh Thyme",
    "completed": false
  },
  {
    "id": 3,
    "text": "Call Mom",
    "completed": true
  },
  {
    "id": 4,
    "text": "Mow lawn",
    "completed": true
  },
  {
    "id": 5,
    "text": "Litter Boxes Cleanup",
    "completed": false,
    "assignee": "Mary"
  }
]

// Find the first 'completed' task
todos.find(function(todo) {
  return todo.completed
})

"일방행"굵은 화살표로 다시 쓸 수 있습니다. todos.find(todo => todo.completed)이것🔑 이 점을 이해하려면 술어 리셋 함수를 사용해야 한다. (todo=>todo.completed).
술어 리셋 함수는 return 대true 또는 false에 대한 강제적인 리셋을 바탕으로 한다.
다시 말하면

교체todos, 매번'대처 사항'을 전달한다.

한번 봅시다.👀 attodo.completed.true이면 return 이거todo.만약 없다면 계속 전진해라.

find 첫 번째 일치를 찾으면 교체를 멈추고 이 그룹에서 원소를 되돌려줍니다(_술어 조건을 충족하는 원소가 있다면)_

재구성♻️ 분해하다

todos.find(({completed}) => completed) 🤓

약간

find와 유사한 방식으로 사용👆🏽, 그러나 여기서 수조 중 적어도 하나의 원소가 술어 조건을 충족시키면 우리는 true 또는 false 으로 돌아간다.
따라서 상술한 것과 같은 데이터 집합을 지정한다👆🏽: todos.some(({completed}=>완료will just give us backtrue`적어도 일부 임무가 완성되었기 때문에✅.find와 유사하게 "truthy"요소를 찾으면 교체를 멈춘다.

하나하나

some와 같지만 수조의 모든 원소가 술어를 만족시킬 수 있도록 확보한다."fasle-y"요소를 찾을 때까지 이 요소는 계속 교체됩니다.
마찬가지로 이 데이터 집합을 지정합니다👆🏽, todos.every(({completed} = > 완료됨 returns false "작업마다 완료된 것은 아닙니다"✅.

'메인 리스트'초강대국

이어서 이 파트너는 빈번하게 사용되었다. 그들은 주력 초강대국으로 많은 일을 완성했다.
그것들은 항상 새로운 그룹으로 되돌아온다.

지도.

우리는 그것을 사용하여 모든 요소에 대해 어떤 유형의'전환'을 실행한다.
모든 요소는 리셋 함수에 전달됩니다.이 함수는 모든 요소에 대해 한 번에 하나씩 새로운 그룹을 만드는 작업을 수행합니다.
간단한 숫자 그룹에서'매핑'을 시작해서 그것을 배로 해서 모든 숫자를 바꾸자.이 예는 MDN 에서 발췌한 것이다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

array1 및 map1 은 완전히 독립된 어레이입니다.array1 돌변은 전혀 없다!👏🏽
이제 위의 todos 데이터로 하나 만들어 봅시다.👆🏽. 이번에 우리는 모든 임무를 완성할 것이다.

todos.map(todo => {
  todo.completed = true;
  return todo;
})

이것은 모든 요소가 가지고 있는 새 그룹을 만들 것입니다. completed: true.
그러나 만약 우리가 원시 todos 를 검사한다면, 우리는 이 모든'대처 사항'도 이미'완성'되었다는 것을 보게 될 것이다.👎🏽
이것은 JS가 객체를 처리하는 방식 때문입니다.실제로 메모리의 인용🧠 공유입니다.
'복제/값 및 인용'에 대한 상세한 정보는 다른 날의 주제이지만, React는'돌연변이 없음'에 심각하게 의존하기 때문에, 우리는 적어도 이 문제를 복구하는 코드를 보아야 한다.completed을(를) true로 업데이트하기 전에, 우리는 대상 확장 조작자를 사용하여 새로운 대상의'새 인용'을 만들 것입니다.

todos.map(todo => {
  const currentTodo = {...todo}
  currentTodo.completed = true;
  return currentTodo;
})

필요한 경우 ... 추가 정보:

객체 할당 및 확산

마나프 미스라・ 20년10월28일・ 2분 읽기

#react #beginners #javascript

현재 원시 그룹과 그 중의 모든 대상은 변이가 없습니다. 우리는'완성된'데이터를 포함하는 새로운 그룹이 있습니다.🤓
⚠️ map 를 사용하여 객체 분해를 시도할 수 있습니다.이것은 통상적으로 취할 수 없는 것이다. 왜냐하면 일단 분해를 집행하면 그것들을 되돌릴 수밖에 없기 때문이다🔑니가 파괴했어.
예:🙅🏽‍♂️:

todos.map(({completed}) => {
  completed = true;
  return completed;
})

돌려줄 거예요: [ true, true, true, true, true ].따라서 통상적으로 매핑할 때 대상 구조를 파괴하지 말아야 한다.
또 다른 흔히 볼 수 있는 오류는'매핑 리셋'에서 일부 내용을 명확하게 되돌려 주는 것을 잊어버리면이로 인해 맵 그룹에 가득 차게 됩니다 undefined.

todos.map(todo => {
  const currentTodo = {...todo}
  currentTodo.completed = true;
  // No return? Returning undefined!
})

필터

이 함수의 작업 원리는 술어 리셋 함수를 사용하기 때문에 find 과 거의 같다.그러나 단일 원소만 되돌아오는 것이 아니라 filter 전체 수조를 훑어보며'truth-y'원소를'필터'를'새로운 수조'로 계속
숫자 그룹에서 모든 짝수 (2로 나눌 수 있고 남은 숫자가 없는 숫자) 를 필터링합니다.

const nums = [1, 4, 9, 16]

const evens = nums.filter(num => !(num % 2))

마찬가지로 우리는 술어 리셋 함수에 의존한다: num => !(num % 2)

우리는 각각'num'

을 전송한다

'가짜 y'인가요?(즉, 나머지가 0입니까?)

일원 역산자 추가: num % 2 "truthy", ! 우리의 필터 그룹으로 만들기

마찬가지로 returnfilter 리셋 함수returnsreturn가 있으면 원소 s를 새 그룹으로 이동합니다.
이런 상황에서 우리는 "이 숫자를 2로 나누면 나머지는'false-y'/0입니다. 이것이 사실입니까?"라고 묻는다.
이제 이전true 및 find 완료된 작업을 수정합시다. filter.
코드 한 줄만 있으면 우리는 임무를 완성할 수 있다.우리는 todos.filter(({completed} => completed)에 모든 원시 데이터를 가지고 있으며, 우리는 단독의 필터 그룹을 가지고 있으며, 그 중에서 "완성된"임무만 있다.👏🏽

대기사항 - 지도⛓️

이런 초강대국들은 연합할 수 있다.이번: filter위 항목 다시 사용: //TODO: Filter out all 'incomplete' tasks and then assign those to 'Mary.'👆🏽:

todos.filter(({completed}) => 

// Return if it's NOT completed
!completed).

// Continue the chain by mapping over the 'incomplete tasks'
map(todo => {
  const currentTodo = {...todo};
  currentTodo.assignee = "Mary";
  return currentTodo;
})

결과:

[
  {
    id: 1,
    text: 'Take out the trash',
    completed: false,
    assignee: 'Mary'
  },
  {
    id: 2,
    text: 'Shop at Fresh Thyme',
    completed: false,
    assignee: 'Mary'
  },
  {
    id: 5,
    text: 'Litter Boxes Cleanup',
    completed: false,
    assignee: 'Mary'
  }
]

"지도자"👑 초강대국을 진열하다🦸🏽‍♂️

todos 모든 기능 중 가장 강력한 원인 중 하나는 b/c이다. 기술적으로 말하자면 어떤 것도 완성할 수 있다👆🏽. 이것은 바로 올바른 일을 위해 정확한 도구를 사용할 수 있다는 것이다. - 당신은 b/c만 사용할 수 있다. (실제로 이것은 매우 도전적이다.) 이것은 당신이 이렇게 해야 한다는 것을 의미하지 않는다.
사용reduce...스토리지를 "누적된 제품"으로 축소
차이점 중 하나는 reduce 콜백 함수에 두 개의 매개 변수가 필요하다는 것이다.

추적용 누적 장치🏃🏽‍♂️ 총계

추적을 위한 현재 요소반복 시간 그룹의 현재 요소입니다.

간단하게 보기 위해서, 우리는 가장 기본적인 예시부터 배열의 숫자를 추가한다.

const nums = [1, 2, 3, 4];

const total = nums.reduce((
  // 'total' is initialized with the value of the first element -'1'
  total, 

// 'num' initializes as the 2nd element's value - '2'
num) => {
  // Add 'total' to 
  total += num;
  return total;
})

우리가 할 수 있는 일은 아직 많다reduce.이 예는 표면에만 닿는다.다음 글에서 우리는 reduce, map, filter, reduce으로 더욱 실용적인/중간 일을 할 것이다.