变量声明

letconst 是 JavaScript 中变量声明的两个相对较新的概念。正如我们前面提到的let 在某些方面与 var 相似,但允许用户避开一些用户在 JavaScript 中遇到的常见 "gotchas"。

constlet 的增强,因为它防止重新分配给变量。

由于 TypeScript 是 JavaScript 的扩展,该语言自然支持 letconst。在这里,我们将详细说明这些新声明以及为什么它们比 var 更可取。

如果您曾临时使用过 JavaScript,那么下一部分可能是刷新记忆的好方法。如果您非常熟悉 JavaScript 中 var 声明的所有怪癖,您可能会发现更容易跳过。

var 声明

传统上,在 JavaScript 中声明变量总是使用 var 关键字。

var a = 10;

OOwaCZM0hDI78fqwaIG4CsvWASKTkMnXmW3wNWoRVhoPy+uFOQPBZZOYE9x/jtV67mqndkEOSPdGugNWtV7lLsUWgV1uWLBWkpSh6GarCwLWGPZR6qyyuJElMeECHM8Fp+/Rkp6EkGSCttKeV1M5njExDsIgew3C8L22NBbFVp8=

FjkzzHpbA+0vMpZYxNAjDnWIfWg9t0JjVnI+SVmXFjcxB6zGloJnuJC7BDQoUG6VzcIpkGNRMDAkDzDtc0ULiw==

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

  return message;
}

FjkzzHpbA+0vMpZYxNAjDuWJo6Uu9SdiJkasqLvB4wnTZEq0Biq3OZr4f5ClMzghP9dMmdr1fKbkkr+9hdL7tg==

function f() {
  var a = 10;
  return function g() {
    var b = a + 1;
    return b;
  };
}

var g = f();
g(); // returns '11'

ZpLnxNo6hkAmeBh93H7JrgvsCln/WMzdUOMuCVE7T5GVMX6gHYGk2/xM5Pb0gJDQ6shVO623olI3qGCZ6Nn8/oWZQYV0l12LYVnfjWfhB0TMb2YL/Q7JvbZHiSQi0MAnmI0Vr17kG2cQ+qiBOGC3MfSKM6ldrIPuPPNlbBA+K71ZGCEVrHSklOQcKM41sK5ixWszEcw8spzgHEv+yweV9ObEnVocvmAOst80/TUoSmwxVTq0shC2VC+mYQKA9RNA24fDWhIcRY+/+x6xND7aQH2N6JlPx3yO2XiKlNefEFBF980M7pVcPzAWNvX9yrO9AgO1YXOCSIaEZGDntb8yXny74gkPMT3rVehmRo2WDgYb/8tyM4+Q1mcJcmgAwvYSSwSLdwlZDpf5EF4YliP5nhAKqeD2xKoonbXOIOZIfb9b5xmUiGoK3Rat41klqWYd

function f() {
  var a = 1;

  a = 2;
  var b = g();
  a = 3;

  return b;

  function g() {
    return a;
  }
}

f(); // returns '2'

作用域规则

qtHUdBefUyoXsBZFiZXSFjqoYBNfxfQbqhVG+EDAEHvG/7jG3pks8tWX7g//RvINlNLe03wunah8YxIms2v2nG9fQ5neTxHDOBuiGiz/IGvRhbqzUU9HnxFCMz5mWEIVg3x57iXdq3yAn/Geq0SurVEAyp9GefVs5ovf45fpr98=

function f(shouldInitialize: boolean) {
  if (shouldInitialize) {
    var x = 10;
  }

  return x;
}

f(true); // returns '10'
f(false); // returns 'undefined'

qPW09fVLhiBg/mB0IosS3mw2CRwKzKCz2r2oezp2+W+RuRxI7bWT9eb1xsOSt/OlZUdE87EPc1XS8ZYuuzuwDgf0Om7uSLR21DBaddZL8yQ5gF6ouGs2t59/RTBofC5JYuUwVfPzbppiGSIkcsvZrozTjCGR8ptBMSA1XK54VqBv10Gykt68vgoyxUekQT6n999ZXTOvIPqqJxskLSvXg8LF0wzRcCBswR3v6qPOCYJ4uvi41Z2MqjZx0qG4VdTq5GgMSrYjFbR0hc/WVEtLnnJ+/xoNUrilALU5uWXO9jr7GIaOZp/YaacVTSMwsy6Ve4fUK58O9kNWE/DesDUiIMPKpuL0UTRGuZIEFJFA0I0K3Y7zzKWWtxR1lPpgratKfig5P6ehNEcxTBA+mxTI83+uUpphF/l0Bzm06pfsuOghI4NIf5UUsoQzf9EZNV4TVJhNbat2jETlo4IMmzrx/we7TLD+hLykTiHPqgEnj3jmAjwqfOgPueewqNBgfWLA2UiaFLBlBL+sMhCQiuNQtZgH7H34k1h3ofIJcVUki+OZBBkPlnU+IytGERTGPl9oW6qeUiXyib+djgtISZMzf/S96r4lckvY6BSqUTlKpUg=

bmolkNyxPHCkPERJAuQbpqTy21jV/cZU6Vp4L1PeoBxR99eMi2t3BKOErZP+J3euPcsDLQU8H3Yr2Pp/Jljq1gt+sMe4qLa6iCBzuCOW1jE867gFXEeHxNtNsXhJkxloMgMjzqdyZ58XEtjmGKosVGMA2PIEA5/8El68C1ZqM1iy92RX/hmVVIwYniXmc37aIhekV1qGHgRubOGSOeN4dw==

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;
}

