Mori와의 불변 데이터 및 기능적 JavaScript

키 테이크 아웃

Mori는 Clojure의 영구 데이터 구조를 활용하여 JavaScript 개발자에게 코드 단순성과 안정성을 향상시키는 불변의 데이터 옵션을 제공합니다. Mori를 활용하면 불변성을 시행하여 JavaScript의 기능적 프로그래밍 패러다임을 촉진하여 의도하지 않은 부작용을 방지하고 응용 프로그램 라이프 사이클 전체에서 데이터 일관성을 보장합니다. 라이브러리는 데이터 처리에 대한 다른 접근 방식을 용이하게합니다. 여기서 기능은 데이터 구조에서 개별적으로 작동하여 JavaScript의 일반적인 객체 지향 방법과 대조적으로 더 깨끗하고 예측 가능한 코드를 허용합니다.

. Mori의 구조 공유 기술은 가능한 경우 기존 데이터 구조를 재사용하여 데이터 조작 효율성을 높여 응용 프로그램의 성능 향상으로 이어질 수 있습니다. UNDO 기능을 갖춘 픽셀 편집기와 같은 예제를 통해 Mori는 불변의 데이터 구조의 실제 응용 프로그램을 보여 주어 개발자에게 정교하고 강력한 기능을 구축 할 수있는 도구를 제공합니다.

이 기사는 Craig Bilner와 Adrian Sandu가 검토 한 동료였습니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! 기능적 프로그래밍과 불변의 데이터는 코드가 더 단순하고 더 쉽게 추론 할 수있는 방법을 찾으려고 노력하면서 많은 JavaScript 개발자에게 초점입니다. JavaScript는 항상 일부 기능 프로그래밍 기술을 지원했지만 지난 몇 년 동안 실제로 인기를 얻었으며 전통적으로 불변의 데이터에 대한 기본 지원도 없었습니다. JavaScript는 여전히 둘 다에 대해 많은 것을 배우고 있으며 최고의 아이디어는 이미 이러한 기술을 시도하고 테스트 한 언어에서 나옵니다. 프로그래밍 세계의 다른 코너에서 Clojure는 특히 데이터 구조와 관련된 진정한 단순성을 전용하는 기능적 프로그래밍 언어입니다. Mori는 JavaScript에서 직접 Clojure의 영구 데이터 구조를 사용할 수있는 라이브러리입니다. 이 기사는 이러한 데이터 구조의 설계의 이론적 근거를 탐색하고 응용 프로그램을 개선하기 위해이를 사용하기위한 몇 가지 패턴을 조사합니다. 우리는 이것을 Clojure 또는 Clojurescript로 프로그래밍하는 데 관심이있는 JavaScript 개발자를위한 최초의 디딤돌로 생각할 수 있습니다. 지속적인 데이터는 무엇입니까? Clojure는 변경할 수없는

영구
• 값과 돌연변이 사이에 시간적 수명을 가진 값을
과도
• 값을 구분합니다. 지속적인 데이터 구조를 수정하려는 시도는 적용된 변경 사항으로 새로운 구조를 반환하여 기본 데이터를 돌리는 것을 피합니다. 이론적 프로그래밍 언어 에서이 차이가 어떻게 보일지 보는 데 도움이 될 수 있습니다.

<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>

우리는 값을 올릴 때 과도 목록이 변이되었음을 알 수 있습니다. A와 B는 동일한 변이성 값을 가리 킵니다. 대조적으로, 영구 목록에서 푸시 푸시를 호출하면 새 값이 반환되었으며 C와 D가 개별 목록과는 다른 것을 알 수 있습니다. 이러한 지속적인 데이터 구조는 돌연변이 될 수 없습니다. 즉, 값에 대한 참조가 있으면 변경되지 않을 것이라는 보장이 있습니다. 이러한 보증은 일반적으로 더 안전하고 간단한 코드를 작성하는 데 도움이됩니다. 예를 들어, 인수가 변이 할 수 없기 때문에 지속적인 데이터 구조를 취하는 함수는이를 돌연변이 할 수 없으므로 함수가 의미있는 변화를 전달하려면 반환 값에서 나와야합니다. 이로 인해 참조적으로 투명하고 순수한 기능을 작성하여 테스트하고 최적화하기가 더 쉽습니다. 더 간단히 말해서 불변의 데이터는 더 많은 기능 코드를 작성해야합니다.

Mori는 무엇입니까?

Mori는 Clojurescript 컴파일러를 사용하여 Clojure의 표준 라이브러리의 데이터 구조에 대한 구현을 JavaScript로 컴파일합니다. 컴파일러는 최적화 된 코드를 방출하므로 추가 고려 사항이 없으면 JavaScript에서 컴파일 된 Clojure와 통신하기가 쉽지 않습니다. Mori는 추가 고려 사항의 계층입니다 Clojure와 마찬가지로 Mori의 기능은 작동하는 데이터 구조와 분리되어 JavaScript의 객체 지향 경향과 대조됩니다. 우리는이 차이가 코드를 작성하는 방향을 변경한다는 것을 알게 될 것입니다.

