programing

JavaScript 어레이 스플라이스와 슬라이스

javaba 2023. 1. 19. 21:10
반응형

JavaScript 어레이 스플라이스와 슬라이스

splice ★★★★★★★★★★★★★★★★★」slice

const array = [1, 2, 3, 4, 5];
array.splice(index, 1);
array.slice(index, 1);

splice()을 변경하는 반면, 는 원래 배열을 합니다.slice()을 하다

다음 예를 참조하십시오.

var array=[1,2,3,4,5];
console.log(array.splice(2));

하면 반환됩니다.[3,4,5]원래 어레이가 영향을 받아array존존 [1,2].

var array=[1,2,3,4,5]
console.log(array.slice(2));

하면 반환됩니다.[3,4,5]. 원래 어레이는 다음과 같은 결과에 영향을 받지 않습니다.array존존 [1,2,3,4,5].

다음은 이를 확인하는 간단한 바이올린입니다.

//splice
var array=[1,2,3,4,5];
console.log(array.splice(2));

//slice
var array2=[1,2,3,4,5]
console.log(array2.slice(2));


console.log("----after-----");
console.log(array);
console.log(array2);

스플라이스와 슬라이스는 모두 Javascript Array 기능입니다.

스플라이스 대 슬라이스

  1. splice() 메서드는 어레이 내에서 삭제된 항목을 반환하고 slice() 메서드는 어레이 내에서 선택한 요소를 새 어레이 개체로 반환합니다.

  2. splice() 메서드는 원래 어레이를 변경하고 slice() 메서드는 원래 어레이를 변경하지 않습니다.

  3. splice() 메서드는 n개의 인수를 사용할 수 있으며 slice() 메서드는 2개의 인수를 사용할 수 있습니다.

예제 포함 스플라이스

인수 1: 색인, 필수.항목을 추가하거나 제거할 위치를 지정하는 정수입니다. 음수 값을 사용하여 배열 끝에서 위치를 지정합니다.

인수 2: 옵션.삭제할 항목의 수.0(제로)으로 설정하면 항목이 제거되지 않습니다.통과하지 못할 경우 제공된 인덱스에서 모든 항목이 제거됩니다.

인수 3…n: 옵션.배열에 추가할 새 항목입니다.

var array=[1,2,3,4,5];
console.log(array.splice(2));
// shows [3, 4, 5], returned removed item(s) as a new array object.
 
console.log(array);
// shows [1, 2], original array altered.
 
var array2=[6,7,8,9,0];
console.log(array2.splice(2,1));
// shows [8]
 
console.log(array2.splice(2,0));
//shows [] , as no item(s) removed.
 
console.log(array2);
// shows [6,7,9,0]

예제를 사용한 슬라이스

인수 1: 필수.선택 항목을 시작할 위치를 지정하는 정수입니다(첫 번째 요소의 색인은 0).배열의 끝에서 선택하려면 음수를 사용합니다.

인수 2: 옵션.선택 항목을 종료할 위치를 지정하지만 포함하지 않는 정수입니다.생략할 경우 배열의 시작 위치와 끝까지의 모든 요소가 선택됩니다.배열의 끝에서 선택하려면 음수를 사용합니다.

var array=[1,2,3,4,5]
console.log(array.slice(2));
// shows [3, 4, 5], returned selected element(s).
 
console.log(array.slice(-2));
// shows [4, 5], returned selected element(s).
console.log(array);
// shows [1, 2, 3, 4, 5], original array remains intact.
 
var array2=[6,7,8,9,0];
console.log(array2.slice(2,4));
// shows [8, 9]
 
console.log(array2.slice(-2,4));
// shows [9]
 
console.log(array2.slice(-3,-1));
// shows [8, 9]
 
console.log(array2);
// shows [6, 7, 8, 9, 0]

S LICE = 어레이의 일부를 제공하고 원래 어레이를 분할하지 않음

SP LICE = 어레이의 일부를 제공하고 원래 어레이를 스플릿합니다.

저는 개인적으로 이 두 용어를 기억하기 쉬웠습니다. 왜냐하면 웹 개발 초보자였기 때문입니다.

다음은 vs와 vs의 차이를 기억하는 간단한 방법입니다.

var a=['j','u','r','g','e','n'];

// array.slice(startIndex, endIndex)
a.slice(2,3);
// => ["r"]

//array.splice(startIndex, deleteCount)
a.splice(2,3);
// => ["r","g","e"]

Trick to remember:

"specify length"의 줄임말로 간주합니다. 두 번째 인수는 인덱스가 아닌 길이여야 합니다.

slice() 메서드는 배열의 일부 복사본을 새 배열 개체로 반환합니다.

$scope.participantForms.slice(index, 1);

방법으로도participantForms에 있는 단일 하는 새 합니다.index원래 배열에서 위치를 지정합니다.

splice() 메서드는 기존 요소를 삭제하거나 새 요소를 추가함으로써 배열 내용을 변경합니다.

$scope.participantForms.splice(index, 1);