FHHJCisv/ZcF9yFapVCWDJy0pYMU0yCT6l7/B9ATmJMVLhY6/1XUwODGuLamfFZyBJN6n633YphtujBInNxQQW5qh4g6CJFzV2m05WiPCMyY4nrieUT39yGS7Gpya8ju3HvO1+kpH6nllt0IFpy0Blk7qBaAXC4YqVdy9EfspdWk4Uv9/Vs9QBBhCUrbYZeLme2uSoKjpySHEOgkxZ6bImLAhskmqkYOf/UbCt4F4mzNZXEbi5ZfJMfAin/rK/agpBBUwJP5stkdJKi5yGdWj9bnafNcR7hH3765tS5BjePOKJlvZ038lfe0jRd8mZ+fdoRLhSejdldm7UnNqFrHjuMm5rXRcl4GfSZZm5oP+635JD3y2UFfQ5qduPR+qJwNz0b99UUIm2ly705LI4qx4gvCwSaSBALE61H/bEpqA3TRXgYKYT1jZi+l2YNgeVyMcgRCgkNUq6vDAVPFOFmFCGnKL8Mf0510+BQ9kmyAFnVc9tyZ2HP0dWt6gRFF0rUO

变量获取杂项

/Y0uwQ+JRK5gtwMe/iJ59ueYyttV8HnO4MORHK7K2J/RMzTcpDbiMgP/ZN9wUtsMCXcN3l0clzSMmHssxnD+Ig==

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

Ol9MFNPNPF7CSNtzke677RSMFUjKLigvciIp4BUcxiqShn1FYJ8wqEZfLKUJyIS2cDASsvODGzilp1KGjgCBZwQU4J5zrtX947MhzVMA5/seIJCtQQN62Bfoup1FEAssQmL65ayKrWE+RYTIz5m6zEi1hTeGSA6KWTFI1m7M4Uxl+1umo//cDVPNzGm2FJ9WdhBhqnagYAZMEjFaZkfwww==

ho4LL79geZVOm7yzE9tQEiitDM6SYtGLsaRezeWdlvA=

10
10
10
10
10
10
10
10
10
10

woxpik8a82NRNXAtRnBZoLrrw12y0xfwx3mJxA8V7zzWm4QGE4dDHuePRCeFngAeKnXV1pNkLYk5fXgvJBSFlsr1qj/KKMce4jcEnDBMNsDVAh2r784bih/UXe4xH7KE+a9EYOu9KGg6idBMuQB/35Im2lxB0N+SkrRCLiHkJfH7lRe7PyyKDg7eO2tsgKuikQP+q+y+4k0Bnid4Ls4LAg==

0
1
2
3
4
5
6
7
8
9

S6iJ5aIoXNBefBWUUeB5fwFuSQ/RpayDSFLvFQ79Vt57a8fbGhSlgTm80msbwRUCdZ4Z+kAvBpLxGlpfMQ3AwCR2NkkdaQRs1KG2VUBRVfm1aY702btqFSZmZp4RRO47B7P6v/3xs7HlA/iCcUGjB09eb2xqvdglwRkG9l9IC+OpZZsgb0Dgf5y+R3P1NekBz7mDadHZJBBjwgvnIXyBC1cIj0OG7em2/HZ24OOWIa5gwEZ0JFUD4GGGdxozKlbWHeL/yNCQ0Lk6NKKE1Casjw==

BjoONziJgJJqPGSM1rJNRvIEey9RHPhjytERnopwP/Caak558Zvg0LYZeOFS4F8aL5wqKCxVfIOE1sajYauq8BCJwSxZVQ9J+U91710ZwY9pPHKBsYL3hMTiI+FMSNHu1zLdOtB8248xMm07hqPKk6batHE/UqL2nUeffqV7e++FPy06A4kfEtT9ZoOlnrCwGp35mxhIShcCrQGQYBE51rH518ukU5zREjC+MDAmplH60vKJQTVwv7Kmo9uWhRm+63UAGYbUKTIWC3MVE1H97FBKuYBMwCbjM5eLJ13b2R+OncbezlEVjm2KjX8TOuNBRj9pDBPwhGQ4lb5ySpqaO9y7ZHOOtJX+DcL6adEjM0+jJJzVdGXpfPfgk5A3XNopToFp41vrOU+oBZFXaR4fBkoP67G6zmgbtZgM0zhFILBnF+5rxH/AhQ5jqPHACukaSFXX+oI8ubwJGZkQeVk/CA==

CoT5ivxYNb1VcNmItAqY2gUkgKFJnhUQBoxo2R/UsLnJ64od1xAE+lzL54RG4MTRlQnd9IYSt6CdO2Ys3x7P5+fhWcmMeUz3f0guAtiZ/7IKQRmDONZpfzOhyUZQicuoSTP0E8dSNnv6bgyA911AIWcUbR+ZZw7aOWM/3mdTx0E=

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);
}

VYIhKpOOMtc5kqr6zN7KOEyMSH/2W5ackIo52Y3L29QsWktO8NCgq9I4l6sxGrmaQKDRCoNUb24I93WcOdJ57GFhaSZBNj01fNlRig13rvqaWAtEg+OBQLW7HvOEZtdM5w/iXBcaoKYdWqmoa7LATWvPsETs4Wl7x2sfruTg9vGROTzTaw/L2C9LJq/h9zJB6y6iUx+REizhCkBD3FW6jbphAzHQwKriaAsxqKAkFWe+QXKMoMyG6V1IHlrS5n7P11bmzHq030aiAuTGws7v6bFA1Y7m+vO0cNEMAAWhmAsi9cjDaUjl3MtxPN72DidDyJCl/7XpHHPO5zZlEJSxgQ==

let 声明

ELlAIaM6vw66hjvTrOnU3OgVTf5f6fbwj1jQ96j6eRI4+Gt24VUiFGG4DMcSzsjuiIbIlUB/e73Z5v85+8brvaS6OHbIPGw8231cHRM6PH07rCW2YNgDhLpBwNmUbTVNoTR2CpVMoGMa1PKDc8d+dIMn8j8Uh8yttG5WFAVDRibOLh283+yRV2RJaS2eNr8pCIfdYdCJ58dm38BRbvBLrGSvOzdc9RGSr/eD9gX9K+GYRCC9I73e6tFH+4U8TnA22HbdmF8Qz5OK0hmQLeqTbJNdQVYY/mZJSaHsBlot19c=

