JavaScript 基础知识

教程链接

JavaScript 基础知识

1. 变量

1. let关键字定义变量，不区分具体类型

如：

	let message = "abc";

2. 定义的变量，可以多次进行修改
   当值发送改变时，之前的数据就从变量中删除了

	//上边的message
	message = "hello";

还可以进行变量的拷贝
将x内容拷贝给y，两个变量内容一样

	let x = "hello world";
	let y = x;

3. 变量命名

采用驼峰命名：第一个单词首字母小写，其他的首字母大写

包含 字母、数字、_ 、$，数字不能开头，区分大小写

	let userName, _123, $4;

4. 常量

声明常量使用const代替let
常量不能修改

	const PI = 3.14;
	const COLOR_RED = "#F00";

2. 数据类型

js中有7种原始类型+1种引用类型，并且，js是动态语言，就是没有类型关键字（如int），所以某个变量可以存放任意类型数据

1. Number类型

没有类型关键字，但是有类型的名称，数字就是Number类型，包括整数+浮点数

1. 特殊数值

Infinity、-Infinity、NaN

Infinity：无穷大的数字，1/0 = Infinity
NaN：表示计算错误，进行数学运算却得到的不是数字，即不是数字的数字
NaN的加减乘除等数学运算结果仍为NaN，除了NaN⁰=1

	let n = "nan"/2;
	alert(n);

2. js的数学运算安全

包括除零：1/0=Infinity，非数字字符串：“abc” (- * / ) 2 = NaN
但是"abc"+2 = abc2，属于字符串拼接

2. String类型

1. js中字符串使用' '或" "都可以
2. 还可以使用` `反引号是功能扩展引号，除了可接受字符串外，还可以通过${变量或表达式}来接收变量、表达式

	let myName = "lzh";
	let age = '20';
	let s = `my name is ${myName}, age is ${age}, age-1 = ${age-1}`;
	alert(s);

3. js没有char字符类型，字符串可以包含0个、1个、多个字符

3. Boolean类型

1. true或false
2. 可以作为比较结果

	let isTrue = 2>1;
	alert(isTrue);

4. null

1. java、c等语言的null是空引用、空指针
2. js的null就只是空的、未知的值

	let age =null;

5. undefined

1. 和null一样，它自己单独成一种类型
2. 表示声明了，但未被赋值

	let age;
	alert(age);

6. bigint

表示任意长度的整数，后缀加n

7. Object

见后面

8. Symbol

见后面

3. typeof运算符

以字符串形式返回类型

	typeof (1/10n/true/"abc"/null/undefined/Math/alert)

typeof null特殊，是"object"，这是一个官方的为兼容性保留下来的一个错误
typeof Math：返回object，是js内建object
typeof alert：返回function，它属于object类型，为方便起见，对函数特殊对待返回function

typeof是操作符，不是函数，typeof()也可以，可有可无

4. 交互：alert、prompt 和 confirm

alert：弹出一个消息
prompt：显示信息要求用户输入文本。点击确定返回文本，点击取消或按下 Esc 键返回 null。
输入的是字符串，可以通过+prompt()来输入数字

	let age = prompt('How old are you?', 100);
	alert(`You are ${age} years old!`); // You are 100 years old!

confirm：显示信息等待用户点击确定或取消。点击确定返回 true，点击取消或按下 Esc 键返回 false。

	let isBoss = confirm("Are you the boss?");
	alert( isBoss ); // 如果“确定”按钮被按下，则显示 true

5. 原始类型转换

运算符和函数大多数都可以把运算数或参数自动转换为正确的类型

如alert()：始终以字符串形式输出
数学运算符：将运算数转为数字，（+ 特殊，若是数字字符串，则是字符串拼接）

那么有时需要我们显示转换

1. 转换为字符串

alert()函数就是转为字符串再弹出

• 可以通过String()转为字符串——外边直接加一层" "

• 不是转换的它本身，而是产生一个新变量

	let value = true;
	alert(typeof value); // boolean
	
	value = String(value); // 现在，值是一个字符串形式的 "true"
	alert(typeof value); // string

2. 转为数字

字符串数字 - * / 是自动转为数字，+是拼接

Number()转为数字：

• 数字字符串：去掉" “；”"和空白字符串（空格、回车、Tab）：0；其他字符串：NaN
• true：1；false：0
• null：0
• undefined：NaN

请注意 null 和 undefined 在这有点不同：null 变成数字 0，undefined 变成 NaN。

3. 转为布尔类型
   通过Boolean()

• 0 “” null undefined NaN：false
• 其他：true

其他（包括" " "0"）

6. 运算符

一元运算符和二元运算符
数学运算：+ - * / 取余% 乘方a**b：a^b

+：

1. 用于字符串时表示拼接字符串

有一个运算元是字符串，那么最终得到的就是字符串