1개의 됩니다.participantFormsindex★★★★★★ 。

Javascript 기본 함수인 Angular입니다.JS는 이들과 아무 관련이 없습니다.

스플라이스 - MDN 참조 - ECMA-262 사양

구문
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

파라미터

  • start index입다 initial initial initial 지수입니다.초기 인덱스
    ifstart이에요. 이에요."Math.max((array.length + start), 0)"아래에되어 있는 의 array.
  • deleteCount 되는 모두 삭제되는 요소의 )start(이것들)
  • item1, item2, ... . 열 from from from from from from에서 어레이에 추가할 startindex index.manager로 .

반품:삭제된 요소가 있는 배열(제거된 요소가 없는 경우 빈 배열)

원본 어레이 변환:네.

예:

const array = [1,2,3,4,5];

// Remove first element
console.log('Elements deleted:', array.splice(0, 1), 'mutated array:', array);
// Elements deleted: [ 1 ] mutated array: [ 2, 3, 4, 5 ]

// array = [ 2, 3, 4, 5]
// Remove last element (start -> array.length+start = 3)
console.log('Elements deleted:', array.splice(-1, 1), 'mutated array:', array);
// Elements deleted: [ 5 ] mutated array: [ 2, 3, 4 ]

MDN 스플라이스의 기타 예


슬라이스 - MDN 레퍼런스 - ECMA-262 사양

구문
array.slice([begin[, end]])
파라미터

  • begin 기본값0).0입니다.
    ifbegin이에요. 이에요."Math.max((array.length + begin), 0)"아래에되어 있는 의 array.
  • end 마지막 length).array.length 기기 。 ifend이에요. 이에요."Math.max((array.length + begin),0)"아래에되어 있는 의 array.

반품:추출된 요소를 포함하는 배열입니다.

원본 변환:아니요.

예:

const array = [1,2,3,4,5];

// Extract first element
console.log('Elements extracted:', array.slice(0, 1), 'array:', array);
// Elements extracted: [ 1 ] array: [ 1, 2, 3, 4, 5 ]

// Extract last element (start -> array.length+start = 4)
console.log('Elements extracted:', array.slice(-1), 'array:', array);
// Elements extracted: [ 5 ] array: [ 1, 2, 3, 4, 5 ]

MDN 슬라이스 예제의 기타 예시

퍼포먼스 비교

어떤 시나리오가 다른 시나리오보다 더 잘 수행될 수 있기 때문에 이를 절대적인 사실로 받아들이지 마십시오.

splice()방법slice()method는 배열에서 선택한 요소를 새 배열 개체로 반환합니다.

splice() 배열 및 메서드 변경slice()메서드를 사용해도 원래 배열은 변경되지 않습니다.

  • Splice()할 수 : n개의 인수를 사용할 수 있습니다.

    인수 1: 색인, 필수.

    인수 2: 옵션.삭제할 항목의 수.0(제로)으로 설정하면 항목이 제거되지 않습니다.통과하지 못할 경우 제공된 인덱스에서 모든 항목이 제거됩니다.

    인수 3 . n :옵션.배열에 추가할 새 항목입니다.

  • slice()는 두 인수를 할 수 .

    인수 1: 필수.선택 항목을 시작할 위치를 지정하는 정수입니다(첫 번째 요소의 색인은 0).배열의 끝에서 선택하려면 음수를 사용합니다.

    인수 2: 옵션.선택 항목을 종료할 위치를 지정하는 정수입니다.생략할 경우 배열의 시작 위치와 끝까지의 모든 요소가 선택됩니다.배열의 끝에서 선택하려면 음수를 사용합니다.

스플라이스 및 슬라이스는 내장된 Javascript 명령어입니다.특히 Angular 명령어는 아닙니다.JS 명령어슬라이스는 "시작"에서 "종료" 지정자 직전까지 배열 요소를 반환합니다.스플라이스는 실제 배열을 변환하고 "시작"부터 시작하여 지정된 요소의 수를 유지합니다.구글은 이에 대한 많은 정보를 가지고 있습니다. 검색만 하세요.

대부분의 답변은 너무 장황하다.

  • splice ★★★★★★★★★★★★★★★★★」slice배열의 나머지 요소를 반환합니다.
  • splice는 요소를 한 상태로 합니다.slice

여기에 이미지 설명 입력

둘 다 같은 대답을 하지만:

  • SPLice는 원래 어레이를 변환합니다.
  • 슬라이스를 사용해도 원래 어레이가 변환되지 않습니다.

인덱스별 어레이 항목 스플라이스 및 삭제

인덱스 = 2

//splice & will modify the origin array
const arr1 = [1,2,3,4,5];
//slice & won't modify the origin array
const arr2 = [1,2,3,4,5]

console.log("----before-----");
console.log(arr1.splice(2, 1));
console.log(arr2.slice(2, 1));

console.log("----after-----");
console.log(arr1);
console.log(arr2);

let log = console.log;

//splice & will modify the origin array
const arr1 = [1,2,3,4,5];