let hello = "Hello!";

Yq6BPmATk0brVSkVs2xbpzYpIe5wrSC+VzoGjT2riC76d/yHQ+/gQM3/+zb9ZfdIPZwklSqLLgWcqKZcgybpywb09mQ60fsFxWwj5yRfLoVT52buS0vg/iUjwvwqEeu3

块作用域

gInnTkKJVU35w3yYnE/FFPxxaqM4g0UXuC4eIlO1e70sz+seK2UGT0yqPPlGJm32yOtKtYS8PlYLIbnqZt+50KsPtd8CSaqVfQJ9A8HybvZ0c45uDJIcZmExNDs3ohOaIEqpJ+PEhs6dAvMtNs3T5obLzYraufXq4deRb6emhOs92oEfcAkUaMSx6spahFIPZl1EvXPWlmLxsbAQtjz+IhZVwt5vKlePRzfNPVOLzur6Bl7+skmXhDuLuEf8bwUxO1nAhtOlPgRPgcEVW4FIlz2V9nwVQxnd5hk4aUlTOV4ik10erMcMTmAa+DelOEyzaa0JxucFwi7Y8xhQnyPOvdwQL0Cd2SxBEdkDwVgu0GbEKbvLdWl9+czgRJo12Lz+

function f(input: boolean) {
  let a = 100;

  if (input) {
    // Still okay to reference 'a'
    let b = a + 1;
    return b;
  }

  // Error: 'b' doesn't exist here
  return b;
}

atxJ8LPPvF4j5bKGI6khyhVJuBneQMXSk/3n7XU0b8fOXf/gP0hWykpJse1dKFkAS9V51+iIk8TICb3UIs4N9a5mzQbLpm1MD39ncg2ZVE8AMHlHrHE/DCid+Tv/3PRZo1VAX/NfVb5M1Gsov59rELWVWo+2FdzMwQCfnyHKKIMJOyWhJub4JStjlPfq35zbKFQ+Mv7wW2rR35D77cNG6B9KWHOeuQwfV38L2RA5WL35sVOKlvkeBdbdw/IDUURnyCTS4lwB6UjXnE0S329hqQfQ1fMel0QvuRUVPUrbBjQ=

rEXg6PNuf4FBw7RwrjI7C+YBgHF4syDn9HAQDvD1um87uRFhNfTu4C5bbjJ5PlCL1DLoHJC5OcRiEpBQBM9osC2dan7knkRlffKfUUB3qsIDnXUU3BlxpOu4WRgu1h4j

try {
  throw "oh no!";
} catch (e) {
  console.log("Oh well.");
}

// Error: 'e' doesn't exist here
console.log(e);

CCjIhuEtmQNjfd0hrAy9yf3KUZGWboidyNQYVGaLEurzwnLOM8ZcnIyNT4r3zHMomk2yZRG8Iw/L+Q3lmptZcX0k4ywC8mGjTYqG0+Pdueh8dUTWCTImt1XfhFw6+cy/+gXOk1nVHz/OlSj6TDSSGibdpiVYSvVPLiRm64pcTIsBWt2il9+z2vndUUUPKXOmDbja0wYzw2cpUahFLFFsMyZWZ9Y9XpJPPDLqDCuchn/JBBKFae42Erz/oy349nvwhPD6VRXkODbYI2mnsIQHx5lsD8E46WyoHwFQo2seqSpsaAGkkoryK03Edrfxc5cJogNEVJ5+rTERDbDExO/uQux9Q9plbZcSdjDh0ltujnVxG9hy+4PwXxhCn1YCc6JrXBnWjNiKzsKDtKYpbjBrIoJtLn8/Cd3Q52wTZtMcWNnHph4j/dhSpceb27/vMSoVScd3KC+moKAxg7JiJ4PANcpaPjHeeNc1Xq4Y5l8qvpw3BhqmZ3qCmb4jxn8VYZii

a++; // illegal to use 'a' before it's declared;
let a;

UOx1h8d75hga6vSZJOKyS6CQOkkrzBfRJskleewMhlNc8sMc1BohFRvSpHsJRayKh4Xv8pLqfzi/V1ZE8HyfQmZFn+iaZya5M/fyu8Ax2rCsenXcUf9RDwhTXav/dP+AS644MmmHo76Bq9TovPC7ideN8LziZgbSKm0bNuDVzYzEKr1IuCp5xeHGXvQGrqNTv9HhOhX0RWjWAKIsHcuK9JDIRwIOcuAOUUz4eqce+wdrOEliLZ/XeyZm4PYOU+6cCgcQv0QnD9GLKyxAltcQZI8EZx5tCZdEf88LHyS/WgBRB/dgz1HTi/qILtxhxtIob0ekZcuqj8wr/2yt5iDJgkfRjCNXvhgVpnzT838KhzWOkZd2z9W1lQpbWdXexOos

function foo() {
  // okay to capture 'a'
  return a;
}

// illegal call 'foo' before 'a' is declared
// runtimes should throw an error here
foo();

let a;

3elpcUFdlyiVG4TJBMLaXDPKPHM2VQ11WXXvArlHuwmhhDqXlVbMpVabGESE4xonMy/UIlI7Uc6t/B4wBrWRyrmisruscbuZ9bpqQ417TbWUwpAKi9IDEN4UeBYzYa+1QrI332IGAxNFn4fO9Cle6t2Zq4w+PS0IC24RvitD4FV7EqYdHPvlMf2aHblpSBXS

重新声明和阴影

Ek8T7FtSn9axT7/ieMDXnvvLwFxhxsHQhNmDNhKdA75A+PiLLisDyzXAFnUG8anPk+2cL5N/nJi2tfVL45+2PPbyqMkTRd7hohYPoUIRCpu8rzilEayB0u+3iflbJhDjGwCk7Dqaya4gGGCg5vPyCw==

