关于javascript:展开操作符一家人就这么被拆散了

大家好，我卡颂。

想必大家在业务中应该常常应用 开展操作符（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。

两个爸爸带孩子的家庭，两个妈妈带孩子的家庭，这都是能够尝试的嘛～