//slice & won't modify the origin array
const arr2 = [1,2,3,4,5]

log("----before-----");
log(arr1.splice(2, 1));
log(arr2.slice(2, 1));

log("----after-----");
log(arr1);
log(arr2);

여기에 이미지 설명 입력

슬라이스() 메서드는 배열의 지정된 부분을 복사하고 복사된 부분을 새 배열로 반환합니다.원래 어레이는 변경되지 않습니다.

스플라이스() 메서드는 어레이에서 요소를 추가하거나 제거하여 어레이를 변경합니다.

슬라이스 구문은 다음과 같습니다.

array.slice(from, until);

// example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.slice(1, 3)
console.log({array, newArray})

// output: array: [1, 2, 3, 4, 5, 6], newArray: [2, 3]

주의: Slice() 메서드는 문자열에도 사용할 수 있습니다.

스플라이스 구문은 다음과 같습니다.

//For removing elements, we need to give the index parameter,
// and the number of elements to be removed

array.splice(index, number of elements to be removed);


//example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.splice(1, 3)
console.log({array, newArray})

// output: array: [1, 5, 6], newArray: [2, 3, 4]

주의: 두 번째 매개 변수를 정의하지 않으면 지정된 색인에서 시작하는 모든 요소가 배열에서 제거됩니다.

// For adding elements, we need to give them as the 3rd, 4th, ... parameter
array.splice(index, number of elements to be removed, element, element);

//example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.splice(1, 3, 'a', 'b')
console.log({array, newArray})

// output: array: [1, ,'a', 'b', 5, 6], newArray: [2, 3, 4]

관련 링크:

JavaScript에서 슬라이스(), 스플라이스() 및 스플릿() 메서드의 혼동을 해소합니다.

Array.protype.슬라이스()

Array.protype.스플라이스()

슬라이스는 원래 어레이를 변경하지 않고 새 어레이를 반환하지만 스플라이스는 원래 어레이를 변경합니다.

example: var arr = [1,2,3,4,5,6,7,8];
         arr.slice(1,3); // output [2,3] and original array remain same.
         arr.splice(1,3); // output [2,3,4] and original array changed to [1,5,6,7,8].

splice method second 인수는 슬라이스 방법과 다릅니다.스플라이스의 두 번째 인수는 제거할 요소의 수를 나타내고 슬라이스에서는 끝 인덱스를 나타냅니다.

arr.splice(-3,-1); // output [] second argument value should be greater then 
0.
arr.splice(-3,-1); // output [6,7] index in minus represent start from last.

-1은 마지막 요소를 나타내므로 -3부터 -1까지입니다.위는 스플라이스와 슬라이스 방법의 큰 차이입니다.

또 다른 예는 다음과 같습니다.

[2,4,8].splice(1, 2) -> returns [4, 8], original array is [2]

[2,4,8].slice(1, 2) -> returns 4, original array is [2,4,8]

//splice
var array=[1,2,3,4,5];
console.log(array.splice(2));

//slice
var array2=[1,2,3,4,5]
console.log(array2.slice(2));


console.log("----after-----");
console.log(array);
console.log(array2);

slice그리고.splice는 밀접하게 연결되어 있지만 매우 다른 목적을 가지고 있습니다.

slice함수는 배열의 일부를 선택하는 데 사용됩니다.그 목적은 수익률입니다.그 실행은 그 주제에 영향을 미치지 않는다.

splice함수는 배열에서 요소를 제거하는 데 사용됩니다.그것의 목적은 그것의 주제를 수정하는 것이다.필요한 경우 참조할 수 있도록 삭제된 항목의 복사본을 계속 반환합니다.

JavaScript Array splice() 메서드 예시

예 1 by tutsmake - 인덱스 1에서 요소 2개 제거

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(1,2);

 console.log( arr ); 

예-2 by tutsmake – 인덱스0 JavaScript에서 새로운 요소 추가

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(0,0,"zero");

 console.log( arr );  

예-3 by tutsmake – 어레이 JavaScript 요소 추가 및 삭제

var months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb'); // add at index 1

console.log(months); 

months.splice(4, 1, 'May'); // replaces 1 element at index 4

console.log(months);

https://www.tutsmake.com/javascript-array-splice-method-by-example/

Slice()와 splice() javascript 삽입 함수의 차이점은 Slice는 제거된 항목을 반환하지만 원래 배열은 변경하지 않는다는 것입니다.

        // (original Array)
        let array=[1,2,3,4,5] 
        let index= array.indexOf(4)
         // index=3
        let result=array.slice(index)
        // result=4  
        // after slicing=>  array =[1,2,3,4,5]  (same as original array)

단, splice()의 경우 원래 배열에 영향을 줍니다.

         // (original Array)
        let array=[1,2,3,4,5] 
        let index= array.indexOf(4)
         // index=3
        let result=array.splice(index)
        // result=[4,5]  
        // after splicing array =[1,2,3]  (splicing affects original array)

언급URL : https://stackoverflow.com/questions/37601282/javascript-array-splice-vs-slice

반응형