예를 들어 설명하겠습니다.

엘비스 연산자 (? :)

"Elvis 연산자"는 Java의 3 진 연산자를 줄입니다. 이것이 편리한 곳의 한 예는 표현식이 false 또는 null로 해석되는 경우 '감지 가능한 기본값'을 반환하는 것입니다. 간단한 예는 다음과 같습니다.

def gender = user.male ? "male" : "female"  //traditional ternary operator usage

def displayName = user.name ?: "Anonymous"  //more compact Elvis operator

안전 탐색 연산자 (?.)

안전 탐색 연산자는 NullPointerException을 피하기 위해 사용됩니다. 일반적으로 객체에 대한 참조가있는 경우 객체의 메서드 나 속성에 액세스하기 전에 객체가 null이 아닌지 확인해야합니다. 이를 피하기 위해 안전한 탐색 연산자는 다음과 같이 예외를 발생시키는 대신 단순히 null을 반환합니다.

def user = User.find( "admin" )           //this might be null if 'admin' does not exist
def streetName = user?.address?.street    //streetName will be null if user or user.address is null - no NPE thrown

Elvis 연산자 대신 논리 'OR'연산자를 사용할 수 있습니다.

예를 들면 displayname = user.name || "Anonymous".

그러나 Javascript에는 현재 다른 기능이 없습니다. 다른 구문을 원하면 CoffeeScript를 보는 것이 좋습니다 . 찾고있는 것과 비슷한 약기가 있습니다.

예를 들어 존재 연산자

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

기능 단축키

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

섹시한 함수 호출

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

여러 줄 주석과 클래스도 있습니다. 분명히 이것을 자바 스크립트로 컴파일하거나 페이지에 삽입해야 <script type='text/coffeescript>'하지만 많은 기능을 추가합니다 :). 사용 <script type='text/coffeescript'>은 실제로 개발 용이 아니며 프로덕션 용이 아닙니다.

조금 더 길지만 다음은 안전한 탐색 연산자와 동일하다고 생각합니다.

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

streetName그러면 user.address.street또는 의 값이 undefined됩니다.

다른 것을 기본값으로 사용하려면 위의 단축키와 결합하거나 다음을 제공 할 수 있습니다.

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

Javascript의 논리 OR 연산자 가 단락 되어 "Elvis"연산자를 대체 할 수 있습니다.

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

그러나 내 지식으로는 ?.운영자 와 동등한 것은 없습니다 .

때때로 다음 관용구가 유용하다는 것을 알았습니다.

a?.b?.c

다음과 같이 다시 작성할 수 있습니다.

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

이것은 객체에서 알 수없는 속성을 얻는 것이 null또는 on 에서처럼 예외를 던지기보다는 정의되지 않은 것을 반환한다는 사실을 이용 undefined하므로 탐색하기 전에 null 및 undefined를 빈 객체로 바꿉니다.

lodash _.get()가에서와 같이 여기에서 도울 수 있다고 생각 _.get(user, 'name')합니다._.get(o, 'a[0].b.c', 'default-value')

현재 초안 스펙이 있습니다.

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

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

그러나 지금은 lodashget(object, path [,defaultValue]) 또는 dlv 를 사용하고 싶습니다.delve(obj, keypath)

업데이트 (2019 년 12 월 23 일 현재) :

옵션 체인이 4 단계로 이동했습니다.

2019 년 업데이트

JavaScript는 이제 Elvis Operator 및 Safe Navigation Operator에 해당합니다.

안전한 자산 접근

옵션 체인 연산자 ( ?.) 현재이다 단계 4 인 ECMAScript의 제안 . 오늘 Babel과 함께 사용할 수 있습니다 .

// `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.c;

기본 제공

nullish 병합 연산자 ( ??) 현재 인 3 단 대한 ECMAScript 제안 . 오늘 Babel과 함께 사용할 수 있습니다 . 연산자의 왼쪽이 널값 ( null/ undefined) 인 경우 기본값을 설정할 수 있습니다 .

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 연산자 ( ||) 다른 해결책이 약간 다른 행동 . 연산자의 왼쪽이 거짓 인 경우 기본값을 설정할 수 있습니다 . 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';

전자의 경우을 사용할 수 있습니다 ||. 단순히 미리 준비된 true 및 false 값을 반환하는 것이 아니라 Javascript "논리적"연산자는 왼쪽 인수가 true이면 반환하고 그렇지 않으면 오른쪽 인수를 평가하고 반환하는 규칙을 따릅니다. 진실 가치에만 관심이 있다면 그것은 똑같이 작동하지만 또한 진정한 가치를 포함하는 foo, bar 또는 baz의 가장 왼쪽 을 foo || bar || baz반환 한다는 것을 의미 합니다 .

그러나 false와 null을 구별 할 수있는 것을 찾지 못하고 0과 빈 문자열은 false 값이므로 합법적으로 0 또는 일 수 있는 value || default구문을 사용하지 마십시오 .value""

예, 있습니다! 🍾

선택적 연결 은 4 단계에 있으며 user?.address?.street수식 을 사용할 수 있습니다 .

릴리스를 기다릴 수없는 경우 설치 @babel/plugin-proposal-optional-chaining하여 사용할 수 있습니다. 여기 나에게 맞는 설정이 있거나 Nimmo의 기사를 읽으십시오 .

// 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

다음은 간단한 elvis 연산자에 해당합니다.

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

2019 년 9 월 업데이트

예, JS는 이제 이것을 지원합니다. V8가 옵션 체인은 곧 제공 될 예정입니다 자세히보기

이것을보다 일반적으로 널 병합 연산자라고합니다. 자바 스크립트가 없습니다.

다음과 같이 말하면 대략 동일한 효과를 얻을 수 있습니다.

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

나는 그것을위한 해결책을 가지고 있으며, 내 라이브러리 중 하나에서 발췌 한 자신의 필요에 맞게 조정하십시오.

    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;
        }
    },

매력처럼 작동합니다. 덜 고통을 즐기십시오!

당신은 당신의 자신을 굴릴 수 있습니다 :

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 중 하나가 정의되지 않은 경우 결과는 정의되지 않습니다.

이 기사 ( 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 또는 undefined가있는 식의 결과는 정의되지 않습니다. 난폭하게 진행 하여 Object 프로토 타입을 수정할 수 있습니다 !

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

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

매우 늦게 들어 서면, 현재 2 단계에 체인 옵션 [2]을 사용할 수있는 옵션 체인에 대한 제안 [1]이 있습니다. 현재 내가 알고있는 브라우저에는 없습니다.

1. https://github.com/tc39/proposal-optional-chaining
2. https://www.npmjs.com/package/@babel/plugin-proposal-optional-chaining

이것은 오랫동안 저에게 문제였습니다. 일단 Elvis 운영자 나 무언가를 얻었을 때 쉽게 마이그레이션 할 수있는 솔루션을 생각해 내야했습니다.

이것이 내가 사용하는 것입니다. 배열과 객체 모두에서 작동

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

글쎄, 코드를 읽을 수는 없지만 간단한 단일 라이너 솔루션이며 훌륭하게 작동한다는 것을 알고 있습니다. 나는 그것이 누군가를 돕기를 바랍니다 :)

이것은 믹스 인을 사용하는 안전한 내비게이션 운영자를위한 흥미로운 솔루션이었습니다.

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();

나는 이것을 훨씬 더 쉽게 사용할 수있는 패키지를 만들었습니다.

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';

개인적으로 사용합니다

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

예를 들어 안전한 얻을 :

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