Spread Operator 和 路由踩坑

序言
本周在写分页查询的时候遇到了关于...运算符的问题,想到之前例会提过这个运算符，但是当自己独立使用时还是会遇到问题。

分页查询

查询条件：name

export class TeacherIndexComponent implements OnInit {

    pageable = new Pageable();
    loading = true;
    isOkLoading = false;
    teachers = new Array<Teacher>();
    teacherPage = new Page<Teacher>();
    params: Params;
    nameFormControl = new FormControl('');

    constructor(private teacherService: TeacherService,
                private systemConfig: SystemConfigService,
                private route: ActivatedRoute) {
    }

    // 初始化
    ngOnInit() {
        this.route.queryParams.subscribe((params: {page?: string, size?: string}) => {
            this.nameFormControl.setValue(params['name']);
            this.reload(params);
        });
    }

    onSubmit(): void {
        const name = this.nameFormControl.value;
        this.reload({...this.params, ...{name}});
    }

    /**
     * 查询
     * @param params page: 当前页 size: 每页大小
     */
    reload(params: Params): void {
        // 发起查询params
        this.params = params;
        this.teacherService.pageByName(
            // 调用stringToIntegerNumber将查询的字符串转为number
            getDefaultWhenValueIsInValid(params['page'], '0'),
            getDefaultWhenValueIsInValid(params['size'], this.systemConfig.getPageSize()),
            {
                name: params['name'],
            },
        ).subscribe(page => {
            this.teacherPage = page;
        });
    }

    /**
     * 点击分页
     * @param page 当前页
     */
    onPageChange(page: number): void {
        this.reload({...this.params, ...{page}});
    }

    /**
     * 点击改变每页大小
     * @param size 每页大小
     */
    onSizeChange(size: number): void {
        this.reload({...this.params, ...{size}});
    }
}

这是正确代码，但是当我将 onSubmit()方法改成如下：

onSubmit(): void {
        // 将{name}直接改成this.nameFormControl.value
        this.reload({...this.params, ...this.nameFormControl.value});
    }

此时如果nameFormControl.value为'name'，那么在控制台打印的结果就是:

将一个‘name’字符串直接变成一个数组对象？

踩坑记录

此时当我使用param['name]时，获取到的恒为undefined，不断打断点之后发现错误所在。
对比其他写法：{...this.params, ...{xxx}}

猜测：

const name1 = 'name';
console.log({name1}); // 打印结果是{name1: 'name'}

结果：

Spread Operator

何为扩展操作符呢？

The main objective of the spread operator is to spread the elements of an array or object.
简言之：扩展数组或对象元素

扩展对象使用
示例一：

const point2D = {x: 1, y: 2};
const anotherPoint3D = {x: 5, z: 4, ...point2D};
console.log(anotherPoint3D); // {x: 1, y: 2, z: 4}
const yetAnotherPoint3D = {...point2D, x: 5, z: 4}
console.log(yetAnotherPoint3D); // {x: 5, y: 2, z: 4}

示例二：

const foo = {a: 1, b: 2, c: 0};
const bar = {c: 1, d: 2};
/** Merge foo and bar */
const fooBar = {...foo, ...bar};
// fooBar is now {a: 1, b: 2, c: 1, d: 2}

路由踩坑

C层代码

@PutMapping("{dutyId}, {districtId}")
  @JsonView(UpdateJsonView.class)
  public PartBuilding update(
      @PathVariable Long dutyId,
      @PathVariable Long districtId,
      @RequestBody PartBuilding partBuilding) {
    return this.partBuildingService.update(dutyId, districtId, partBuilding);
  }

单元测试代码：

@Test
  void update() throws Exception {
    Long dutyId = new Random().nextLong();
    Long districtId = new Random().nextLong();

    PartBuilding newPartBuilding = getOnePartBuilding();
    PartBuilding oldPartBuilding = getOnePartBuilding();

    String jsonString = JSON.toJSONString(newPartBuilding,
        SerializerFeature.DisableCircularReferenceDetect);
    String url = this.baseUrl + "/" + dutyId.toString() + "," + districtId.toString();

    Mockito.doReturn(oldPartBuilding).when(this.partBuildingService)
        .update(Mockito.anyLong(), Mockito.anyLong(), Mockito.any(PartBuilding.class));

    MockHttpServletRequestBuilder putRequest = MockMvcRequestBuilders
        .put(url)
        .contentType(MediaType.APPLICATION_JSON)
        .content(jsonString);

    this.mockMvc.perform(putRequest)
        .andExpect(status().isOk());

    ArgumentCaptor<PartBuilding> partBuildingArgumentCaptor = ArgumentCaptor.forClass(PartBuilding.class);
    ArgumentCaptor<Long> dutyIdArgumentCaptor = ArgumentCaptor.forClass(Long.class);
    ArgumentCaptor<Long> districtIdArgumentCaptor = ArgumentCaptor.forClass(Long.class);
    Mockito.verify(this.partBuildingService).update(
        dutyIdArgumentCaptor.capture(),
        districtIdArgumentCaptor.capture(),
        partBuildingArgumentCaptor.capture());
    org.assertj.core.api.Assertions
        .assertThat(dutyIdArgumentCaptor.getValue()).isEqualTo(dutyId);
    org.assertj.core.api.Assertions
        .assertThat(districtIdArgumentCaptor.getValue()).isEqualTo(districtId);
    org.assertj.core.api.Assertions.assertThat(
        partBuildingArgumentCaptor.getValue().getUser().getId()
            .equals(newPartBuilding.getUser().getId()));
  }

结果：一直报404！
再测试其他类似的路由如：getById，单元测试也过不去了。

检查：

原因：在写其他地方的时候，由于看到了此处没有空格，习惯的加上空格了，但是路由有自己的rules，多加空格必然不被允许！