JS基础 - 技术栈

JS输出

JavaScript 能够以不同方式"显示"数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出在 HTML 文档完全加载后用 document.write() 将删除所有已有的 HTML
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台在控制台消息中查看

JS关键词

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if ... else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try ... catch	对语句块实现错误处理。
var	声明变量。

JS变量

var普通变量

let只在中括号中起作用

const只在中括号中起作用,但无法重新赋值

JS算数运算符

运算符	描述
+	加法
-	减法
*	乘法
**	幂（ES2016）
/	除法
%	系数
++	递增
--	递减

JS赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y
&=	x &= y	x = x & y
^=	x ^= y	x = x ^ y
\|=	x \|= y	x = x \| y

JS比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

JS逻辑运算符

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

JS类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

JS位运算符

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
\|	或	5 \| 1	0101 \| 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

JS数据类型

typeof 运算符可返回以下原始类型之一：

string
number
boolean
undefined

JS函数

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

在引用函数时，需要注意有（）

JS对象

javascript 复制代码

var person = {
    firstName: "Bill",
    lastName : "Gates",
    id       :  12345,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

// 显示对象中的数据：
document.getElementById("demo6").innerHTML =
person.fullName();

常见HTML事件

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

JS字符串

代码	结果	描述
\'	'	单引号
\"	"	双引号
\\	\	反斜杠

|-----|-------|
| \b | 退格键 |
| \f | 换页 |
| \n | 新行 |
| \r | 回车 |
| \t | 水平制表符 |
| \v | 垂直制表符 |

=== 运算符需要类型和值同时相等。

可以使用 / 在字符串中，这样能够使代码换行而不影响表现效果

字符串查找

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引,如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

search() 方法搜索特定值的字符串，并返回匹配的位置

search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值（正则表达式）。

match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回。

如果字符串包含指定值，includes() 方法返回 true。

length 属性返回字符串的长度

字符串提取

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

substring() 类似于 slice()。不同之处在于 substring() 无法接受负的索引。

substr() 类似于 slice()。不同之处在于第二个参数规定被提取部分的长度。

替换字符内容

replace() 方法用另一个值替换在字符串中指定的值

toUpperCase() 把字符串转换为大写，toLowerCase() 把字符串转换为小写

其他

concat() 连接两个或多个字符串

trim() 方法删除字符串两端的空白符

charAt() 方法返回字符串中指定下标（位置）的字符串

可以通过 split() 将字符串转换为数组

JS数字

JavaScript BigInt 变量用于存储太大而无法用普通 JavaScript 数字表示的大整数值。

对于 BigInt，JavaScript 支持的数据类型总数为 8 种：

String
Number
Bigint
Boolean
Undefined
Null
Symbol
Object

BigInt不能有小数

方法	描述
toString()	将数字作为字符串返回。
toExponential()	返回以指数表示法书写的数字。
toFixed()	返回带小数位数的数字。
toPrecision()	返回指定长度的数字。
ValueOf()	以数字形式返回数字。

将变量转换为数字

方法	描述
Number()	返回从其参数转换而来的数字。
parseFloat()	解析其参数并返回浮点数。
parseInt()	解析其参数并返回整数。

Number对象方法

方法	描述
Number.isInteger()	如果参数是整数则返回 true。
Number.isSafeInteger()	如果参数是安全整数，则返回 true。
Number.parseFloat()	将字符串转换为数字。
Number.parseInt()	将字符串转换为整数。

数字属性

方法	描述
Number.isInteger()	如果参数是整数则返回 true。
Number.isSafeInteger()	如果参数是安全整数，则返回 true。
Number.parseFloat()	将字符串转换为数字。
Number.parseInt()	将字符串转换为整数。

JS数组

toString() 把数组转换为数组值（逗号分隔）的字符串。

join() 方法将数组元素连接成一个字符串。

pop方法从数组中删除最后一个元素

push() 方法（在数组结尾处）向数组添加一个新的元素

shift() 方法会删除首个数组元素，并把所有其他元素"位移"到更低的索引，返回被"位移出"的字符串。

unshift() 方法（在开头）向数组添加新元素，并"反向位移"旧元素，返回新数组的长度

元素就可以使用 JavaScript delete 运算符来删除

splice() 方法可用于向数组添加新项，返回一个包含已删除项的数组

concat() 方法通过合并（连接）现有数组来创建一个新数组

indexOf() 方法在数组中搜索元素值并返回其位置。

find() 方法返回通过测试函数的第一个数组元素的值。

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

findLastIndex() 方法查找满足条件的最后一个元素的索引。

sort() 方法以字母顺序对数组进行排序

reverse() 方法反转数组中的元素。

使用 Math.max.apply 来查找数组中的最高值

Math.min.apply 来查找数组中的最低值

forEach() 方法为每个数组元素调用一次函数（回调函数）

map() 方法通过对每个数组元素执行函数来创建新数组

filter() 方法创建一个包含通过测试的数组元素的新数组

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值，方法不会减少原始数组

every() 方法检查所有数组值是否通过测试。

some() 方法检查某些数组值是否通过了测试。

用 const 声明的数组不能重新赋值

JS日期

有 4 种方法创建新的日期对象：

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）
new Date(milliseconds)
new Date(date string)

JavaScript（默认情况下）将以全文本字符串格式输出，日期在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串。

toUTCString() 方法将日期转换为 UTC 字符串（一种日期显示标准）。

toDateString() 方法将日期转换为更易读的格式

日期格式：

类型	实例
ISO 日期	"2018-02-19" （国际标准）
短日期	"02/19/2018" 或者 "2018/02/19"
长日期	"Feb 19 2018" 或者 "19 Feb 2019"
完整日期	"Monday February 25 2015"

日期获取方法

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

日期设置方法

方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

JS数学

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值，以弧度计
asin(x)	返回 x 的反正弦值，以弧度计
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度
ceil(x)	对 x 进行上舍入
cos(x)	返回 x 的余弦
exp(x)	返回 Ex 的值
floor(x)	对 x 进行下舍入
log(x)	返回 x 的自然对数（底为e）
max(x,y,z,...,n)	返回最高值
min(x,y,z,...,n)	返回最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把 x 四舍五入为最接近的整数
sin(x)	返回 x（x 以角度计）的正弦
sqrt(x)	返回 x 的平方根
tan(x)	返回角的正切

JS逻辑

所有真实的值即为true

所有不真实的值为false

如：0，-0，""，undefined,null,false 的布尔值,NaN

JS循环

for - 多次遍历代码块
for/in - 遍历对象属性
while - 当指定条件为 true 时循环一段代码块
do/while - 当指定条件为 true 时循环一段代码块

for in 遍历对象属性

for of 循环遍历可迭代对象的值。

break continue

JS迭代器

迭代器协议定义了如何从对象中生成一系列值。

当对象实现了 next() 方法时，它就成为迭代器。

next() 方法必须返回一包含两个属性的对象：

value（下一个值）
done（true 或 false）

|-------|----------------------------------------|
| value | 迭代器返回的值。如果 done 为 true，则可以省略。 |
| done | 如果迭代器已完成，则为 true。如果迭代器生成了新值，则为 false。 |

Symbol.iterator 方法会被 for..of 自动调用。

JS set

复制代码

const letters = new Set(["a","b","c"]);

add添加相同的集合只能保存一个

如果指定值存在于 Set 中，has() 方法返回 true。

forEach() 方法为每个 Set 元素调用一个函数

values() 方法返回包含 Set 中值的迭代器对象

entries() 方法返回一个包含 [value , value] 对的迭代器。

JS Map

map是键值对集合

可以通过将数组传递给 new Map() 构造函数来创建 Map

set() 方法也可以用于更改现有的 Map 值

get() 方法获取 Map 中键的值

typeof 返回 object

instanceof Map 返回 true

map与对象关系

对象	Map
不可直接迭代	可直接迭代
没有 size 属性	有 size 属性
键必须是字符串或 Symbol	键可以是任何数据类型
键的顺序不明确	键按插入顺序排序
有默认键	没有默认键

使用 get() 方法获取 Map 中键的值

使用 set() 方法向 Map 添加元素

size 属性返回 Map 中元素的数量

delete() 方法移除 Map 中的一个元素

clear() 方法移除 Map 中的所有元素

如果 Map 中存在某个键，has() 方法返回 true

forEach() 方法为 Map 中的每个键值对调用回调函数

entries() 方法返回一个包含 Map 中 [key , value] 对的迭代器对象

keys() 方法返回一个包含 Map 中键的迭代器对象

values() 方法返回一个包含 Map 中值的迭代器对象

JS this

JavaScript this 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。

像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

JS箭头

箭头函数允许我们编写更短的函数

与常规函数相比，箭头函数对 this 的处理也有所不同。

简而言之，使用箭头函数没有对 this 的绑定。

在常规函数中，关键字 this 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。

对于箭头函数，this 关键字始终表示定义箭头函数的对象。

JS JSON

数据是名称/值对
数据由逗号分隔
花括号保存对象
方括号保存数组