복붙노트

[JQUERY] 자바 스크립트에서 null로 병합 (엘비스) 운영자 또는 안전한 항해 운영자가 있습니까?

JQUERY

자바 스크립트에서 null로 병합 (엘비스) 운영자 또는 안전한 항해 운영자가 있습니까?

해결법

  1. 1.당신은 엘비스 연산자 대신에 논리적 'OR'연산자를 사용할 수 있습니다 :

    당신은 엘비스 연산자 대신에 논리적 'OR'연산자를 사용할 수 있습니다 :

    예를 들어 표시 이름 = user.name || "익명".

    그러나 자바 스크립트는 현재 다른 기능이 없습니다. 난 당신이 다른 구문을 원하는 경우 커피 스크립트보고 권 해드립니다. 그것은 당신이 찾고있는 것과 유사한 일부 속기가 있습니다.

    예를 실존 적 연산자

    zip = lottery.drawWinner?().address?.zipcode

    기능 바로 가기

    ()->  // equivalent to function(){}

    섹시한 함수 호출

    func 'arg1','arg2' // equivalent to func('arg1','arg2')

    또한 여러 의견과 클래스가있다. 분명히 당신은 <스크립트 유형 = '텍스트 / 커피 스크립트>'으로 페이지에 자바 스크립트 또는 삽입이 컴파일해야하지만 많은 기능을 :) 추가합니다. <스크립트 유형 = '텍스트 / 커피 스크립트'> 정말로 단지 개발을 목적으로하지를 사용.

  2. 2.나는 다음은 조금 이상하지만, 안전 탐색 사업자에 해당합니다 생각 :

    나는 다음은 조금 이상하지만, 안전 탐색 사업자에 해당합니다 생각 :

    var streetName = user && user.address && user.address.street;

    streetName 다음 user.address.street 또는 미정의 값이 될 것이다.

    당신이 뭔가를 기본값으로 할 경우 다른 당신은 위의 바로 가기와 결합하거나 제공하기 위해 :

    var streetName = (user && user.address && user.address.street) || "Unknown Street";

  3. 3.자바 스크립트 논리 OR 연산자는 단락과 당신의 "엘비스"연산자를 대체 할 수있다 :

    자바 스크립트 논리 OR 연산자는 단락과 당신의 "엘비스"연산자를 대체 할 수있다 :

    var displayName = user.name || "Anonymous";

    하지만, 내 지식을 당신에게 동등한이 없다?. 운영자.

  4. 4.나는 가끔 다음과 같은 관용구가 유용 발견했습니다 :

    나는 가끔 다음과 같은 관용구가 유용 발견했습니다 :

    a?.b?.c

    로 다시 작성할 수 있습니다 :

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

    이 객체 반환에 점점 알 수없는 속성이 우리가 널 (null)을 대체 할 수 있도록, 오히려 널 (null)에 수행 또는 정의되지 않은으로 예외를 던지는 것보다, 정의되지 않은 및 탐색하기 전에 빈 객체로 정의되지 않은 사실을 이용합니다.

  5. 5.자바 스크립트는 이제 엘비스 운영자 및 안전 탐색 운영자 모두에게 동등있다.

    자바 스크립트는 이제 엘비스 운영자 및 안전 탐색 운영자 모두에게 동등있다.

    안전 속성 액세스

    옵션 체인 연산자 (?). 현재 4 단계 ECMAScript를 제안합니다. 당신은 바벨 오늘 사용할 수 있습니다.

    // `undefined` if either `a` or `b` are `null`/`undefined`. `a.b.c` otherwise.
const myVariable = a?.b?.c;

    (&&) 논리 AND 연산자는이 시나리오를 처리 할 수있는 "오래된"더-자세한 방법입니다.

    const myVariable = a && a.b && a.b.c;

    기본값을 제공

    nullish 유착 연산자 (??) 현재 단계 4 ECMAScript를 제안한다. 당신은 바벨 오늘 사용할 수 있습니다. 이것은 조작자의 좌측이 null의 값 (널이 미정 /) 인 경우에 디폴트 값을 설정할 수있다.

    const myVariable = a?.b?.c ?? 'Some other value';

// Evaluates to 'Some other value'
const myVariable2 = null ?? 'Some other value';

// Evaluates to ''
const myVariable3 = '' ?? 'Some other value';

    (||) 논리적 OR 연산자는 약간 다른 동작과 다른 해결책이다. 그것은 운영자의 왼쪽 측면 falsy 경우 디폴트 값을 설정할 수 있습니다. 상기 주 myVariable3 상이 아래 myVariable3 결과있다.

    const myVariable = a?.b?.c || 'Some other value';

// Evaluates to 'Some other value'
const myVariable2 = null || 'Some other value';

