JavaScript / Object / Array.slice() / 배열의 일부분을 선택하여 새로운 배열을 만드는 속성

.slice()

.slice()는 배열의 일부분을 선택하여 새로운 배열을 만듭니다.

문법

array.slice( start, end )

start와 end에는 숫자가 들어갑니다. 배열의 start에 해당하는 요소부터 end 바로 전의 요소까지를 선택하여 새로운 배열을 만듭니다. 예를 들어

jbAry.slice( 2, 5 );

는 jbAry 배열의 3번째 요소부터 5번째 요소까지 선택합니다.

end에 값이 없으면 해당 배열의 마지막 요소까지 선택합니다. 값이 음수면 마지막 요소를 기준으로 선택합니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <p>One, Two, Three, Four, Five, Six</p>
    <hr>
    <p><strong>slice( 1, 4 )</strong></p>
    <p>
      <script>
        var jbAry = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six' ];
        var jbSlc = jbAry.slice( 1, 4 );
        document.write( jbSlc );
      </script>
    </p>
    <p><strong>slice( 2 )</strong></p>
    <p>
      <script>
        var jbAry = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six' ];
        var jbSlc = jbAry.slice( 2 );
        document.write( jbSlc );
      </script>
    </p>
    <p><strong>slice( -4, -1 )</strong></p>
    <p>
      <script>
        var jbAry = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six' ];
        var jbSlc = jbAry.slice( -4, -1 );
        document.write( jbSlc );
      </script>
    </p>
  </body>
</html>

같은 카테고리의 다른 글
JavaScript / Library

JavaScript / Library

Uncategorized html5shiv - IE 8 이하에서 HTML5 태그 지원하게 해주는 라이브러리 imagesLoaded - 이미지가 로드되었음을 감지하는 라이브러리 Masonry - 벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리 Respond.js - IE8 이하에서 미디어 쿼리(Media Query)를 사용하게 해주는 라이브러리 turn.js - 책장을 넘기는 듯한 플립(flip) 효과를 만들어 주는 라이브러리

JavaScript / 다음(카카오) 우편번호 검색 서비스 사용하는 방법

JavaScript / 다음(카카오) 우편번호 검색 서비스 사용하는 방법

다음(카카오)에서 우편번호 검색 서비스를 무료로 제공한다. 팝업 창에 Powerd by kakao가 표시되고, 기본 모양이 투박하다는 단점이 있지만, 빠르게 주소 검색 서비스를 구현해주는 고마운 서비스임에는 틀림이 없다. 자세한 사용법은 아래 링크에 있다. https://postcode.map.daum.net/guide 너무 상세한 설명이라 이해가 어렵다면, 최소한의 코드로 만들고, 필요한 것을 하나씩 추가하는 게 좋다. 기본 예제와 작동 방식 아래는 최소한의 코드로 작성한 것이다. ...

JavaScript / Object / Array.indexOf(), Array.lastIndexOf() - 일치하는 요소의 위치(인덱스)를 반환하는 메서드

JavaScript / Object / Array.indexOf(), Array.lastIndexOf() - 일치하는 요소의 위치(인덱스)를 반환하는 메서드

.indexOf() .indexOf()는 주어진 값과 일치하는 요소의 인덱스를 반환하는 메서드입니다. 문법 array.indexOf( value, start ) value : 찾으려는 값을 넣습니다. start : 검색을 시작할 인덱스 값입니다. 생략 가능하고, 생략했을 경우 값은 0입니다. 일치하는 원소가 있다면 인덱스를 반환합니다. 여러 개 있으면 처음 원소의 인덱스를 반환합니다. 없다면 -1을 반환합니다. 예제 배열 원소의 인덱스는 0부터 시작합니다. 즉, 첫번째 원소의 인덱스는 0, 두번째 ...

JavaScript / 다른 페이지로 리다이렉트(Redirect) 하기

JavaScript / 다른 페이지로 리다이렉트(Redirect) 하기

자바스크립트를 이용해서 특정 URL로 접속했을 때 다른 URL로 이동시킬 수 있다. 다른 URL로 이동시키는 것은 window.location.href 를 이용한다. 예를 들어 window.location.href = 'http://www.abc.com/'; 은 웹브라우저로 접속했을 때 http://www.abc.com/으로 이동시킨다. 만약 http://www.abc.com/으로 접속했을 때 http://www.codingfactory.net/로 이동시키고 싶다면 다음과 같이 한다. if ( window.location == 'http://www.abc.com/' ) { window.location.href='http://www.codingfactory.net/'; } PHP / 다른 페이지로 리디렉션(Redirection)하는 방법

JavaScript / Object / document.characterSet / 문자 인코딩 반환하는 속성

JavaScript / Object / document.characterSet / 문자 인코딩 반환하는 속성

.characterSet .characterSet은 문서의 문자 인코딩을 반환하는 속성입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( "<p>document.characterSet : " + document.characterSet + "</p>" ); </script> </body> </html>

JavaScript / Object / String.length / 문자열의 길이 반환하는 속성

JavaScript / Object / String.length / 문자열의 길이 반환하는 속성

.length .length는 문자열의 길이를 반환하는 속성입니다. 문법 string.length 예를 들어 'abcd'.length 는 4입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( '<p>"1234".length : ' + '1234'.length + '</p>' ); document.write( '<p>"".length : ' + ''.length + '</p>' ); document.write( '<p>"한글".length : ' + '한글'.length + '</p>' ...

JavaScript / 대화상자 / Alert, Confirm, Prompt

JavaScript / 대화상자 / Alert, Confirm, Prompt

자바스크립트에서 대화상자는 세가지가 있습니다. Alert, Confirm, Prompt로, 새 창을 띄운다는 점은 같으나 역할이 다릅니다. Alert Alert는 단순히 메시지를 전달하는 역할만 합니다. 반환하는 값이 없습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript | alert</title> <script> alert( 'Lorem ipsum dolor' ); ...

JavaScript / Object / String.fromCharCode() / 유니코드를 문자로 바꾸는 메서드

JavaScript / Object / String.fromCharCode() / 유니코드를 문자로 바꾸는 메서드

.fromCharCode() .fromCharCode()는 유니코드를 문자로 바꾸는 메서드입니다. 문법 string.charCodeAt( index ) 예제 1 'HELLO'.charCodeAt( 0 ) H의 유니코드 72를 반환합니다. 예제 2 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jb = 'HELLO'; for ( i = 0; i < jb.length; i++ ) { document.write ( jb.charCodeAt( i ...

JavaScript / Object / document.writeln()

JavaScript / Object / document.writeln()

.writeln() .writeln()은 문서에 문자, 코드 등을 쓰는 메서드입니다. .write()와 다른 점은 줄바꿈 기호가 들어간다는 것입니다. 예제 .writeln()에는 줄바꿈 기호가 들어갑니다. 하지만 HTML 특성 상 한 칸 띄어쓴 것처럼 보입니다. pre 태그로 감싸면 줄바꿈이 제대로 표현됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <p><strong>document.write</strong></p> <script> document.write( ...

JavaScript / Object / String.split() / 문자열 분할하는 메서드

JavaScript / Object / String.split() / 문자열 분할하는 메서드

.split() .split()은 문자열을 분할하는 메서드입니다. 문법 string.split( separator, limit ) separator에는 분할의 기준을 넣습니다. 예를 들어 쉼표를 기준으로 분할할 때는 ',' 와 같이 합니다. limit로 최대 분할 개수를 정합니다. 선택 사항으로, 값을 정하지 않으면 전체를 다 분할합니다. 예제 1 쉼표를 기준으로 문자열을 분할하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> ...