Bagaimana Anda mendeklarasikan variabel dalam sudut html?

Angular bersama kami sejak hari pertama, namun rasanya mereka tidak mendapatkan perhatian yang layak

Dalam posting ini saya ingin mendemonstrasikan teknik yang bagus yang akan membantu kami memecahkan tantangan kinerja dalam aplikasi sudut kami dan secara umum bekerja lebih sedikit

Singkatnya, dengan variabel referensi template kita dapat mengakses objek pada template. Elemen, arahan, atau komponen DOM. Kita dapat meneruskan referensi ke komponen menggunakan kueri atau sebagai parameter dalam metode pemanggilan template

Posting ini tidak mencakup variabel template secara mendalam, untuk intro saya merekomendasikan pembicaraan ng-conf ini

Mari kita mulai dengan sebuah masalah. Kami memiliki larik dengan 20 objek yang kami tampilkan menggunakan ekspresi *ngFor. Untuk setiap item yang kami tampilkan, kami mendaftar ke acara klik

Tugas kita adalah mengecat batas di sekitar item saat diklik dan menghapusnya saat diklik lagi, mengulangi prosesnya berulang kali — toggle

Mari jelajahi beberapa solusi yang mungkin

Salah satu solusi yang biasanya muncul adalah menyetel properti baru pada setiap objek yang menyatakan apakah akan menampilkan (atau tidak menampilkan) batas. Saat ini berfungsi, ini adalah solusi yang bermutasi, kami mengubah objek. Bagaimana jika kita berurusan dengan meja? . Ada variasi lain dari pendekatan ini, menggunakan simbol, getter yang tidak dapat dihitung, dll…

Solusi lain mungkin berupa objek pencarian. Array atau Peta yang dapat kita gunakan untuk mencari item mana yang diubah. Ini memiliki overhead manajemen, yang mengharuskan kami melacak item yang ditambahkan dan/atau dihapus. Pencarian mungkin luas, bekerja dengan koleksi besar dan menggabungkan status UI dengan, yang biasanya, komponen halaman. Dengan beberapa pengoptimalan, memilih alat yang tepat, dan bekerja dengan cerdas, kami dapat menyatukannya, tetapi rasanya tidak benar

Kami dapat melakukannya dengan lebih baik, dan Anda mungkin menebaknya dengan benar — menggunakan variabel templat

Direktifnya sangat sederhana, tidak melakukan apa-apa selain memaparkan objek yang dapat kita beri nilai apa pun

Kami menyebutnya direktif var karena ini berfungsi sebagai variabel yang dapat kami gunakan untuk menyimpan data. Itu tinggal di dalam template dan tidak melalui komponen (walaupun kita bisa melakukannya)

Untuk menggunakannya, kita cukup menyetelnya sebagai atribut elemen dan menyetel#myVar=var pada elemen yang sama sehingga diekspor dan siap digunakan. myVar sekarang menjadi objek yang dapat kita gunakan di dalam template

Untuk kesederhanaan, objek data kami adalah array angka

Kami tidak membutuhkan komponen, kami akan mengerjakan template

Penting untuk dicatat bahwa kami menyebutnya var tetapi tidak mengikuti aturan yang sama yang berlaku pada var JavaScript. Variabel templat dokumen Angular bersifat global untuk seluruh templat, tetapi ini per templat, *ngIf *ngFor ng-container dan konstruksi lain membuat blok cakupan baru

Dalam contoh di atas, kami membuat turunan dari direktifvar untuk setiap item dalam koleksi kami. Ini berfungsi karena setiap iterasi *ngFor membuat blok cakupan variabel templat baru sehingga setiap templat mendapatkan turunan baru dari var

Terkadang kita perlu bekerja dalam satu ruang lingkup, artinya satu contoh var. Kita dapat mencoba penerapan yang berbeda tetapi mari kita perbarui direktif terlebih dahulu

Sekarang kita dapat menerima input, objek yang akan kita gunakan untuk menetapkan nilai yang telah ditentukan sebelumnya ke direktif, semacam penginisialisasi

Sekarang kita dapat mencoba pendekatan baru, alih-alih contoh baru untuk var untuk setiap item, kita akan membuat var tingkat atas tunggal dengan larik yang kita petakan ke koleksi kita

Kami menginisialisasi var_ dengan array dan menggunakan array sebagai daftar toggle kami

Ini cukup banyak. Anda dapat menggunakannya untuk skenario lain, misalnya mengubah animasi tanpa status komponen, hanya status template

Jika Anda memiliki kasus penggunaan lain, silakan beri komentar. Jika Anda ingin melakukan peningkatan, silakan bagikan dan tentu saja jika Anda memiliki catatan/perbaikan/masalah, silakan beri komentar di bawah

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

