[JavaScript] extension operator

Act on array

Expand compound variables such as array, class array object
let arr = [1, 2, 3];
let arrLike = document.querySelectorAll('div');
console.log(...arr); // 1 2 3
console.log(...arrLike); // <div></div> <div></div> <div></div>
An extension operator can be followed by an expression
let x = 0;
let arr = [
    ...(x > 0 ? ['a'] : []), // ... [] is equivalent to not writing
    'b'
];
console.log(arr); // ["b"]
  • If the extension operator is followed by an empty array [], it is equivalent to not writing
let a = null || []; // The default value is set by the short circuit algorithm
console.log([...a, 1]);
Alternative apply() method
  • How to write ES5: use the apply() method
let arr = [0, 1, 2];
function fun(x, y, z) {
    console.log(x + y + z);
}
fun.apply(null, arr); // Use the apply() method
  • Writing method of ES6: use extension operator
fun(...arr);
Copy array
  • How to write ES5: use concat(), slice(), etc
let a1 = [1, 2];
let a2 = a1.concat([]); // Merge empty arrays
let a3 = a1.slice(); // Intercept array from subscript 0
  • Writing method of ES6: use extension operator
let a2 = [...a1]; // Writing method I
let [...a2] = a1; // Writing method 2
Merge array
let arr1 = ['a', 'b'];
let arr2 = ['c'];
let arr3 = ['d', 'e'];
  • Merged array of ES5: use concat() method
let newArr1 = arr1.concat(arr2, arr3);
console.log(newArr1); // ["a", "b", "c", "d", "e"]
  • Merged array of ES6: use extended operator
let newArr2 = [...arr1, ...arr2, ...arr3];
console.log(newArr2); // ["a", "b", "c", "d", "e"]
Used to get subarray
  • ES5: using slice() and other methods
a = list[0], rest = list.slice(1); // Intercept from the position of subscript 1
  • ES6: extension operator... & deconstruction assignment
let [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest); // [2, 3, 4, 5]
let [first, ...rest] = [];
console.log(first); // undefined
console.log(rest); // []
let [first, ...rest] = [1];
console.log(first); // 1
console.log(rest); // []
Convert class array to array
'hello'.split(''); // ["H", "e", "L", "L", "O"] Es5 writing method
[...'hello'] // [ "h", "e", "l", "l", "o" ]
let nodeList = document.getElementsByClassName('div');
let array = [...nodeList];

Act on object

Get the key value pair with the deconstruction assignment
  • The extension operator... Is used to take out all the traversable properties of the object and form a new object
  • This is equivalent to merging objects using the object. Assign (target object, object to be merged) method
let obj = { a: 3, b: 4 };
let obj1 = { ...obj };
let obj2 = Object.assign({}, obj);
console.log(obj1, obj2); // {a: 3, b: 4} {a: 3, b: 4}
  • Get the remaining key value pairs to form a new object
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x, y, z); // 1 2 {a:3, b:4}

Since deconstruction assignment requires an object to the right of the equal sign. For basic data types, those with wrapper classes will be automatically converted to objects:

let { x, ...y } = 2;
console.log(x, y); // undefined {}

If undefined / null is on the right of the equal sign, an error will be reported because they cannot be converted to objects

let { x, y, ...z } = null; // TypeError: Cannot destructure property 'x' of 'null' as it is null
let { x, y, ...z } = undefined;
// TypeError: Cannot destructure property 'x' of 'undefined' as it is undefined
  • The copy of the deconstruction assignment is a shallow copy

If the value of a key is a reference array type (array, object), the deconstruction assignment copy is the reference of the value, not a copy of the value

let obj = { a: { b: 1 } };
let { ...x } = obj; // Here is to deconstruct {} and then integrate through
obj.a.b = 2;
console.log(x.a.b); // 2

rest parameter of function

Decomposes an array argument into multiple formal parameters
  1. Use deconstruction assignment
function show([a, b, c]) {
    console.log(a, b, c);
}
show([1, 9, 6]); //  1 9 6
  1. Use reset parameter (extended operator)
function show(a, b, c) {
    console.log(a, b, c);
}
show(...[1, 9, 6]); // 1 9 6
Integrate multiple arguments into an array parameter
function show(a) {
    console.log(a); // 1
}
show(1, 2, 3, 4, 5);
function show(...a) {
    console.log(a); // [1, 2, 3, 4, 5]
}
show(1, 2, 3, 4, 5);
Convert the class array arguments to an array

arguments is an array of classes (objects). In order to use the array method, you must first convert it to an array

  • ES5: use Array.prototype.slice.call()
function show() {
    console.log(arguments); // Arguments(5) [1, 2, 3, 4, 5...]
}
show(1, 2, 3, 4, 5);
function show() {
    let arr = Array.prototype.slice.call(arguments);
    arr.sort(function (a, b) { // Sort from small to large
        return a - b
    });
    console.log(arr);
}
show(1, 102, 32, 14, 5); // [1, 5, 14, 32, 102]
  • ES6: using extension operators
function show(...arr) {
    arr.sort(function (a, b) { // sort
        return a - b
    });
    console.log(arr);
}
show(1, 102, 32, 14, 5); // [1, 5, 14, 32, 102]
The length attribute of the function does not include the rest parameter
(function (a, b, ...c) {}).length; // 2

Tags: Javascript node.js ECMAScript Vue.js

Posted on Sun, 05 Sep 2021 21:03:35 -0400 by senojeel