Rumah > hujung hadapan web > tutorial js > JavaScript - Memusnahkan Tatasusunan & Objek [Dokumen Langsung]

JavaScript - Memusnahkan Tatasusunan & Objek [Dokumen Langsung]

王林
Lepaskan: 2024-08-19 20:30:54
asal
675 orang telah melayarinya

JavaScript - Destructuring Arrays & Objects [Live Doc]

  • Kaji topik baharu secara berasingan, jika tidak, minda tidak akan dapat memahami konsep itu sepenuhnya untuk jangka masa panjang. Ini juga disokong oleh beberapa kajian empirikal.
  • Memusnahkan: Cara membongkar nilai daripada tatasusunan atau objek ke dalam pembolehubah yang berasingan.
const nums = [8,4,5];
const num1 = nums[0];
const num2 = nums[1];
const num3 = nums[2];
console.log(num1, num2, num3);

is reduced to 

const [x,y,z] = nums;
console.log(x, y, z);

three const variables named x,y,z are created in this step
Salin selepas log masuk
  • [x,y,z] walaupun kelihatan seperti tatasusunan tetapi apabila ia pada LHS =, maka ia dianggap sebagai memusnahkan.
  • Pemusnahan ialah operasi yang tidak berubah.
const girl = {
  name: 'Melania',
  friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'],
  eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'],
};

const [first, second] = girl.friends;
console.log(first, second);

const [,,,fourth,last] = girl.eats;
console.log(fourth, last);
Salin selepas log masuk

Tukar Pembolehubah [mutasi]

let array = [5,6];
let [a,b] = array;
console.log(`a: ${a}, b:${b}`);
[b,a] = [a,b];
console.log(`a: ${a}, b:${b}`);
Salin selepas log masuk

Fungsi mengembalikan tatasusunan, serta-merta memusnahkan keputusan yang membolehkan kami mengembalikan berbilang nilai daripada fungsi

const girl = {
  name: 'Melania',
  friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'],
  eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'],
  drinks: ['Juice','Coffee','Coke'],
  order: function(eat,drink){
    return [this.eats[eat],this.drinks[drink]];
  }
};

const [mainCourse, drinks] = girl.order(2, 2);

console.log(`mainCOurse: ${mainCourse}`);
console.log(`drinks: ${drinks}`);
Salin selepas log masuk

Memusnahkan Tatasusunan Bersarang

let nums = [5,3,[8,7,9,3]];
let [x,y,z] = nums;
console.log(`x: ${x}`); // 5
console.log(`y: ${y}`); // 3
console.log(`z: ${z}`); // 8,7,9,3

let nums2 = [5,3,[8,7]];
let [x,,[y,z]] = nums2;
console.log(`x: ${x}`, `y: ${y}`, `z: ${z}`); // 5 8 7 
Salin selepas log masuk

Pemusnahan daripada Tatasusunan saiz yang tidak diketahui:

const names = ['Michael','Charlie','Peter'];
let [w='XXX',x='XXX',y='XXX',z='XXX'] = names;
console.log(w,x,y,z); // 'Michael' 'Charlie' 'Peter' 'XXX'
Salin selepas log masuk

Memusnahkan Objek:

  • Gunakan {} untuk memusnahkan objek, [] untuk memusnahkan tatasusunan.
  • Sediakan nama pembolehubah tepat seperti yang dinyatakan dalam nama sifat objek untuk diekstrak. Susunan nama pembolehubah ini tidak penting.
const girl = {
  name: 'Melania',
  friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'],
  eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'],
  drinks: ['Juice','Coffee','Coke'],
  works: {
        mtwt: {
          start: 9,
          end: 5
        },
        fri: {
          start:9,
          end: 3
        }
  }
};

const {name, works, drinks} = girl;
console.log(name);
console.log(works);
console.log(drinks);


// Replace long property names with custom names:
const {name:user, works:timings, drinks:enjoys} = girl;
console.log(user);
console.log(timings);
console.log(enjoys);


//Destructuring data from API calls returned in the form of objects i.e Attaching a default value to a property that does not exist on object received from an API call

// details does not exist, so default value is assigned
const { details = [], eats: loves = [] } = girl;
console.log(details);
// eats exist but is renamed as loves, hence default value won't apply
console.log(loves);
Salin selepas log masuk
## Mutating Variables using object destructuring
let x = 10;
let y = 20;
let obj = {x:1, y:2, z:3};

{x,y} = obj; // Error
When we start a line with a '{', then JS expects a code-block. And we cannot assign anything to a code-block on LHS using = operator. Hence, an Error is thrown. The error is resolved by wrapping into () as shown below
({x,y} = obj); //{ x: 1, y: 2, z: 3 }
Salin selepas log masuk

Memusnahkan Objek Bersarang

const girl = {
  name: 'Melania',
  friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'],
  eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'],
  drinks: ['Juice','Coffee','Coke'],
  works: {
        mtwt: {
          start: 9,
          end: 5
        },
        fri: {
          start:10,
          end: 2
        }
  }
};

let { fri } = works;
console.log(fri);

// Destructuring the fri object using the same property names start, end
let {fri: {start, end}} = works;
console.log(start, end);

// Further renaming for shortening start as 'b' and end as 'e'
let {fri: {start: b, end: e}} = works;
console.log(b, e);





const girl = {
  name: 'Melania',
  friends: ['Alina', 'Alice', 'Ayesha', 'Anamika', 'Anaya'],
  eats: ['Roasted', 'Pizza', 'Burger', 'Rice', 'Manchurian'],
  drinks: ['Juice','Coffee','Coke'],
  works: {
        mtwt: {
          start: 9,
          end: 5
        },
        fri: {
          start:10,
          end: 2
        }
  },
  // these destructured property-names have to be same as they are passed inside the girl.sleep(). Order need not be same.
  sleep: function ({time='NA', address='NA', color = 'NA', duration='NA'}){
    console.log(`${this.name} sleeps at ${address} for ${duration} in ${color}light for ${duration}. She loves to eat ${this.eats[0]}`);
  }
};

// A single object is passed, which will be destructured by the method inside the object extracting all values via destructuring
girl.sleep({time: '10pm', address:'home', color: 'blue', duration: '7hrs'});

girl.sleep({time: '9pm', duration: '7hrs'});
Salin selepas log masuk

Atas ialah kandungan terperinci JavaScript - Memusnahkan Tatasusunan & Objek [Dokumen Langsung]. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan