La déstructuration permet de décompresser les valeurs de tableaux, ou les propriétés d'objets, en variables distinctes.
Avantages
Quelques cas d'utilisation
let array = [1, 2, 3, 4, 5]; let [first, second, ...rest] = array; console.log(first, second, rest); //expected output: 1 2 [3,4,5] let objectFoo = { foo: 'foo' }; let { foo: newVarName } = objectFoo; console.log(newVarName); //expected output: foo // Nested extraction let objectFooBar = { foo: { bar: 'bar' } }; let { foo: { bar } } = objectFooBar; console.log(bar); //expected output: bar
let array = [ { a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }, { a: 7, b: 8, c: 9 }, ]; let newArray = array.map(({ a, ...rest }, index) => ({ a: index + 10, ...rest, })); console.log(newArray); /* expected output: [ { "a": 10, "b": 2, "c": 3 }, { "a": 11, "b": 5, "c": 6 }, { "a": 12, "b": 8, "c": 9 } ]*/
// Object destructuring: const objectDestructure = ({ property }: { property: string }) => { console.log(property); }; objectDestructure({ property: 'foo' }); //expected output: foo // Array destructuring: const arrayDestructure = ([item1, item2]: [string, string]) => { console.log(item1 , item2); }; arrayDestructure(['bar', 'baz']); //expected output: bar baz // Assigning default values to destructured properties: const defaultValDestructure = ({ foo = 'defaultFooVal', bar, }: { foo?: string; bar: string; }) => { console.log(foo, bar); }; defaultValDestructure({ bar: 'bar' }); //expected output: defaultFooVal bar
const obj = { a: 1, b: 2, c: 3 }; const key = 'c'; let { [key]: val } = obj; console.log(val); //expected output: 3
const b = [1, 2, 3, 4]; [b[0], b[2]] = [b[2], b[0]]; // swap index 0 and 2 console.log(b); //expected output : [3,2,1,4]
const obj = { a: 5, b: 6, c: 7 }; const subset = (({ a, c }) => ({ a, c }))(obj); console.log(subset); // expected output : { a: 5, c: 7 }
const arr = ["2024", "17", "07"], date = (([year, day, month]) => ({year, month, day}))(arr); console.log(date); /* expected output: { "year": "2024", "month": "07", "day": "17" } */
function someName(element, input, settings={i:"#1d252c", i2:"#fff", ...input}){ console.log(settings.i); console.log(settings.i2); } someName('hello', {i: '#123'}); someName('hello', {i2: '#123'}); /* expected output: #123 #fff #1d252c #123 */
let arr = [1,2,3,4,5]; let {length} = arr; console.log(length); let func = function dummyFunc(a,b,c) { return 'A B and C'; } let {name, length:funcLen} = func; console.log(name, funcLen); /* expected output : 5 dummyFunc 3 */
//combining two arrays const alphabets = ['A','B','C','D','E','F']; const numbers = ['1','2','3','4','5','6']; const newArray = [...alphabets, ...numbers] console.log(newArray); //expected output: ['A','B','C','D','E','F','1','2','3','4','5','6'] //combining two objects const personObj = { firstname: "John", lastname: "Doe"}; const addressObj = { city: "some city", state: "some state" }; const combinedObj = {...personObj, ...addressObj}; console.log(combinedObj); /* expected output: { "firstname": "John", "lastname": "Doe", "city": "some city", "state": "some state" } */
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!