ES6/2015의 특수 안전 자산 액세스(및 조건부 할당)

ES6/2015의 특수 안전 자산 액세스(및 조건부 할당)

null예를 들어 CoffeeScript와 같이 ES6(ES2015/JavaScript.next/Harmony)의 안전한 속성 액세스(Null 전파/존재) 연산자는 무엇입니까?아니면 ES7용으로 계획되어 있습니까?

var aThing = getSomething()
...
aThing = possiblyNull?.thing

대략 다음과 같습니다.

if (possiblyNull != null) aThing = possiblyNull.thing

할당되지 할당되지 않아야 합니다.undefined부터 )까지aThingpossiblyNullnull

업데이트(2022-01-13):사람들은 여전히 이것을 찾고 있는 것 같습니다. 최근 이야기는 다음과 같습니다.

• 옵션 체인은 현재 사양(ES2020)으로 최신 브라우저 모두에서 지원되고 있습니다.자세한 내용은 아카이브된 제안서(https://github.com/tc39/proposal-optional-chaining)를 참조하십시오.
• babel-filenv-env: 이 기능이 없는 오래된 환경을 지원해야 하는 경우 https://babeljs.io/docs/en/babel-preset-env을 참조하십시오.
• Babel v7 플러그인 : https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

갱신(2017-08-01) :오피셜 플러그인을 사용하고 싶다면 새로운 트랜스폼으로 바벨7의 알파 빌드를 시험해 볼 수 있습니다.마일리지가 다를 수 있습니다.

https://www.npmjs.com/package/babel-plugin-transform-optional-chaining

오리지널:

현재 스테이지 1에 있는 기능: 옵션 체인.

https://github.com/tc39/proposal-optional-chaining

지금 사용하고 싶은 경우는, 그것을 실현하는 Babel 플러그인이 있습니다.

https://github.com/davidyaha/ecmascript-optionals-proposal

그것은 그처럼 좋지 않다.연산자이지만 유사한 결과를 얻으려면 다음을 수행할 수 있습니다.

user && user.address && user.address.postcode

★★null ★★★★★★★★★★★★★★★★★」undefined둘 다 거짓 값(이 참조 참조)입니다.&&연산자가 null이 아니거나 정의되지 않은 경우에만 연산자에 액세스할 수 있습니다.

또는 다음과 같은 함수를 쓸 수도 있습니다.

function _try(func, fallbackValue) {
    try {
        var value = func();
        return (value === null || value === undefined) ? fallbackValue : value;
    } catch (e) {
        return fallbackValue;
    }
}

사용방법:

_try(() => user.address.postcode) // return postcode or undefined 

또는 폴백 값이 있는 경우:

_try(() => user.address.postcode, "none") // return postcode or a custom string

솔루션, 2020년 솔루션,?. ★★★★★★★★★★★★★★★★★」??

해서 직접 하실 수 있게 되었습니다.?.(옵션 체인) 인라인으로 존재 여부를 안전하게 테스트합니다.최신 브라우저는 모두 이 기능을 지원합니다.

??Nullish Marescking(늘시 마레스킹)을 사용합니다.

aThing = possiblyNull ?? aThing
aThing = a?.b?.c ?? possiblyNullFallback ?? aThing

이 존재하는 , " " "?.다음 체크로 진행하거나 유효한 값을 반환합니다.가 발생하면 반환됩니다.undefined.

const example = {a: ["first", {b:3}, false]}

example?.a  // ["first", {b:3}, false]
example?.b  // undefined

example?.a?.[0]     // "first"
example?.a?.[1]?.a  // undefined
example?.a?.[1]?.b  // 3

domElement?.parentElement?.children?.[3]?.nextElementSibling

null?.()                // undefined
validFunction?.()       // result
(() => {return 1})?.()  // 1

이 정의되도록 을 합니다.?? 번째 값이 truthy를 사용할 수 ||.

example?.c ?? "c"  // "c"
example?.c || "c"  // "c"

example?.a?.[2] ?? 2  // false
example?.a?.[2] || 2  // 2

케이스를 체크하지 않으면 왼쪽 속성이 존재해야 합니다.그렇지 않으면 예외가 발생합니다.

example?.First         // undefined
example?.First.Second  // Uncaught TypeError: Cannot read property 'Second' of undefined

?. 브라우저 지원 - 92%, 2021년 11월

?? 브라우저 지원 - 92 %

Mozilla 문서

--

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

되어 있습니다.??=,||= ★★★★★★★★★★★★★★★★★」&&=원하는 대로 동작하지 않지만, 코드 목적에 따라서는 같은 결과를 얻을 수 있습니다.

메모: 공개 브라우저 버전에서는 아직 일반적이지 않지만 Babel은 번역이 잘 될 것입니다.가용성이 변경되면 업데이트됩니다.

??=는 좌측이 정의되어 있지 않은지, 늘인지 여부를 확인합니다.이미 정의되어 있는 경우는 쇼트 큐팅을 실시합니다.그렇지 않은 경우 왼쪽에는 오른쪽 값이 할당됩니다. ||= ★★★★★★★★★★★★★★★★★」&&=유사하지만, 에 근거하고 있습니다.|| ★★★★★★★★★★★★★★★★★」&&오퍼레이터.

기본적인 예

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

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

오브젝트/어레이 예시

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" }

브라우저 지원 2021년 11월 - 90%

Mozilla 문서

아니요. JavaScript에서 lodash #get 등의 기능을 사용할 수 있습니다.

안전한 숙박시설 접근을 위한 바닐라 대체품

(((a.b || {}).c || {}).d || {}).e

가장 간결한 조건부 할당은 아마도 다음과 같습니다.

try { b = a.b.c.d.e } catch(e) {}

아니요, ES6에는 늘 전파 연산자가 없습니다.이미 알려진 패턴 중 하나를 선택해야 합니다.

단, 다음과 같이 파괴 기능을 사용할 수 있습니다.

({thing: aThing} = possiblyNull);

ES7에 그러한 연산자를 추가하는 것에 대해서는 많은 논의가 있지만(예를 들어), 몇 년 후 ES2020에서 선택적인 체인 구문이 표준화되기 전까지는 실제로 아무런 논의도 이루어지지 않았다.

이 목록을 보면 Ecmascript에 안전한 통과를 추가하는 제안은 현재 없습니다.따라서 이를 위한 좋은 방법이 없을 뿐만 아니라 가까운 장래에 추가되지 않을 것입니다.

편집: 제가 이 글을 처음 작성했기 때문에, 사실 이 글은 언어에 추가되어 있습니다.

// Typescript
static nullsafe<T, R>(instance: T, func: (T) => R): R {
    return func(instance)
}

// Javascript
function nullsafe(instance, func) {
    return func(instance);
};

// use like this
const instance = getSomething();
let thing = nullsafe(instance, t => t.thing0.thing1.thingx);

안전한 deep get 메서드는 언더스코어.js에 자연스럽게 적합한 것처럼 보이지만 문제는 문자열 프로그래밍을 피하는 것입니다.문자열 프로그래밍을 회피하기 위해 @Felipe의 응답을 수정(또는 적어도 엣지 케이스를 발신자에게 되돌림):

function safeGet(obj, props) {
   return (props.length==1) ? obj[keys[0]] :safeGet(obj[props[0]], props.slice(1))
}

예:

var test = { 
  a: { 
    b: 'b property value',
    c: { }
  } 
}
safeGet(test, ['a', 'b']) 
safeGet(test, "a.b".split('.'))  

// The code for the regex isn't great, 
// but it suffices for most use cases.

/**
 * Gets the value at `path` of `object`.
 * If the resolved value is `undefined`,
 * or the property does not exist (set param has: true),
 * the `defaultValue` is returned in its place.
 *
 * @param {Object} object The object to query.
 * @param {Array|string} path The path of the property to get.
 * @param {*} [def] The value returned for `undefined` resolved values.
 * @param {boolean} [has] Return property instead of default value if key exists.
 * @returns {*} Returns the resolved value.
 * @example
 *
 * var object = { 'a': [{ 'b': { 'c': 3 } }], b: {'c-[d.e]': 1}, c: { d: undefined, e: 0 } };
 *
 * dotGet(object, 'a[0].b.c');
 * // => 3
 * 
 * dotGet(object, ['a', '0', 'b', 'c']);
 * // => 3
 *
 * dotGet(object, ['b', 'c-[d.e]']);
 * // => 1
 *
 * dotGet(object, 'c.d', 'default value');
 * // => 'default value'
 *
 * dotGet(object, 'c.d', 'default value', true);
 * // => undefined
 *
 * dotGet(object, 'c.d.e', 'default value');
 * // => 'default value'
 *
 * dotGet(object, 'c.d.e', 'default value', true);
 * // => 'default value'
 *
 * dotGet(object, 'c.e') || 5; // non-true default value
 * // => 5 
 * 
 */
var dotGet = function (obj, path, def, has) {
    return (typeof path === 'string' ? path.split(/[\.\[\]\'\"]/) : path)
    .filter(function (p) { return 0 === p ? true : p; })
    .reduce(function (o, p) {
        return typeof o === 'object' ? ((
            has ? o.hasOwnProperty(p) : o[p] !== undefined
        ) ? o[p] : def) : def;
    }, obj);
}

저는 2018년을 위해서 조금 재충전이 필요한 질문이라고 생각했습니다.은 도서관 잘 할 수.Object.defineProperty()을 사용하다

myVariable.safeGet('propA.propB.propC');

나는 이것이 안전하다고 생각한다(그리고 js-윤리적이다).writeable그리고.enumerable현재 사용 가능한 정의는defineProperty의 방법ObjectMDN에 기재되어 있는 바와 같이

함수의 정의:

Object.defineProperty(Object.prototype, 'safeGet', { 
    enumerable: false,
    writable: false,
    value: function(p) {
        return p.split('.').reduce((acc, k) => {
            if (acc && k in acc) return acc[k];
            return undefined;
        }, this);
    }
});

이를 설명하기 위해 jsBin과 콘솔 출력을 조합했습니다.jsBin 버전에서는 빈 값에 대한 커스텀 예외도 추가되어 있습니다.이것은 옵션이기 때문에 위의 최소 정의에서 제외했습니다.

개선을 환영하다

언급URL : https://stackoverflow.com/questions/32139078/null-safe-property-access-and-conditional-assignment-in-es6-2015