<span>// transient list </span>a <span>= [1, 2, 3]; </span>b <span>= a.push(4); </span><span>// a = [1, 2, 3, 4] </span><span>// b = [1, 2, 3, 4] </span> <span>// persistent list </span>c <span>= #[1, 2, 3] </span>d <span>= c.push(4); </span><span>// c = #[1, 2, 3] </span><span>// d = #[1, 2, 3, 4] </span>
Mori는 무엇입니까?
코드를 실행하거나 deleteperson ()의 정의를 읽지 않고 알 수있는 방법이 없습니다. 빈 배열 일 수 있습니다. 세 가지 새로운 속성이있을 수 있습니다. 우리는 그것이 두 번째 요소가 제거 된 배열이기를 바랍니다. 그러나 우리는 변이 가능한 데이터 구조를 통과했기 때문에 보증은 없습니다. <p>.
<the> 더 나쁘게도, 함수는 참조를 유지하고 미래에 비동기 적으로 돌연변이 할 수 있습니다. 여기서부터 교제에 대한 모든 언급은 예측할 수없는 가치로 일할 것입니다. </the></p>.
<an> 이것을 Mori와의 대안과 비교하십시오<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>// transient list
</span>a <span>= [1, 2, 3];
</span>b <span>= a.push(4);
</span><span>// a = [1, 2, 3, 4]
</span><span>// b = [1, 2, 3, 4]
</span>
<span>// persistent list
</span>c <span>= #[1, 2, 3]
</span>d <span>= c.push(4);
</span><span>// c = #[1, 2, 3]
</span><span>// d = #[1, 2, 3, 4]
</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<the> deleteperson ()의 구현에 관계없이, 우리는 단순히 돌연변이 될 수 없다는 보장이 있기 때문에 원래 벡터가 기록 될 것임을 알고 있습니다. 기능이 유용하기를 원한다면 지정된 항목을 제거한 새 벡터를 반환해야합니다.
<fun> 불변의 데이터에서 작동하는 기능을 통한 흐름을 이해하는 것은 쉽습니다. 우리는 그들의 유일한 효과가 뚜렷한 불변의 가치를 도출하고 반환하는 것임을 알고 있기 때문입니다. <p>.
</p> <p>
<oper> 변이 가능한 데이터에서 작동하는 기능은 항상 값을 반환하지는 않으며, 입력을 돌연변이 할 수 있으며 때로는 프로그래머에게 다른 쪽에서 값을 다시 선택할 수 있습니다. </oper></p>.
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173983885328364.png" class="lazy" alt="Mori와의 불변 데이터 및 기능적 JavaScript" >
더 간단히 말해서, 불변의 데이터는 예측 가능성의 배양을 시행합니다
</p> 실제로
<to> 우리는 Mori를 사용하여 UNDO 기능을 갖춘 픽셀 편집기를 구축하는 방법을 살펴볼 것입니다. 다음 코드는 기사의 기슭에서도 찾을 수있는 코드펜으로 제공됩니다.
<p> </p>
<p> 코드 펜을 따라 가거나 Mori와 다음 HTML을 사용하여 ES2015 환경에서 일하고 있다고 가정합니다.
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173983885426282.png" class="lazy" alt="Mori와의 불변 데이터 및 기능적 JavaScript" >
<ut> 설정 및 유틸리티
<started> Mori 네임 스페이스에서 필요한 기능을 파괴하여 시작합시다.
</started></ut></p>
<ly> 이것은 대부분 스타일 선호도입니다. Mori 객체 (예 : mori.list ())에서 직접 액세스하여 Mori의 기능을 사용할 수도 있습니다.
<we> 가장 먼저해야 할 일은 지속적인 데이터 구조를 볼 수있는 도우미 기능을 설정하는 것입니다. 콘솔에서 Mori의 내부 표현은 의미가 없으므로 TOJS () 함수를 사용하여 이해할 수있는 형식으로 변환합니다.
<p>
<this> 우리는 Mori의 데이터 구조를 검사해야 할 때 Console.log ()의 대안 으로이 기능을 사용할 수 있습니다.
<set> 다음으로 구성 값과 유틸리티 함수를 설정합니다. </set></this></p>
<h2>
<not> 우리의 to2d () 함수가 벡터를 반환한다는 것을 알았습니다. 벡터는 JavaScript 어레이와 비슷하며 효율적인 임의의 액세스를 지원합니다.
데이터 구조 데이터
<our> 우리는 to2d () 함수를 사용하여 캔버스의 모든 픽셀을 나타내는 일련의 좌표를 만듭니다.
</our></not>
</h2>
<range> 우리는 범위 () 함수를 사용하여 0과 높이 * 너비 사이의 숫자 시퀀스를 생성하고 (우리의 경우 100) map ()를 사용하여 to2d와 함께 2D 좌표 목록으로 변환합니다. () 도우미 기능.
<to> 코디의 구조를 시각화하는 데 도움이 될 수 있습니다
<p>
<one> 그것은 좌표 벡터의 1 차원 시퀀스입니다. </one></p>
<coord> 각 좌표와 함께 색상 값도 저장하고 싶을 것입니다. <p></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>// transient list
</span>a <span>= [1, 2, 3];
</span>b <span>= a.push(4);
</span><span>// a = [1, 2, 3, 4]
</span><span>// b = [1, 2, 3, 4]
</span>
<span>// persistent list
</span>c <span>= #[1, 2, 3]
</span>d <span>= c.push(4);
</span><span>// c = #[1, 2, 3]
</span><span>// d = #[1, 2, 3, 4]
</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<the> 우리는 반복 () 함수를 사용하여 '#fff'문자열의 무한 시퀀스를 만듭니다. Mori 시퀀스가 <p> 게으른 평가 를 지원하기 때문에이 메모리를 채우고 브라우저를 충돌시키는 것에 대해 걱정할 필요가 없습니다. 나중에 요청할 때 항목의 값 만 순서대로 계산합니다.
<to> 마지막으로 조정을 해시 맵 형식으로 색상과 결합하고 싶습니다. <em>
</em>
<the> 우리는 ZipMap () 함수를 사용하여 코디를 키로 키우고 색상을 값으로 해당 맵을 만듭니다. 다시, 데이터의 구조를 시각화하는 데 도움이 될 수 있습니다. </the></to></p>
<p>
<av> JavaScript의 객체와 달리 Mori의 해시 맵은 모든 유형의 데이터를 키로 가져갈 수 있습니다.
<ix> 픽셀 그리기
<color> 픽셀의 색상을 변경하려면 해시 맵의 좌표 중 하나를 새 문자열과 연결해야합니다. 단일 픽셀을 색칠하는 순수한 기능을 작성해 봅시다. </color></ix></av></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>// standard library
</span><span>Array(1, 2, 3).map(x => x * 2);
</span><span>// => [2, 4, 6]
</span>
<span>// mori
</span><span>map(x => x * 2, vector(1, 2, 3))
</span><span>// => [2, 4, 6]
</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<x> 우리는 x 및 y 좌표를 사용하여 키로 사용할 수있는 좌표 벡터를 만듭니다. 그런 다음 Assoc ()를 사용하여 해당 키를 새 색상과 연결합니다. 데이터 구조가 영구적이기 때문에 ASSOC () 함수는 이전 맵을 돌리는 대신 <p> new 해시 맵을 반환합니다. </p>.
그림 그림
<everything> 이제 우리는 캔버스에 간단한 이미지를 그리는 데 필요한 모든 것을 갖추고 있습니다. 픽셀에 대한 좌표의 해시 맵을 가져 와서 렌더링 context2d에 그려 봅시다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>const fellowship = [
</span> <span>{
</span> <span>title: 'Mori',
</span> <span>race: 'Hobbit'
</span> <span>},
</span> <span>{
</span> <span>title: 'Poppin',
</span> <span>race: 'Hobbit'
</span> <span>}
</span><span>];
</span>
<span>deletePerson(fellowship, 1);
</span><span>console.log(fellowship);
</span></pre><div class="contentsignin">로그인 후 복사</div></div>
<a> 여기서 무슨 일이 일어나고 있는지 이해하기 위해 잠시 시간을 내겠습니다. <p>
<each> 우리는 각 ()를 사용하여 픽셀 해시 맵을 반복합니다. 각 키와 값 (시퀀스로)을 p. 그런 다음 intoArray () 함수를 사용하여 파괴 될 수있는 배열로 변환하므로 원하는 값을 선택할 수 있습니다.
</each></p>
<can> 마지막으로 캔버스 방법을 사용하여 컨텍스트 자체에 컬러 사각형을 그립니다.
<h3>
<together> 함께 배선
<to> 이제 우리는이 모든 부품을 함께 모으고 작동하기 위해 약간의 배관을해야합니다. </to></together>
</h3>
<p>
<hold> 우리는 캔버스를 잡고 이미지를 렌더링하기위한 컨텍스트를 만들기 위해 사용합니다. 또한 차원을 반영하도록 IT를 적절하게 크기로 조정할 것입니다. </hold></p>
<pass> 마지막으로 우리는 페인트 방법으로 그려야 할 픽셀로 컨텍스트를 전달할 것입니다. 운이 좋으면 캔버스는 흰색 픽셀로 렌더링되어야합니다. 가장 흥미 진진한 공개는 아니지만 우리는 가까워지고 있습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>import <span>{ vector, hashMap }</span> from 'mori';
</span>
<span>const fellowship = vector(
</span> <span>hashMap(
</span> <span>"name", "Mori",
</span> <span>"race", "Hobbit"
</span> <span>),
</span> <span>hashMap(
</span> <span>"name", "Poppin",
</span> <span>"race", "Hobbit"
</span> <span>)
</span><span>)
</span>
<span>const newFellowship = deletePerson(fellowship, 1);
</span><span>console.log(fellowship);
</span></pre><div class="contentsignin">로그인 후 복사</div></div>
상호 작용 <p>
<listen> 우리는 클릭 이벤트를 듣고 이전의 Draw () 함수로 특정 픽셀의 색상을 변경하는 데 사용합니다.
<em>
<ing> 우리는 캔버스에 클릭 리스너를 첨부하고 이벤트 좌표를 사용하여 그릴 픽셀을 결정합니다. 이 정보를 사용하여 Draw () 함수로 새 픽셀 해시 맵을 만듭니다. 그런 다음 우리는 그것을 우리의 맥락에 페인트하고 우리가 그린 마지막 프레임을 덮어 씁니다. </ing></em><we>이 시점에서 우리는 검은 색 픽셀을 캔버스에 그릴 수 있으며 각 프레임은 이전의 프레임을 기반으로하여 복합 이미지를 만듭니다. <p>.
<ames> 추적 프레임 </ames></p>
<o> 실행 취소를 구현하려면 각 역사적 개정판을 픽셀 해시 맵에 저장하므로 앞으로 다시 검색 할 수 있습니다. <h3>.
</h3>
<a> 우리는 목록을 사용하여 우리가 그린 다른 "프레임"을 저장하고 있습니다. 목록은 헤드와 O (1)의 효율적인 추가를 지원하여 첫 번째 항목을 조회하여 스택을 나타내는 데 이상적입니다.
<to> 프레임 스택으로 작업하려면 클릭 리스너를 수정해야합니다.
<p>
<the> 우리는 peek () 함수를 사용하여 스택 상단에 프레임을 가져옵니다. 그런 다음 Draw () 함수로 새 프레임을 생성하는 데 사용합니다. 마지막으로 우리는 COLON ()를 </the></p> CONCOINE 를 프레임 스택의 상단에 사용합니다.
<changing> 우리는 로컬 상태를 바꾸고 있지만 (프레임 = concl (프레임, NewFrame)) 실제로 데이터를 돌리지 않습니다.
<changes> 변경 취소 변경 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>// transient list
</span>a <span>= [1, 2, 3];
</span>b <span>= a.push(4);
</span><span>// a = [1, 2, 3, 4]
</span><span>// b = [1, 2, 3, 4]
</span>
<span>// persistent list
</span>c <span>= #[1, 2, 3]
</span>d <span>= c.push(4);
</span><span>// c = #[1, 2, 3]
</span><span>// d = #[1, 2, 3, 4]
</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<to> 마지막으로 스택에서 상단 프레임을 팝업하려면 실행 취소 버튼을 구현해야합니다.
<p>
<o> 버튼을 클릭하면 현재 실행 취소 할 프레임이 있는지 확인한 다음 POP () 함수를 사용하여 프레임을 더 이상 상단 프레임을 포함하지 않는 새 목록으로 바꾸십시오.
<the> 마지막으로 새 스택의 상단 프레임을 페인트 () 함수로 전달하여 변경 사항을 반영합니다. 이 시점에서 캔버스에 대한 변경 사항을 끌어 내고 실행 취소 할 수 있어야합니다. </the></o></p>
<p> 데모
<we> 다음은 다음과 같습니다
<mor> Codepen에서 Sitepoint (@SitePoint)의 펜 Mori 픽셀을 참조하십시오.
확장
<list> 다음은이 응용 프로그램을 개선 할 수있는 방법에 대한 아이디어 목록입니다.
</list></mor></we></p>
<pal> 색상 팔레트를 추가하여 사용자가 색상을 선택할 수 있도록합니다.
<to> 로컬 스토리지를 사용하여 세션 사이의 프레임을 저장하십시오
<tr> Ctrl Z 키보드 바로 가기 실행 취소 변경 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span>// standard library
</span><span>Array(1, 2, 3).map(x => x * 2);
</span><span>// => [2, 4, 6]
</span>
<span>// mori
</span><span>map(x => x * 2, vector(1, 2, 3))
</span><span>// => [2, 4, 6]
</span></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<to> 마우스를 드래그하는 동안 사용자가 그리도록 허용합니다
<by> 스택에서 프레임을 제거하지 않고 인덱스 포인터를 이동하여 Redo 구현
<clo> 동일한 프로그램의 ClojureScript 소스를 통해 읽으십시오
<p>
<em> 결론
<at> 우리는 벡터, 목록, 범위 및 해시 맵을 살펴 보았지만 Mori는 세트, 정렬 된 세트 및 큐와 함께 제공되며 이러한 각 데이터 구조에는 함께 작업하기위한 다형성 기능을 보완합니다. </at></em>.
<ely> 우리는 가능한 것의 표면을 간신히 긁지 않았지만, 강력한 단순한 기능 세트와 지속적인 데이터를 페어링하는 것의 중요성을 가치있게 볼 수 있기를 바랍니다.<questions> mori 와의 불변 데이터 및 기능적 자바 스크립트에 대한 자주 묻는 질문
<concept> JavaScript에서 불변성의 개념은 무엇입니까? <h2> </h2> JavaScript의 불변성은 생성 된 후에 수정할 수없는 객체의 상태를 나타냅니다. 이는 변수에 값이 할당되면 변경할 수 없음을 의미합니다. 이 개념은 부작용을 피하고 코드를보다 예측 가능하고 이해하기 쉽게 만드는 데 도움이되므로 기능 프로그래밍에 중요합니다. 또한 효율적인 데이터 검색 및 메모리 사용량을 허용하여 응용 프로그램의 성능을 향상시킵니다. <h3> Mori Library는 JavaScript에서 불변 데이터를 처리하는 데 어떻게 도움이됩니까? </h3> <p> Mori는 세트를 제공하는 라이브러리입니다. 영구 데이터 구조는 JavaScript로 구성됩니다. 이러한 데이터 구조는 불변이므로 생성되면 변경할 수 없습니다. 이는 데이터의 무결성을 유지하는 데 도움이되고 우발적 인 수정을 피합니다. Mori는 또한 이러한 데이터 구조를 더 쉽게 조작 할 수있는 풍부한 기능 프로그래밍 유틸리티 세트를 제공합니다. </p> 불변 데이터를 처리하기위한 기본 JavaScript 방법보다 Mori를 사용하면 어떤 이점이 있습니까? 불변의 데이터를 처리하는 방법을 제공하는 Mori는보다 효율적이고 강력한 방법을 제공합니다. Mori의 지속적인 데이터 구조는 기본 JavaScript 방법보다 더 빠르고 메모리를 덜 소비합니다. 또한 Mori는 JavaScript에서 사용할 수없는 광범위한 기능 프로그래밍 유틸리티를 제공합니다. <h3> 불변성은 응용 프로그램의 성능에 어떻게 기여합니까? </h3> 불변성은 응용 프로그램의 성능을 크게 향상시킬 수 있습니다. . 불변의 객체는 일단 생성되면 변경할 수 없으므로 수정 될 위험없이 여러 기능 호출에서 안전하게 재사용 할 수 있습니다. 이것은 효율적인 메모리 사용량과 더 빠른 데이터 검색으로 이어져 애플리케이션의 전반적인 성능을 향상시킵니다. <p> 변이 가능한 데이터 구조와 불변 데이터 구조의 차이점은 무엇입니까? 그들이 만들어진 후에 변경됩니다. 반면에 불변의 데이터 구조는 생성되면 수정할 수 없습니다. 불변의 데이터 구조에 대한 모든 작업은 새로운 데이터 구조를 초래합니다. </p> Mori는 데이터 조작을 어떻게 처리합니까? <h3> </h3> Mori는 데이터를 조작하기위한 풍부한 기능 프로그래밍 유틸리티 세트를 제공합니다. 이 유틸리티는 원래 데이터를 변경하지 않고 데이터 구조에서 MAP, Reduce, Filter 등과 같은 다양한 작업을 수행 할 수 있습니다. <p> Mori의 지속적인 데이터 구조는 무엇입니까? </p> 지속적인 데이터 구조 Mori에는 수정시 이전 버전의 데이터를 보존하는 불변의 데이터 구조가 있습니다. 이는 지속적인 데이터 구조에서 작업을 수행 할 때마다 새 버전의 데이터 구조가 생성되고 이전 버전이 보존됩니다.<i> Mori는 데이터 무결성을 어떻게 보장합니까? <h3> Mori는 불변의 데이터 구조를 제공하여 데이터 무결성을 보장합니다. 이러한 데이터 구조는 일단 생성되면 수정할 수 없으므로 우발적 인 데이터 수정의 위험이 제거됩니다. 이것은 데이터의 무결성을 유지하는 데 도움이됩니다. </h3> Mori와 함께 JavaScript에서 기능적 프로그래밍의 장점은 무엇입니까? </i><p> </p> JavaScript의 Mori를 사용한 기능적 프로그래밍은 몇 가지 장점을 제공합니다. 부작용을 피함으로써 코드를보다 예측 가능하고 이해하기 쉽게 만듭니다. 또한 효율적인 데이터 검색 및 메모리 사용량을 허용하여 응용 프로그램의 성능을 향상시킵니다. <h3> JavaScript 프로젝트에서 Mori를 사용하는 방법 </h3> JavaScript 프로젝트에서 Mori를 사용하기 시작하면 귀하가 프로젝트에 Mori 라이브러리를 포함해야합니다. NPM을 통해 설치하거나 HTML 파일에 직접 포함 시켜이 작업을 수행 할 수 있습니다. 라이브러리가 포함되면 코드에서 Mori의 기능 및 데이터 구조를 사용하기 시작할 수 있습니다.</concept></questions></ely></p></clo></by></to>
</tr></to></pal></to></changes></changing></to></a></o></we></listen></p></pass></can></a></everything></x></the></coord></to></range></we></ly></to></fun></the></an>위 내용은 Mori와의 불변 데이터 및 기능적 JavaScript의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
