基本使用#

使用 进行插入，使用相对路径、绝对路径或URL链接均为可行的。(注意：如果设置了 src 特性，script 标签内容将会被忽略。)

TIP

一般来说，只有最简单的脚本才嵌入到 HTML 中。更复杂的脚本存放在单独的文件中。 使用独立文件的好处是浏览器会下载它，然后将它保存到浏览器的缓存中。 之后，其他页面想要相同的脚本就会从缓存中获取，而不是下载它。所以文件实际上只会下载一次。 这可以节省流量，并使得页面（加载）更快。

注释写法#

1
//这是一个单行注释
2
/*这是一个
3
多行注释*/

注释写法如上。（ctrl+/ - 快捷注释）

严格模式#

1
"use strict";

启用严格模式，必须写在顶端，而且启用后无法取消。 使用 “class” 和 “module”时会自动启用严格模式，无需另外再写。

变量声明#

1
let controduction;

使用let声明变量，一个变量只能声明一次。（较老的版本会使用var） JavaScript 的变量命名有两个限制： 1.变量名称必须仅包含字母、数字、符号 $ 和 _。 2.首字符必须非数字。

1
const writer = 'cccxyx';

使用const声明常量，常量的值不能被改变。

交互：#

1.alert：它会在模态窗中显示一条信息，并等待用户确认。“modal” 意味着用户不能与页面的其他部分（例如点击其他按钮等）进行交互，直到他们处理完窗口。

1
alert( 'Hello world!' );

用于显示消息，括号内的字符串没有引号时使用单引号（”）或双引号（""）包裹均可，字符串有引号时建议使用另一种，以作区分。 分号大部分时候可以省略，但是最好打上。 2.prompt：接收两个参数，浏览器会显示一个带有文本消息的模态窗口，还有 input 框和确定/取消按钮。点击确定后将会返回 input 框中的内容，也可以点击取消或直接使用 Esc 退出模态窗，得到返回值 undefined。

1
const result = prompt("请输入内容", "这里是默认值");

3.confirm：显示一个带有 question 以及确定和取消两个按钮的模态窗口，点击确定返回 true ，点击取消返回 false。

1
result = confirm(question);

数据类型：#

1.Number类型：代表整数和浮点数。除了常规的数字外，还包括几个特殊数值：Infinity、-Infinity 和 NaN。 1）Infinity：数学概念中的无穷大

1
alert( 1 / 0 ); // Infinity

或

1
alert( Infinity ); // Infinity

2）NaN类型：代表计算错误。

1
alert( "not a number" / 2 );// NaN

NaN 是粘性的。任何对 NaN 的进一步数学运算都会返回 NaN。

1
alert( NaN + 1 ); // NaN
2
alert( 3 * NaN ); // NaN

2.BigInt类型：“number” 类型无法安全地表示大于 (2的53次方-1)（即 9007199254740991），或小于 -(2的53次方-1) 的整数，所以需要用到BigInt，它可以表示任意长度的整数。（不安全指的是存储下来可能会变成“近似值”） 可以通过将 n 附加到整数字段的末尾来创建 BigInt 值。

1
// 尾部的 "n" 表示这是一个 BigInt 类型
2
const bigInt = 1234567890123456789012345678901234567890n;

3.string类型：JavaScript 中的字符串必须被括在引号里。使用单引号、双引号或反引号都是可行的。 反引号的性质稍微特殊一点，它是功能拓展引号，在反引号内可以使用${}包裹变量或表达式，${}中的内容会被替换为表达式的结果或者变量的值。 4.Boolean类型：仅包括 true 和 false。 5.Null值：该类型仅包括 null 值，代表“无”或“值未知”。 6.Undefined值：与 Null 值类似，区别在 undefined 的意义是未赋值，作为一个变量的默认初始值。 7.Object类型：用于存储数据集合或更加复杂的实体。 8.symbol 类型：用于创建对象的唯一标识符。 补充：可以使用 typeof 运算符，它会返回参数的类型。

1
typeof undefined ;// "undefined"
2
typeof (0) ;// "number"，有括号不影响使用。

类型转换：#

