[javascript] null이거나 JavaScript에서 정의되지 않은 경우 값을 바꿉니다.

Program / 글쓴이

??C # 연산자를 JavaScript 에 적용해야하는 요구 사항이 있는데 방법을 모르겠습니다. C #에서 이것을 고려하십시오.

int i?=null;
int j=i ?? 10;//j is now 10

이제 JavaScript로 설정했습니다.

var options={
       filters:{
          firstName:'abc'
       } 
    };
var filter=options.filters[0]||'';//should get 'abc' here, it doesn't happen
var filter2=options.filters[1]||'';//should get empty string here, because there is only one filter

어떻게 올바르게 수행합니까?

감사.

편집 : 문제의 절반을 발견했습니다 my_object[0]. 객체에 ‘인덱서’표기법을 사용할 수 없습니다 ( ). 그것을 우회하는 방법이 있습니까? (사전에 필터 속성의 이름을 모르고 반복하고 싶지 않습니다).

답변

다음은 JavaScript에 해당하는 것입니다.

var i = null;
var j = i || 10; //j is now 10

주의 논리 연산자는|| 부울 값 만 변환 할 수 있습니다 첫 번째 값 반환하지 않습니다 사실을 .

또한 하나의 단일 객체 대신 객체 배열을 사용하십시오.

var options = {
    filters: [
        {
            name: 'firstName',
            value: 'abc'
        }
    ]
};
var filter  = options.filters[0] || '';  // is {name:'firstName', value:'abc'}
var filter2 = options.filters[1] || '';  // is ''

색인으로 액세스 할 수 있습니다.

답변

문제의 절반을 발견했습니다. ‘인덱서’표기법을 객체 (my_object [0])에 사용할 수 없습니다. 그것을 우회하는 방법이 있습니까?

아니; 이름에서 알 수 있듯이 객체 리터럴 은 배열 이 아니라 객체 이므로 속성의 특정 순서가 없기 때문에 인덱스를 기반으로 속성을 검색 할 수 없습니다. 값을 검색하는 유일한 방법은 특정 이름을 사용하는 것입니다.

var someVar = options.filters.firstName; //Returns 'abc'

또는 for ... in루프를 사용하여 반복하여 :

for(var p in options.filters) {
    var someVar = options.filters[p]; //Returns the property being iterated
}

답변

ES2020 답변

새로운 Nullish Coalescing Operator는 마침내 JavaScript에서 사용할 수 있지만 브라우저 지원은 제한적입니다. caniuse 의 데이터에 따르면 브라우저의 48.34 % 만 지원됩니다 (2020 년 4 월 기준).

문서에 따르면

nullish 병합 연산자 (??)는 왼쪽 피연산자가 null이거나 정의되지 않은 경우 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자입니다.

const options={
  filters:{
    firstName:'abc'
  }
};
const filter = options.filters[0] ?? '';
const filter2 = options.filters[1] ?? '';

이것은 당신의 변수 모두의 대체 값이있을 것이라는 점을 보장합니다 ''경우를 filters[0]또는 filters[1]이다 null, 또는 undefined.

nullish 병합 연산자는 다음과 같은 falsy 값의 다른 유형에 대한 기본 값을 반환하지 않습니다 걸릴 노트 수행 0과 ''. 모든 거짓 값을 고려하려면 OR 연산자를 사용해야합니다 ||.

답변

논리적 널 할당, 2020+ 솔루션

새 연산자가 현재 브라우저에 추가되고 ??=있습니다. 이것은 value = value ?? defaultValue.

||=및 &&=도오고, 아래에 연결합니다.

이것은 왼쪽이 정의되지 않았는지 또는 이미 정의 된 경우 단락되어 있는지 여부를 확인합니다. 그렇지 않은 경우 왼쪽에 오른쪽 값이 할당됩니다.

기본 예

let a          // undefined
let b = null
let c = false

a ??= true  // true
b ??= true  // true
c ??= true  // false

// Equivalent to
a = a ?? true

객체 / 배열 예

let x = ["foo"]
let y = { foo: "fizz" }

x[0] ??= "bar"  // "foo"
x[1] ??= "bar"  // "bar"

y.foo ??= "buzz"  // "fizz"
y.bar ??= "buzz"  // "buzz"

x  // Array [ "foo", "bar" ]
y  // Object { foo: "fizz", bar: "buzz" }

기능적 예

function config(options) {
    options.duration ??= 100
    options.speed ??= 25
    return options
}

config({ duration: 555 })   // { duration: 555, speed: 25 }
config({})                  // { duration: 100, speed: 25 }
config({ duration: null })  // { duration: 100, speed: 25 }

?? = 브라우저 지원 2020 년 7 월-.03 %

?? = Mozilla 문서

|| = Mozilla 문서

&& = Mozilla 문서

답변

해체 솔루션

질문 내용이 변경되었을 수 있으므로 철저히 답변하겠습니다.

Destructuring을 사용하면 속성이있는 모든 항목에서 값을 가져올 수 있습니다. null / undefined 및 이름 별칭 인 경우 기본값을 정의 할 수도 있습니다.

const options = {
    filters : {
        firstName : "abc"
    }
}

const {filters: {firstName = "John", lastName = "Smith"}} = options

// firstName = "abc"
// lastName = "Smith"

참고 : 대문자 사용 문제

어레이로 작업하는 경우 수행하는 방법은 다음과 같습니다.

이 경우 배열의 각 개체에서 이름이 추출되고 자체 별칭이 지정됩니다. 객체가 존재하지 않을 수도 있기 때문에 = {}또한 추가되었습니다.

const options = {
    filters: [{
        name: "abc",
        value: "lots"
    }]
}

const {filters:[{name : filter1 = "John"} = {}, {name : filter2 = "Smith"} = {}]} = options

// filter1 = "abc"
// filter2 = "Smith"

더 자세한 튜토리얼

브라우저 지원 92 % 2020 년 7 월

답변