为什么函数返回` `outlet && outlet.activatedRouteData && outlet.activatedRouteData[‘动画’]`？

Question

为什么下面的函数返回outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']而不仅仅是outlet.activatedRouteData['animation']？(这大概就是我们关心的价值)？

src/app/app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot([
      { path: '', pathMatch: 'full', redirectTo: '/enter-leave' },
      { path: 'open-close', component: OpenClosePageComponent },
      { path: 'status', component: StatusSliderPageComponent },
      { path: 'toggle', component: ToggleAnimationsPageComponent },
      { path: 'heroes', component: HeroListPageComponent, data: {animation: 'FilterPage'} },
      { path: 'hero-groups', component: HeroListGroupPageComponent },
      { path: 'enter-leave', component: HeroListEnterLeavePageComponent },
      { path: 'auto', component: HeroListAutoCalcPageComponent },
      { path: 'home', component: HomeComponent, data: {animation: 'HomePage'} },
      { path: 'about', component: AboutComponent, data: {animation: 'AboutPage'} },

    ])
  ],

src/app/app.component.html

<div [@routeAnimations]="prepareRoute(outlet)" >
  <router-outlet #outlet="outlet"></router-outlet>
</div>

src/app/app.component.ts

prepareRoute(outlet: RouterOutlet) {
  return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}

Answer 1

这是为了避免错误的发生。为了获得正确的返回，必须定义所有的值。否则将返回错误的值(未定义|| null)，但重要的是，不会出现导致不必要行为的错误。

return outlet // if outlet is defined this will be fine.

下面，如果outlet为falsy (未定义|| null)，它将只返回outlet，这将停止访问将导致TypeError错误的activatedRouteData。这可以在浏览器控制台中看到。

return outlet && outlet.activatedRouteData 

接下来，只要outlet是真的(在本例中是一个值)，它就会返回outlet.activatedRouteData。以此类推，如果outlet.activatedRouteData为真，则返回outlet.activatedRouteData['animation']，否则只返回outlet.activatedRouteData。

总而言之，这是检查左操作数( value )是否具有真值，以便返回右操作数(value)。导致没有TypeErrors尝试访问未定义的属性。

​

function example()
{
    return null && 3; // will return null. because left hand if falsy.
}
console.log(example());

function exampleTwo()
{
    return 3 && 6; // will return 6 (right hand) , because left value is truthy
}
console.log(exampleTwo());

​

如果没有上面的逻辑，您很可能会看到通过尝试访问未定义的属性而出现类似于以下内容的TypeError。

​

function TypeError()
{
    let example;
    return example.test;
}

console.log(TypeError());

​