function f(x) {
  var x;
  var x;

  if (true) {
    var x;
  }
}

A8tdkrUHlsnRkFX4A1/673Yxt+yA1J5j+6NSExmjKR3DJ9bAyrZ1Zj5qTeXdHUUf7gPQJ/0DB72+BiPlozZqkTKro+bEtr0kw/MyWWaq+kxJ1fpGDKOgMXC08CN4fx6eCWzKMrPw2elkSdI06PaR5Z0gcGJEJCqlvgouAciIe2BE7/hHk8YFN0aveWH4+0LHfmh2DrQ03d1xVddx9yZvQwQsge7wLgByR5PpEPic+hZJsoZHTqif0ng81NSfNOdFttoukfmu4aTAQIUYi6Ugd/6ixtzhcD7/3Xsvc7MgZBg5VBBb7olCJ34vcWx+nmBQ

let x = 10;
let x = 20; // error: can't re-declare 'x' in the same scope

GaayYP1wVS7uDRdKpwRDmTGczwL65LhERf2ytW00uXA0jB3mjMH6/obSTyWaLCbJpSXPBWW3chWVtQtVO8BMQHeXedL8vqsjF8m/FBl+G6iO9yg2bS4B3Nz03sV5zLzNQfPEyeYD6q4XptjlTxVp1A==

function f(x) {
  let x = 100; // error: interferes with parameter declaration
}

function g() {
  let x = 100;
  var x = 100; // error: can't have both declarations of 'x'
}

3rJP0e2SqvGyi6rIrtAdkj4IRYhYUiMgTbt932b943hLPLkKJpX2lisaKXyVK/Gax3etrm/m0l42pyLrXx0oICxur2tLPbB7+WqH9f9ObWT5XLkyBlEQTgZF3h+EE01vtlI3tFVMUGhgP/0blhF0tWBjWyj3OXogljfm5JGfOKkWkvU5hUtSQx03CoSS29UtJrDiPRivGpHAtQDGUV20+A==

function f(condition, x) {
  if (condition) {
    let x = 100;
    return x;
  }

  return x;
}

f(false, 0); // returns '0'
f(true, 0); // returns '100'

o/jCDb9zBKcCluL/NMF93aZ3arT1XLZbATBvmhDmx2ZbNHArj2yajcXMVaEegfsyXwwTyGVUx8B0vfQyrEg1nIwih7wtdZZrL4FK2+rJC5g4hIM846XZND1Dd0t69guL8aurc66G+4fgWiamrDeoP6ZitxMJdnbzSJq6LEJ2IQpAYjHaZOewGV8b59xr4AaFZJKGTYoWNhzkbUHBvwSjZIgwxFYzrTcE2wq3qZz/Gc/7KGtdXTsMYJGYN0w7BksJXFS8mq0gsp+z0oPe4slv7iz0Mv4zjdtvlnqxfZY1cxws6ohH6FoemCqj92ONtaCLQZ6jtnIDTw44qWdIKaKwLBBka6xmloZm5O394c0S4wpmseNpIKlHRohdBHEfdjSqtbS4eIII7WcGrSfV5a3Cwg==

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

  return sum;
}

1fmV7/OgKtReWa2cJFbgu6RhJqKmrVKMiWoSrHzHsgvOHtUDHcIdrW/X61ys0BPdXJmLxOrZXiRrOZDcuu5m+ksm3PqIChOXNw0L55eJX2djSpq6r3KXkf0gQZUoXxkccxiTBxrSz0T5wSTjYi97DJ9am5uhfoUTHVTRFk7NhPLUeer3mSHmT4SSVlEfqW1k

XdGBouJRHELXIsrzxHScoS6xm864SScwy2eCCWE5YWWXoDEmkdlXvtG5z2pS/V6dF5sB/8MyZcv6br/BO1otjWCZrL7DiC0SAXR5pCdH8D28TDsZaMW3gMh4yP5p2ZHlIOesTn8It9FLMsqKsGGVgYBLR/Im8h/9di5IambwXPtdOLTo2KuU5pE8gO6q/FTH

块作用域的变量捕获

ybT44eLLh62jaGkv9ZDr2pnSfuP6n3taOjDduf1Sxds0vebTsSmJZoIImMh1+8jcLOBCESPoCLIbEGxupDB4+z+dljygUpd8zkORv1XRZmZOM7l10ERIpLQ0Xaxbiiy2wuccjVOzezRLEyQFIFGUBujFofHRAatRErGzlDP33Dwp2Vd9n34M2/7E80Y/tTgo+6APDDUizZOCrlYmJTXDb6ir34sTQTNCgSIhlGBsU0wjv6cpst2j7zw7UO2r45iaStvldUSebMBEAozoVSfqIYCUWkBHP8YzwZ53cXhUu5glqaCb16dMm8Gi+rs8nDKhXsElRYTFzF6t+CPENt4EbxyWJqcIn5NjcG9X3XADSIs7KrbrEKIVPqaBiHBndOCu5g8WA2MoGYf3r7AOkHmjmPlWaymJnXBTcTZ2Ktu4ZNyG27eyIabrAWtDYG4msDLIQhY6k8GbdAYo5C7EXFiiDDbtk5Rf6ca7Jbudit4r0w8=

function theCityThatAlwaysSleeps() {
  let getCity;

  if (true) {
    let city = "Seattle";
    getCity = function () {
      return city;
    };
  }

  return getCity();
}

qZu4Rw8vL7qIxHJMmlBd6mBoJ28ipBnUQvX6+u8LvyYLg7LddA3adXhf/aMdVzN+ydPpEoOJ7+Vleup1QmhmtE3iRK2c37ll7hFn0BCMfW2sihEopGnaQj0N6H8JYxW34iVAIMo+DqUJcfF2kWfd8kDmro4r8QoI96DIEtMKPrTn8j1WE6G3WMZ2miENOqND

