JavaScript의 배열 슬라이스와 스플라이스 비교 요약

머리말

오늘 Javascript를 검토하고 배열 방법을 살펴보았습니다. splice와 splice라는 두 가지 유사한 방법이 있습니다. 매우 유사해 보이지만 추가 p가 있지만 사용법은 상당히 다릅니다.

사용 시 의미 표현력이 강한 API를 선택하면 혼동의 발생을 줄일 수 있습니다.

1. 슬라이스

슬라이스는 배열의 요소를 지정하여 새 배열을 생성합니다. 즉, 원래 배열은 배열의

슬라이스를 변경하지 않습니다(ECMAScript 5.1). 표준 15.4 .4.10)은 문자열 조각과 매우 유사합니다. 사양에 따르면 슬라이스에는 시작점과 끝점이라는 두 개의 매개변수가 필요합니다. 시작점부터 끝점까지 모든 요소를 ​​포함하는 새 배열을 반환합니다.

slice의 기능을 이해하는 것은 그리 어렵지 않습니다.

'abc'.slice(1,2)   // "b"
[14, 3, 77].slice(1, 2) // [3]

원본 배열을 수정하지 않는다는 점에 유의하는 것이 중요합니다.

다음 코드 조각은 이 동작을 설명합니다. x 값은 변경되지 않았으며 y는 가로채는 부분입니다.

var x = [14, 3, 77];
var y = x.slice(1, 2);
console.log(x);   // [14, 3, 77]
console.log(y);   // [3]

2. splice

splice는 JS에서 가장 강력한 배열 방식으로 배열 요소를 삭제, 삽입, 교체할 수 있으며, 반환값은 조작된 값입니다.

스플라이스 삭제: color.splice(1,2) (색상의 두 항목 1과 2 삭제)

스플라이스 삽입: color.splice(1,0,'brown', ' pink') (색상 키 값이 1인 요소 앞에 두 개의 값을 삽입)

스플라이스 교체: color.splice(1,2,'brown','pink') (색상 1로 교체, 2개 요소);

스플라이스(섹션 15.4.4.12)에도 (적어도) 두 개의 매개변수가 필요하지만 그 의미는 완전히 다릅니다.

[14, 3, 77].slice(1, 2)  // [3]
[14, 3, 77].splice(1, 2) // [3, 77]

또한 splice는 원래 배열도 변경합니다.

너무 놀라지 마세요. 이것이 바로 스플라이스의 목적입니다.

var x = [14, 3, 77]
var y = x.splice(1, 2)
console.log(x)   // [14]
console.log(y)   // [3, 77]

자신만의 모듈을 작성할 때 혼동될 가능성이 가장 적은 API를 선택하는 것이 중요합니다. 이론적으로 사용자는 문서를 읽고 필요한 것이 무엇인지 항상 파악할 수는 없습니다. 그렇다면 어떤 명명 규칙을 따라야 할까요?

내가 가장 잘 알고 있는 관례(이전 QT 경험과 관련하여)는 동사를 올바르게 선택하는 것입니다. 현재 시제는 가능한 수정 동작을 나타내고, 과거 시제는 원래 목적어를 수정하지 않지만 새 목적어를 반환합니다. 버전. 가능하다면 두 버전을 모두 제공하세요.

다음 예를 참조하세요.

var p = new Point(100, 75);
p.translate(25, 25);
console.log(p);  // { x: 125, y: 100 }
var q = new Point(200, 100);
var s = q.translated(10, 50);
console.log(q);  // { x: 200, y: 100 }
console.log(s);  // { x: 210, y: 150 }

(2차원 데카르트 좌표계에서) 위치를 이동하는 번역()은 위치만 생성하는 번역()과 다릅니다. 사이의 좌표 차이를 이동했습니다. 변환을 호출하면 포인트 p의 값이 수정됩니다. 그러나 Translated()는 원본 객체를 수정하지 않기 때문에 객체 q는 수정되지 않고 새 복사본 s만 반환됩니다.

요약

이 사양을 애플리케이션 전반에 일관되게 배포할 수 있다면 위에서 언급한 혼란이 최소화될 것입니다. 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다.

JavaScript의 배열 슬라이스와 스플라이스 비교 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!