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 dan
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;
}
1 adalah dua konsep yang relatif baru untuk deklarasi variabel dalam JavaScript. ,
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 mirip 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;
}
3 dalam beberapa hal, tetapi memungkinkan pengguna untuk menghindari beberapa "gotcha" umum yang ditemui pengguna di JavaScript
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;
}
1 adalah augmentasi dari
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 karena mencegah penugasan ulang ke variabel
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;
}
0 dan
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;
}
1. Di sini kami akan menguraikan lebih lanjut tentang deklarasi baru ini dan mengapa deklarasi tersebut lebih disukai daripada
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;
}
3
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;
}
3 dalam JavaScript, Anda mungkin akan lebih mudah untuk melewatinya
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;
}
3
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);
}
2 dengan nilai
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
3
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);
}
_4 menangkap variabel
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
2 yang dideklarasikan dalam
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
6. Kapan pun
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
_4 dipanggil, nilai
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
2 akan dikaitkan dengan nilai
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
2 di
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
6. Bahkan jika
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
_4 dipanggil sekali
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
6 selesai berjalan, itu akan dapat mengakses dan memodifikasi
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
2
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;
}
3 deklarasi memiliki beberapa aturan pelingkupan yang aneh untuk yang digunakan dalam bahasa lain. Ambil contoh berikut
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
_5 dideklarasikan di dalam blok
10
10
10
10
10
10
10
10
10
10
6, namun kami dapat mengaksesnya dari luar blok itu. Itu karena
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;
}
3 deklarasi dapat diakses di mana saja di dalam fungsi, modul, namespace, atau cakupan globalnya - semua yang akan kita bahas nanti - terlepas dari blok yang memuatnya. Beberapa orang menyebutnya
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;
}
3-scoping atau function-scoping. Parameter juga merupakan cakupan fungsi
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
9-loop bagian dalam akan secara tidak sengaja menimpa variabel
0
1
2
3
4
5
6
7
8
9
0 karena
0
1
2
3
4
5
6
7
8
9
0 merujuk ke variabel lingkup fungsi yang sama. Seperti yang diketahui pengembang berpengalaman sekarang, jenis bug serupa lolos dari tinjauan kode dan dapat menjadi sumber frustrasi yang tak ada habisnya
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
2 akan mencoba menjalankan fungsi setelah beberapa milidetik (meskipun menunggu hal lain berhenti berjalan)
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 sendirian. 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
2 akan menjalankan fungsi setelah beberapa milidetik, tetapi hanya setelah
10
10
10
10
10
10
10
10
10
10
9 berhenti mengeksekusi; . Jadi setiap kali fungsi yang diberikan dipanggil, itu akan mencetak
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
3
Solusi umum adalah menggunakan IIFE - Ekspresi Fungsi yang Segera Dipanggil - untuk menangkap
0
1
2
3
4
5
6
7
8
9
0 di setiap iterasi
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 dalam daftar parameter sebenarnya membayangi
0
1
2
3
4
5
6
7
8
9
0 yang dideklarasikan dalam
10
10
10
10
10
10
10
10
10
10
9 loop, tetapi karena kami menamakannya sama, kami tidak perlu terlalu banyak memodifikasi badan loop
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;
}
3 memiliki beberapa masalah, itulah sebabnya 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;
}
0 diperkenalkan. Terlepas dari kata kunci yang digunakan,
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 pernyataan ditulis dengan cara yang sama
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;
}
3 pernyataan ditulis dengan cara yang sama
ts
function f() {
var message = "Hello, world!";
return message;
}
0
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;
}
0, ia menggunakan apa yang oleh beberapa orang disebut pelingkupan leksikal atau pelingkupan blok. Tidak seperti variabel yang dideklarasikan 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;
}
3 yang cakupannya bocor ke fungsi yang memuatnya, variabel dengan cakupan blok tidak terlihat di luar blok terdekatnya atau
10
10
10
10
10
10
10
10
10
10
9-loop
ts
function f() {
var message = "Hello, world!";
return message;
}
1
Di sini, kami memiliki dua variabel lokal
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
2 dan
ts
function f() {
var message = "Hello, world!";
return message;
}
04. Cakupan
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
2 terbatas pada badan
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
6 sementara ruang lingkup
ts
function f() {
var message = "Hello, world!";
return message;
}
04 terbatas pada blok pernyataan
10
10
10
10
10
10
10
10
10
10
6 yang mengandung
Variabel yang dideklarasikan dalam klausa
ts
function f() {
var message = "Hello, world!";
return message;
}
_09 juga memiliki aturan pelingkupan yang serupa
ts
function f() {
var message = "Hello, world!";
return message;
}
2
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;
}
0, dan untungnya TypeScript akan memberi tahu Anda bahwa
ts
function f() {
var message = "Hello, world!";
return message;
}
_3
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;
}
4
Untuk informasi lebih lanjut tentang zona mati sementara, 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;
}
3 deklarasi, kami menyebutkan bahwa tidak masalah berapa kali Anda mendeklarasikan variabel Anda;
ts
function f() {
var message = "Hello, world!";
return message;
}
5
Dalam contoh di atas, semua deklarasi
10
10
10
10
10
10
10
10
10
10
5 sebenarnya mengacu pada
10
10
10
10
10
10
10
10
10
10
5 yang sama, dan ini benar-benar valid. Ini sering berakhir menjadi sumber bug. Syukurlah, 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;
}
0 tidak memaafkan
ts
function f() {
var message = "Hello, world!";
return message;
}
6
Variabel tidak perlu keduanya diblokir untuk TypeScript untuk memberi tahu kami bahwa ada masalah
ts
function f() {
var message = "Hello, world!";
return message;
}
7
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;
}
8
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;
}
15 kita sebelumnya 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;
}
0 variabel
ts
function f() {
var message = "Hello, world!";
return message;
}
_9
Versi loop ini benar-benar akan melakukan penjumlahan dengan benar karena
0
1
2
3
4
5
6
7
8
9
0 bayangan loop dalam
0
1
2
3
4
5
6
7
8
9
0 dari loop luar
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;
}
3, kami secara singkat membahas bagaimana variabel bertindak setelah ditangkap. Untuk memberikan intuisi yang lebih baik tentang hal ini, setiap kali lingkup dijalankan, ia menciptakan "lingkungan" variabel. Lingkungan itu dan variabel yang ditangkapnya dapat tetap ada bahkan setelah segala sesuatu dalam cakupannya selesai dijalankan
ts
function f() {
var a = 10;
return function g() {
var b = a + 1;
return b;
};
}
var g = f();
g(); // returns '11'
_0
Karena kami telah menangkap
ts
function f() {
var message = "Hello, world!";
return message;
}
20 dari dalam lingkungannya, kami masih dapat mengaksesnya meskipun blok
10
10
10
10
10
10
10
10
10
10
6 selesai dijalankan
Ingatlah bahwa dengan contoh
0
1
2
3
4
5
6
7
8
9
_2 kami sebelumnya, kami akhirnya perlu menggunakan IIFE untuk menangkap keadaan variabel untuk setiap iterasi dari
10
10
10
10
10
10
10
10
10
10
9 loop. Akibatnya, apa yang kami lakukan adalah membuat lingkungan variabel baru untuk variabel yang kami tangkap. Itu sedikit menyusahkan, tapi untungnya, Anda tidak perlu melakukannya lagi di TypeScript
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 deklarasi memiliki perilaku yang sangat berbeda ketika dideklarasikan sebagai bagian dari sebuah loop. Daripada hanya memperkenalkan lingkungan baru ke loop itu sendiri, deklarasi ini semacam membuat ruang lingkup baru per iterasi. Karena inilah yang kami lakukan dengan IIFE kami, kami dapat mengubah contoh
0
1
2
3
4
5
6
7
8
9
2 lama kami menjadi hanya menggunakan 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;
}
0
ts
function f() {
var a = 10;
return function g() {
var b = a + 1;
return b;
};
}
var g = f();
g(); // returns '11'
_1
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;
}
1 deklarasi adalah cara lain untuk mendeklarasikan variabel
ts
function f() {
var a = 10;
return function g() {
var b = a + 1;
return b;
};
}
var g = f();
g(); // returns '11'
_3
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;
}
0 deklarasi tetapi, seperti namanya, nilainya tidak dapat diubah setelah mereka terikat. Dengan kata lain, mereka memiliki aturan pelingkupan yang sama 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;
}
0, tetapi Anda tidak dapat menetapkannya kembali
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'
_4
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;
}
1 masih dapat dimodifikasi. Untungnya, TypeScript memungkinkan Anda menentukan bahwa anggota suatu objek adalah
ts
function f() {
var message = "Hello, world!";
return message;
}
32. Bab tentang Antarmuka memiliki detailnya
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;
}
1. Alasannya adalah jika sebuah variabel tidak perlu ditulis, orang lain yang bekerja pada basis kode yang sama seharusnya tidak secara otomatis dapat menulis ke objek, dan perlu mempertimbangkan apakah mereka benar-benar perlu menetapkan ulang ke variabel tersebut. 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;
}
_1 juga membuat kode lebih dapat diprediksi saat mempertimbangkan aliran data
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;
}
0 deklarasi
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'
_5
Ini menciptakan dua variabel baru bernama
ts
function f() {
var message = "Hello, world!";
return message;
}
38 dan
ts
function f() {
var message = "Hello, world!";
return message;
}
39. Ini setara dengan menggunakan pengindeksan, tetapi jauh lebih nyaman
ts
function f() {
var a = 10;
return function g() {
var b = a + 1;
return b;
};
}
var g = f();
g(); // returns '11'
_6
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'
_7
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'
_8
Anda dapat membuat variabel untuk sisa item dalam daftar menggunakan sintaks
ts
function f() {
var message = "Hello, world!";
return message;
}
40
ts
function f() {
var a = 10;
return function g() {
var b = a + 1;
return b;
};
}
var g = f();
g(); // returns '11'
_9
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'
_0
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'
_1
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'
_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'
_3
Seperti array, Anda dapat merusak sisa tuple dengan
ts
function f() {
var message = "Hello, world!";
return message;
}
40, untuk mendapatkan tuple yang lebih pendek
ts
function f() {
var a = 1;
a = 2;
var b = g();
a = 3;
return b;
function g() {
return a;
}
}
f(); // returns '2'
_4
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'
_5
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'
_6
Ini menciptakan variabel baru
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
_2 dan
ts
function f() {
var message = "Hello, world!";
return message;
}
04 dari
ts
function f() {
var message = "Hello, world!";
return message;
}
44 dan
ts
function f() {
var message = "Hello, world!";
return message;
}
45. Perhatikan bahwa Anda dapat melewati
ts
function f() {
var message = "Hello, world!";
return message;
}
_46 jika Anda tidak membutuhkannya
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'
_7
Perhatikan bahwa kita harus mengapit pernyataan ini dengan tanda kurung. JavaScript biasanya mem-parsing
ts
function f() {
var message = "Hello, world!";
return message;
}
_47 sebagai awal blok
Anda dapat membuat variabel untuk sisa item dalam objek menggunakan sintaks
ts
function f() {
var message = "Hello, world!";
return message;
}
40
ts
function f() {
var a = 1;
a = 2;
var b = g();
a = 3;
return b;
function g() {
return a;
}
}
f(); // returns '2'
_8
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'
_9
Di sini sintaks mulai membingungkan. Anda dapat membaca
ts
function f() {
var message = "Hello, world!";
return message;
}
49 sebagai ”
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
2 sebagai
ts
function f() {
var message = "Hello, world!";
return message;
}
51”. Arahnya dari kiri ke kanan, seolah-olah Anda telah menulis
ts
function f(shouldInitialize: boolean) {
if (shouldInitialize) {
var x = 10;
}
return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'
0
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'
1
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'
2
Dalam contoh ini
ts
function f() {
var message = "Hello, world!";
return message;
}
_52 menunjukkan bahwa
ts
function f() {
var message = "Hello, world!";
return message;
}
04 adalah opsional, jadi mungkin
ts
function f() {
var message = "Hello, world!";
return message;
}
54.
ts
function f() {
var message = "Hello, world!";
return message;
}
55 sekarang memiliki variabel untuk
ts
function f() {
var message = "Hello, world!";
return message;
}
56 serta properti
ts
for (var i = 0; i < 10; i++) {
setTimeout(function () {
console.log(i);
}, 100 * i);
}
2 dan
ts
function f() {
var message = "Hello, world!";
return message;
}
04, bahkan jika
ts
function f() {
var message = "Hello, world!";
return message;
}
04 tidak terdefinisi
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'
3
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'
4
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;
}
_60 didefinisikan dengan
ts
function f() {
var message = "Hello, world!";
return message;
}
04 opsional
ts
function f(shouldInitialize: boolean) {
if (shouldInitialize) {
var x = 10;
}
return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'
5
Gunakan penghancuran dengan hati-hati. Seperti yang ditunjukkan contoh sebelumnya, apa pun kecuali ekspresi penghancuran yang paling sederhana akan membingungkan. Hal ini terutama berlaku dengan perusakan bersarang yang sangat dalam, yang menjadi sangat sulit untuk dipahami bahkan tanpa menumpuk penggantian nama, nilai default, dan jenis anotasi. Cobalah untuk membuat ekspresi yang merusak tetap kecil dan sederhana. Anda selalu dapat menulis tugas yang akan dihasilkan oleh penghancuran sendiri
Menyebar
Operator spread adalah kebalikan dari destrukturisasi. Ini memungkinkan Anda untuk menyebarkan array ke array lain, atau objek ke objek lain. Sebagai contoh
ts
function f(shouldInitialize: boolean) {
if (shouldInitialize) {
var x = 10;
}
return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'
6
Ini memberi nilai bothPlus
ts
function f() {
var message = "Hello, world!";
return message;
}
_62. Menyebarkan membuat salinan dangkal
ts
function f() {
var message = "Hello, world!";
return message;
}
_38 dan
ts
function f() {
var message = "Hello, world!";
return message;
}
39. Mereka tidak diubah oleh penyebaran
Anda juga dapat menyebarkan objek
ts
function f(shouldInitialize: boolean) {
if (shouldInitialize) {
var x = 10;
}
return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'
7
Sekarang
ts
function f() {
var message = "Hello, world!";
return message;
}
_65 adalah
ts
function f() {
var message = "Hello, world!";
return message;
}
66. Penyebaran objek lebih kompleks daripada penyebaran array. Seperti penyebaran array, ia berjalan dari kiri ke kanan, tetapi hasilnya tetap berupa objek. Ini berarti properti yang datang belakangan di objek sebar akan menimpa properti yang datang lebih awal. Jadi jika kita memodifikasi contoh sebelumnya menjadi menyebar di bagian akhir
ts
function f(shouldInitialize: boolean) {
if (shouldInitialize) {
var x = 10;
}
return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'
8
Kemudian properti
ts
function f() {
var message = "Hello, world!";
return message;
}
_67 di
ts
function f() {
var message = "Hello, world!";
return message;
}
68 menimpa
ts
function f() {
var message = "Hello, world!";
return message;
}
69, yang bukan itu yang kita inginkan dalam kasus ini
Penyebaran objek juga memiliki beberapa batasan mengejutkan lainnya. Pertama, ini hanya mencakup properti milik objek yang dapat dihitung. Pada dasarnya, itu berarti Anda kehilangan metode saat menyebarkan instance objek
ts
function f(shouldInitialize: boolean) {
if (shouldInitialize) {
var x = 10;
}
return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'
_9
Kedua, kompiler TypeScript tidak mengizinkan penyebaran parameter tipe dari fungsi generik. Fitur itu diharapkan dalam versi bahasa yang akan datang
Bagaimana cara menetapkan nilai ke variabel dalam HTML Angular?
Angular memberikan variabel template nilai berdasarkan tempat Anda mendeklarasikan variabel. .
Jika Anda mendeklarasikan variabel pada sebuah komponen, variabel tersebut mengacu pada instance komponen
Jika Anda mendeklarasikan variabel pada tag HTML standar, variabel merujuk ke elemen
Bagaimana Anda menyuntikkan variabel dalam HTML?
Gunakan tag . Tag HTML
Bagaimana cara mengubah nilai variabel di TypeScript?
Variabel dalam TypeScript dapat berubah, artinya kita dapat mengubah nilainya saat aplikasi sedang berjalan (saat runtime). Untuk mengubah nilai variabel, kita cukup menetapkan variabel baru dengan operator penugasan . misalkan angka1 = 5; .
Bagaimana cara menampilkan variabel TypeScript dalam HTML?
Untuk menampilkan variabel TypeScript di DOM, pertama-tama kita memerlukan indeks. html yang akan menyertakan aplikasi. file js dengan tag skrip . Sayangnya tiga kata terakhir “dan benar-benar keren. ” tidak muncul pada baris baru seperti yang diharapkan dengan notasi `…`.