Mori는 또한 구조 공유를 사용하여 가능한 많은 원래 구조를 공유하여 데이터를 효율적으로 변경합니다. 이를 통해 지속적인 데이터 구조는 규칙적인 일시적 인 데이터 구조만큼 효율적 일 수 있습니다. 이 비디오에서 이러한 개념에 대한 구현은이 비디오에서 훨씬 더 자세히 다루어집니다.

왜 유용한가?

우선, 우리가 상속 한 JavaScript 코드베이스에서 버그를 추적하려고한다고 상상해 봅시다. 우리는 왜 우리가 왜 우리가 Fellowship의 잘못된 가치로 끝났는지 알아 내려고 노력하고 있습니다.

콘솔에 로그인 할 때 친교의 가치는 무엇입니까?

코드를 실행하거나 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">&lt;span&gt;// transient list &lt;/span&gt;a &lt;span&gt;= [1, 2, 3]; &lt;/span&gt;b &lt;span&gt;= a.push(4); &lt;/span&gt;&lt;span&gt;// a = [1, 2, 3, 4] &lt;/span&gt;&lt;span&gt;// b = [1, 2, 3, 4] &lt;/span&gt; &lt;span&gt;// persistent list &lt;/span&gt;c &lt;span&gt;= #[1, 2, 3] &lt;/span&gt;d &lt;span&gt;= c.push(4); &lt;/span&gt;&lt;span&gt;// c = #[1, 2, 3] &lt;/span&gt;&lt;span&gt;// d = #[1, 2, 3, 4] &lt;/span&gt;</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">&lt;span&gt;// transient list &lt;/span&gt;a &lt;span&gt;= [1, 2, 3]; &lt;/span&gt;b &lt;span&gt;= a.push(4); &lt;/span&gt;&lt;span&gt;// a = [1, 2, 3, 4] &lt;/span&gt;&lt;span&gt;// b = [1, 2, 3, 4] &lt;/span&gt; &lt;span&gt;// persistent list &lt;/span&gt;c &lt;span&gt;= #[1, 2, 3] &lt;/span&gt;d &lt;span&gt;= c.push(4); &lt;/span&gt;&lt;span&gt;// c = #[1, 2, 3] &lt;/span&gt;&lt;span&gt;// d = #[1, 2, 3, 4] &lt;/span&gt;</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">&lt;span&gt;// standard library &lt;/span&gt;&lt;span&gt;Array(1, 2, 3).map(x =&gt; x * 2); &lt;/span&gt;&lt;span&gt;// =&gt; [2, 4, 6] &lt;/span&gt; &lt;span&gt;// mori &lt;/span&gt;&lt;span&gt;map(x =&gt; x * 2, vector(1, 2, 3)) &lt;/span&gt;&lt;span&gt;// =&gt; [2, 4, 6] &lt;/span&gt;</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">&lt;span&gt;const fellowship = [ &lt;/span&gt; &lt;span&gt;{ &lt;/span&gt; &lt;span&gt;title: 'Mori', &lt;/span&gt; &lt;span&gt;race: 'Hobbit' &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;{ &lt;/span&gt; &lt;span&gt;title: 'Poppin', &lt;/span&gt; &lt;span&gt;race: 'Hobbit' &lt;/span&gt; &lt;span&gt;} &lt;/span&gt;&lt;span&gt;]; &lt;/span&gt; &lt;span&gt;deletePerson(fellowship, 1); &lt;/span&gt;&lt;span&gt;console.log(fellowship); &lt;/span&gt;</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">&lt;span&gt;import &lt;span&gt;{ vector, hashMap }&lt;/span&gt; from 'mori'; &lt;/span&gt; &lt;span&gt;const fellowship = vector( &lt;/span&gt; &lt;span&gt;hashMap( &lt;/span&gt; &lt;span&gt;&quot;name&quot;, &quot;Mori&quot;, &lt;/span&gt; &lt;span&gt;&quot;race&quot;, &quot;Hobbit&quot; &lt;/span&gt; &lt;span&gt;), &lt;/span&gt; &lt;span&gt;hashMap( &lt;/span&gt; &lt;span&gt;&quot;name&quot;, &quot;Poppin&quot;, &lt;/span&gt; &lt;span&gt;&quot;race&quot;, &quot;Hobbit&quot; &lt;/span&gt; &lt;span&gt;) &lt;/span&gt;&lt;span&gt;) &lt;/span&gt; &lt;span&gt;const newFellowship = deletePerson(fellowship, 1); &lt;/span&gt;&lt;span&gt;console.log(fellowship); &lt;/span&gt;</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">&lt;span&gt;// transient list &lt;/span&gt;a &lt;span&gt;= [1, 2, 3]; &lt;/span&gt;b &lt;span&gt;= a.push(4); &lt;/span&gt;&lt;span&gt;// a = [1, 2, 3, 4] &lt;/span&gt;&lt;span&gt;// b = [1, 2, 3, 4] &lt;/span&gt; &lt;span&gt;// persistent list &lt;/span&gt;c &lt;span&gt;= #[1, 2, 3] &lt;/span&gt;d &lt;span&gt;= c.push(4); &lt;/span&gt;&lt;span&gt;// c = #[1, 2, 3] &lt;/span&gt;&lt;span&gt;// d = #[1, 2, 3, 4] &lt;/span&gt;</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">&lt;span&gt;// standard library &lt;/span&gt;&lt;span&gt;Array(1, 2, 3).map(x =&gt; x * 2); &lt;/span&gt;&lt;span&gt;// =&gt; [2, 4, 6] &lt;/span&gt; &lt;span&gt;// mori &lt;/span&gt;&lt;span&gt;map(x =&gt; x * 2, vector(1, 2, 3)) &lt;/span&gt;&lt;span&gt;// =&gt; [2, 4, 6] &lt;/span&gt;</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 id="Mori-Library는-JavaScript에서-불변-데이터를-처리하는-데-어떻게-도움이됩니까"> Mori Library는 JavaScript에서 불변 데이터를 처리하는 데 어떻게 도움이됩니까? </h3> <p> Mori는 세트를 제공하는 라이브러리입니다. 영구 데이터 구조는 JavaScript로 구성됩니다. 이러한 데이터 구조는 불변이므로 생성되면 변경할 수 없습니다. 이는 데이터의 무결성을 유지하는 데 도움이되고 우발적 인 수정을 피합니다. Mori는 또한 이러한 데이터 구조를 더 쉽게 조작 할 수있는 풍부한 기능 프로그래밍 유틸리티 세트를 제공합니다. </p> 불변 데이터를 처리하기위한 기본 JavaScript 방법보다 Mori를 사용하면 어떤 이점이 있습니까? 불변의 데이터를 처리하는 방법을 제공하는 Mori는보다 효율적이고 강력한 방법을 제공합니다. Mori의 지속적인 데이터 구조는 기본 JavaScript 방법보다 더 빠르고 메모리를 덜 소비합니다. 또한 Mori는 JavaScript에서 사용할 수없는 광범위한 기능 프로그래밍 유틸리티를 제공합니다. <h3 id="불변성은-응용-프로그램의-성능에-어떻게-기여합니까"> 불변성은 응용 프로그램의 성능에 어떻게 기여합니까? </h3> 불변성은 응용 프로그램의 성능을 크게 향상시킬 수 있습니다. . 불변의 객체는 일단 생성되면 변경할 수 없으므로 수정 될 위험없이 여러 기능 호출에서 안전하게 재사용 할 수 있습니다. 이것은 효율적인 메모리 사용량과 더 빠른 데이터 검색으로 이어져 애플리케이션의 전반적인 성능을 향상시킵니다. <p> 변이 가능한 데이터 구조와 불변 데이터 구조의 차이점은 무엇입니까? 그들이 만들어진 후에 변경됩니다. 반면에 불변의 데이터 구조는 생성되면 수정할 수 없습니다. 불변의 데이터 구조에 대한 모든 작업은 새로운 데이터 구조를 초래합니다. </p> Mori는 데이터 조작을 어떻게 처리합니까? <h3> </h3> Mori는 데이터를 조작하기위한 풍부한 기능 프로그래밍 유틸리티 세트를 제공합니다. 이 유틸리티는 원래 데이터를 변경하지 않고 데이터 구조에서 MAP, Reduce, Filter 등과 같은 다양한 작업을 수행 할 수 있습니다. <p> Mori의 지속적인 데이터 구조는 무엇입니까? </p> 지속적인 데이터 구조 Mori에는 수정시 이전 버전의 데이터를 보존하는 불변의 데이터 구조가 있습니다. 이는 지속적인 데이터 구조에서 작업을 수행 할 때마다 새 버전의 데이터 구조가 생성되고 이전 버전이 보존됩니다.<i> Mori는 데이터 무결성을 어떻게 보장합니까? <h3 id="Mori는-불변의-데이터-구조를-제공하여-데이터-무결성을-보장합니다-이러한-데이터-구조는-일단-생성되면-수정할-수-없으므로-우발적-인-데이터-수정의-위험이-제거됩니다-이것은-데이터의-무결성을-유지하는-데-도움이됩니다"> Mori는 불변의 데이터 구조를 제공하여 데이터 무결성을 보장합니다. 이러한 데이터 구조는 일단 생성되면 수정할 수 없으므로 우발적 인 데이터 수정의 위험이 제거됩니다. 이것은 데이터의 무결성을 유지하는 데 도움이됩니다. </h3> Mori와 함께 JavaScript에서 기능적 프로그래밍의 장점은 무엇입니까? </i><p> </p> JavaScript의 Mori를 사용한 기능적 프로그래밍은 몇 가지 장점을 제공합니다. 부작용을 피함으로써 코드를보다 예측 가능하고 이해하기 쉽게 만듭니다. 또한 효율적인 데이터 검색 및 메모리 사용량을 허용하여 응용 프로그램의 성능을 향상시킵니다. <h3 id="JavaScript-프로젝트에서-Mori를-사용하는-방법"> 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!