JavaScript
비교 작업

비고

부울 값이있는 논리 연산자

var x = true,
    y = false;

과

이 연산자는 두 표현식이 모두 true로 평가되면 true를 반환합니다. 이 부울 연산자는 단락 회로를 사용하고 x 가 false 평가되면 y 평가하지 않습니다.

x && y;

y 가 false이므로 false를 반환합니다.

또는

이 연산자는 두 표현식 중 하나가 참으로 평가되면 true를 반환합니다. 이 불리언 연산자는 단락 회로를 사용하고 x 가 true 로 평가되면 y 는 평가되지 않습니다.

x || y;

x 가 true이기 때문에 true를 반환합니다.

아니

이 연산자는 오른쪽의 표현식이 true로 평가되면 false를 반환하고 오른쪽의 표현식이 false로 평가되면 true를 반환합니다.

!x;

x 가 true이므로 false를 반환합니다.

추상 평등 (==)

추상 항등 연산자의 피연산자는 공통 유형으로 변환 된 후에 비교됩니다. 이 변환은 연산자의 사양을 기반으로합니다.

== 연산자에 대한 사양 :

7.2.13 추상 평등 비교

비교 x == y , 여기서 x 와 y 는 값이며 true 또는 false 생성 true . 이러한 비교는 다음과 같이 수행됩니다.

1. Type(x) 가 Type(y) 과 같으면 다음을 수행하십시오.

• 에이. 엄격한 평등 비교 x === y 를 수행 한 결과를 반환합니다.

2. x 가 null 로 y 가 undefined 경우는 true 돌려줍니다.
3. x 가 undefined 이며 y 가 null true 반환 true .
4. Type(x) 이 Number 이고 Type(y) 이 String 이면 비교 결과 x == ToNumber(y) 반환합니다.
5. Type(x) 가 String 이고 Type(y) 이 Number 이면 ToNumber(x) == y 비교 결과를 반환합니다.
6. Type(x) 가 Boolean 이면 ToNumber(x) == y 의 비교 결과를 반환합니다.
7. Type(y) 가 Boolean 이면 comparison x == ToNumber(y) 결과 comparison x == ToNumber(y) 반환합니다.
8. Type(x) 이 String , Number 또는 Symbol 이고 Type(y) 이 Object 인 경우 비교 결과 x == ToPrimitive(y) 반환합니다.
9. Type(x) 이 Object이고 Type(y) 이 String , Number 또는 Symbol 인 경우 비교 결과 ToPrimitive(x) == y 반환합니다.
10. false 반환합니다.

예 :

1 == 1;                     // true
1 == true;                  // true  (operand converted to number: true => 1)
1 == '1';                   // true  (operand converted to number: '1' => 1 )
1 == '1.00';                // true
1 == '1.00000000001';       // false
1 == '1.00000000000000001'; // true  (true due to precision loss)
null == undefined;          // true  (spec #2)
1 == 2;                     // false
0 == false;                 // true
0 == undefined;             // false
0 == "";                    // true

관계 연산자 (<, <=,>,> =)

두 피연산자가 모두 숫자 일 때 그들은 정상적으로 비교됩니다 :

1 < 2        // true
2 <= 2       // true
3 >= 5       // false
true < false // false (implicitly converted to numbers, 1 > 0)

두 피연산자가 모두 문자열 인 경우 사전 순으로 비교됩니다 (사전 순으로).

'a' < 'b'    // true
'1' < '2'    // true
'100' > '12' // false ('100' is less than '12' lexicographically!)

한 피연산자가 문자열이고 다른 피연산자가 숫자 인 경우 비교하기 전에 문자열을 숫자로 변환합니다.

'1' < 2      // true
'3' > 2      // true
true > '2'   // false (true implicitly converted to number, 1 < 2)

문자열이 숫자가 아닌 경우 숫자 변환은 NaN (not-a-number)을 반환합니다. NaN 과 비교하면 항상 false 반환됩니다.

1 < 'abc'    // false
1 > 'abc'    // false

그러나 숫자 값을 null , undefined 또는 빈 문자열과 비교할 때는주의해야합니다.

