ES6 三个点新语法:数组元素的 rest / spread ,与对象属性的 rest / spread

更新日期: 2018-03-24 阅读次数: 3852 分类: Javascript

今天在看微信小程序 zanui 的 field 组件代码时,发现一个新的语法,即三个点:

<template
      is="zan-field"
      data="{{ ...config.base.name, value }}"></template>

其中的 config.base.name 是个对象,类似于

name: {
	focus: true,
	title: '收货人',
	placeholder: '名字'
}

如果不加这三个点就会报错

 Bad attr `data` with message
<template
	is="zan-field"
> 11 |       data="{{ config.base.name }}"></template>

第一次见此写法,查了一下才发现是 ES6 的新语法:Object rest and spread properties

需要注意的是对象的 rest / spread 属性只在 V8 v6.0.75+ 和 Chrome 60+ 版本以上才支持。

数组 rest elements 示例

const numbers = [1, 2, 3, 4];
=> undefined
const [a, ...b] = numbers;
=> undefined
a
=> 1
b
=> [ 2, 3, 4 ]

数组 spread elements 示例

const new_numbers = [a, ...b];
=> undefined
new_numbers
=> [ 1, 2, 3, 4 ]

对象的 rest properties 示例

const person = { 
..     firstName: 'Zhongwei', 
..     lastName: 'Sun', 
..     country: 'China', 
..     state: 'Shandong', 
.. };
=> undefined
const { firstName, lastName, ...rest } = person;
=> undefined
firstName
=> 'Zhongwei'
rest
=> { country: 'China', state: 'Shandong' }

对象的 spread properties 示例

const new_person = { firstName, lastName, ...rest };
=> undefined
new_person
=> { firstName: 'Zhongwei',
  lastName: 'Sun',
  country: 'China',
  state: 'Shandong' }

爱评论不评论

近期节日

2019年08月23日 处暑
2019年09月03日 抗日胜利纪念日
2019年09月08日 白露
2019年09月08日 国际扫盲日
2019年09月10日 教师节
2019年09月13日 中秋节
2019年09月16日 国际臭氧层保护日
2019年09月16日 世界清洁地球日
2019年09月18日 "九一八"事变纪念日
2019年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
查看更多节日