1.字符串转换：使用 alert(value) 可以将 value 转换为字符串类型，然后显示这个值；也可以通过调用 String(value) 的方法来将 value 转换为字符串类型。

1
let value = true;//此时value的类型是boolean型。
2
value = String(value); // 将值从boolean型转换为string类型，此时value = 'true'。
3
alert(typeof value); // string

2.数字型转换：在算术函数和表达式中，会自动进行 number 类型转换；同上，也可以使用 Number(value) 显式地将这个 value 转换为 number 类型。

1
alert( '6' / '2' );//输出3，自动将字符串转换为Number类型再进行运算。

number 类型转换规则：

1
alert( Boolean(1) ); // true
2
alert( Boolean(0) ); // false
3
alert( Boolean("hello") ); // true
4
alert( Boolean("") ); // false

基础运算符与数学运算：#

1.一元运算符：只对一个单位做运算的运算符，如“+”和“-”。 2.数学运算符：+、-、*、/、%（取余数）、**（幂运算）。

1
alert( 8 % 3 );//2
2
alert( 2 ** 2 ); // 2² = 4
3
alert( 2 ** 3 ); // 2³ = 8
4
alert( 4 ** (1/2) ); // 2（1/2 次方与平方根相同）

3.二元运算符+号连接字符串：当有一个运算元为字符串（被引号包裹）时，+符号会链接前后两个元素。注意：二元 + 是唯一一个以这种方式支持字符串的运算符。其他算术运算符只对数字起作用，并且总是将其运算元转换为数字。

1
alert( 1 + '2' );//12
2
alert(2 + 2 + '1' ); // "41"

4.一元运算符+的数字转换：应用于单个值，对数字没有任何作用。但是如果运算元不是数字，加号 + 则会将其转化为数字。可以理解为更简短的Number()

1
alert( +true ); // 1
2
alert( +"" );   // 0
3
let apples = "2";
4
let oranges = "3";
5
// 因为一元运算符优先级比二元运算符高，在二元运算符加号起作用之前，所有的值都被转化为了数字
6
alert( +apples + +oranges ); // 5

优先级查询：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence 5.赋值运算符=：优先级极低，通常都可以先计算再赋值。 6.+与-的简写：和cpp一样，a=a+b可以写为a+=b。（感觉很多语法都可以这样，单提cpp是因为个人熟悉度比较高） 7.自增与自减：a++等于a+=1，a—等于a-=1。++和—可前置可后置，但是略有不同。++/— 运算符同样可以在表达式内部使用，它们的优先级比绝大部分的算数运算符要高。

1
let counter = 1;
2
let a = ++counter;
3
alert(a); // 2

此时alert的a的值是变化后的值。

1
let counter = 1;
2
let a = counter++;
3
alert(a); // 1

a同样会做加法，但是此时alert的值是变化前的值。 8.逗号运算符：优先级极低（低于=号），能让我们处理多个表达式，使用“ , ”将它们分开。每个表达式都运行了，但是只有最后一个的结果会被返回。可以通过使用它把几个行为放在一行上来进行复杂的运算。

1
for (a = 1, b = 3, c = a * b; a < 10; a++) {
2
 ...
3
}

值的比较#

1.符号：>大于，<小于，>=大于等于，<=小于等于，==相等性检查，!=不相等。 2.比较结果：均为boolean值。

1
alert( 2 > 1 );  // true（正确）
2
alert( 2 == 1 ); // false（错误）
3
alert( 2 != 1 ); // true（正确）

和其他类型的值一样，比较的结果可以被赋值给任意变量。

1
let result = 5 > 4;
2
alert( result );//true

3.字符串比较：按字符（字母顺序）逐个进行比较。（注意：A与a的大小不同，小写的a更大，因为大小顺序实际上是Unicode编码顺序）

1
alert( 'Z' > 'A' ); // true
2
alert( 'Glow' > 'Glee' ); // true
3
alert( 'Bee' > 'Be' ); // true

