Mari kita bincangkan tentang 5 cara menarik untuk menggunakan penyahbinaan JS

Artikel ini akan membincangkan 5 kegunaan menarik JavaScript destructuring (Destructuring) Saya harap ia akan membantu anda!

1 Tukar pembolehubah

Cara biasa untuk menukar dua pembolehubah ialah memerlukan pembolehubah sementara tambahan, mari kita lihat satu. senario mudah:

let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

a; // => 2
b; // => 1

temp ialah pembolehubah sementara, yang menyimpan nilai a, kemudian memberikan nilai b kepada a, dan akhirnya < Nilai temp disimpan dalam 🎜> diperuntukkan kepada a, melengkapkan pertukaran. b
Penyusunan tugasan menjadikan pertukaran pembolehubah lebih mudah tanpa perlu membuat pembolehubah sementara secara eksplisit:

let a = 1;
let b = 2;

[a, b] = [b, a];

a; // => 2
b; // => 1

ialah tugasan yang memusnahkan. Di sebelah kanan, [a, b] = [b, a] mencipta tatasusunan [b, a], iaitu [2,1], item pertama tatasusunan ini (iaitu nilai 2) ditugaskan kepada dan item kedua (iaitu nilai 1 ) ) ditugaskan kepada a, melengkapkan pertukaran. b Walaupun kaedah ini masih mencipta tatasusunan sementara, cara menukar pembolehubah ini kelihatan lebih bersih.
Bukan itu sahaja, kaedah ini juga boleh menukar lebih daripada 2 pembolehubah, seperti berikut:

let zero = 2;
let one = 1;
let two = 0;

[zero, one, two] = [two, one, zero];

zero; // => 0
one;  // => 1
two;  // => 2

Anda boleh menukar seberapa banyak pembolehubah yang anda mahu! Walau bagaimanapun, menukar dua pembolehubah adalah senario yang paling biasa.

2. Akses item tatasusunan

Anda mempunyai tatasusunan yang mungkin kosong. Anda ingin mengakses elemen 1, 2 atau nth bagi tatasusunan, tetapi dapatkan nilai lalai jika elemen itu tidak wujud.

Biasanya anda akan menggunakan sifat panjang tatasusunan:

const colors = [];

let firstColor = 'white';
if (colors.length > 0) {
 firstColor = colors[0];
}

firstColor; // => 'white'

Menggunakan pemusnahan tatasusunan untuk mencapai kesan yang sama memerlukan kurang kod:

const colors = [];

const [firstColor = 'white'] = colors;

firstColor; // => 'white'

Pemusnahan akan const [firstColor = 'white'] = colorsElemen pertama tatasusunan diberikan kepada pembolehubah colors. Jika tatasusunan tidak mempunyai sebarang elemen pada indeks 0, nilai lalai "putih" diberikan. firstColor Lebih banyak fleksibiliti disediakan di sini, jika anda hanya mahu mengakses elemen kedua, ini juga mungkin:

const colors = [];

const [, secondColor = 'black'] = colors;

secondColor; // => 'black'

Perhatikan koma di sebelah kiri pemusnahan : ini bermakna Abaikan elemen pertama. diberikan nilai daripada elemen pada indeks 1 dalam tatasusunan secondColor. colors

3. Operasi tidak berubah

Apabila saya mula menggunakan React dan kemudian Redux, saya terpaksa menulis beberapa kod yang melibatkan kebolehubah (Maksudnya di sini adalah untuk mengekalkan yang asal objek tidak berubah). Walaupun ia agak sukar pada mulanya, saya kemudiannya melihat faedahnya:

Lebih mudah untuk mengendalikan aliran data sehala. Kebolehubahan bermaksud dilarang menukar objek. Nasib baik, penstrukturan boleh membantu anda melaksanakan operasi tertentu dengan mudah dengan cara yang tidak berubah.
Pemusnahan digabungkan dengan pengendali selebihnya (
) untuk mengalih keluar elemen pertama tatasusunan: ...

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;

fooNumbers; // => [2, 3]
numbers; // => [1, 2, 3]