Dengan TypeScript sebagai perpanjangan dari JavaScript, bahasa ini secara alami mendukung

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

Jika Anda menggunakan JavaScript secara sembarangan, bagian selanjutnya mungkin merupakan cara yang baik untuk menyegarkan ingatan Anda. Jika Anda sangat akrab dengan semua keanehan deklarasi

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

tsfunction sumMatrix(matrix: number[][]) { var sum = 0; for (var i = 0; i < matrix.length; i++) { var currentRow = matrix[i]; for (var i = 0; i < currentRow.length; i++) { sum += currentRow[i]; } } return sum;}3 deklarasi

Mendeklarasikan variabel dalam JavaScript secara tradisional selalu dilakukan dengan kata kunci

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
var a = 10;

Seperti yang mungkin sudah Anda ketahui, kami baru saja mendeklarasikan variabel bernama

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

Kita juga dapat mendeklarasikan variabel di dalam suatu fungsi

ts
function f() {
  var message = "Hello, world!";
  return message;
}

dan kami juga dapat mengakses variabel yang sama di dalam fungsi lain

ts
function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  };
}
var g = f();
g(); // returns '11'

Dalam contoh di atas,

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;
  function g() {
    return a;
  }
}
f(); // returns '2'

Aturan pelingkupan

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function f(shouldInitialize: boolean) {
  if (shouldInitialize) {
    var x = 10;
  }
  return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'

Beberapa pembaca mungkin melakukan pengambilan ganda pada contoh ini. Variabel

10
10
10
10
10
10
10
10
10
10

10
10
10
10
10
10
10
10
10
10

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

Aturan pelingkupan ini dapat menyebabkan beberapa jenis kesalahan. Satu masalah yang mereka perburuk adalah fakta bahwa mendeklarasikan variabel yang sama beberapa kali bukanlah kesalahan

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

Mungkin mudah dikenali oleh beberapa pengembang JavaScript yang berpengalaman, tetapi

10
10
10
10
10
10
10
10
10
10

0
1
2
3
4
5
6
7
8
9

0
1
2
3
4
5
6
7
8
9

Kebiasaan menangkap variabel

Luangkan waktu sebentar untuk menebak hasil dari cuplikan berikut

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

Bagi mereka yang tidak terbiasa,

0
1
2
3
4
5
6
7
8
9

Siap?

10
10
10
10
10
10
10
10
10
10

Banyak pengembang JavaScript sangat akrab dengan perilaku ini, tetapi jika Anda terkejut, Anda pasti tidak sendiri. Kebanyakan orang mengharapkan hasilnya

0
1
2
3
4
5
6
7
8
9

Ingat apa yang kami sebutkan sebelumnya tentang pengambilan variabel?

Mari luangkan waktu sebentar untuk mempertimbangkan apa artinya itu.

0
1
2
3
4
5
6
7
8
9

10
10
10
10
10
10
10
10
10
10

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

Solusi umum adalah menggunakan IIFE - Ekspresi Fungsi yang Segera Dipanggil - untuk menangkap

0
1
2
3
4
5
6
7
8
9

ts
for (var i = 0; i < 10; i++) {
  // capture the current state of 'i'
  // by invoking a function with its current value
  (function (i) {
    setTimeout(function () {
      console.log(i);
    }, 100 * i);
  })(i);
}

Pola yang tampak aneh ini sebenarnya cukup umum.

0
1
2
3
4
5
6
7
8
9

0
1
2
3
4
5
6
7
8
9

10
10
10
10
10
10
10
10
10
10

tsfunction sumMatrix(matrix: number[][]) { var sum = 0; for (var i = 0; i < matrix.length; i++) { var currentRow = matrix[i]; for (var i = 0; i < currentRow.length; i++) { sum += currentRow[i]; } } return sum;}0 deklarasi

Sekarang Anda telah mengetahui bahwa

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Perbedaan utamanya bukan pada sintaksisnya, tetapi pada semantiknya, yang sekarang akan kita selami

Pelingkupan blok

Ketika sebuah variabel dideklarasikan menggunakan

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

10
10
10
10
10
10
10
10
10
10

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Di sini, kami memiliki dua variabel lokal

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

10
10
10
10
10
10
10
10
10
10

Variabel yang dideklarasikan dalam klausa

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Properti lain dari variabel lingkup blok adalah bahwa mereka tidak dapat dibaca atau ditulis sebelum mereka benar-benar dideklarasikan. Sementara variabel-variabel ini "hadir" di seluruh cakupannya, semua poin hingga deklarasi mereka adalah bagian dari zona mati temporal mereka. Ini hanyalah cara canggih untuk mengatakan bahwa Anda tidak dapat mengaksesnya sebelum pernyataan

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Sesuatu yang perlu diperhatikan adalah bahwa Anda masih dapat menangkap variabel cakupan blok sebelum dideklarasikan. Satu-satunya tangkapan adalah ilegal memanggil fungsi itu sebelum deklarasi. Jika menargetkan ES2015, waktu proses modern akan menimbulkan kesalahan;

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Untuk informasi lebih lanjut tentang zona mati temporal, lihat konten yang relevan di

Deklarasi ulang dan Membayangi

Dengan

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Dalam contoh di atas, semua deklarasi

10
10
10
10
10
10
10
10
10
10

10
10
10
10
10
10
10
10
10
10

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Variabel tidak perlu keduanya diblokir untuk TypeScript untuk memberi tahu kami bahwa ada masalah

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Itu bukan untuk mengatakan bahwa variabel cakupan blok tidak pernah dapat dideklarasikan dengan variabel cakupan fungsi. Variabel cakupan blok hanya perlu dideklarasikan di dalam blok yang jelas berbeda

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Tindakan memperkenalkan nama baru dalam lingkup yang lebih bersarang disebut membayangi. Ini adalah pedang bermata dua karena dapat memperkenalkan bug tertentu dengan sendirinya jika terjadi bayangan yang tidak disengaja, sekaligus mencegah bug tertentu. Misalnya, bayangkan kita telah menulis fungsi

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Versi loop ini benar-benar akan melakukan penjumlahan dengan benar karena

0
1
2
3
4
5
6
7
8
9

0
1
2
3
4
5
6
7
8
9

Membayangi biasanya harus dihindari demi menulis kode yang lebih jelas. Meskipun ada beberapa skenario yang mungkin tepat untuk memanfaatkannya, Anda harus menggunakan penilaian terbaik Anda

Pengambilan variabel cakupan blok

Ketika kami pertama kali menyentuh gagasan menangkap variabel dengan deklarasi

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  };
}
var g = f();
g(); // returns '11'