1 > ''        // true
1 < ''        // false
1 > null      // true
1 < null      // false
1 > undefined // false
1 < undefined // false

하나의 피연산자가 목적이고, 다른 하나는 다수의 경우, 오브젝트의 comparison.So 전에 숫자로 변환된다 null 특정 사건 때문에 Number(null);//0

new Date(2015)< 1479480185280            // true
null > -1                                //true
({toString:function(){return 123}}) > 122  //true

불평등

연산자 != 는 == 연산자의 역입니다.
피연산자가 같지 않으면 true 반환 true .
javascript 엔진은 두 피연산자가 동일한 유형이 아닌 경우 일치하는 유형으로 변환하려고 시도합니다. 참고 : 두 피연산자가 메모리에서 다른 내부 참조를 갖는 경우 false 가 반환됩니다.

견본:

1 != '1'     // false
1 != 2       // true

위의 예제에서 기본 값 형식이 char 값과 비교되므로 1 != '1' 이 false 입니다. 따라서 Javascript 엔진은 RHS 값의 데이터 유형을 신경 쓰지 않습니다.

연산자 : !== 는 === 연산자의 역입니다. 피연산자가 같지 않거나 유형이 일치하지 않으면 true를 반환합니다.

예:

1 !== '1'    // true
1 !== 2      // true
1 !== 1      // false

논리 값이 아닌 논리 연산자 (부울 변환)

왼쪽에서 오른쪽으로 읽는 논리 OR ( || )은 첫 번째 truthy 값으로 평가됩니다. 사실 값이 없으면 마지막 값이 리턴됩니다.

var a = 'hello' || '';             // a = 'hello'
var b = '' || [];                  // b = []
var c = '' || undefined;           // c = undefined
var d = 1 || 5;                    // d = 1
var e = 0 || {};                   // e = {}
var f = 0 || '' || 5;              // f = 5
var g = '' || 'yay' || 'boo';      // g = 'yay'

왼쪽에서 오른쪽으로 읽는 논리 AND ( && )는 첫 번째 위조 값으로 평가됩니다. 잘못된 값이 없으면 마지막 값이 반환됩니다.

var a = 'hello' && '';                  // a = ''
var b = '' && [];                       // b = ''
var c = undefined && 0;                 // c = undefined
var d = 1 && 5;                         // d = 5
var e = 0 && {};                        // e = 0
var f = 'hi' && [] && 'done';           // f = 'done'
var g = 'bye' && undefined && 'adios';  // g = undefined

예를 들어,이 트릭을 사용하여 함수 인수 (ES6 이전)에 기본값을 설정할 수 있습니다.

var foo = function(val) {
    // if val evaluates to falsey, 'default' will be returned instead.
    return val || 'default';
}

console.log( foo('burger') );  // burger
console.log( foo(100) );       // 100
console.log( foo([]) );        // []
console.log( foo(0) );         // default
console.log( foo(undefined) ); // default

인수에 대해 0 과 (더 적은 범위로) 빈 문자열은 종종 명시 적으로 전달되고 기본값을 덮어 쓸 수 있어야하는 유효한 값인 경우가 많습니다.이 패턴을 사용하면 거짓이다 ).

Null 및 정의되지 않음

null 과 undefined 의 차이점

null 및 undefined 공유 추상 항등 == 그러나 완전 항등 === ,

null == undefined   // true
null === undefined  // false

그들은 약간 다른 것을 나타냅니다 :

• undefined 는 식별자 / 객체 속성이 만들어지기 전이나 식별자 / 함수 매개 변수 생성과 첫 번째 집합 (있는 경우) 사이의 기간과 같은 값 이 없음을 나타냅니다.
• null 는, 이미 작성된 식별자 또는 프로퍼티 의 값 이 의도적으로 존재 하지 않는 것을 나타냅니다.

그것들은 다른 종류의 구문입니다 :

• undefined 는 전역 객체 의 속성이며 대개 전역 범위에서 변경 undefined . 이것은 전역 네임 스페이스 이외의 식별자를 정의 할 수있는 모든 곳에서 해당 범위에서 undefined 을 숨길 수 있음을 의미 합니다 (사물은 아직 undefined 않았지만)
• null 은 단어 리터럴 이므로 의미를 변경할 수없고 그렇게하려고하면 오류가 발생 합니다.

