Expansion operator: the family is so separated

Hello everyone , I'm Carson .

It must be used frequently in business Expansion operator （Spread syntax）, For example, expand the array ：

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

// 6
console.log(sum(...numbers));

Clone objects ：

const clone = { ...obj };

But have you ever seen the following operations ：

This article will talk about the causes of the above situation .

Welcome to join Human high-quality front-end framework group , Take flight

Expand the effect of operators on strings

iterable yes ES2015 Type of addition , Expansion operator Can act on iterable, Expand it to 0 To multiple parameters .Array、String These common types belong to iterable.

iterable have access to for..of Grammar traversal , such as ：

for (let i of 'abc') {
  console.log(i)
}
// a
// b
// c

Array Belong to iterable Well understood. , But why String Also belong to iterable Well ？

This is because in the ES2015 Before ,String Basically achieved Array All elements for traversal , such as ：

• Have .length attribute
• The characters at the index position can be accessed through subscripts

We won't discuss whether this implementation is correct , I just want to say ： When used for traversal ,String And Array The experience is similar to .

So here we are. ES2015, When Array As iterable Support for...of Ergodic time , In terms of experience ,String You also need to support the same syntax .

use Expansion operator an A family of three Result ：

use for...of Traverse , You can see the corresponding Unicode character ：

that A family of three As a emoji, What's special ？

Emoji Sequence

This consists of multiple emoji Combined emoji go by the name of Emoji Sequence, He made use of Words can be combined to form This feature .

such as , Thai is Words that can be combined .

In Thai Hello （ Hello ）, Written as สวัสดีครับ. You'll find that , There is a hat .

Besides , Some characters in Thai also have shoes , such as ผู.

Or there are hat And then there is shoes , such as ：ผู้.

In Thai typing , User input in sequence Basic characters 、 hat 、 shoes , Combine into the required characters before entering End character , Just piece it up into a complete character .

Back to our A family of three , You'll find that , After the expansion of the second 1、3 Items for Zero width character （Zero Width Joiner, abbreviation zwj）：

From the above for...of The result of traversal shows , This zero width character is \u200D. It is usually used for typesetting . but Emoji Sequence Take him as emoji The glue between .

In other words , You can use it. \u200D Will be multiple emoji Combine into one Emoji Sequence.

such as , Dad , Mom , boy It can be combined into a family of three ：

Of course , The little girl It's fine too ：

The little girl And Bachelor's cap Combine into A little girl in a bachelor's hat ：

summary

After knowing the combination method , You can use existing emoji Combine into a brand new Emoji Sequence.

A family of two fathers with children , A family of two mothers with children , This can be tried ～