hMhZH2oU92i9RBid/72IaN+Jdhg6AwSqgzyewYJAXmP8+cAulX/S1EoemWRQc+aMzmWZ2tONgNpzTrxbrmp8dvBpRBef7RAzeqI6yKHTML0WerAkRayRG9kot65j+DTzCyH6GLuAhFIjhdJJ0tztKUMAU3knkHCWoPvccjcDmGjPKu1WH3T9kswywD0S709GWusV6h/Bp5jM55kkSnM7l5NUK+/MME5zTyjDxlUrz7G9llB3v8wlT2vjqOSLi8NLOghna1anCPK+Kt8lY02rgWMMjVU62Thy5iJEvt/t150BILtxctQboswdB0IpcTvpvFLQXI/m/zfwC31acri/t63Sh0kAWZI86+bOfk7xgryeLLOeoqQ/akehj39fXjlW0f1I/r1MS5QvtN/JCfYQ4RPgpAbcIpHkjtwWDPQh0Hf0PboL1iI+HMIqM/Nu9BIa

Ij7me/qcD7owTDkLmLWFEKftGdT7Th1RO1ZBg6UotIfoU4ESgVAGAfrouML+tpPqCguNXnbAudiHsj9UlwxmzgHrJ4AbR2Vi65EaDU57UPZ8xl1A8Cf28qElU7iOSkSgVFBaLGpeIABsrU3Qg3hh47mf6CL53PpfY1h1/E1zHIYfl5AlwHY428f4FAeWe2Efg6I2T0eTyIfRJP/sPc4LWiGYErYAW3HiC3V+TadgoCnoxhcHOeK+Wnz7F/Tr1aWrqlp4LEM30JoUdmmcpYOVQqJQxNly8xvXPN1s/0wwuvTg6cMMSI1kX88YrYYdIE/6E6D9L/vjIv509ZGuwboFNQoXj8KLyRGR4c1u+Y2YJDfnPBTNaSZKdel7TsmH7PZBSyP1KNZd3xPjTNVIz1zf5xbaPr73na2MBcl8qzGztbRoTbld/jTpUoAttCXXhyRytqFyYycJ4G14Ca4YxLn5wA==

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

mh2Cx4rQc3xHFU/jPoGV6xOv23WNAp46LOuLOndI5wriF+1pExndG9fdklYRQ/OT

0
1
2
3
4
5
6
7
8
9

const 声明

RK8ia+rHgxWMXKKLlPeB6KsBxEt56VSr6uvNPoNPIz4B/7q4yNB47p4Lm4+CEo+tOms29lzDepLMXWZvC5fBqA==

const numLivesForCat = 9;

7nhTyG90Hwx1scgLJKRbpClFCB5pK1AMq/vfxJC3UA/FPtL7d5BehufL+B6Xl3pAweybUTQb8Cv2fByA7OcXIQ+NPJBz0Pfk9fHt7UU8ApqGOMrnS/piAto1bXB4HI7cyuoT0sYHHKAIq//cPVI4cHhWxjWEeByIW5cNJU7T7yLv3nfPCU9m1v/oYmoxVjJ8ZCCgqNz8/NeHpI/iu9yZ6L+ODT8+HQsPuq5fjztOVtFiyr9c6NKb7On5zXbsJbaEXlcsCUdiDXwygPUXLjMjMyiF1wnFf+XBPHKT92Mobos=

yotmR1RfW+CY0bHao7GfY5ZtXHJ63TQxyh5liiZGEnU4D1sk2XDgFeQkv7oR/smpZz6nJIsp/Id6ulc0eh3cRg==

const numLivesForCat = 9;
const kitty = {
  name: "Aurora",
  numLives: numLivesForCat,
};

// Error
kitty = {
  name: "Danielle",
  numLives: numLivesForCat,
};

// all "okay"
kitty.name = "Rory";
kitty.name = "Kitty";
kitty.name = "Cat";
kitty.numLives--;

MSymEcaTb5Hfnax3bvSCUfAvXakiSKRE8spqZ0Bgw1skz2hWnzBCmL71xBDDwOlswFojUAGi+BAddqfyaYZpUWx/03nOZhlBFGc6GbOE2ts4PU28ZVEixFqZka5Kryff42QcMLcbNKbnzfHbiBWqGbifEP4m26GaNvSRezAWmd6annQnuGe3fy0qrH8lFVHoqjvyQ2on5jmoMBDHQhXpYkYhdUH5ngm5y+jJFU0IuL9s88hrFIBokjMGDP9rTgf9k0TJU3W+PV9K0glJjrjlwxV1OJPCPVq+GxswvUrvDO2DnQ5k7dWSLf7hXO4jVv5ssWNdLuwoLKD0Zk5BpFOxmFW0PIIm6kyFZrwmoiMRy/M=

let 与 const

0HIvAVKMhWgwZmj6q3o8FrU1BNhJ8Wut39TjHeKz1+51m8nvrJ7f1T04HM5ojeaKIrm/yZbKfVg/yxSH87yOIhGHIQt42Dtibrq+t5xOPzjtSK7YwwtqxrkqGJSR8OWBKfj4FyywEHurw91szqO2hCLFQ71CiWbXtTS+y0Us5fZe7VA9rQVRIgtQeg4as35CrumulANCYRjWOUVtxWuD70gYSVnSfh+nTXgrgim9FFU9W83Dy2eePX4rYj0Wb39k

