Can expansion characters be used in es6 arrays?

es6 arrays can use expansion characters. The expander "..." will expand the iterable object into its individual elements, and the so-called iterable object is any object that can be traversed using a "for of" loop, such as arrays, strings, Maps, and Sets; When the expander is used with arrays, it converts an array into a comma-separated sequence of parameters.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

Expand operator (expansion operator) ... is introduced in ES6, which expands the iterable object into its separate elements. The so-called iterable object is any object that can be used with a for of loop. Objects to be traversed, such as arrays, strings, Maps, Sets, DOM nodes, etc.

The spread operator allows an expression to be expanded somewhere. The spread operator can be used where there are multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignments).

Usage of es6 expander (array aspect)

1. Copy array

Given an array, you want How to copy members of one array to another array?

const a = [1, 2];
const b = a;
console.log(b); // [1, 2]

Is it really as simple as it seems? Try modifying the value in array a

a[0] = 3;
console.log(b); // [3, 2]

Eh? Why did I modify the value in array a, but the value in array b also changed? What is involved here is the principle of the stack, so I will not expand it in detail. You only need to know that simply using the method of equalizing both sides cannot complete the copy of the array. You can use the expansion operator here?

const a = [1, 2];
const c = [...a];
console.log(c); // [1, 2]
a[0] = 3;
console.log(c); // [1, 2]

2. Merge arrays

const a = [1, 2];
const b = [3];
const c = [4, 5];

console.log([...a, ...b, ...c]); // [1, 2, 3, 4, 5]
console.log([...c, ...a, ...b]); // [4, 5, 1, 2, 3]
console.log([99, ...a, 24, ...b, ...c]); // [99, 1, 2, 24, 3, 4, 5]

3. Convert strings to arrays

Prerequisite knowledge: Strings can be expanded in the form of arrays?

const name = 'Jae';
console.log(...name); // J a e

In addition to using the split() method to convert a string to an array, you can also use the spread operator?

const name = 'Jae';
const name_string = [...name];
console.log(name_string); // ["J", "a", "e"]

4. Convert common class arrays to arrays

Why? What about converting an array-like object into an array? Because array-like methods cannot use array methods, converting them will be more convenient for some data processing needs~

• arguments

function func() {
	console.log(arguments);
}
func(1, 2); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 使用展开远算符
function func() {
	console.log([...arguments]);
}
func(1, 2); // [1, 2]

• NodeList

<!--HTML代码-->
<p>1</p>
<p>2</p>
<p>3</p>

const a = document.querySelectAll("p");
console.log(a); // NodeList(3) [p, p, p]
console.log([...a]); // [p, p, p]

[Related recommendations: javascript video tutorial, programming video】

The above is the detailed content of Can expansion characters be used in es6 arrays?. For more information, please follow other related articles on the PHP Chinese website!