امروز با کد زیر مواجه شدم و فهمش برام جذاب بود:
|
1 |
const maxColumns = Math.max(...jsonData.map((row) => row.length)); |
با مفهوم اپراتورهای rest و spread آشنا شدم که از ES6 به بعد به جاوااسکریپت اضافه شدن.
کد زیر رو در نظر بگیرید»
|
1 2 3 4 5 6 7 |
jsonData = [ ["A", "B", "C"], // Row 1: 3 columns ["D", "E"], // Row 2: 2 columns ["F", "G", "H", "I"] // Row 3: 4 columns ]; jsonData.map((row) => row.length); |
خروجی کد بالا [3, 2, 4] است. حالا کد زیر رو ببینید:
|
1 |
Math.max(...jsonData.map((row)=>row.length)); |
حالا خروجی کد بالا برابر با 4 است. یعنی اپراتور spread که همون … است آرایه رو به المانهای توش پخش میکنه و نتیجه اون اپراتور میشه Math.max(4,2,3)
اپراتور دیگه ای وجود داره به اسم rest:
|
1 2 3 |
const [first, ...rest] = [1, 2, 3, 4]; console.log(first); // 1 console.log(rest); // [2, 3, 4] |
یک سری مثال در جاوااسکریپت و react
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// Array const arr = [1, 2, 3]; console.log(...arr); // Outputs: 1 2 3 const newArr = [...arr, 4, 5]; // Combines arrays console.log(newArr); // [1, 2, 3, 4, 5] // Function arguments Math.max(...[10, 20, 30]); // Equivalent to Math.max(10, 20, 30) // Object const obj = { a: 1, b: 2 }; const newObj = { ...obj, c: 3 }; // Merges objects console.log(newObj); // { a: 1, b: 2, c: 3 } // Function parameters function sum(...nums) { // Gathers arguments into an array return nums.reduce((total, num) => total + num, 0); } console.log(sum(1, 2, 3)); // 6 // Destructuring const [first, ...rest] = [1, 2, 3, 4]; console.log(first); // 1 console.log(rest); // [2, 3, 4] // Passing props const Component = (props) => <div {...props}>Hello!</div>; // Updating state const newState = { ...oldState, updatedKey: newValue }; // Cloning arrays/objects const newArray = [...oldArray, newItem]; const newObject = { ...oldObject, newKey: newValue }; |