Bu3WM7QCInfb9OZjWIWuuNtnIr/Df1u4VGnUzL/bYcizj5GK/k3626MLCOWaottnVJrn9iZZje2+dBMajb5tNN7UVKXvIoCyXmMB0BVXnXsaQCBfWAB5M6gFSDQBvfVMaT4cIFFBVaPpG7a0wSxv5JrMx3Kck+xwYy4zyzFhtEIGM71WOp7j7q1zCSR3AKCGx5UShacOG5i2OLAEgQDoTgJjiE3w27QGtZ9aH5dATacijIEl2/remzw1+H9NHRxURu59fULvax0bmSGdu1s/E6tRx6CTf7zlIocz7unQepmT0b2OcSC8qMEvX/E+XnYc/8Him0Tzv2woPfiChYRvSxtfcTI/G3U6aD6pwZnKmRo7CCojUHkXiGCBgCdqEnsZLxBUlRhRrSgDt/bAfsNH8MeUR868xKhTqvQH4QplH+xcUykAt2Z/sem4fx872a63FF0G2YHvRwHlCHogB/AeAz5V0wPiHemW7VjJ2PQTIU82bvSojtwqeu3vAb+4JJ4Sccj3OqZkxwVufrpFHBfzQqEiML0/9vVDogQ8hoQjpwI286beC5WLYGa80hBqusv/

b3GwS9U3Ltc7Dfnoq+65m8uH7iPfZWg4AjA/WqyNDtsugHLnWvphbtA6tNqKF3srws9UQTaxCzb+jqqtsrqEJz5MPhPVAtRRQoP3or486HcQAPlVhd6RqZ+VUU3zEGQL

GyY9SuY8fT1x+8Xm8W7Mo0pk3cNdG+4mcc/2V5nq0P9PImtgmWsXubaMRwJrS1PF/Ic/f/B/4BSGdskSOUE0Rg==

解构

1igvz5GNNDMYa/6+Yneckl/J3Rcxbik70rI0+snQ1o/A7FsL4Xb3TsVvMUtTtOEJ8J7apX3+8ZIrIJ/axq3vDpICuUMeyZwEb7lnkrqeZmiVa1SSI7Fqk4cX4N/fItirZCaThhkICLt7wAqTCtqdc124gJ3JbXe0fDdh4gc2SerCmeXRY7GY8lkxlPlCXTswoY24Qe/UFXklX1krV2rY9Rj6xoSph9owBgo47HXjLELQa3K5gArZVgrJWAdT9VL4wgL+v2XOzHOYUAR6FcTL8J1ctMfXaQ+aROAOYxSuksVL9/lmZgNqaHYfFLIjMuMY

数组解构

Ct+fL0ES3GBxP9lFeMkhEk5rWTmHM6sycTZupHyd8Rwvpq9Wi21vscctbrQyIlvEoFuD/9Z1NgHPxuw75sGM/w==

let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2

3ictbYlDrmv3sIZ5uCbIrp8NukJE8rUSon/Z24HGSthCj7rRSvdPBgR0p40nxI9QBIXRy/uH2m38e7SuVS9bBzfSSRxw7Pxf4pFVUNtIy7Av7QmlzAU6i/nsmQYIcy0aHc3KpWx38uMUozgI+/L6Yyss9zCE7dm3SyYWgHZhdhI=

first = input[0];
second = input[1];

/KojvOVqhTDaxRKIV6r38uiSrE6W3nnL8OdJJmj4b6n+1mzDL0a0oDchhHhiWXTf

// swap variables
[first, second] = [second, first];

zMnqQKZ4vzYyoDq9Jly8p/xoQk3s1Th6jfb41yugJxQ=

function f([first, second]: [number, number]) {
  console.log(first);
  console.log(second);
}
f([1, 2]);

cyKAZpoo3Q6BV60vYlmiSWf7WHUo7t0a1EJpb9ng345emq6rkCCAnXMKcTbSkOyGxpBSdmUAvoUeIX5qlJIujawyWwG+NoiPDEFPcqiavuUhyfqL6t79XzFPVai3It9+

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // outputs 1
console.log(rest); // outputs [ 2, 3, 4 ]

NaTM7vgv46NrVD1DK7LtHpmCTa0roIH3KyW6dfuna2t6u9iXie+4Wb4aEAD5B8xmUAhF3v5LGspWuvXf+I9oRFiGg9oYVvU1rY0vxjPk1DbRQnYtBlKUROuwOciQVsAR

let [first] = [1, 2, 3, 4];
console.log(first); // outputs 1

Aybrxy6SOSGHaQFm095rkfsEEW0kHzF3nHeQ3Epo7f4=

let [, second, , fourth] = [1, 2, 3, 4];
console.log(second); // outputs 2
console.log(fourth); // outputs 4

元组解构

cJ8nGCZaibpGiHKWVSJNHt0cDtXC95XDXYAysuIrOa9VI9k9/io6VQraZpPxhzQbT70YaMNJLFQovLsH3TC/Yc4xrWFjpGZPOLSGN571kZMtYR5qWJQqdg1Xio1QZAah

let tuple: [number, string, boolean] = [7, "hello", true];

let [a, b, c] = tuple; // a: number, b: string, c: boolean

BZnVceAE0Uj5bCoHGEuYzeDqdixZGkcLcmHYChTHoaWRkXnwATsbG7xKQ53Txy+yekc5gmgSfNdU4ATcWKXV8A==

let [a, b, c, d] = tuple; // Error, no element at index 3

y6mggggM9wj+8Q8PVeMcKClX7fGDFkj27sD/SHbk0ADu47QJ67OrdOIARy2tk/XxrK8sQspke6Fwmr4gtkU7mC6ZbOhq/VBzciX3J/2nBzkBLfMiJPFCzV9xbmiPkOOJybmCOAr+nDo17nRK5q0qfw==

let [a, ...bc] = tuple; // bc: [string, boolean]
let [a, b, c, ...d] = tuple; // d: [], the empty tuple

VS/HXjGFZlncs19R72WMKLgU0tYPf8g4mboUx1JpDJrDrp4bvOLX7lk4VmbIA3wD

let [a] = tuple; // a: number
let [, b] = tuple; // b: string

对象解构

FkeIGIJLsIyH8Uc+V3yNrbcC0rODRip6dPnfO+eg1Ms=

let o = {
  a: "foo",
  b: 12,
  c: "bar",
};
let { a, b } = o;