// Evaluates to 'Some other value'
const myVariable3 = '' || 'Some other value';

  6. 6.난 lodash _.get ()가 ( "이름"의 사용자) 및 _.get 같은보다 복잡한 태스크 (O ', A [0] .b.c', 'default- _.get 같이 여기 도움 생각 값')

    난 lodash _.get ()가 ( "이름"의 사용자) 및 _.get 같은보다 복잡한 태스크 (O ', A [0] .b.c', 'default- _.get 같이 여기 도움 생각 값')

  7. 7.초안 사양은 현재로서는 :

    초안 사양은 현재로서는 :

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

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

    지금은, 그러나, 나는 lodash GET 사용하려면 (객체, 경로 [DEFAULTVALUE]) 또는 DLV 탐구 (OBJ, 키 패스)

  8. 8.전자의 경우, || 사용할 수 있습니다. 자바 스크립트 "논리적 또는"연산자는 단순히 true와 false 값을 통조림으로 복귀시키는 것이 아니라, 그것이 사실 인 경우는 왼쪽 인자를 반환하고, 그렇지 않으면 평가하고 오른쪽 인수를 반환하는 규칙을 따른다. 당신 만 진리 값에 관심이있는 경우 동일한 밖으로 작동하지만, 또한 foo는 의미 || 바 || 바즈는 진정한 가치를 포함 foo는, 바, 또는 바즈의 왼쪽 하나를 반환합니다.

    전자의 경우, || 사용할 수 있습니다. 자바 스크립트 "논리적 또는"연산자는 단순히 true와 false 값을 통조림으로 복귀시키는 것이 아니라, 그것이 사실 인 경우는 왼쪽 인자를 반환하고, 그렇지 않으면 평가하고 오른쪽 인수를 반환하는 규칙을 따른다. 당신 만 진리 값에 관심이있는 경우 동일한 밖으로 작동하지만, 또한 foo는 의미 || 바 || 바즈는 진정한 가치를 포함 foo는, 바, 또는 바즈의 왼쪽 하나를 반환합니다.

    피하기는 값을 사용하도록 할,하지만, 널 (null)에서 거짓을 구별 할 수있는 하나, 0과 빈 문자열입니다 거짓 값을 찾을 수 없습니다 || 값이 합법적으로 "0이 될 수있는 기본 구조".

  9. 9.옵션 체인은 4 단계에 있고 이것은 당신이 사용자? .address? .street 공식을 사용할 수 있습니다.

    옵션 체인은 4 단계에 있고 이것은 당신이 사용자? .address? .street 공식을 사용할 수 있습니다.

    릴리스를 기다릴 수없는 경우, 바벨 / 플러그인 - 제안 - 선택 - 체인 @ 설치하고 당신이 그것을 사용할 수 있습니다. 여기 내 설정은 나를 위해 작동, 아니면 그냥 니모의 기사를 읽은이다.

    // package.json

{
  "name": "optional-chaining-test",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "7.2.0",
    "@babel/core": "7.2.0",
    "@babel/preset-env": "^7.5.5"
  }
  ...
}

    // .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": true
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

    // index.js

console.log(user?.address?.street);  // it works

  10. 10.다음은 간단한 엘비스 운영자 상당이다 :

    다음은 간단한 엘비스 운영자 상당이다 :

    function elvis(object, path) {
    return path ? path.split('.').reduce(function (nestedObject, key) {
        return nestedObject && nestedObject[key];
    }, object) : object;
}

> var o = { a: { b: 2 }, c: 3 };
> elvis(o)

{ a: { b: 2 }, c: 3 }

> elvis(o, 'a');

{ b: 2 }

> elvis(o, 'a.b');

2

> elvis(o, 'x');

