æ¬ç« ç®è¦å顾æä»¬å°ç°å¨ä¸ºæ¢å¦å°ç JavaScript ç¹æ§ï¼å¹¶ç¹å«æ³¨æäºä¸äºç»èã
代ç ç»æ
è¯å¥ç¨åå·åéï¼
alert('Hello'); alert('World');
éå¸¸ï¼æ¢è¡ç¬¦ä¹è¢«è§ä¸ºåé符ï¼å æ¤ä¸é¢çä¾åä¹è½æ£å¸¸è¿è¡ï¼
alert('Hello')
alert('World')
è¿å°±æ¯æè°çãèªå¨åå·æå ¥ãã使æ¶å®ä¸èµ·ä½ç¨ï¼ä¾å¦ï¼
alert("There will be an error after this message")
[1, 2].forEach(alert)
大夿°ä»£ç 飿 ¼æåé½è®¤ä¸ºæä»¬åºè¯¥å¨æ¯ä¸ªè¯å¥åé¢é½å ä¸åå·ã
å¨ä»£ç å {...} å以åæä»£ç åçè¯æ³ç»æï¼ä¾å¦å¾ªç¯ï¼åä¸éè¦å åå·ï¼
function f() {
// 彿°å£°æåä¸éè¦å åå·
}
for(;;) {
// 循ç¯è¯å¥åä¸éè¦å åå·
}
â¦â¦ä½å³ä½¿æä»¬å¨æå¤æ·»å äºãé¢å¤çãåå·ï¼è¿ä¹ä¸æ¯é误ãåå·ä¼è¢«å¿½ç¥çã
æ´å¤å 容ï¼ä»£ç ç»æã
ä¸¥æ ¼æ¨¡å¼
为äºå®å
¨å¯ç¨ç°ä»£ JavaScript çææç¹æ§ï¼æä»¬åºè¯¥å¨èæ¬é¡¶é¨åä¸ "use strict" æä»¤ã
'use strict';
...
该æä»¤å¿ é¡»ä½äº JavaScript èæ¬ç顶鍿彿°ä½çå¼å¤´ã
å¦ææ²¡æ "use strict"ï¼ææä¸è¥¿ä»å¯ä»¥æ£å¸¸å·¥ä½ï¼ä½æäºåè½å°ä»¥èå¼çâå
¼å®¹âæ¹å¼è¿è¡ãæä»¬é常æ´å欢ç°ä»£çæ¹å¼ã
è¯è¨çä¸äºç°ä»£ç¹å¾ï¼æ¯å¦æä»¬å°æ¥è¦å¦ä¹ çç±»ï¼ä¼éå¼å°å¯ç¨ä¸¥æ ¼æ¨¡å¼ã
æ´å¤å 容ï¼ç°ä»£æ¨¡å¼ï¼"use strict"ã
åé
å¯ä»¥ä½¿ç¨ä»¥ä¸æ¹å¼å£°æåéï¼
letconstï¼ä¸åçï¼ä¸è½è¢«æ¹åï¼varï¼æ§å¼çï¼ç¨åä¼çå°ï¼
ä¸ä¸ªåéåå¯ä»¥ç±ä»¥ä¸ç»æï¼
- 忝忰åï¼ä½æ¯ç¬¬ä¸ä¸ªå符ä¸è½æ¯æ°åã
- å符
$å_æ¯å 许çï¼ç¨æ³å忝ã - éæä¸åæ¯å象形æå乿¯å 许çï¼ä½é常ä¸ä¼ä½¿ç¨ã
åéæ¯å¨æç±»åçï¼å®ä»¬å¯ä»¥åå¨ä»»ä½å¼ï¼
let x = 5;
x = "John";
æ 8 ç§æ°æ®ç±»åï¼
numberâ å¯ä»¥æ¯æµ®ç¹æ°ï¼ä¹å¯ä»¥æ¯æ´æ°ï¼bigintâ ç¨äºä»»æé¿åº¦çæ´æ°ï¼stringâ å符串类åï¼booleanâ é»è¾å¼ï¼true/falseï¼nullâ å ·æå个å¼nullçç±»åï¼è¡¨ç¤ºâ空âæâä¸åå¨âï¼undefinedâ å ·æå个å¼undefinedçç±»åï¼è¡¨ç¤ºâæªåé ï¼æªå®ä¹ï¼âï¼objectåsymbolâ 对äºå¤æçæ°æ®ç»æåå¯ä¸æ è¯ç¬¦ï¼æä»¬ç®åè¿æ²¡å¦ä¹ è¿ä¸ªç±»åã
typeof è¿ç®ç¬¦è¿åå¼çç±»åï¼ä½æä¸¤ä¸ªä¾å¤ï¼
typeof null == "object" // JavaScript ç¼ç¨è¯è¨ç设计é误
typeof function(){} == "function" // 彿°è¢«ç¹æ®å¯¹å¾
æ´å¤å 容ï¼åé å æ°æ®ç±»åã
交äº
æä»¬ä½¿ç¨æµè§å¨ä½ä¸ºå·¥ä½ç¯å¢ï¼æä»¥åºæ¬ç UI åè½å°æ¯ï¼
prompt(question[, default])- æåºä¸ä¸ªé®é¢
questionï¼å¹¶è¿å访é®è è¾å ¥çå 容ï¼å¦æä»æä¸ãåæ¶ãåè¿ånullã confirm(question)- æåºä¸ä¸ªé®é¢
questionï¼å¹¶å»ºè®®ç¨æ·å¨âç¡®å®âåâåæ¶âä¹é´è¿è¡éæ©ãéæ©ç»æä»¥true/falseå½¢å¼è¿åã alert(message)- è¾åºä¸ä¸ªæ¶æ¯
messageã
è¿äºå½æ°é½ä¼äº§ç æ¨¡ææ¡ï¼å®ä»¬ä¼æåä»£ç æ§è¡å¹¶é»æ¢è®¿é®è ä¸é¡µé¢çå ¶ä»é¨åè¿è¡äº¤äºï¼ç´å°ç¨æ·ååºåç为æ¢ã
举个ä¾åï¼
let userName = prompt("Your name?", "Alice");
let isTeaWanted = confirm("Do you want some tea?");
alert( "Visitor: " + userName ); // Alice
alert( "Tea wanted: " + isTeaWanted ); // true
æ´å¤å 容ï¼äº¤äºï¼alertãprompt å confirmã
è¿ç®ç¬¦
JavaScript æ¯æä»¥ä¸è¿ç®ç¬¦ï¼
- ç®æ°è¿ç®ç¬¦
-
常è§çï¼
+ - * /ï¼å åä¹é¤ï¼ï¼åä½è¿ç®ç¬¦%åå¹è¿ç®ç¬¦**ãäºè¿å¶å å·
+å¯ä»¥è¿æ¥å符串ã妿任ä½ä¸ä¸ªæä½æ°æ¯ä¸ä¸ªå符串ï¼é£ä¹å¦ä¸ä¸ªæä½æ°ä¹å°è¢«è½¬æ¢ä¸ºå符串ï¼alert( '1' + 2 ); // '12'ï¼å符串 alert( 1 + '2' ); // '12'ï¼å符串 - èµå¼
-
ç®åçèµå¼ï¼
a = bååå¹¶äºå ¶ä»æä½çèµå¼ï¼a *= 2ã - æä½è¿ç®ç¬¦
-
æä½è¿ç®ç¬¦å¨æä½ä½çº§ä¸æä½ 32 ä½çæ´æ°ï¼è¯¦è§ ææ¡£ã
- ä¸å è¿ç®ç¬¦
-
å¯ä¸å ·æä¸ä¸ªåæ°çæä½ï¼
cond ? resultA : resultBã妿cond为çï¼åè¿åresultAï¼å¦åè¿åresultBã - é»è¾è¿ç®ç¬¦
-
é»è¾ä¸
&&åæ||æ§è¡çè·¯è¿ç®ï¼ç¶åè¿åè¿ç®åæ¢å¤çå¼ï¼true/false䏿¯å¿ é¡»çï¼ãé»è¾é!尿使°è½¬æ¢ä¸ºå¸å°å¼å¹¶è¿åå ¶ç¸åçå¼ã - 空å¼åå¹¶è¿ç®ç¬¦
-
??è¿ç®ç¬¦ä»ä¸ååéä¸ï¼éåå¼ä¸ºå·²å®ä¹çå¼ï¼defined valueï¼çåéãa ?? bçç»ææ¯aï¼é¤éa为null/undefinedï¼è¿æ¶ç»ææ¯bã - æ¯è¾è¿ç®ç¬¦
-
对ä¸åç±»åçå¼è¿è¡ç¸çæ£æ¥æ¶ï¼è¿ç®ç¬¦
==ä¼å°ä¸åç±»åçå¼è½¬æ¢ä¸ºæ°åï¼é¤äºnullåundefinedï¼å®ä»¬å½¼æ¤ç¸çèæ²¡æå ¶ä»æ åµï¼ï¼æä»¥ä¸é¢çä¾åæ¯ç¸ççï¼alert( 0 == false ); // true alert( 0 == '' ); // trueå ¶ä»æ¯è¾ä¹å°è½¬æ¢ä¸ºæ°åã
ä¸¥æ ¼ç¸çè¿ç®ç¬¦
===ä¸ä¼è¿è¡è½¬æ¢ï¼ä¸åçç±»åæ»æ¯æä¸åçå¼ãå¼
nullåundefinedæ¯ç¹æ®çï¼å®ä»¬åªå¨==ä¸ç¸çï¼ä¸ä¸ç¸çäºå ¶ä»ä»»ä½å¼ã大äº/å°äºæ¯è¾ï¼å¨æ¯è¾å符串æ¶ï¼ä¼æç §å符顺åºé个å符å°è¿è¡æ¯è¾ãå ¶ä»ç±»åå被转æ¢ä¸ºæ°åã
- å ¶ä»è¿ç®ç¬¦
-
è¿æå¾å°ä¸é¨åå ¶ä»è¿ç®ç¬¦ï¼å¦éå·è¿ç®ç¬¦ã
æ´å¤å 容ï¼åºç¡è¿ç®ç¬¦ï¼æ°å¦è¿ç®ï¼å¼çæ¯è¾ï¼é»è¾è¿ç®ç¬¦ï¼ç©ºå¼åå¹¶è¿ç®ç¬¦ '??'ã
循ç¯
-
æä»¬æ¶µçäº 3 ç§ç±»åç循ç¯ï¼
// 1 while (condition) { ... } // 2 do { ... } while (condition); // 3 for(let i = 0; i < 10; i++) { ... } -
å¨
for(let...)循ç¯å é¨å£°æçåéï¼åªå¨è¯¥å¾ªç¯å å¯è§ã使们ä¹å¯ä»¥çç¥letå¹¶éç¨å·²æçåéã -
æä»¤
break/continueå 许éåºæ´ä¸ªå¾ªç¯/å½åè¿ä»£ãä½¿ç¨æ ç¾æ¥æç ´åµå¥å¾ªç¯ã
æ´å¤å 容ï¼å¾ªç¯ï¼while å forã
ç¨åæä»¬å°å¦ä¹ æ´å¤ç±»åçå¾ªç¯æ¥å¤ç对象ã
âswitchâ ç»æ
âswitchâ ç»æå¯ä»¥æ¿ä»£å¤ä¸ª if æ£æ¥ãå®å
é¨ä½¿ç¨ ===ï¼ä¸¥æ ¼ç¸çï¼è¿è¡æ¯è¾ã
ä¾å¦ï¼
let age = prompt('Your age?', 18);
switch (age) {
case 18:
alert("Won't work"); // prompt çç»ææ¯ä¸ä¸ªå符串ï¼è䏿¯æ°å
break;
case "18":
alert("This works!");
break;
default:
alert("Any value not equal to one above");
}
详æ 请è§ï¼"switch" è¯å¥ã
彿°
æä»¬ä»ç»äºä¸ç§å¨ JavaScript ä¸åå»ºå½æ°çæ¹å¼ï¼
-
彿°å£°æï¼ä¸»ä»£ç æµä¸ç彿°
function sum(a, b) { let result = a + b; return result; } -
彿°è¡¨è¾¾å¼ï¼è¡¨è¾¾å¼ä¸ä¸æä¸ç彿°
let sum = function(a, b) { let result = a + b; return result; } -
ç®å¤´å½æ°ï¼
// 表达å¼å¨å³ä¾§ let sum = (a, b) => a + b; // æå¸¦ {...} çå¤è¡è¯æ³ï¼æ¤å¤éè¦ returnï¼ let sum = (a, b) => { // ... return a + b; } // 没æåæ° let sayHi = () => alert("Hello"); // æä¸ä¸ªåæ° let double = n => n * 2;
- 彿°å¯è½å ·æå±é¨åéï¼å¨å½æ°å é¨å£°æçåéï¼æå¨å ¶åæ°å表ä¸ãè¿ç±»åéåªå¨å½æ°å é¨å¯è§ã
- åæ°å¯ä»¥æé»è®¤å¼ï¼
function sum(a = 1, b = 2) {...}ã - 彿°æ»æ¯è¿åä¸äºä¸è¥¿ãå¦ææ²¡æ
returnè¯å¥ï¼é£ä¹è¿åçç»ææ¯undefinedã
详ç»å 容ï¼è¯·è§ 彿°ï¼ç®å¤´å½æ°ï¼åºç¡ç¥è¯ã
æ´å¤å 容
è¿äºæ¯ JavaScript ç¹æ§çç®è¦æ¦è¿°ãæªè³ç®åï¼æä»¬ä» ä» å¦ä¹ äºåºç¡ç¥è¯ãéçæç¨çæ·±å ¥ï¼ä½ ä¼åç° JavaScript çæ´å¤ç¹æ§åé«çº§ç¹æ§ã
è¯è®º
<code>æ ç¾æå ¥åªæå 个è¯ç代ç ï¼æå ¥å¤è¡ä»£ç å¯ä»¥ä½¿ç¨<pre>æ ç¾ï¼å¯¹äºè¶ è¿ 10 è¡ç代ç ï¼å»ºè®®ä½ ä½¿ç¨æ²ç®±ï¼plnkrï¼JSBinï¼codepenâ¦ï¼