展开操作符:一家人就这么被拆散了
想必大家在业务中应该经常使用展开操作符
(Spread syntax),比如展开数组:
function sum(x, y, z) {return x + y + z;
}const numbers = [1, 2, 3];// 6
console.log(sum(...numbers));
克隆对象:
const clone = { ...obj };
但你有没有见过如下操作:
本文就来聊聊上述情况的成因。
展开操作符对字符串的作用
iterable
是ES2015
增加的类型,展开操作符
可以作用于iterable
,将其展开为0到多个参数。Array
、String
这些常见的类型都属于iterable
。
iterable
可以使用for..of
语法遍历,比如:
for (let i of 'abc') {console.log(i)
}
// a
// b
// c
Array
属于iterable
很好理解,但是为什么String
也属于iterable
呢?
这是因为在ES2015
之前,String
基本实现了Array
用于遍历的所有要素,比如:
拥有
.length
属性可以通过下标访问索引位置的字符
我们不讨论这种实现是否正确,只是想说:用于遍历时,String
与Array
体验类似。
所以到了ES2015
,当Array
作为iterable
支持for...of
遍历时,从体验上来说,String
也需要支持同样的语法。
用展开操作符
展开「一家三口」的结果:
用for...of
遍历,可以看到对应的Unicode
字符:
那么「一家三口」作为一个emoji
,有什么特殊的呢?
Emoji Sequence
这种由多个emoji
组合成的emoji
被称为Emoji Sequence
,他利用了文字可以组合形成
这一特性。
比如,泰语就是可以组合形成的文字
。
泰语里的萨瓦迪卡(你好)
,写为「สวัสดีครับ」。你会发现,在字符头上有个「帽子」。
此外,泰语中的一些字符还有「鞋子」,比如「ผู」。
又或者又有「帽子」又有「鞋子」,比如:「ผู้」。
在泰语输入法中,用户依次输入「基本字符」、「帽子」、「鞋子」,组合成需要的字符后再输入「结束字符」,就拼凑成一个完整字符。
回到我们的「一家三口」,你会发现,展开后的第1、3项为「零宽字符」(Zero Width Joiner,简称zwj
):
从上述for...of
遍历的结果可知,这个零宽字符为\u200D
。他通常用于排版。但Emoji Sequence
把他拿去作为emoji
之间的胶水。
换言之,你可以用\u200D
将多个emoji
组合成一个Emoji Sequence
。
比如,「爸爸」,「妈妈」,「小男孩」可以组合成一家三口:
当然,「小女孩」也可以:
「小姑娘」与「学士帽」组合成「戴学士帽的小姑娘」:
总结
当了解组合方法后,你可以用现有emoji
组合成全新的Emoji Sequence
。
两个爸爸带孩子的家庭,两个妈妈带孩子的家庭,这都是可以尝试的嘛~
展开操作符:一家人就这么被拆散了相关推荐
- 【Groovy】map 集合 ( map 集合操作符重载 | *. 展开操作符 | 代码示例 )
文章目录 一.map 集合 " *. " 展开操作符 二.代码示例 一.map 集合 " *. " 展开操作符 对 map 集合使用 " *. &qu ...
- 【Groovy】集合遍历 ( “ *. “ 展开操作符 | 代码示例 )
文章目录 一." *. " 展开操作符 二." *. " 展开操作符的代码示例 一." *. " 展开操作符 " *. " ...
- 【Groovy】map 集合 ( map 集合操作符重载 | 使用 << 操作符添加一个元素 | 代码示例 )
文章目录 一.使用 " << " 操作符添加一个元素 二.代码示例 一.使用 " << " 操作符添加一个元素 对 map 集合 使用 ...
- ES6特性之:Spread操作符
Spread操作符(...),也称作展开操作符,作用是将可迭代的(Iterable)对象进行展开. 比如有2个数组,我们要将其中一个数组中所有元素插入到另一个数组中,通过Spread操作符,就可以这样 ...
- 不容错过的ES6知识点(一):变量、函数、扩展操作符、解构赋值
首先给大家介绍一个网站: freeCodeCamp. ES6 变量 var可以重复声明同一个变量 Object.freeze:禁止对对象进行增删改操作 函数 使用箭头函数编写简洁的匿名函数 设置函数的 ...
- Groovy 操作符
目录 1. 算术操作符 1.1 普通算术操作符 1.2 一元操作符 1.3 赋值算术操作符 2. 关系运算符 3. 逻辑运算符 3.1 优先级 3.2 短路特性 4. 位运算操作符 5. 条件运算符 ...
- (四)Flutter 学习之 Dart 操作符、控制流和异常处理
Flutter系列文章目录导读: (一)Flutter学习之Dart变量和类型系统 (二)Flutter学习之Dart展开操作符 和 Control Flow Collections (三)Flutt ...
- Java 最常见的 10000+ 面试题及答案整理:持续更新
Java面试题以及答案整理[最新版]Java高级面试题大全(2021版),发现网上很多Java面试题都没有答案,所以花了很长时间搜集,本套Java面试题大全,汇总了大量经典的Java程序员面试题以及答 ...
- 怎么确定迭代器后面还有至少两个值_JS Lazy evaluation:可迭代对象与迭代器
本文已经过原作者 MelkorNemesis 授权翻译. Lazy evaluation Lazy evaluation常被译为"延迟计算"或"惰性计算",指的 ...
- React组件设计实践总结05 - 状态管理
今天是 520,这是本系列最后一篇文章,主要涵盖 React 状态管理的相关方案. 前几篇文章在掘金首发基本石沉大海, 没什么阅读量. 可能是文章篇幅太长了?掘金值太低了? 还是错别字太多了? 后面静 ...
最新文章
- python3.6安装pip-python3.6如何安装pip
- 大数据为何让传统银行焦虑?
- python学习笔记:(三)list(列表)常用的内置方法
- memset函数源码实现
- 近世代数--域--域的一些例子
- SQL用户存在则更新不存在则插入
- HihoCoder - 1829 Tomb Raider(暴力)
- 看周志华教授的一番话有感
- 线性代数 —— 矩阵与矩阵运算
- 可爱的朋友,你是否有很多问号
- Struts2学习笔记(五) Action(下)
- 【渝粤教育】国家开放大学2019年春季 3818-22T燃气工程施工 参考试题
- SpringBoot两种定时任务(Spring Schedule 与 Quartz 整合 )实现
- 无约而来WIN8 PRO WMC X64 201306
- 连接最大数 详解(C++)
- XTU 设置教程 自动化 睡眠 休眠
- c语言————开辟动态内存空间
- 南昌大学计算机考研2021,2021南昌大学考研参考书目
- echarts 中国地图点击进入相应省份 海南省里的南海诸岛换成诸岛简图
- python建模大赛算法_利用Python实现主题建模和LDA 算法(附链接)
热门文章
- macos 获取root权限
- 【 数理逻辑 二 】逻辑概述、现代逻辑学发展历程和形式系统与形式语言
- 机器学习案例-信用卡诈骗识别。
- 【期末复习】网络安全技术(双语)
- c语言程序运行结果怎么看,c语言程序的运行结果.ppt
- 当杭州为人称道的美丽遇见了华为云!
- MariaDB 10.6.10离线安装
- PPT精美模板免费下载网站 高清壁纸免费下载网站 在线PS(Photoshop在线网站)网站 分享
- mysql 每5分钟统计_SQL按时间段统计(5分钟统计一次访问量为例,oracle统计)
- Python之win7环境下安装python3