按顺序两个两个地运算

	alert(2 + 2 + '1' ); // "41"，不是 "221"
	alert('1' + 2 + 2); // "122"，不是 "14"

2. +也可以用作一元运算符，相当于Number()，非数字转换为数字

	// 转化非数字
	alert( +true ); // 1
	alert( +"" );   // 0
	alert(+"+34");   //34，数字前有+的字符串表示该数字，再写一个+相当于把字符串转为数字

++/–：

• 自增/自减的值不会被使用，那么两者形式没有区别
• 需要立刻使用自增后的值，那么我们需要使用前置形式

	let counter = 0;
	alert( ++counter ); // 1

• 想使用其自增之前的值，那么我们需要使用后置形式

	let counter = 0;
	alert( counter++ ); // 0

7. 比较

1. 比较结果总是Boolean类型
2. 字符串比较：按照字典顺序（Unicode编码）
3. 不同类型的比较：js会将其转为数字再比较

	alert( '2' > 1 ); // true，字符串 '2' 会被转化为数字 2
	alert( '01' == 1 ); // true，字符串 '01' 会被转化为数字 1

下面代码对于 JavaScript 而言，这种现象其实挺正常的。因为 JavaScript 会把待比较的值转化为数字后再做比较（因此 “0” 变成了 0）。

	let a = 0;
	alert( Boolean(a) ); // false
	let b = "0";
	alert( Boolean(b) ); // true
	alert(a == b); // true!

4. 严格相等

0==“0” 、 0==false、0==“”、“”==false结果均为true，但是""==“0"为false，这俩都是字符串类型，不能转为数字比较，应按字典顺序比
==无法区分0和false、”"和false

这是因为在比较不同类型的值时，处于相等判断符号 == 两侧的值会先被转化为数字。空字符串和 false 也是如此，转化后它们都为数字 0。

严格相等运算符 === 在进行比较时不会做任何的类型转换。

就是 a 和 b 属于不同的数据类型，那么 a === b 不会转换为数字，而是立刻返回 false

与“不相等”符号 != 类似，“严格不相等”表示为 !==

5. 对 null 和 undefined 进行比较

	alert(undefined===null);//false
	alert(undefined==null);//true

JavaScript 存在一个特殊的规则，会判定它们相等。它们俩就像“一对恋人”，==仅仅等于对方而不等于其他任何的值==（只在非严格相等下成立）。

这俩值涉及到比较时：>、<、>=、<= 时，和==不一样，这俩会转为数字比较：null转为0，undefined转为NaN

	alert( null > 0 );  // (1) false
	alert( null == 0 ); // (2) false
	alert( null >= 0 ); // (3) true
	alert( undefined > 0 ); // false (1)
	alert( undefined < 0 ); // false (2)
	alert( undefined == 0 ); // false (3)

除非你非常清楚自己在做什么，否则永远不要使用 >= > < <= 去比较一个可能为 null/undefined 的变量。
在使用 > 或 < 进行比较时，需要注意变量可能为 null/undefined 的情况。比较好的方法是单独检查变量是否等于 null/undefined。

8. 逻辑运算

||：逻辑或
先将操作元转为布尔类型，再运算，有一个为true则为true

js附加特性
||返回值还可以是其他类型，不一定是布尔类型

寻找第一个真值：

	alert( 1 || 0 ); // 1（1 是真值）

	alert( null || 1 ); // 1（1 是第一个真值）
	alert( null || 0 || 1 ); // 1（第一个真值）
	
	alert( undefined || null || 0 ); // 0（都是假值，返回最后一个值）

1. 获取变量列表或者表达式中的第一个真值
   从左往右计算每个数值，将其转为布尔值，遇到true就停止并返回这个true的初始值，否则返回最后一个数

	let firstName = "";
	let lastName = "";
	let nickName = "SuperCoder";
	
	alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder

2. 短路求值

|| 对其参数进行处理，直到达到第一个真值，然后立即返回该值，而无需处理其他参数。

如果操作数不仅仅是一个值，而是一个有副作用的表达式，例如变量赋值或函数调用，那么这一特性的重要性就变得显而易见了。

	true || alert("not printed");
	false || alert("printed");

在第一行中，或运算符 || 在遇到 true 时立即停止运算，所以 alert 没有运行。

有时，人们利用这个特性，只在左侧的条件为假时才执行命令。

&&：逻辑与
转为布尔值再运算

1. 与运算寻找第一个假值

	alert( 1 && 2 && null && 3 ); // null
	alert( 1 && 2 && 3 ); // 3，最后一个值

与运算 && 的优先级比或运算 || 要高。

！逻辑非

先将操作数转化为布尔类型：true/false。再返回相反的值。

两个非运算 !! 有时候用来将某个值转化为布尔类型：（相当于内建的 Boolean 函数）

	alert( !!"non-empty string" ); // true
	alert( !!null ); // false