4.不同类型间的比较：js会首先自己将其转化为数字（number）再判定大小。 5.严格相等：因为在比较不同类型的值时，处于相等判断符号 == 两侧的值会先被转化为数字，所以普通的==不能区分0和false、空字符串和false。这是就要用到严格相等运算符 === ，它在进行比较时不会做任何的类型转换。

1
alert( 0 === false ); // false，因为被比较值的数据类型不同

与“不相等”符号 != 类似，“严格不相等”表示为 !==。 6.对null和undefined进行比较：使用严格相等时为false，使用不严格相等时为true。对于取值可能是 null/undefined 的变量，请按需要分别检查它的取值情况。

条件分支if和“?”以及几种运算符#

1.“if”语句：和cpp基本一样。 2.布尔转换：if (…) 语句会计算圆括号内的表达式，并将计算结果转换为布尔型。数字 0、空字符串 ""、null、undefined 和 NaN 都会被转换成 false，括号中如果是这些，则不会执行大括号中的内容。 3.条件运算符？：和cpp没啥区别，要注意的点就是使用一系列问号 ? 运算符可以返回一个取决于多个条件的值。

逻辑运算符：||（一个为true即可）、&&（都需要为true）、!（非），和cpp大体上没差，不过多解释了。 空值合并运算符：a ?? b ，如果 a 是已定义的，则结果为 a，如果 a 不是已定义的，则结果为 b。即如果第一个参数不是 null/undefined，则 ?? 返回第一个参数。否则，返回第二个参数。禁止将 ?? 运算符与 && 和 || 运算符一起使用，除非使用括号明确指定了优先级

1
let firstName = null;
2
let lastName = null;
3
let nickName = "Supercoder";
4
// 显示第一个已定义的值，没有则显示匿名
5
alert(firstName ?? lastName ?? nickName ?? "匿名"); // Supercoder

循环#

while和for循环：和cpp区别不大，区别在于for()内定义的变量不能在循环外使用；js可以给循环加标签，然后 break label 直接跳出循环；js会自动进行类型转换等，主要是细节上一些不同。 switch：好像也没啥可说的。

函数：#

1.函数声明：用来创建函数，格式为 function name(parameter1, parameter2, … parameterN) { …body… } 之后可以通过名称调用函数。 2.局部变量：函数内可以声明变量，该变量仅在函数内部可见，函数外不可使用。 3.外部变量：函数可以访问全部的外部变量，也可以对它进行修改。一般只有在没有局部变量时才会使用外部变量。如果函数内声明了同名变量，函数会自动屏蔽外部变量，优先使用局部变量。 4.参数：可以通过参数将任意数据传递给函数。函数内修改参数时，在函数外部看不到更改，因为函数修改的是复制的变量值副本。 注意：参数（parameter）是函数声明中括号内列出的变量（它是函数声明时的术语），而参数（argument）是调用函数时传递给函数的值（它是函数调用时的术语）。 5.默认值：如果一个函数被调用，但有参数（argument）未被提供，那么相应的值就会变成 undefined。我们可以使用 = 为函数声明中的参数指定“默认”（对应参数的值未被传递时被使用的）值，它甚至可以是一个函数。 6.后备默认参数：有时候将参数默认值的设置放在函数执行（相较更后期）而不是函数声明时也行得通。可以通过将参数与 undefined 进行比较，来检查该参数是否在函数执行期间被传递进来，也可以使用 || 和 ?? 。

1
function showMessage(text) {
2
// ...
3
  if (text === undefined) { // 如果参数未被传递进来
4
    text = 'empty message';
5
  }
6
alert(text);
7
}
8
showMessage(); // empty message

7.返回值：函数可以使用指令 return 将一个值返回到调用代码中作为结果，它可以出现在函数的任意位置，也可以多次出现。只使用 return 但没有返回值也是可行的。但这会导致函数立即退出。空值的 return 或没有 return 的函数返回值为 undefined。

1
function sum(a, b) {
2
  return a + b;
3
}
4
let result = sum(1, 2);
5
alert( result ); // 3

8.函数命名：函数就是行为（action），它们的名字通常是动词，应该简短且尽可能准确地描述函数的作用。一个函数应该只包含函数名所指定的功能，而不是做更多与函数名无关的功能。

