Membawa anda memahami tugasan pemusnahan JavaScript

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript Terutamanya ia memperkenalkan isu berkaitan tentang tugasan pemusnahan, termasuk pemusnahan tatasusunan, struktur objek dan penggunaan pemusnahan, dsb. Saya harap ia akan membantu anda. Semua orang membantu.

Cadangan berkaitan: Tutorial pembelajaran javascript

Konsep

ES6 menyediakan mod tugasan yang lebih ringkas, daripada Extracting nilai daripada tatasusunan dan objek, ini dipanggil pemusnahan

Contoh:

[a, b] = [50, 100];
console.log(a);
// expected output: 50
console.log(b);
// expected output: 100

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: [30, 40, 50]

Pemusnahan tatasusunan

Pemusnahan tatasusunan adalah sangat mudah dan ringkas , gunakan literal tatasusunan di sebelah kiri ungkapan tugasan Setiap nama pembolehubah dalam literal tatasusunan dipetakan ke item indeks yang sama bagi tatasusunan yang dimusnahkan

Apakah maksudnya seperti contoh di bawah , di sebelah kiri Item dalam tatasusunan masing-masing mendapat nilai indeks sepadan tatasusunan termusnah di sebelah kanan

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

Pengisytiharan memberikan nilai secara berasingan

Anda boleh menyahbina tugasan secara berasingan melalui pengisytiharan pembolehubah

Contoh: Isytihar pembolehubah dan tetapkan nilai masing-masing

// 声明变量
let a, b;
// 然后分别赋值
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Memusnahkan nilai lalai

Jika nilai yang dikeluarkan dengan memusnahkan ialah undefined, anda boleh menetapkan nilai lalai:

let a, b;
// 设置默认值
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

Dalam contoh di atas, kami menetapkan nilai lalai untuk a dan b
Dalam kes ini , jika nilai a atau b ialah undefined, ia akan menetapkan nilai lalai Berikan kepada pembolehubah yang sepadan (5 diberikan kepada a, 7 diberikan kepada b)

Pertukaran nilai pembolehubah

Nyahbina tatasusunan yang dikembalikan oleh fungsi

//交换abc = a;a = b;b = c;

Kita boleh menyahbina secara langsung fungsi yang mengembalikan tatasusunan

Dalam contoh di atas, **c() **Nilai pulangan [10, 20] boleh digunakan dalam baris kod yang berasingan menggunakan penstrukturan

let a = 1;let b = 3;//交换a和b的值[a, b] = [b, a];console.log(a); // 3console.log(b); // 1

Abaikan nilai pulangan (atau langkau item tertentu)

Anda Anda boleh secara selektif melangkau beberapa nilai pulangan yang tidak diingini