undefined

  11. 11.UPDATE 2019년 9월

    UPDATE 2019년 9월

    예, JS는 지금을 지원합니다. V8 읽기에 옵션 체인은 곧 제공 될 예정입니다 더

  12. 12.이것은 흔히 널 유착 연산자로 알려져있다. 자바 스크립트는 일이 없습니다.

    이것은 흔히 널 유착 연산자로 알려져있다. 자바 스크립트는 일이 없습니다.

  13. 13.당신은 말에 의해 거의 같은 효과를 얻을 수 있습니다 :

    당신은 말에 의해 거의 같은 효과를 얻을 수 있습니다 :

    var displayName = user.name || "Anonymous";

  14. 14.그위한 솔루션, 자신의 필요에 맞게 맞춤형, 내 libs와 중 하나에서 발췌가 :

    그위한 솔루션, 자신의 필요에 맞게 맞춤형, 내 libs와 중 하나에서 발췌가 :

        elvisStructureSeparator: '.',

    // An Elvis operator replacement. See:
    // http://coffeescript.org/ --> The Existential Operator
    // http://fantom.org/doc/docLang/Expressions.html#safeInvoke
    //
    // The fn parameter has a SPECIAL SYNTAX. E.g.
    // some.structure['with a selector like this'].value transforms to
    // 'some.structure.with a selector like this.value' as an fn parameter.
    //
    // Configurable with tulebox.elvisStructureSeparator.
    //
    // Usage examples: 
    // tulebox.elvis(scope, 'arbitrary.path.to.a.function', fnParamA, fnParamB, fnParamC);
    // tulebox.elvis(this, 'currentNode.favicon.filename');
    elvis: function (scope, fn) {
        tulebox.dbg('tulebox.elvis(' + scope + ', ' + fn + ', args...)');

        var implicitMsg = '....implicit value: undefined ';

        if (arguments.length < 2) {
            tulebox.dbg(implicitMsg + '(1)');
            return undefined;
        }

        // prepare args
        var args = [].slice.call(arguments, 2);
        if (scope === null || fn === null || scope === undefined || fn === undefined 
            || typeof fn !== 'string') {
            tulebox.dbg(implicitMsg + '(2)');
            return undefined;   
        }

        // check levels
        var levels = fn.split(tulebox.elvisStructureSeparator);
        if (levels.length < 1) {
            tulebox.dbg(implicitMsg + '(3)');
            return undefined;
        }

        var lastLevel = scope;

        for (var i = 0; i < levels.length; i++) {
            if (lastLevel[levels[i]] === undefined) {
                tulebox.dbg(implicitMsg + '(4)');
                return undefined;
            }
            lastLevel = lastLevel[levels[i]];
        }

        // real return value
        if (typeof lastLevel === 'function') {
            var ret = lastLevel.apply(scope, args);
            tulebox.dbg('....function value: ' + ret);
            return ret;
        } else {
            tulebox.dbg('....direct value: ' + lastLevel);
            return lastLevel;
        }
    },

    마치 마법처럼 작동합니다. 덜 고통을 즐기십시오!

  15. 15.당신은 자신의 롤 수 :

    당신은 자신의 롤 수 :

    function resolve(objectToGetValueFrom, stringOfDotSeparatedParameters) {
    var returnObject = objectToGetValueFrom,
        parameters = stringOfDotSeparatedParameters.split('.'),
        i,
        parameter;

    for (i = 0; i < parameters.length; i++) {
        parameter = parameters[i];

        returnObject = returnObject[parameter];

        if (returnObject === undefined) {
            break;
        }
    }
    return returnObject;
};

    그리고 다음과 같이 사용 :

    var result = resolve(obj, 'a.b.c.d');

    A, B, C 또는 D 중 어느 하나가 정의되면 * 결과는 정의되지 않는다.

  16. 16.이 기사 (https://www.beyondjava.net/elvis-operator-aka-safe-navigation-javascript-typescript)와 프록시를 사용하여 솔루션을 수정을 참조하십시오.

    이 기사 (https://www.beyondjava.net/elvis-operator-aka-safe-navigation-javascript-typescript)와 프록시를 사용하여 솔루션을 수정을 참조하십시오.

    function safe(obj) {
    return new Proxy(obj, {
        get: function(target, name) {
            const result = target[name];
            if (!!result) {
                return (result instanceof Object)? safe(result) : result;
            }
            return safe.nullObj;
        },
    });
}

safe.nullObj = safe({});
safe.safeGet= function(obj, expression) {
    let safeObj = safe(obj);
    let safeResult = expression(safeObj);

    if (safeResult === safe.nullObj) {
        return undefined;
    }
    return safeResult;
}

    이처럼 전화 :

    safe.safeGet(example, (x) => x.foo.woo)

    결과는 만남 null 또는 그 경로를 따라 정의되지 않은 것으로 표현을 위해 정의되지 않을 것이다. 당신은 야생 가서 개체 프로토 타입을 수정할 수 있습니다!

    Object.prototype.getSafe = function (expression) {
    return safe.safeGet(this, expression);
};

example.getSafe((x) => x.foo.woo);

  17. 17.바벨 플러그인으로, 현재 2 단계에서 옵션 체인에 대한 제안 [1] 거기에 아주 늦게 점프 [2] 가능합니다. 내가 알고 있는데 어떤 브라우저에서 현재 아닙니다.

    바벨 플러그인으로, 현재 2 단계에서 옵션 체인에 대한 제안 [1] 거기에 아주 늦게 점프 [2] 가능합니다. 내가 알고 있는데 어떤 브라우저에서 현재 아닙니다.

  18. 18.이것은 오랫동안 나를 위해 문제였다. 나는 우리가 엘비스 운영자 또는 무언가를 일단 쉽게 마이그레이션 할 수있는 솔루션을 마련했다.

    이것은 오랫동안 나를 위해 문제였다. 나는 우리가 엘비스 운영자 또는 무언가를 일단 쉽게 마이그레이션 할 수있는 솔루션을 마련했다.

    이것은 내가 무엇을 사용; 배열과 객체 모두 작동

    tools.js 파일 또는 무언가에 넣고

    // this will create the object/array if null
Object.prototype.__ = function (prop) {
    if (this[prop] === undefined)
        this[prop] = typeof prop == 'number' ? [] : {}
    return this[prop]
};

// this will just check if object/array is null
Object.prototype._ = function (prop) {
    return this[prop] === undefined ? {} : this[prop]
};

    사용 예 :

    let student = {
    classes: [
        'math',
        'whatev'
    ],
    scores: {
        math: 9,
        whatev: 20
    },
    loans: [
        200,
        { 'hey': 'sup' },
        500,
        300,
        8000,
        3000000
    ]
}

// use one underscore to test

console.log(student._('classes')._(0)) // math
console.log(student._('classes')._(3)) // {}
console.log(student._('sports')._(3)._('injuries')) // {}
console.log(student._('scores')._('whatev')) // 20
console.log(student._('blabla')._('whatev')) // {}
console.log(student._('loans')._(2)) // 500 
console.log(student._('loans')._(1)._('hey')) // sup
console.log(student._('loans')._(6)._('hey')) // {} 

// use two underscores to create if null

student.__('loans').__(6)['test'] = 'whatev'

console.log(student.__('loans').__(6).__('test')) // whatev

    물론 나는 코드 A가 읽을 비트 수 있지만 단순한 하나 라이너 해결책와 위대한 작품을 알고있다. 나는 사람을 도움이되기를 바랍니다 :)

  19. 19.이것은 몇 가지 믹스 인을 사용하여 안전한 항해 연산자에 대한 흥미로운 솔루션이었습니다 ..

    이것은 몇 가지 믹스 인을 사용하여 안전한 항해 연산자에 대한 흥미로운 솔루션이었습니다 ..

    http://jsfiddle.net/avernet/npcmv/

      // Assume you have the following data structure
  var companies = {
      orbeon: {
          cfo: "Erik",
          cto: "Alex"
      }
  };

  // Extend Underscore.js
  _.mixin({ 
      // Safe navigation
      attr: function(obj, name) { return obj == null ? obj : obj[name]; },
      // So we can chain console.log
      log: function(obj) { console.log(obj); }
  });

  // Shortcut, 'cause I'm lazy
  var C = _(companies).chain();

  // Simple case: returns Erik
  C.attr("orbeon").attr("cfo").log();
  // Simple case too, no CEO in Orbeon, returns undefined
  C.attr("orbeon").attr("ceo").log();
  // IBM unknown, but doesn't lead to an error, returns undefined
  C.attr("ibm").attr("ceo").log();

  20. 20.내가 사용이 훨씬 쉽게 패키지를 만들었습니다.

    내가 사용이 훨씬 쉽게 패키지를 만들었습니다.

    NPM의 jsdig GitHub의 jsdig

    당신은 및 개체 같은 간단한 일을 처리 할 수 ​​있습니다 :

    const world = {
  locations: {
    europe: 'Munich',
    usa: 'Indianapolis'
  }
};

world.dig('locations', 'usa');
// => 'Indianapolis'

world.dig('locations', 'asia', 'japan');
// => 'null'

    또는 조금 더 복잡 :

    const germany = () => 'germany';
const world = [0, 1, { location: { europe: germany } }, 3];
world.dig(2, 'location', 'europe') === germany;
world.dig(2, 'location', 'europe')() === 'germany';

  21. 21.개인적으로 내가 사용

    개인적으로 내가 사용

    function e(e,expr){try{return eval(expr);}catch(e){return null;}};

    예를 안전하게 얻을 :

    var a = e(obj,'e.x.y.z.searchedField');

    22. from https://stackoverflow.com/questions/6613952/is-there-a-null-coalescing-elvis-operator-or-safe-navigation-operator-in-javas by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 날짜 선택기 - 비활성화 지난 날짜  (0) 2020.10.14
[JQUERY] 어떤 선택 나는 그것의 텍스트 별 옵션을 선택해야합니까?  (0) 2020.10.14
[JQUERY] 크로스 도메인 포스트에 자격 증명을 보내는?  (0) 2020.10.14
[JQUERY] jQuery를이 - 체크 박스를 활성화 / 비활성화  (0) 2020.10.14
[JQUERY] JQuery와 아약스 요청의 진행을 얻을 수있는 가장 깨끗한 방법은 무엇입니까?  (0) 2020.10.14
,

티스토리툴바