1.Copy / concatenate arrays
2.pass to constructors
3.shallow copy objects
4.Call function with multiple parameters
The spread operator expands any iterable object such as a string
or an array into another array.
The spread operator used for passing multiple arguments to a method.
The syntax uses the ellipsis symbol (...) or three dots.
Always on the right-side of an equal sign.
Note : IE and Edge do NOT support spread operator.
ex : String to array
let productNumber = "FR-R92B-58";
let values =[...productNumber];
console.log(values); // ["F", "R", "-", "R", "9", "2", "B", "-", "5", "8"]
ex : Copy array
let arr = [1,2,3];
let arr2= [...arr];
// make changes to duplicated array
arr2.push(4);
arr2[0]=99;
console.log(arr); // [1, 2, 3]
console.log(arr2); // [99, 2, 3, 4]
ex: copy an array of objects
let _products = [
{
productID: 680,
name: "HL Road Frame - Black, 58",
productNumber: "FR-R92B-58",
color: "Black",
standardCost: 1059.31,
listPrice: 1431.50
},
{
productID: 707,
name: "Sport-100 Helmet, Red",
productNumber: "HL-U509-R",
color: "Red",
standardCost: 13.08,
listPrice: 34.99
},
{
productID: 709,
name: "Mountain Bike Socks, M",
productNumber: "SO-B909-M",
color: "White",
standardCost: 3.3963,
listPrice: 9.50
}
];
// Careful with object arrays
// The array is copied, but the underlying objects are still accessed by reference
let diff = [..._products];
diff[0].productID = 999;
console.log(_products[0].productID); // 999
console.log(diff[0].productID); // 999
Note : objects are not copied by value.objects copied by reference.
ex : concatenate two arrays
let _products = [
{
productID: 680,
name: "HL Road Frame - Black, 58",
productNumber: "FR-R92B-58",
color: "Black",
standardCost: 1059.31,
listPrice: 1431.50
},
{
productID: 707,
name: "Sport-100 Helmet, Red",
productNumber: "HL-U509-R",
color: "Red",
standardCost: 13.08,
listPrice: 34.99
},
{
productID: 709,
name: "Mountain Bike Socks, M",
productNumber: "SO-B909-M",
color: "White",
standardCost: 3.3963,
listPrice: 9.50
}
];
let _newProducts = [{
productID: 712,
name: "AWC Logo Cap",
productNumber: "CA-1098",
color: "Multi",
standardCost: 6.9223,
listPrice: 8.99
},
{
productID: 821,
name: "Touring Front Wheel",
productNumber: "FW-T905",
color: "Black",
standardCost: 96.7964,
listPrice: 218.01
}
];
// Concatenation
let allProducts = _products.concat(_newProducts);
console.log(allProducts.length); // 5
let spProducts = [..._products, ..._newProducts];
console.log(spProducts.length); // 5
Using Spread to pass Parameters to a Constructor
we can also use the spread to help us build objects that, where we pass in multiple
values to the constructor.
ex :
// Use with 'new'
let dt = new Date(2019, 10, 15); // 15 Nov 2019
console.log(dt); // Fri Nov 15 2019 00:00:00 GMT+0530 (India Standard Time)
let dateFields = [2019, 11, 15]; // 15 Dec 2019
dt = new Date(...dateFields);
console.log(dt); // Sun Dec 15 2019 00:00:00 GMT+0530 (India Standard Time)
Pass Parameters to a Function :
ex : using spread for function arguments
let args = [1, 2, 3];
multipleParams(...args);
function multipleParams(arg1, arg2, arg3) {
console.log(arg1);
console.log(arg2);
console.log(arg3);
console.log("");
}
Output :
1
2
3
Shallow copy on object literals :
The useful feature of the spread operator is used to perform a shallow copy on object literals.
ex :
let product = {
productID: 680,
name: "HL Road Frame - Black, 58",
standardCost: 1059.31,
listPrice: 1431.50
};
// The following performs a shallow-copy
// Similar to Object.assign()
let prod2 = { ...product };
// Change the newly copied object
prod2.productID = 999;
// Display the objects
console.log(product); // {productID: 680, name: "HL Road Frame - Black, 58", standardCost: 1059.31, listPrice: 1431.5}
console.log(prod2); // {productID: 999, name: "HL Road Frame - Black, 58", standardCost: 1059.31, listPrice: 1431.5}
// Display the changed value
console.log("");
console.log(product.productID); // 680
console.log(prod2.productID); // 999
No comments:
Post a Comment