2zSKqgMLgc7KffvFEHPGqRtoxoVAa3XCRdFODqQSV1EJZfJEAWGN6WNDtvPw0zWPjKYwX+WtKvYawajklBWtMG5AVUOqkPSZj46Rgac8kEJTT4CIcx2jzFIXoZ0v6GZ581NaZUsUDxXX4GEJ2tpSR7IKsavnfR+mcGlb000y3kz2geX9QRQ1rDCPesN8TidzXpBvEY4J94trTTGydPD/rFduLOGyzVkTHz3UHzsQOts=

bsUfPEnX9KBrCt32SvR2/IpGl7OkAVPylB9yReWg3K+KvR1mKTWVylClrnBLaWUIn9iCEpZC2p9msAwAekLufzcY6n7EDfiF2ejIXgZB/Y8=

({ a, b } = { a: "baz", b: 101 });

s5LoDfGjvBxoULHJFEwwyglR7sCjTPVeZZQa9mZAAfEDZi/qL0fF3W1ARYJ6OYtDDCsuy44L95J/Bys1cAByZsZSYWRmOiutJLoFcvKBQ2eNauaZ3vOb/NVLOefr3clFTAUjYD5yKBxTkG3QQPMX9zsNe40ySN8Kd8mxnC3xQnI=

cyKAZpoo3Q6BV60vYlmiSWf7WHUo7t0a1EJpb9ng345uROYzjX54P/xric2cp4bznJO5BJ7AB8nWKQM1oPdzgiHBBFJOYkRiViVJwuaIzc4=

let { a, ...passthrough } = o;
let total = passthrough.b + passthrough.c.length;

属性重命名

SRvJebxvoopYJRZH5iVrYU+k5yMbwoKsp30iaDd9NtphW5bOuu0okA7U4MUlSiUi

let { a: newName1, b: newName2 } = o;

pWNhE9v/We83eg1jV3RyHJWhIlpf+4AtyaXL7Gtr802MqleckPteFb0T6bQCpKuaJNbD0yDicN8PyEXClf0WZ2lCo0U6LOUhf7COAETTlbgKzf2qcYg9iasCEgFLUNGi9b9diA8hjg3EduaRMkDA9gWnn5YiBEN5GFIkJkLpQ1DCBIEw/mg6b/aKKlixYFPrkD2iGfFyQkJ8KVwRuBdQua38Dw+PUal1JlYoXo0CkEMA1o7kiMyR30PRSpVFjb9r

let newName1 = o.a;
let newName2 = o.b;

WuenNB8Q/QETHi0q108eehxRrVSLvL2pBt4JZOHXZseJNTUfJyQylmmeTSdnXBXULOvWoypLk0D0EWJgMMpU0cZWTao/CMTRPtY1hO4HHVUo8G2U1YYvCWG1ddEVWc9dmKxWVEa9VacfnumW19t+DTLcrLZHg1/kz6uljWXkJem5RJrdrh6xga023Ynck2Ry

let { a: newName1, b: newName2 }: { a: string; b: number } = o;

默认值

14AYiQKkVjgYhZHHAb8cvWR6mrrg7QbXXNpToFNco79c/BH7hvUMaZLxV1K2B9Wwcu8WbDFfYoS1z29WjQhZ2ExaVui1sotNYyKfSz8OUq0=

function keepWholeObject(wholeObject: { a: string; b?: number }) {
  let { a, b = 1001 } = wholeObject;
}

8hmq7/YoYr3g+FVVzJEORazerIvrj3SoLncJCZ6nQav1ILOXtNZNc2Znw11RyZLxMpntv/wvZj5okeEY5rOYiGtyO4l5w/iGYq/dsPUBZfhRoemZo6CFDU8Z5WTM9nIsRaL8RyuSrC2gVrb4RnZpGtrwPBkHr4J/zRQgxlscVmepmzbHFiwoqitqTc8hWS85oaLPgbIbHkw3peXByZXgqtOGqO13dX+HnGEcbZd3623CofSx8yuNqP44DnuzCk1AkZcHiBbnK1LC7q1UowP6VV9v3hMe53UeTcjEpmbxY64+MK9pfZ4UT5ToVeXfA+KAN4eVwMR9XcfhXBy0Sg3zr6wI6b6nfhgiAecDhgtD/lORpuXTUStMARFYYTEHfGII

函数声明

/KojvOVqhTDaxRKIV6r38h9nWxAAkhPms/egzgtp61HTI5+DdlvRf93LvGjb1/LO++/esQ/tOAg3+N88haVX3L2CgehSkatoJ8dQ7W7UyCY=

type C = { a: string; b?: number };
function f({ a, b }: C): void {
  // ...
}

OWeQCFB0dqlAf/BEaHOW+UNfeSNPjxNCdLBLHOBVu8DwbNQI1EmriVg604S9iwF5gNngx/vIv9+/770/0/zXm6sfjsXw03LErQnFhqarmRLsCb53KW3ly38FMi9B3XdAq51x6+N2oEbhM31Np+Db/P3k5XYcxRn+dWF/G86kf2HzxMvj67jO90xWL4H+uGYV4kQQVLy+zBsxGXJ/k4ixog==

function f({ a = "", b = 0 } = {}): void {
  // ...
}
f();

klp1/zjKghis7rVwhhj/3m8Q0upPGY2K3hsGsZvLS1KKRL+a7ZXLBW0nv4SKRQTdjvB2V3j9dKvBLw7UlOy53se+Cy684Yl/a3Vg5ZJ6TdjNcFunjj6e/fab1oYlyIaC

nTST7f8ac0YQQTAzvdobO44iRvXc6jypDj0F56OkirAmz9Xl0bH4IxMbG1kJxZQ905tqtaOu65ivsVOO+ywaaLbpEs6XjGeFm41kVROoAQWDy3EvMwYIZrdZXI5NUkE+HlQRwsyB+ERfoSTQWmbk1udHl3G1r7TxoBfi8QF8k1JALEiYinyxT5lfmNyAbhM32gp4BvZyJPCairLFkNLTAC1OtMvwcRQb1zzSGJ8F0Ik=

