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

更新日期: 2018-03-24 阅读次数: 5053 分类: 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' }
领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年04月02日 国际儿童图书日
2020年04月03日 寒食节
2020年04月04日 清明节
2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
查看更多节日