函数表达式：#

1.这是另一种创建函数的语法，允许我们在任何表达式中间创建一个新的函数。

1
let sayHi = function() {
2
  alert( "Hello" );
3
};//函数表达式接尾有 ; ，而函数声明没有

2.值得注意的是，不论是哪种创建方式，函数都是一个值。因此我们其实可以复制函数到其他变量。 3.在某些编程语言中，只要提到函数的名称都会导致函数的调用执行，但js中并非如此，函数后必须有（）。

回调函数：#

1
function ask(question, yes, no) {
2
  if (confirm(question)) yes()//confirm 为浏览器自带的函数
3
  else no();
4
}
5
function showOk() {
6
  alert( "You agreed." );
7
}
8
function showCancel() {
9
  alert( "You canceled the execution." );
10
}
11
// 函数 showOk 和 showCancel 被作为参数传入到 ask
12
ask("Do you agree?", showOk, showCancel);

ask 的两个参数值 showOk 和 showCancel 可以被称为 回调函数 或简称 回调，主要思想是我们传递一个函数，并期望在稍后必要时将其“回调”。 2. 也可以使用函数表达式写成一个功能相同但是更好阅读的版本：

1
function ask(question, yes, no) {
2
  if (confirm(question)) yes()
3
  else no();
4
}
5
ask(
6
  "Do you agree?",
7
  function() { alert("You agreed."); },
8
  function() { alert("You canceled the execution."); }
9
);

此时是直接在 ask(…) 调用内进行了函数声明。这两个函数没有名字，所以叫匿名函数。这样的函数在 ask 外无法访问（因为没有对它们分配变量），正好达成了预期的效果。 函数表达式与函数声明的对比： 语法区别前面已有介绍，不多解释了。更细微的区别在于使用二者时js引擎创建函数的时间不同，函数表达式是代码运行到该行时再创建函数，在那时起才可以使用；而函数声明在被定义前就可以使用。 函数声明的另一个特殊功能是块级作用域，严格模式下，当一个函数声明在一个代码块内时，它在该代码块内的任何位置都是可见的。但在代码块外不可见，使用函数表达式则可在代码块上使用。

箭头函数：#

另一种创建函数的语法。只有一个参数时可去掉参数外的括号，但是无参数时必须保留括号。想要使用复杂一点的函数可以使用花括号包裹，用花括号括起来之后，需要包含 return 才能返回值。

1
let sum = (a, b) => a + b;
2
/* 这个箭头函数等于下面这个函数：
3
let sum = function(a, b) {
4
  return a + b;
5
};
6
*/
7
alert( sum(1, 2) ); // 3

小结之js特性：#

1.使用 ; 分隔，存在自动分号插入，但有时不生效。在代码块或有代码块的结构后可以不加分号，但是加了也不会报错，而是会被自动忽略。 2.严格模式：用于启用现代js所有特性，在代码顶端写 use strict 。 3.三种方式声明变量（ let , const , var ），八种数据类型。 4.交互：在浏览器环境中，基本的交互有 prompt , confirm , alert ，他们都会生成模态框。 5.运算符：算数运算符（ + , - , * , / , % , ** ），赋值（ = ），按位运算符，逻辑运算符（ && , || ），三元运算符（ A ? B : C ），空值合并运算符（ ?? ），比较运算符等。 6.循环：while(condition){…} ， do{…}while(condition) ， for(A;condition;B ){…} 7.switch结构：代替多个 if ，内部使用 === 进行检查。 8.函数创建：1.函数表达式 2.函数声明 3.箭头函数

在浏览器中的调试#

指找出错误并修复的过程，一般使用F12打开开发者工具，然后找到里面的调试工具进行该步骤。 1.Sources面板：包含File Navigator ， Code Editor , Javascript Debugging 三个部分 2.Console面板：可以在这里输入指令并运行。 3.Breakpoints：在 Sources 面板中点击代码的行数即可设置断点，调试器到这里会自动暂停js执行。在行号上右键单击可以创建一个条件断点，只有当给定的表达式（你创建条件断点时提供的表达式）为真时才会被触发。

没写完，之后的看心情写