function f({ a, b = 0 } = { a: "" }): void {
  // ...
}
f({ a: "yes" }); // ok, default b = 0
f(); // ok, default to { a: "" }, which then defaults b = 0
f({}); // error, 'a' is required if you supply an argument

xJJAej8Fsq7ZXFmmUNSCWM84ToRzgQ6BVbwzJyE3nZB8ZhqjDtT4AlnVm4OOzoF41aLnnZwY1pwEgryUwHf0phQBBTUJXxc8fw8yx75HK6k5T+s2wpzZhIMD13kgcvhUt7Yuyp3Zy+E6zhDQz4S/XnBkl7m4LjfRHR/GBFc7nd/V0yKSD5X3vC6uX7GBFOva7RDbmenxaNUKReBJ/piTcGjatKSH3QTbFOtvp61N8w2MdPE7fnqkqCkXwNQb5QUmHN1XcgfchgVImCgxq7lTSJkelf9qd5UpvW/iKKOGp+vwiFCE4iceicFfWNeKEcoGAd8ed5jywX7yxOgaNQIA/zTB8mfV4Lfv+kQmK1K0uaBKQeuDeGWxCSDoqlYifoOKnYHN3yNJBI29v5k1wPe6dikSTZKFp1JeU+GJ9qU+SKOvUNIeNzuRhV/IiSIAVjDTRdYmlD50xQ7YukzsvjqwWA==

展开

VrQQ/4KAG0Lc4UWEethwEtRPG9lIGjsJSKdALZBiOENRWnKph+PkqNJyEwJnEBqsTFadj3rzW+T6Pkx9laMWAJCuh51XNlhH60uE06BEUKlD+E/+0ocWOO/r2NXbvVAoQ5UOzzYq/ZKXq9jnZzKVzubkAea0jj+t7YwH/JMbvy8hkRuNophJOqtOGXeRdv81njzLethFtKOIs7TPs+/0rg==

let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];

j480pF8Sqv920UeMh0D5jpDOJ3Ot6FXj4SYUWJnGs/ZoiZBeptHAFQLW1MbGZ2gXrBL8h1+jyBHy763O9XqLTv/TviiBmdDvBXAziznzkUowZUYnM4mVrQSczRbyh3YWGg28ciUCozFDvOsdYL1s3DNB5w9VNx7/cvRMPSYwbqjrG2WAzeeTZjv12bLdtaiyMK0vdgG8x+1kTvu6pshmIvSq8RIwcv9qaeCjOiwa5xQ=

R2pRCxOdMfQQEBE1pk3kUsSmnpXy2iQu4csRB5Pw3PM=

let defaults = { food: "spicy", price: "$", ambiance: "noisy" };
let search = { ...defaults, food: "rich" };

UneoIndXMZHtXiBSBQOPTkF460sl86PoV+oCAseIAJcRmznJ3kwuXKfqms9hbIQFNFCLnb3gfoNaB4oy2q6nxQrJdJVOyCEqL8MRTC2bNtv9g5Ma/tqbURBrPiFMQ2zy+tZNA4LtLy8KnakN6Hwx+IqXTG0YjfzkPshfVPz9/QanbdNyfC7NkHT+EfYfSlu9BI8U+rwEL++Hfwz9zzIb8A2by2Vc5aDtPLYsDmaaOzOkCIRRODCl6rTnSqnZFA/uzPk+FwHOiXJvO6VoETEKF2ZiIbgbhiiRWxbPIqK/zg9Mjoa1F2RDyw9YT12tX5if4tm0AwiGom+TI7jEm+75oFLzCjgJSOhw4q9tmx144ScZRkIvAppTHeQTpGGCrGOu4i1OYCUOXe8r4PbQtvjYnKaQDoya2J6WyRHqm882F3a5hFwLwK5OefeMvG34hMTdgNjlOFfr8yJgsWAbB4MzWPlpGt/OP+8m803j3xGJ6OU=

let defaults = { food: "spicy", price: "$", ambiance: "noisy" };
let search = { food: "rich", ...defaults };

qwvjZXWk1Stru6v4RlmXd7r2uGyk33GjlhmJmKmb/a466J8ssX195Yyck2aM7lZ1iISv3nx3+0lZOfgx4IBWYOKA38XTZmGCg2pL4i6/LcnFNWtBIBUXbs4IwitdEDIFNkUGpNIXONVglS86NYD9FgIVpz1/oV1kdenKlZJbpkbodbpYOldyRCcuIyo98k2S

4AqTGR94pje+oBtEridByvv2lu5PHeYH67rxIEULca3XOEdTQJX7vIoMRNZ/AR/OsSc4F/9MC3bsZJuR27LT4roKH5r8UU6s+mdBxvb5OY7b3UjwQ6wqZk4Kmmk0wERTVYx6MnCS9IranIat9+xWDuMg+ncnjayHGcn3fRnL52crpd0kmq8+QRtXG5GJj04h12N5OAtlGX0NZ96Jes/ox7dcF9dvIROel4GQnP53/E4s0XPQ6QQkGiJxdEIc4iR6XFRLjAaAaX+cZb3vIOg2s+gdapd+YSStN8ge7tgLs2rj2Se/GqblTzhsWZMAbRtG

class C {
  p = 12;
  m() {}
}
let c = new C();
let clone = { ...c };
clone.p; // ok
clone.m(); // error!

/yBhjU9UbGnukWD0Gw37FPnTQzQZyqHj1OxOMRUuhRKZeWoF2oMGdz+AhpB2Jd0Ufz/R5B7AAqaF50qhqziJb9v5aPYlFVPkJjKUpEj2Q6/5FXm3Q/f6IOAT52zWpcc6G+ahzKDx5X+jiLiu1lvhpuxibCkdGDXZ+1jlk4AzWOqI1qLlnPHrIL1Im9CiGohj