function c() {
  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20

Tetapkan baki nilai tatasusunan kepada pembolehubah

Apabila anda menggunakan pemusnahan tatasusunan, anda boleh Berikan semua bahagian tatasusunan yang tinggal kepada pembolehubah

Dalam kes ini, b juga akan menjadi tatasusunan, dan item dalam tatasusunan adalah semua item yang tinggal

function c() {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3

Nota : Berhati-hati untuk tidak menulis koma di penghujung Jika terdapat koma tambahan, ralat akan berlaku dilaporkan

let [a, ...b] = [1, 2, 3];console.log(a); // 1console.log(b); // [2, 3]

Penyahbinaan tatasusunan bersarang

Seperti objek, tatasusunan juga boleh mengalami pemusnahan bersarang
Contoh:

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element may not have a trailing comma

Pemusnahan rentetan

Dalam pemusnahan tatasusunan, jika sasaran pemusnahan ialah objek yang boleh dilalui, pemusnahan dan penetapan boleh dilakukan antara muka Iterator

Asas pemusnahan objek

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Use nested destructuring to assign red, green and blue
// 使用嵌套解构赋值 red, green, blue
const [hex, [red, green, blue]] = color;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

Pemusnahan objek

diperuntukkan kepada nama pembolehubah baharu

let [a, b, c, d, e] = 'hello';/*
a = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'o'
*/

Anda boleh menukar nama pembolehubah apabila menggunakan pemusnahan objek

Kod di atas

mendapat nama atribut p objek o, dan kemudian menyerahkannya kepada a pembolehubah bernama foo

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x;的简写

console.log(y); // 22
console.log(z); // true

Memusnahkan nilai lalai

Jika nilai objek yang dikeluarkan dengan memusnahkan ialah

, kita boleh menetapkan nilai lalai

let o = { p: 22, q: true };
let { p: foo, q: bar } = o;

console.log(foo); // 22
console.log(bar); // true

var {p: foo} = o

dan tetapkan ia kepada nama objek baharu sambil memberikan nilai lalai

Seperti yang dinyatakan sebelum ini, kami menetapkan nilai kepada nama objek baharu, di sini kami boleh memberikan nilai lalai untuk ini nama objek baharu. Jika ia tidak dimusnahkan, nilai lalai akan digunakan secara automatik

undefined

Gunakan kedua-dua tatasusunan dan pemusnahan objek

let { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5

Tatasusunan dan objek boleh digunakan bersama-sama dalam struktur

Pemusnahan tidak lengkap

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

Tetapkan nilai baki pada objek

const props = [
  { id: 1, name: 'Fizz' },
  { id: 2, name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
];

const [, , { name }] = props;
console.log(name); // "FizzBuzz"

Objek bersarang pemusnahan (pemusnahan boleh diabaikan)

Nota

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//不解构x

// x = undefined
// y = 'world'

Berhati-hati apabila menggunakan pembolehubah yang diisytiharkan untuk memusnahkan

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

Ralat contoh:

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;//忽略y
// x = 'hello'

Enjin JavaScript akan memahami

sebagai blok kod, mengakibatkan ralat sintaks Kita perlu mengelak daripada menulis kurungan kerinting dalam Pada permulaan baris, halang JavaScript daripada mentafsirkannya sebagai blok kod Penulisan yang betul:

Tulisan yang betul: Letakkan keseluruhan penyataan tugasan yang memusnahkan dalam kurungan, dan ia boleh dilaksanakan dengan betul

let x;{x} = {x: 1};

Memusnahkan tugasan parameter fungsi{x}
Parameter fungsi juga boleh menggunakan tugasan memusnahkan

let x;({x} = {x: 1});

Dalam kod di atas, permukaan parameter fungsi menambah di atas ialah tatasusunan, tetapi apabila menghantar parameter, parameter tatasusunan dinyahkonstruk kepada pembolehubah x dan y Untuk bahagian dalam fungsi, ia adalah sama seperti menghantar terus dalam x dan y

Tujuan memusnahkan <.>

Terdapat banyak cara untuk menggunakan tugasan memusnahkan

Menukar nilai pembolehubah

function add([x, y]) {
	return x + y;}add([1, 2]);

Kod di atas menukar nilai ​​​​daripada x dan y. Cara penulisan ini bukan sahaja Ringkas dan mudah dibaca, dengan semantik yang jelas

Mengembalikan pelbagai nilai ​​daripada fungsi

Fungsi hanya boleh mengembalikan satu nilai Jika anda ingin mengembalikan berbilang nilai, kami hanya boleh mengembalikan nilai ini adalah seperti memilih sesuatu daripada beg

// 返回一个数组function example() {
  return [1, 2, 3];}let [a, b, c] = example();
  // 返回一个对象
  function example() {
  return {
    foo: 1,
    bar: 2
  };
  }let { foo, bar } = example();

提取JSON数据

解构赋值对于提取JSON对象中的数据，尤其有用

示例：

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

使用上面的代码，我们就可以快速取出JSON数据中的值

相关推荐：javascript教程

Atas ialah kandungan terperinci Membawa anda memahami tugasan pemusnahan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!