null 과 undefined 의 유사점

null 과 undefined 는 모두 위증입니다.

if (null) console.log("won't be logged");
if (undefined) console.log("won't be logged");

null 또는 undefined false ( 이 질문 참조).

false == undefined   // false
false == null        // false
false === undefined  // false
false === null       // false

undefined 사용

• 현재 범위를 신뢰할 수없는 경우 undefined로 평가되는 무언가를 사용합니다 (예 : void 0; .
• undefined 가 다른 값에 의해 음영 처리되면 Array 또는 Number 를 음영 처리하는 것만 큼 나쁩니다.
• 무언가를 undefined 것으로 설정 하지 마십시오. Object foo 에서 속성 표시 줄 을 제거 delete foo.bar; 대신.
• 존재 테스트 식별자 foo 대한 undefined 사용 참조 오류를 던질 수있다 typeof foo 에 대해 "undefined" 대신.

전역 개체의 NaN 속성

NaN ( "N N의 암갈색 오티")에 의해 정의 된 특별한 값 부동 소수점 연산을위한 IEEE 표준 숫자가 아닌 값이 제공되지만, 숫자가 예상된다 (경우에 사용되며, 1 * "two" ), 또는 계산에 유효한 number 결과 ( Math.sqrt(-1) )가없는 경우

NaN 과의 모든 평등 또는 관계 비교는 false 와 비교해도 false 입니다. 왜냐하면 NaN 은 무의미한 계산의 결과를 나타내는 것으로 간주되기 때문에 다른 무의미한 계산의 결과와 동일하지 않습니다.

(1 * "two") === NaN  //false

NaN === 0;          // false
NaN === NaN;        // false
Number.NaN === NaN; // false

NaN < 0;            // false
NaN > 0;            // false
NaN > 0;            // false
NaN >= NaN;         // false
NaN >= 'two';       // false

동일하지 않은 비교는 항상 true 반환 true .

NaN !== 0;          // true
NaN !== NaN;        // true

값이 NaN인지 확인

Number.isNaN(NaN);         // true
Number.isNaN(0 / 0);       // true
Number.isNaN('str' - 12);  // true

Number.isNaN(24);          // false
Number.isNaN('24');        // false
Number.isNaN(1 / 0);       // false
Number.isNaN(Infinity);    // false

Number.isNaN('str');       // false
Number.isNaN(undefined);   // false
Number.isNaN({});          // false

value !== value;    // true for NaN, false for any other value

Number.isNaN = Number.isNaN || function(value) {     
    return value !== value;
}

반대로 전역 함수 isNaN() 은 NaN 뿐만 아니라 숫자로 강제 변환 할 수없는 값이나 식에도 true 반환 true .

isNaN(NaN);         // true
isNaN(0 / 0);       // true
isNaN('str' - 12);  // true

isNaN(24);          // false
isNaN('24');        // false
isNaN(Infinity);    // false

isNaN('str');       // true
isNaN(undefined);   // true
isNaN({});          // true

ECMAScript는 ECMAScript 6 이후 Object.is 로 호출 할 수있는 SameValue 라는 "동일성"알고리즘을 정의합니다. == 와 === 비교와 달리 Object.is() 하면 NaN 이 자신과 동일하게 취급됩니다 ( -0 은 +0 과 동일하지 않음).

Object.is(NaN, NaN)      // true
Object.is(+0, 0)         // false

NaN === NaN              // false
+0 === 0                 // true

if (!Object.is) {
  Object.is = function(x, y) {
    // SameValue algorithm
    if (x === y) { // Steps 1-5, 7-10
      // Steps 6.b-6.e: +0 != -0
      return x !== 0 || 1 / x === 1 / y;
    } else {
      // Step 6.a: NaN == NaN
      return x !== x && y !== y;
    }
  };
}

주의 사항

NaN 자체는 숫자이며, 문자열 "NaN"과 같지 않으며 가장 중요하게는 (아마도 직관적이지는 않지만) :

typeof(NaN) === "number"; //true

부울 연산자의 단락

작업 결과가 추가 작업으로 변경되지 않으면 and-operator ( && ) 및 or 연산자 ( || )는 불필요한 작업을 방지하기 위해 단락 회로를 사용합니다.

x && y 에서 x 가 false 로 평가되면 y 는 평가되지 않습니다. 왜냐하면 전체 표현식이 false 로 보장되기 때문입니다.

x || y , y 경우 평가되지 않습니다 x 로 평가 true 전체 표현식이 보장되기 때문에, true .

함수가있는 예제

다음 두 가지 기능을 수행하십시오.

function T() { // True
  console.log("T");
  return true;
}

function F() { // False
  console.log("F");
  return false;
}

예제 1

T() && F(); // false

산출:

'티'
'에프'

예제 2

F() && T(); // false

산출:

'에프'

예제 3

T() || F(); // true

산출:

'티'

예제 4

F() || T(); // true

산출:

'에프'
'티'

오류 방지를위한 단락

var obj; // object has value of undefined
if(obj.property){ }// TypeError: Cannot read property 'property' of undefined
if(obj.property && obj !== undefined){}// Line A TypeError: Cannot read property 'property' of undefined

라인 A : 순서를 바꾸면 첫 번째 조건문은 오류를 발생시킬 경우 실행하지 않음으로써 두 번째 조건문에서 오류를 방지합니다.

if(obj !== undefined && obj.property){}; // no error thrown 

하지만 undefined 예상되는 경우에만 사용해야합니다.

if(typeof obj === "object" && obj.property){}; // safe option but slower

단락을 사용하여 기본값 제공

|| 연산자를 사용하여 "truthy"값 또는 기본값을 선택할 수 있습니다.

예를 들어,이 값은 nullable 값이 null이 아닌 값으로 변환되는지 확인하는 데 사용할 수 있습니다.

var nullableObj = null;
var obj = nullableObj || {};  // this selects {}

var nullableObj2 = {x: 5};
var obj2 = nullableObj2 || {} // this selects {x: 5}

또는 첫 번째 진리 값을 반환합니다.

var truthyValue = {x: 10};
return truthyValue || {}; // will return {x: 10}

같은 것을 여러 번 사용하여 폴백 할 수 있습니다.

envVariable || configValue || defaultConstValue // select the first "truthy" of these

옵션 기능을 호출하기위한 단락

&& 연산자는 전달 된 경우에만 콜백을 평가하는 데 사용할 수 있습니다.

function myMethod(cb) {
    // This can be simplified
    if (cb) {
       cb();
    }

    // To this
    cb && cb();
}

물론, 위의 테스트는 cb 가 실제로 Object / Array / String / Number 뿐만 아니라 function 임을 검증하지 않습니다.

추상 평등 / 불평등 및 유형 변환

문제

추상 평등 및 부등식 연산자 ( == 및 != )는 피연산자 유형이 일치하지 않으면 피연산자를 변환합니다. 이러한 유형 강제는 이러한 연산자의 결과에 대한 혼란의 공통적 인 원인입니다. 특히 이러한 연산자는 예상대로 전이 적이지는 않습니다.

"" ==  0;     // true A
 0 == "0";    // true A
"" == "0";    // false B
false == 0;   // true
false == "0"; // true

"" !=  0;     // false A
 0 != "0";    // false A
"" != "0";    // true B
false != 0;   // false
false != "0"; // false

JavaScript가 빈 문자열을 숫자로 변환하는 방법을 고려하면 결과가 의미가 있습니다.

Number("");    // 0
Number("0");   // 0
Number(false); // 0

해결책

false B 문에서 피연산자는 모두 문자열 ( "" 및 "0" )이므로 형식 변환 이 없으며 "" 와 "0" 은 같은 값이 아니기 때문에 "" == "0" 은 false 예상대로

여기서 예기치 않은 동작을 제거하는 한 가지 방법은 항상 동일한 유형의 피연산자를 비교하는 것입니다. 예를 들어 숫자 비교 결과에 명시 적 변환을 사용하려면 다음을 수행하십시오.

var test = (a,b) => Number(a) == Number(b); 
test("", 0);        // true;
test("0", 0);       // true
test("", "0");      // true;
test("abc", "abc"); // false as operands are not numbers 

또는 문자열 비교를 원한다면 :

var test = (a,b) => String(a) == String(b);
test("", 0);   // false;
test("0", 0);  // true
test("", "0"); // false;

사이드 노트 : Number("0") 와 new Number("0") 는 같은 것이 아닙니다! 전자가 유형 변환을 수행하는 반면 전자는 유형 변환을 수행합니다. 객체는 아래의 결과를 설명하는 값이 아닌 참조로 비교됩니다.

Number("0") == Number("0");         // true;
new Number("0") == new Number("0"); // false 

마지막으로 암시 적 타입 변환을 수행하지 않는 완전 항등 연산자와 비항 등 연산자를 사용할 수 있습니다.

"" ===  0;  // false
 0 === "0"; // false
"" === "0"; // false

이 주제에 대한 자세한 내용은 다음을 참조하십시오.

JavaScript 비교에서 연산자와 같음 (== vs ===)을 사용해야합니까? .

추상 평등 (==)

빈 배열

/* ToNumber(ToPrimitive([])) == ToNumber(false) */
[] == false; // true

[].toString() 이 실행되면 [].toString() [].join() 있으면이를 호출하고 그렇지 않으면 Object.prototype.toString() 호출합니다. 이 비교는 true 를 반환 true 왜냐하면 [].join() 은 '' 을 반환하기 때문에 강제로 0 으로 false ToNumber와 같습니다 .

그러나 모든 객체는 진실이며 Array 는 Object 의 인스턴스입니다.

// Internally this is evaluated as ToBoolean([]) === true ? 'truthy' : 'falsy'
[] ? 'truthy' : 'falsy'; // 'truthy'

동등 비교 연산

JavaScript에는 네 가지 다른 동등 비교 작업이 있습니다.

같은 값

두 피연산자가 같은 Type에 속하고 동일한 값인 경우 true 반환 true .

참고 : 개체의 값은 참조입니다.

이 비교 알고리즘은 Object.is (ECMAScript 6)를 통해 사용할 수 있습니다.

예 :

Object.is(1, 1);            // true
Object.is(+0, -0);          // false
Object.is(NaN, NaN);        // true
Object.is(true, "true");    // false
Object.is(false, 0);        // false
Object.is(null, undefined); // false
Object.is(1, "1");          // false
Object.is([], []);          // false

이 알고리즘은 등가 관계 의 속성 을가집니다 .

• 반사율 : Object.is(x, x) 는 모든 값 x 대해 true .
• 대칭 : Object.is(x, y) 인 true , 경우에 한해 Object.is(y, x) 인 true 어떤 값에 대해, x 및 y .
• Transitivity : Object.is(x, y) 와 Object.is(y, z) 가 true 임의의 x , y 및 z 값에 대해 Object.is(x, z) 도 true 입니다.

SameValueZero

그것은 SameValue처럼 행동하지만 +0 과 -0 은 같다고 생각합니다.

Array.prototype.includes (ECMAScript 7)를 통해이 비교 알고리즘을 사용할 수 있습니다.

예 :

[1].includes(1);            // true
[+0].includes(-0);          // true
[NaN].includes(NaN);        // true
[true].includes("true");    // false
[false].includes(0);        // false
[1].includes("1");          // false
[null].includes(undefined); // false
[[]].includes([]);          // false

이 알고리즘에는 여전히 등가 관계 의 속성이 있습니다.

• 반사율 : [x].includes(x) 는 모든 값 x 대해 true .
• 대칭 : [x].includes(y) 인 true 경우에 한해 [y].includes(x) 인 true 어떤 값에 대해, x 및 y .
• 전이성 : [x].includes(y) 와 [y].includes(z) 가 true [x].includes(z) 도 모든 값 x , y 및 z 대해 true 입니다.

엄격한 평등 비교

SameValue처럼 작동하지만

• +0 과 -0 은 같다고 간주합니다.
• 자체를 포함하여 NaN 다른 값과 다른 것으로 간주합니다.

이 비교 알고리즘은 === 연산자 (ECMAScript 3)를 통해 사용할 수 있습니다.

!== 연산자 (ECMAScript 3)도 있는데, 이는 === 결과를 무효화합니다.

예 :

1 === 1;            // true
+0 === -0;          // true
NaN === NaN;        // false
true === "true";    // false
false === 0;        // false
1 === "1";          // false
null === undefined; // false
[] === [];          // false

이 알고리즘에는 다음과 같은 속성이 있습니다.

• 대칭 : x === y 인 true , 단지 Y === X, 만약하는 경우 is 사실 , for any values X and y`.
• 이동성 : x === y 와 y === z 가 true , x === z 는 또한 임의의 값 x , y 및 z 대해 true 입니다.

그러나 동등한 관계가 아니기 때문에

• NaN 은 반사적 이지 않습니다. NaN !== NaN

추상 평등 비교

두 피연산자가 동일한 Type에 속하면 Strict Equality Comparison처럼 작동합니다.

그렇지 않으면 다음과 같이 강제 변환합니다.

• undefined 않고 null 도 동일한 것으로 간주됩니다.
• 숫자를 문자열과 비교할 때 문자열은 숫자로 강제 변환됩니다.
• 부울을 다른 것으로 비교할 때 부울은 숫자로 강제 변환됩니다.
• 객체를 숫자, 문자열 또는 기호와 비교할 때 객체는 프리미티브로 강제 변환됩니다.

강제 변환이있는 경우, 강제 변환 된 값은 재귀 적으로 비교됩니다. 그렇지 않은 경우 알고리즘은 false 반환합니다.

이 비교 알고리즘은 == 연산자 (ECMAScript 1)를 통해 사용할 수 있습니다.

!= 연산자 (ECMAScript 1)도 있는데, 이는 == 의 결과를 무효화합니다.

예 :

1 == 1;            // true
+0 == -0;          // true
NaN == NaN;        // false
true == "true";    // false
false == 0;        // true
1 == "1";          // true
null == undefined; // true
[] == [];          // false

이 알고리즘에는 다음과 같은 속성이 있습니다.

• 대칭 : x == y 이고 true 경우에 한해 y == x 것이다 true 어떤 값에 대해, x 및 y .

그러나 동등한 관계가 아니기 때문에

• NaN 은 반사적 이지 않습니다. NaN != NaN
• 이행 성이 예를 들어, 보유하지 않는 0 == '' 와 0 == '0' ,하지만 '' != '0'

여러 논리 문장 그룹화

괄호 안에 여러 부울 논리 문을 그룹화하여보다 복잡한 논리 평가를 만들 수 있습니다. 특히 if 문에서 유용합니다.

if ((age >= 18 && height >= 5.11) || (status === 'royalty' && hasInvitation)) {
  console.log('You can enter our club');
}

또한 그룹화 된 논리를 변수로 이동하여 구문을 조금 더 짧고 설명 적으로 만들 수 있습니다.

var isLegal = age >= 18;
var tall = height >= 5.11;
var suitable = isLegal && tall;
var isRoyalty = status === 'royalty';
var specialCase = isRoyalty && hasInvitation;
var canEnterOurBar = suitable || specialCase;

if (canEnterOurBar) console.log('You can enter our club');

이 특정 예 (및 다른 많은 경우)에서 괄호로 명령문을 그룹화하면 제거한 것처럼 작동하며 선형 논리 평가를 수행하면 동일한 결과를 얻을 수 있습니다. 내가 의도 한 바를 분명히 이해하고 논리 실수를 방지 할 수 있기 때문에 괄호를 사용하는 것을 선호한다.

자동 유형 변환

숫자가 우연히 문자열이나 NaN (Not a Number)으로 변환 될 수 있습니다.

JavaScript는 느슨하게 입력됩니다. 변수는 다른 데이터 유형을 포함 할 수 있으며 변수는 데이터 유형을 변경할 수 있습니다.

var x = "Hello";     // typeof x is a string
x = 5;               // changes typeof x to a number

수학 연산을 수행 할 때 JavaScript는 숫자를 문자열로 변환 할 수 있습니다.

var x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
var x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
var x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
var x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
var x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
var x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
var x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

문자열에서 문자열을 빼면 오류는 발생하지 않지만 NaN (숫자가 아님)을 반환합니다.

"Hello" - "Dolly"    // returns NaN

비교 연산자 목록

다중 상태 데이터 비교를 최적화하는 비트 필드

비트 필드는 다양한 부울 상태를 개별 비트로 유지하는 변수입니다. 조금은 true를 나타내고 off는 false가됩니다. 과거 비트 필드는 메모리를 절약하고 처리 부하를 줄임으로써 일상적으로 사용되었습니다. 비트 필드를 사용할 필요성은 더 이상 중요하지 않지만 많은 처리 작업을 단순화 할 수있는 몇 가지 이점을 제공합니다.

예를 들어 사용자 입력. 키보드의 방향 키를 위, 아래, 왼쪽, 오른쪽으로 입력 할 때 다양한 키를 하나의 변수로 인코딩 할 수 있습니다. 각 방향은 비트가 할당됩니다.

비트 필드를 통해 키보드를 읽는 예제

var bitField = 0;  // the value to hold the bits
const KEY_BITS = [4,1,8,2]; // left up right down
const KEY_MASKS = [0b1011,0b1110,0b0111,0b1101]; // left up right down
window.onkeydown = window.onkeyup = function (e) {
    if(e.keyCode >= 37 && e.keyCode <41){
        if(e.type === "keydown"){
            bitField |= KEY_BITS[e.keyCode - 37];
        }else{
            bitField &= KEY_MASKS[e.keyCode - 37];
        }
    }    
}

배열로 읽는 예제

var directionState = [false,false,false,false];
window.onkeydown = window.onkeyup = function (e) {
    if(e.keyCode >= 37 && e.keyCode <41){
        directionState[e.keyCode - 37] = e.type === "keydown";
    }    
}

비트를 켜려면 비트를 사용 하거나 | 비트에 해당하는 값 따라서 2 번째 비트를 설정하려면 bitField |= 0b10 으로 설정하면됩니다. 비트를 끄려면 비트를 사용 하고 & 는 필수 비트를 모두 사용하는 값을 사용하십시오. 4 비트 사용 및 두 번째 비트 해제 bitfield &= 0b1101;

위의 예제가 배열에 다양한 키 상태를 할당하는 것보다 훨씬 복잡하다고 말할 수 있습니다. 예 설정하기가 조금 더 복잡하지만 상태를 조사 할 때 이점이 있습니다.

모든 키가 작동하는지 테스트하려는 경우.

// as bit field
if(!bitfield) // no keys are on

// as array test each item in array
if(!(directionState[0] && directionState[1] && directionState[2] && directionState[3])){

일을 더 쉽게하기 위해 몇 가지 상수를 설정할 수 있습니다.

// postfix U,D,L,R for Up down left right
const KEY_U = 1;
const KEY_D = 2;
const KEY_L = 4;
const KEY_R = 8;
const KEY_UL = KEY_U + KEY_L; // up left
const KEY_UR = KEY_U + KEY_R; // up Right
const KEY_DL = KEY_D + KEY_L; // down left
const KEY_DR = KEY_D + KEY_R; // down right

그런 다음 다양한 키보드 상태를 빠르게 테스트 할 수 있습니다.

if ((bitfield & KEY_UL) === KEY_UL) { // is UP and LEFT only down
if (bitfield  & KEY_UL) {             // is Up left down 
if ((bitfield & KEY_U) === KEY_U) {   // is Up only down
if (bitfield & KEY_U) {               // is Up down (any other key may be down)
if (!(bitfield & KEY_U)) {            // is Up up (any other key may be down)
if (!bitfield ) {                     // no keys are down
if (bitfield ) {                      // any one or more keys are down

키보드 입력은 하나의 예일뿐입니다. 비트 필드는 조합하여 사용해야하는 여러 가지 상태가있을 때 유용합니다. Javascript는 비트 필드에 32 비트까지 사용할 수 있습니다. 이들을 사용하면 성능이 크게 향상 될 수 있습니다. 그들은 잘 알고있을 가치가 있습니다.