Skip to content

Instantly share code, notes, and snippets.

@daybrush
Created July 8, 2019 08:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save daybrush/0c47fb3895a13ecad68041ccb440e231 to your computer and use it in GitHub Desktop.
Save daybrush/0c47fb3895a13ecad68041ccb440e231 to your computer and use it in GitHub Desktop.
added, removed, changed, maintained
import ListDiffer from "@egjs/list-differ";
const listDiffer = new ListDiffer([1, 2, 3, 4, 5, 6, 7], v => v);
const result = listDiffer.update([4, 3, 8, 2, 1, 7]);
// [2]
console.log(result.added);
// [5, 4]
console.log(result.removed);
// [[3, 0], [2, 1], [1, 3], [0, 4], [6, 5]]
console.log(result.changed);
// [[3, 0], [2, 1], [1, 3], [0, 4], [6, 5]]
console.log(result.maintained);
@shine784
Copy link

안녕하세요
예제 log가 맞나요?

added가 : 8
removed가 5,6
maintained는: 없음

으로 판단되는데 제가 잘못생각하는건가요?

@daybrush
Copy link
Author

daybrush commented Oct 30, 2019

@shine784

안녕하세요. 결과값으로 얻을 수 있는건 해당 데이터가 들어가 있는 인덱스의 배열입니다.

그렇기 때문에 added는 8에 해당한 인덱스 2가 되고
removed는 이전 배열에서 6과 5가 삭제 됐으니 그에 해당한 인덱스 5와 4가 됩니다.
배열이 역순인 이유는 정방향으로 삭제될 때 마다 인덱스가 앞으로 당겨지기 때문입니다.

maintained는 이전 배열과 다음 배열에서 같은 값이 존재하는 경우에 나타납니다.
4, 3, 2, 1, 7번이 존재하기 때문에 이전 인덱스와 이후 인덱스를 배열로 나타내면 [[3, 0], [2, 1], [1, 3], [0, 4], [6, 5]] 다음과 같아집니다.

changed는 이전 배열과 다음 배열에서 같은 값이 다른 인덱스를 가지고 있는 경우에 나타납니다.

감사합니다 :) ㅎㅎㅎ

@shine784
Copy link

shine784 commented Oct 30, 2019

아 그렇군요! 제가 잘못생각했습니다.
index값만 나타내는걸 순간 data값으로 착각했네요 답변감사합니다.

생각해보니 index를 가지고 다루는게맞네요.
index값이 와면 DOM을 동기화시킬때 편리하니 그게맞네요..
추가된 8에 해당하는 DOM을 생성해서 끼워넣을때 index 2값이 의미가있으니까요

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment