JS ES new features: Introduction to extension operators

1. Spread Operator

The spread operator is three dots ... , which allows to expand an expression in place, converting it to a comma-separated sequence of arguments when multiple arguments are required (such as a function call) or multiple values (such as an array).

The sample code is as follows:

// Define an array let arr = [1, 2, 3, 4, 5, 6]
// Expand using the ... spread operator console.log(...arr); // 1 2 3 4 5 6

// Define a function function fun(...item) {
  console.log(...item);
}
// Call function fun(1, 2, 3, 4, 5, 6) // 1 2 3 4 5 6

// Use with expressions let x = 10
arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];
console.log(...arr); //ab

2. Alternative apply() method

Since the spread operator can expand arrays, there is no need for the apply method to convert arrays into function parameters.

The sample code is as follows:

// define a function function fun(a, b, c, d, e) {
  console.log(a, b, c, d, e);
}
// Define an array let arr = [1, 2, 3, 4, 5]
// ES5 calling method fun.apply(null, arr) //1 2 3 4 5
// ES6 calling method fun(...arr) // 1 2 3 4 5

If we take out the maximum value in the array in actual development, the method used is as follows:

let arr = [1, 20, 30, 50, 3, 88, ]
// ES5 let max = Math.max.apply(null, arr)
console.log(max); // 88

E is written as follows:

let arr = [1, 20, 30, 50, 3, 88, ]
// ES6 let max = Math.max(...arr)
console.log(max); // 88

3. Application of extension operator

The application of extended arrays is mainly reflected in the following aspects

1. Copy array

Before ECMAScript 2015 , if you simply assign arr1 to arr2, when you modify arr2, arr1 will also change. This is called shallow copy.

The sample code is as follows:

Let's first understand the concept of deep and shallow copy:

Deep copy : copy the contents of the elements in the array
Shallow copy : copy the memory address of the array element content

let arr1 = [1, 2, 3, 4, 5]
let arr2 = arr1
console.log(arr2); // [ 1, 2, 3, 4, 5 ]
// Modify the data content of arr2 arr2[2] = 6;
// Both will change console.log(arr1, arr2); // [ 1, 2, 6, 4, 5 ] [ 1, 2, 6, 4, 5 ]

If you want to complete a deep copy, the sample code is as follows:

let arr1 = [1, 2, 3, 4, 5]
let arr2 = []
// ES5 for (let i = 0; i < arr1.length; i++) {
  arr2[i] = arr1[i];
}
arr2[2] = 6;
// Only arr2 changes console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ]

// ES6 arr2 = [...arr1]
arr2[2] = 6;
// Only arr2 changes console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ]

2. Merge arrays

The spread operator provides a new way to write array merging. The sample code is as follows:

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 merged array console.log(arr1.concat(arr2, arr3)); // [ 'a', 'b', 'c', 'd', 'e' ]


// ES6 merged array console.log([...arr1, ...arr2, ...arr3]); // [ 'a', 'b', 'c', 'd', 'e' ]

It is worth noting that both methods are shallow copies.

3. Use with decoupled assignment

The spread operator can be combined with destructuring assignment to generate arrays (for taking remaining data).

Note: The spread operator can only be placed last.

The sample code is as follows:

// Scenario analysis: get the first and last values in the array let arr = [1, 2, 3, 4, 5]
let first, rest;
// ES5 writing: borrow Array.slice() function first = arr[0]
rest = arr.slice(1)
console.log(first, rest); // 1 [ 2, 3, 4, 5 ]
// ES6 way of writing [first, ...rest] = arr
console.log(first, rest); // 1 [ 2, 3, 4, 5 ]

4. Split a string into an array

The spread operator can also convert strings into true arrays. The sample code is as follows:

let str = 'Fox Demon Little Matchmaker'
console.log([...str]); // [ 'fox', 'demon', 'little', 'red', 'mother' ]

This is the end of this article about the introduction of the new feature of JS ES extension operator. For more information about the introduction of ES extension operator, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: