Spread operator: the family is torn apart like this

Hello everyone, I'm Casson.

Presumably everyone should often use the spread operator (Spread syntax) in business, such as expanding arrays:

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

const numbers = [1, 2, 3];

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

Clone object:

const clone = { ...obj };

But have you seen the following operations:

This article will discuss the reasons for the above situation.

Welcome to Human high-quality front-end framework group , with flying

What the spread operator does to strings

iterable is an added type of ES2015 , and the expansion operator can act on iterable to expand it into 0 or more parameters. Array , String These common types belong to iterable .

iterable can be traversed using for..of syntax, for example:

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

It is easy to understand that Array belongs to iterable , but why does String also belong to iterable ?

This is because before ES2015 , String basically implements all the elements that Array uses for traversal, such as:

• Has .length attribute
• The character at the index position can be accessed by subscripting

We don't discuss whether this implementation is correct, just want to say: String and Array a similar experience when used for traversal.

So when it comes to ES2015 , when Array supports for...of traversal as iterable , from experience, String also needs to support the same syntax.

The result of expanding the family of three with the expansion operator:

Traversing with for...of , you can see the corresponding Unicode characters:

Then is a family of three, is a emoji , what is special?

Emoji Sequence

This kind of emoji emoji called Emoji Sequence , and he uses the text to form this feature.

For example, Thai is the text that can combine to form.

Sawadika (Hello) in Thai, written as สวัสดีครับ . You will notice that there is a hat on the character head.

In addition, some characters in Thai also have shoes , such as ผู .

Or hat and shoes , for example: ผู้ .

In the Thai input method, the user inputs basic characters , hat , shoes in sequence, and then input ending character to form a complete set of characters.

Back to our family of three , you will find that the first and third items after expansion are zero-width characters (Zero Width Joiner, referred to as zwj ):

From the results of the above for...of traversal, it can be seen that this zero-width character is \u200D . He is usually used for typography. But Emoji Sequence took him as glue between emoji .

In other words, you can use \u200D to combine multiple emoji into one Emoji Sequence .

For example, dad , mom , little boy can be combined into a family of three:

Of course, little girl can also:

little girl and bachelor hat combined into little girl wearing bachelor hat :

Summarize

When you know how to combine, you can combine existing emoji to create a brand new Emoji Sequence .

A family with two fathers with children, a family with two mothers with children, this is something you can try~