Karena kami telah menangkap

ts
function f() {
  var message = "Hello, world!";
  return message;
}

10
10
10
10
10
10
10
10
10
10

Ingatlah bahwa dengan contoh

0
1
2
3
4
5
6
7
8
9

10
10
10
10
10
10
10
10
10
10

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

0
1
2
3
4
5
6
7
8
9

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  };
}
var g = f();
g(); // returns '11'

dan seperti yang diharapkan, ini akan dicetak

0
1
2
3
4
5
6
7
8
9

tsfunction sumMatrix(matrix: number[][]) { var sum = 0; for (var i = 0; i < matrix.length; i++) { var currentRow = matrix[i]; for (var i = 0; i < currentRow.length; i++) { sum += currentRow[i]; } } return sum;}1 deklarasi

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  };
}
var g = f();
g(); // returns '11'

Mereka seperti

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

Ini tidak boleh dikacaukan dengan gagasan bahwa nilai yang mereka rujuk tidak dapat diubah

ts
function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  };
}
var g = f();
g(); // returns '11'

Kecuali jika Anda mengambil tindakan khusus untuk menghindarinya, keadaan internal variabel

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

tsfunction sumMatrix(matrix: number[][]) { var sum = 0; for (var i = 0; i < matrix.length; i++) { var currentRow = matrix[i]; for (var i = 0; i < currentRow.length; i++) { sum += currentRow[i]; } } return sum;}0 vs. tsfunction sumMatrix(matrix: number[][]) { var sum = 0; for (var i = 0; i < matrix.length; i++) { var currentRow = matrix[i]; for (var i = 0; i < currentRow.length; i++) { sum += currentRow[i]; } } return sum;}_1

Mengingat bahwa kami memiliki dua jenis deklarasi dengan semantik pelingkupan yang serupa, wajar jika kami bertanya mana yang akan digunakan. Seperti kebanyakan pertanyaan luas, jawabannya adalah. tergantung

Menerapkan prinsip hak istimewa terkecil, semua deklarasi selain yang Anda rencanakan untuk diubah harus menggunakan

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

Gunakan penilaian terbaik Anda, dan jika ada, konsultasikan masalah tersebut dengan anggota tim Anda yang lain

Sebagian besar buku pegangan ini menggunakan

ts
function sumMatrix(matrix: number[][]) {
  var sum = 0;
  for (var i = 0; i < matrix.length; i++) {
    var currentRow = matrix[i];
    for (var i = 0; i < currentRow.length; i++) {
      sum += currentRow[i];
    }
  }
  return sum;
}