优先级：！> && > ||

9. 空值合并运算符??

当一个值既不是 null 也不是 undefined 时，我们将其称为“已定义的（defined）”。
result = a ?? b <==>
result = (a !== null && a !== undefined) ? a : b;

?? 的常见使用场景是提供默认值。
b就是在空时要设置的初始默认值

	// 当 height 的值为 null 或 undefined 时，将 height 的值设置为 100
	height = height ?? 100;

|| 返回第一个 真 值。
?? 返回第一个 已定义的 值。

?? 优先级高于 ? 和 =
如果没有明确添加括号，不能将其与 || 或 && 一起使用。

10. 循环

while、for

通常条件为假时，循环会终止。但我们随时都可以使用 break 指令强制退出。

break/continue 标签：一次从多层嵌套的循环中跳出来。
普通 break 只会打破内部循环。这还不够 —— 标签可以实现这一功能！
必须用在for循环

	let n = prompt("输入一个整数：",1);
	let i=2;
	outer:for(;i<=n;i++){
	    for(let j=2;j<i;j++){
	        if(i%j==0){
	            continue outer;//进行下一次的外层循环
	        }
	    }
	    //if(i==j)
	        alert(i+"是素数");
}

11. 函数

全局变量
外部变量
function name(parameter1, parameter2="y", ... parameterN) {//参数被复制了一份到函数中
                    //parameter2="y"这是未传该参数时的默认值
                    //参数也可以是其它函数
  局部变量
  ...body... 
  return xxx;			//执行到return，函数停止，将该值返回给调用方：下面的result
}							//return;  表示函数立即退出，那么返回值是undefined
let result = name(x1,x2);

12. 函数表达式

js的函数就是一个特殊的值

除了函数声明外，还可以使用函数表达式，这样可以在表达式的中间创建一个新函数

function sayHi() {
  alert( "Hello" );
}

let sayHi = function() {  //function 关键字后面没有函数名
	alert( "Hello" );
};

alert( sayHi ); // 显示函数代码

无论哪种方式，函数都是一个值，这个值存储在了变量sayHi中
可以进行赋值：

let func = sayHi;
func();
sayHi();

回调函数

function ask(question, yes, no) {	//其中yes、no参数是函数
  if (confirm(question)) yes()	//confirm函数点击确定返回true，点击取消返回false
  else no();
}

function showOk() {
  alert( "You agreed." );
}

function showCancel() {
  alert( "You canceled the execution." );
}

// 用法：函数 showOk 和 showCancel 被作为参数传入到 ask
ask("Do you agree?", showOk, showCancel);

使用函数表达式来编写一个等价的、更简洁的函数：

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

直接在 ask(…) 调用内进行函数声明。这两个函数没有名字，所以叫 匿名函数。这样的函数在 ask 外无法访问（因为没有对它们分配变量），不过这正是我们想要的。

函数声明VS函数表达式

位置不同
创建时间不同

• 函数表达式在执行到达时才被创建，然后使用
• 函数声明在准备运行脚本时被创建，它的前面、后面都可以调用它

函数声明的块级作用域

当一个函数声明在一个代码块内时，它在该代码块内的任何位置都是可见的。但在代码块外不可见。

let age = 16; // 拿 16 作为例子

if (age < 18) {
  welcome();               // \   (运行)
                           //  |
  function welcome() {     //  |
    alert("Hello!");       //  |  函数声明在声明它的代码块内任意位置都可用
  }                        //  |
                           //  |
  welcome();               // /   (运行)

} else {

  function welcome() {
    alert("Greetings!");
  }
}

// 在这里，我们在花括号外部调用函数，我们看不到它们内部的函数声明。


welcome(); // Error: welcome is not defined

怎么才能让 welcome 在 if 外可见呢？
使用函数表达式，并将 welcome 赋值给在 if 外声明的变量，并具有正确的可见性。

let age = prompt("What is your age?", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("Hello!");
  };

} else {

  welcome = function() {
    alert("Greetings!");
  };

}

welcome(); // 现在可以了

使用问号运算符 ? 来进一步对代码进行简化：

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  function() { alert("Hello!"); } :
  function() { alert("Greetings!"); };

welcome(); // 现在可以了

首先考虑函数声明
不合适再使用函数表达式（代码块里面定义函数，但是要在外面使用）

13. 箭头函数基础

函数表达式的简化

let func = function(arg1, arg2, ..., argN) {
  return expression;
};
简化：
let func = (arg1, arg2, ..., argN) => expression;

1. 省去function
2. 参数和函数体之间加 =>
3. 一个参数可省去()，没有参数不能省()
4. 函数体只有一行语句，省去{ }
5. 只有一条语句，并且恰好就是要返回的值，省去return