분류 javascript

JavaScript 비트 연산자에 대한 흥미로운 사용 사례(3)

컨텐츠 정보

  • 조회 130 (작성일 )

본문

function foundIndex (index) {
  return Boolean(index ^ -1);
}

Left shift (<<) 


왼쪽 시프트 (<<) 연산자는 두 개의 피연산자를 사용합니다. 첫 번째 피연산자는 정수이고 두 번째 피연산자는 왼쪽으로 이동 될 첫 번째 피연산자의 비트 수입니다. 제로 (0) 비트는 오른쪽에서 이동하는 반면, 왼쪽으로 이동 된 초과 비트는 삭제됩니다.


예를 들어 정수 170을 고려하십시오. 3 비트를 왼쪽으로 이동한다고 가정하겠습니다. << 연산자를 다음과 같이 사용할 수 있습니다.


// 170 => 00000000000000000000000010101010

// 170 << 3
// --------------------------------------------
//    (000)00000000000000000000010101010(***)
// --------------------------------------------
//  = (***)00000000000000000000010101010(000)
// --------------------------------------------
//  = 00000000000000000000010101010000
// --------------------------------------------
//  = 1360 (decimal)

console.log(170 << 3); // 1360

왼쪽 시프트 비트 연산자 (<<)는 다음 JavaScript 표현식을 사용하여 정의 할 수 있습니다.


(A << B) => A * (2 ** B) => A * Math.pow(2, B)

따라서 이전 예를 다시 살펴보십시오.


(170 << 3) => 170 * (2 ** 3) => 170 * 8 => 1360

색상 변환 : RGB를 16 진수로 


왼쪽 시프트 (<<) 연산자의 매우 유용한 응용 프로그램 중 하나는 RGB 표현에서 16 진 표현으로 색상을 변환하는 것입니다.


RGB 색상의 각 구성 요소에 대한 색상 값은 0-255입니다. 간단히 말해 각 색상 값을 8 비트로 완벽하게 표현할 수 있습니다.


  0 => 0b00000000 (binary) => 0x00 (hexadecimal)
255 => 0b11111111 (binary) => 0xff (hexadecimal)

따라서 색상 자체는 24 비트 (빨강, 녹색 및 파랑 구성 요소의 경우 각각 8 비트)로 완벽하게 표현 될 수 있습니다. 오른쪽에서 시작하는 처음 8 비트는 파란색 구성 요소를 나타내고 다음 8 비트는 녹색 구성 요소를 나타내고 그 이후 8 비트는 빨간색 구성 요소를 나타냅니다.


(binary) => 11111111 00100011 00010100

   (red) => 11111111 => ff => 255
 (green) => 00100011 => 23 => 35
  (blue) => 00010100 => 14 => 20

   (hex) => ff2314

색상을 24 비트 시퀀스로 표현하는 방법을 이해 했으므로 색상의 개별 구성 요소 값에서 24 비트 색상을 구성하는 방법을 살펴 보겠습니다. rgb (255, 35, 20)로 표시되는 색상이 있다고 가정하겠습니다. 비트를 작성하는 방법은 다음과 같습니다.


  (red) => 255 => 00000000 00000000 00000000 11111111
(green) =>  35 => 00000000 00000000 00000000 00100011
 (blue) =>  20 => 00000000 00000000 00000000 00010100

// Rearrange the component bits and pad with zeroes as necessary
// Use the left shift operator

  (red << 16) => 00000000 11111111 00000000 00000000
 (green << 8) => 00000000 00000000 00100011 00000000
       (blue) => 00000000 00000000 00000000 00010100

// Combine the component bits together using the OR (|) operator
// ( red << 16 | green << 8 | blue )

      00000000 11111111 00000000 00000000
    | 00000000 00000000 00100011 00000000
    | 00000000 00000000 00000000 00010100
// -----------------------------------------
      00000000 11111111 00100011 00010100
// -----------------------------------------

절차가 매우 명확 해 졌으므로 여기에 색상의 RGB 값을 입력 배열로 사용하고 위의 절차를 기반으로 색상의 해당 16 진수 표현을 반환하는 간단한 함수가 있습니다.


function rgbToHex ([red = 0, green = 0, blue = 0] = []) {
  return `#${(red << 16 | green << 8 | blue).toString(16)}`;
}

부호 전파 오른쪽 이동 (>>) 


부호 전파 오른쪽 시프트 (>>) 연산자는 두 개의 피연산자를 사용합니다. 첫 번째 피연산자는 정수이고, 두 번째 피연산자는 오른쪽으로 이동 될 첫 번째 피연산자의 비트 수입니다.


부호 비트 (가장 왼쪽 비트)의 사본이 왼쪽에서 시프트 되는 반면, 오른쪽으로 시프트 된 초과 비트는 폐기됩니다. 결과적으로 정수의 부호는 항상 유지되므로 이름이 전파되는 오른쪽 이동이 됩니다.


예를 들어, 정수 170과 -170을 고려하십시오. 3 비트를 오른쪽으로 이동한다고 가정하겠습니다. >> 연산자를 다음과 같이 사용할 수 있습니다.


//  170 => 00000000000000000000000010101010
// -170 => 11111111111111111111111101010110

// 170 >> 3
// --------------------------------------------
//    (***)00000000000000000000000010101(010)
// --------------------------------------------
//  = (000)00000000000000000000000010101(***)
// --------------------------------------------
//  = 00000000000000000000000000010101
// --------------------------------------------
//  = 21 (decimal)

// -170 >> 3
// --------------------------------------------
//    (***)11111111111111111111111101010(110)
// --------------------------------------------
//  = (111)11111111111111111111111101010(***)
// --------------------------------------------
//  = 11111111111111111111111111101010
// --------------------------------------------
//  = -22 (decimal)

console.log(170 >> 3); // 21
console.log(-170 >> 3); // -22