Merusak

Fitur ECMAScript 2015 lain yang dimiliki TypeScript adalah penghancuran struktur. Untuk referensi lengkap, lihat artikel di Mozilla Developer Network. Di bagian ini, kami akan memberikan ikhtisar singkat

Penghancuran susunan

Bentuk paling sederhana dari destrukturisasi adalah penugasan destrukturisasi array

ts
function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  };
}
var g = f();
g(); // returns '11'

Ini menciptakan dua variabel baru bernama

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  };
}
var g = f();
g(); // returns '11'

Destrukturisasi bekerja dengan variabel yang sudah dideklarasikan juga

ts
function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  };
}
var g = f();
g(); // returns '11'

Dan dengan parameter ke suatu fungsi

ts
function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  };
}
var g = f();
g(); // returns '11'

Anda dapat membuat variabel untuk sisa item dalam daftar menggunakan sintaks

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  };
}
var g = f();
g(); // returns '11'

Tentu saja, karena ini adalah JavaScript, Anda dapat mengabaikan elemen tambahan yang tidak Anda pedulikan

ts
function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;
  function g() {
    return a;
  }
}
f(); // returns '2'

Atau elemen lainnya

ts
function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;
  function g() {
    return a;
  }
}
f(); // returns '2'

Penghancuran tuple

Tuple dapat didestrukturisasi seperti array;

ts
function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;
  function g() {
    return a;
  }
}
f(); // returns '2'

Merupakan kesalahan untuk merusak tuple di luar jangkauan elemennya

ts
function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;
  function g() {
    return a;
  }
}
f(); // returns '2'

Seperti array, Anda dapat merusak sisa tuple dengan

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;
  function g() {
    return a;
  }
}
f(); // returns '2'

Atau abaikan elemen trailing, atau elemen lainnya

ts
function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;
  function g() {
    return a;
  }
}
f(); // returns '2'

Penghancuran objek

Anda juga dapat merusak objek

ts
function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;
  function g() {
    return a;
  }
}
f(); // returns '2'

Ini menciptakan variabel baru

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Seperti penghancuran array, Anda dapat memiliki tugas tanpa deklarasi

ts
function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;



  function g() {
    return a;
  }
}
f(); // returns '2'

Perhatikan bahwa kita harus mengapit pernyataan ini dengan tanda kurung. JavaScript biasanya mem-parsing

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Anda dapat membuat variabel untuk sisa item dalam objek menggunakan sintaks

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;
  function g() {
    return a;
  }
}
f(); // returns '2'

Penggantian nama properti

Anda juga dapat memberikan nama yang berbeda untuk properti

ts
function f() {
  var a = 1;
  a = 2;
  var b = g();
  a = 3;
  return b;
  function g() {
    return a;
  }
}
f(); // returns '2'

Di sini sintaks mulai membingungkan. Anda dapat membaca

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f(shouldInitialize: boolean) {
  if (shouldInitialize) {
    var x = 10;
  }
  return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'

Yang membingungkan, titik dua di sini tidak menunjukkan jenisnya. Jenisnya, jika Anda menentukannya, masih perlu ditulis setelah seluruh penghancuran

ts
function f(shouldInitialize: boolean) {
  if (shouldInitialize) {
    var x = 10;
  }
  return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'

Nilai dasar

Nilai default memungkinkan Anda menentukan nilai default jika properti tidak ditentukan

ts
function f(shouldInitialize: boolean) {
  if (shouldInitialize) {
    var x = 10;
  }
  return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'

Dalam contoh ini

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 100 * i);
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

Deklarasi fungsi

Destrukturisasi juga berfungsi dalam deklarasi fungsi. Untuk kasus sederhana, ini sangat mudah

ts
function f(shouldInitialize: boolean) {
  if (shouldInitialize) {
    var x = 10;
  }
  return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'

Tetapi menentukan default lebih umum untuk parameter, dan memperbaiki default dengan destrukturisasi bisa jadi rumit. Pertama-tama, Anda harus ingat untuk meletakkan pola sebelum nilai default

ts
function f(shouldInitialize: boolean) {
  if (shouldInitialize) {
    var x = 10;
  }
  return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'

Cuplikan di atas adalah contoh inferensi tipe, yang dijelaskan sebelumnya di buku pegangan

Kemudian, Anda harus ingat untuk memberikan default untuk properti opsional pada properti yang dirusak alih-alih penginisialisasi utama. Ingatlah bahwa

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f() {
  var message = "Hello, world!";
  return message;
}

ts
function f(shouldInitialize: boolean) {
  if (shouldInitialize) {
    var x = 10;
  }
  return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'