Pemusnahan mencipta tatasusunan baharu [, ...fooNumbers] = numbers yang mengandungi fooNumbersElemen selain daripada elemen pertama dalam tatasusunan. numbers Tatasusunan tidak berubah, mengekalkan invarian operasi. numbers Dengan cara tidak berubah yang sama, anda boleh mengalih keluar sifat daripada objek. Mari cuba alih keluar atribut foo daripada objek besar:

const big = {
 foo: 'value Foo',
 bar: 'value Bar'
};

const { foo, ...small } = big;

small; // => { bar: 'value Bar' }
big; // => { foo: 'value Foo', bar: 'value Bar' }

Tugasan memusnahkan digabungkan dengan operator rehat objek mencipta objek baharu

yang mengandungi objek small kecuali bigSemua sifat kecuali hartanah. foo

4. Memusnahkan iterabel

Dalam bahagian sebelumnya, penstrukturan telah digunakan pada tatasusunan. Tetapi anda boleh memusnahkan mana-mana objek yang melaksanakan protokol lelaran.

Banyak jenis dan objek primitif asli boleh diubah: tatasusunan, rentetan, tatasusunan ditaip, set dan peta.
Contohnya, anda boleh menyahbina rentetan kepada beberapa aksara:

const str = 'cheese';

const [firstChar = ''] = str;

firstChar; // => 'c'

Anda tidak terhad kepada jenis asli Dengan melaksanakan protokol boleh lelar, anda boleh menyesuaikan logik penyahbinaan.

mengandungi senarai movies objek. Sangat bagus untuk mendapatkan tajuk filem sebagai rentetan apabila menyahbina movie. Mari kita laksanakan lelaran tersuai: movies

const movies = {
  list: [
    { title: 'Heat' }, 
    { title: 'Interstellar' }
  ],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.list.length) {
          const value = this.list[index++].title;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
};

const [firstMovieTitle] = movies;
console.log(firstMovieTitle); // => &#39;Heat&#39;

Objek melaksanakan protokol lelaran dengan mentakrifkan movies. Kaedah Iterator: Ulangi tajuk filem. Symbol.iterator Mengikuti protokol lelaran membolehkan objek
dinyahkonstruk menjadi tajuk Kaedah khusus untuk mendapatkan tajuk filem pertama ialah: movies. const [firstMovieTitle] = movies

5. Memusnahkan sifat dinamik

Menurut pengalaman saya, memusnahkan objek melalui sifat adalah lebih biasa daripada memusnahkan tatasusunan. Memusnahkan objek kelihatan mudah:

const movie = { title: 'Heat' };

const { title } = movie;

title; // => 'Heat'

mencipta pembolehubah const {title} = movie dan memberikan nilai sifat title kepadanya. movie.title Apabila saya mula-mula membaca tentang pemusnahan objek, saya agak terkejut kerana anda tidak perlu mengetahui nama hartanah secara statik, anda boleh menggunakan nama hartanah dinamik untuk memusnahkan objek!

function greet(obj, nameProp) {
 const { [nameProp]: name = 'Unknown' } = obj;
 return `Hello, ${name}!`;
}

greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman!'
greet({ }, 'name'); // => 'Hello, Unknown!'

greet()函数有两个参数：对象和属性名。在greet()函数内部，解构赋值const {[nameProp]: name = 'Unknown'} = obj使用中括号[nameProp]读取动态属性名，name变量作为别名接收动态属性值。如果属性不存在，你还可以给它赋一个默认值Unknown。

6. 总结

如果你想访问对象属性和数组元素，那么解构非常有用。
在基本用法之上，数组解构便于交换变量、访问数组项、执行一些不可变的操作。
JavaScript提供了更大的可能性，因为你可以使用迭代器定义自定义的解构逻辑。

本文翻译自：5 Interesting Uses of JavaScript Destructuring

地址：https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/

【相关推荐：javascript视频教程、编程视频】

Atas ialah kandungan terperinci Mari kita bincangkan tentang 5 cara menarik untuk menggunakan penyahbinaan JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!