New Features of Array

Array Destructing

It feels like a way to learn from Ruby or similar languages. In ES5, we didn't have a way to directly assign individual values of an array to multiple variables at once, but now we can, assuming we have such an array:

let users = [ 'Hegwin', 'Jason', 'Ken' ];

If we wanted to directly copy the three elements of users to the three variables in turn, then we could do this:

let [ a, b, c ] = users;
// a => "Hegwin", b => "Jason", c => "Ken"

Also, we can ignore some of the elements in the array: the

let [ a, , b ] = users.
// a => "Hegwin", b => "Ken"

We can also use the spread method:

let [ first, ..rest ] = users;
// first => "Hegwin"
// rest => ['Jason', 'Ken' ]

These three dots indicate copying the remainder of the array, in the form of an array, to the rest variable.

for ... of loop

Still with this array let names = [ 'Hegwin', 'Jason', 'Ken' ], if we need to loop through the elements of the array in order, in ES5 we need to use a for ... in loops, like this:

for (let index in names) {
  console.log(names[index]);
}

And in ES2015, we can use the for ... of loop to retrieve the element itself directly at loop time, instead of fetching through the index:

for (let name of names) {
  console.log(name)
}

Array's find method

Suppose we have this array with three objects in it:

let users = [
  { login: 'Ken', admin: false },
  { login: 'Joe', admin: true },
  { login: 'May', admin: ture },
];

Now we need to find the first user whose admin is true, in the past we needed to use a loop, either native to js or some API provided by jQuery or lodash, whereas in ES2015 we can use the new find method:

let admin = users.admin((user) => {
  return user.admin;
});

The => syntax is used here, or we can write it more simply as follows

let admin = users.find( user => user.admin );

The new data structure Map

What is a Map?

Map is simply a mapping, a structure for storing data in key-value pairs, so the question arises, what is the difference between Map and Object, and what are the application scenarios for each? Simply:

1. The Object will be forced to convert the key to string, regardless of what the key was originally;

2. If you can know your key in advance, then use Object, if the key value can only be obtained at runtime, then use Map.

A simple example of the above illustrates:

let array = [1, 2, 3];
let object = {};
object[array] = "Myth";
console.log(object);

let map = new Map();
map.set(array, "Answer");
console.log(map);

Output:

Object {1,2,3: "Myth"}
Map {[1, 2, 3] => "Answer"}

If you compare, you can see that in Object, we tried to use an array to do the key, but the result we got was the key using the string '1,2,3', while in Map, we used the original structure directly.

Basic operations

The basic operations of Map are: assign, take, delete, and at some point we need to iterate over a Map object.

The first three methods are very simple, namely set(key, value), get(key), delete(key), and Map traversal we can use for ... of loops:

let map = new Map().
map.set('user', 'Hegwin');
map.set('topic', 'ES2015');
map.set('replies', ['So cool!', 'Wanna have a try']);

for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

Output:

user: Hegwin
topic: ES2015
replies: So cool!,Wanna have a try

WeakMap

WeakMap and Map are similar in idea, but different:

1. the key of WeakMap must be an Object object

2. We can not use for ... of loop to iterate over a WeakMap object

3. More efficient in memory, the key of Map is a weak reference to Object; In garbage collection, if an Object is only referenced by WeakMap, then the Object can be recycled.

Note: The origin of the name WeakMap is also due to the "weak reference" this reason.

The new data structure Set

Set, as the name suggests, is a "set", which was born in the background of Array allows duplicate elements, and we also need to set this data structure to ensure that the elements are unique.

The basic methods of Set

• add(value): add an element
• delete(value): delete an element
• has(value): returns true/false, indicating whether the Set contains the value
• clear(): remove all elements

An example would be this:

let tags = new Set();

tags.add("JavaScript Programming");
tags.add({ version: "2015"});
tags.add("web");
tags.add("web");

At the end, we try to add the element with the value "web" twice, but actually, the second addition doesn't take effect:

console.log(tags.size) // => 3

Set traversal

For Set we can use a for ... of loop:

for (let tag of tags) {
  console.log(tag);
}

You can also use the array-like spread method:

let [a, b, c] = tags.

WeakSet

WeakSet is written after Set, and its relationship is very similar to that of WeakMap after Map.

1. The value of WeakSet cannot be read, nor can it be retrieving by for ... of loop

2. It only allows to add Object as an element

3. Based on the above, the only common methods left are #has and #delete

4. The performance at GC is optimized, same as WeakMap