🗒️JavaScript笔记大全

type
status
date
slug
summary
tags
category
icon
password
本文JavaScript笔记用于平常查阅使用

一、Date（日期） 对象

日期对象用于处理日期和时间。

1. get方法

属性
说明
getFullYear()
获取年份
getMonth()
获取月份
getDate()
获取日期
getDay()
获取星期几
getHours()
获取小时
getMinutes()
获取分钟
getSeconds()
获取秒钟
getMilliseconds()
获取毫秒
getTime()
获取1970年至今的毫秒数 同 Date.now()

2. to方法

属性
说明
toString()
把日期对象转字符串
toLocaleString()
把日期对象转成符合当地习惯的字符串
toDateString()
把时间对象的日期部分转字符串
toLocaleDateString()
把时间对象的日期部分转成符合当地习惯的字符串
toTimeString()
把时间对象的时间部分转字符串
toLocaleTimeString()
把时间对象的时间部分转成符合当地习惯的字符串
toUTCString()
把日期对象转UTC时间字符串

3.set方法

属性
说明
setFullYear()
设置年份
setMonth()
设置月份
setDate()
设置日期
setHours()
设置小时
setMinutes()
设置分数
setSeconds()
设置秒数
setMilliseconds()
设置毫秒
创建时间对象:
或
代码如下（以“2022-1-14 09:58:27 星期五” 为例）

二、Math / 随机生成

属性
说明
ceil()
对数进行上舍入，即向上取整
round()
四舍五入
foor()
对 x 进行下舍入，即向下取整
random()
返回 0 ~ 1 之间的随机数，包含 0 不包含 1
代码如下（获取从 1 到 10 的随机整数，取 0 的概率极小）
代码如下（可均衡获取 0 到 1 的随机整数）
代码如下（可均衡获取 0 到 9 的随机整数）
代码如下（基本均衡获取 0 到 10 的随机整数，其中获取最小值 0 和最大值 10 的几率少一半）

三、数组API

数组对象的作用是：使用单独的变量名来存储一系列的值。

1.数组API

属性
说明
push()
往数组的尾部插入一个或多个元素
pop()
从数组的尾部删除一个元素
unshift()
往数组的头部插入一个或多个元素
shift()
从数组的头部删除一个元素
slice()
裁切数组
splice()
删除或替换数组某个元素
concat()
连接一个或多个数组, 不会修改原数组, 会返回连接出来的新数组
join()
以特定的连接符将一个数组连接成字符串, 不会修改原数组
reverse()
反转数组
代码如下（例子）

2.数组遍历

  • every() 用于检测数组所有元素是否都符合指定条件
  • filter() 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
  • forEach() 对数组的每个元素执行一次给定的函数
  • map() 创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
  • some() 用于检测数组中的元素是否满足指定条件
  • findIndex() 返回数组中满足条件的第一个元素的索引。若没有找到对应元素则返回-1。
代码如下（every）
代码如下（filter）
代码如下（forEach）
代码如下（map）
代码如下（some）
代码如下（findIndex）

四、字符串API

属性
说明
charAt()
获取指定下标的字符
charCodeAt()
如果不传参数, 把第0个字符转unicode编码
String.fromCharCode()
静态方法,把unicode编码转成字符
substring()
裁切字符串,从开始下标裁切到结束下标,结束下标裁切不到
split()
把字符串切割成数组
repeat()
重复一个字符串n次
trim()
去除字符串左右两边的空格, 中间的空格则不做处理
toLowerCase()
把字符串转小写
toUpperCase()
把字符串转大写
replace()
替换
indexOf()
从头部开始检索下标
lastIndexOf()
从尾部开始检索下标
代码如下（例子）

五、DOM对象

1.元素节点

文档本身是文档节点 所有 HTML 元素是元素节点 所有 HTML 属性是属性节点 HTML 元素内的文本是文本节点 注释是注释节点
属性
说明
parentNode
获取父节点,包括文本节点和注释节点
firstChild
获取第一个子节点
lastChild
获取最后一个子节点
nextSibling
获取下一个同胞节点
previousSibling
获取上一个同胞节点
parentElement
获取父元素版本节点，不包括文本节点和注释节点
firstElementChild
获取第一个子节点的元素版本
lastElementChild
获取最后一个子节点的元素版本
nextElementSibling
获取下一个同胞节点的元素版本
previousElementSibling
获取上一个同胞节点的元素版本
代码如下（例子）

2.获取或插入内容

属性
说明
innerHTML
获取元素内部的所有内容 (包括文本和元素)
innerText
获取元素内部的文本内容 (只获取文本不获取元素)
textContent
获取元素内部的文本内容 (只获取文本不获取元素)

3.获取元素属性

属性
说明
getAttributeNode()
获取元素属性节点
getAttribute()
获取元素属性的属性值
setAttribute()
设置元素属性的属性值
removeAttribute()
删除元素的属性
hasAttribute()
判断元素是否具有某个属性
代码如下（例子）

4.创建或插入节点

属性
说明
createTextNode()
创建文本节点
createElement()
创建元素节点
appendChild()
把节点插入到元素内部的结尾部分
nsertBefore()
把节点插入到元素内部的指定元素的前面
removeChild()
在节点中移除指定的子节点
remove()
移除本身
replaceChild()
用新的节点替换旧的节点
cloneNode()
克隆节点
crateDocumentFragment()
创建临时文档，虚拟DOM节点
代码如下（例子）

5.其它

属性
说明
element.nodeName
获取节点名字（大写)
element.calssName
设置或获取节点类名
element.id
设置或获取节点id
element.style
设置或获取节点样式
element.dataset
设置自定义属性
element.classList.add()
添加类名
element.classList.toggle()
切换类名
element.classList.remove()
移除类名
element.classList.replace()
替换类名
element.offsetHeight
返回元素的高度
element.offsetTop
返回元素的垂直偏移位置
element.scrollTop
返回元素上边缘与视图之间的距离
element.clientHeight
返回元素的可见高度
element.offsetTop
返回元素的垂直偏移位置
代码如下（例子）

六、事件对象

菜鸟详细地址

七、BOM对象

所有浏览器都支持 window 对象。它表示浏览器窗口 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员 全局变量是 window 对象的属性 全局函数是 window 对象的方法 甚至 HTML DOM 的 document 也是 window 对象的属性之一

1.Window 对象属性

属性
描述
closed
返回窗口是否已被关闭。
defaultStatus
设置或返回窗口状态栏中的默认文本。
document
对 Document 对象的只读引用。
frames
返回窗口中所有命名的框架。
history
对 History 对象的只读引用。请参数 History 对象。
innerHeight
返回窗口的文档显示区的高度。
innerWidth
返回窗口的文档显示区的宽度。
localStorage
在浏览器中存储 key/value 对。没有过期时间。
length
设置或返回窗口中的框架数量。
location
用于窗口或框架的 Location 对象。
name
设置或返回窗口的名称。
navigator
对 Navigator 对象的只读引用。
opener
返回对创建此窗口的窗口的引用。
outerHeight
返回窗口的外部高度，包含工具条与滚动条。
outerWidth
返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset
设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset
设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent
返回父窗口。
screen
对 Screen 对象的只读引用。
screenLeft
返回相对于屏幕窗口的x坐标
screenTop
返回相对于屏幕窗口的y坐标
screenX
返回相对于屏幕窗口的x坐标
sessionStorage
在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
screenY
返回相对于屏幕窗口的y坐标
self
返回对当前窗口的引用。等价于 Window 属性。
status
设置窗口状态栏的文本。
top
返回最顶层的父窗口。

2.Window 对象方法

方法
描述
alert()
显示带有一段消息和一个确认按钮的警告框。
atob()
解码一个 base-64 编码的字符串。
btoa()
创建一个 base-64 编码的字符串。
blur()
把键盘焦点从顶层窗口移开。
clearInterval()
取消由 setInterval() 设置的 timeout。
clearTimeout()
取消由 setTimeout() 方法设置的 timeout。
close()
关闭浏览器窗口。
confirm()
显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()
创建一个 pop-up 窗口。
focus()
把键盘焦点给予一个窗口。
getSelection()
返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()
获取指定元素的 CSS 样式。
matchMedia()
该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()
可相对窗口的当前坐标把它移动指定的像素。
moveTo()
把窗口的左上角移动到一个指定的坐标。
open()
打开一个新的浏览器窗口或查找一个已命名的窗口。
print()
打印当前窗口的内容。
prompt()
显示可提示用户输入的对话框。
resizeBy()
按照指定的像素调整窗口的大小。
resizeTo()
把窗口的大小调整到指定的宽度和高度。
scroll()
已废弃。 该方法已经使用了 scrollTo() 方法来替代。
scrollBy()
按照指定的像素值来滚动内容。
scrollTo()
把内容滚动到指定的坐标。
setInterval()
按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()
在指定的毫秒数后调用函数或计算表达式。
stop()
停止页面载入。

3.Navigator 对象

Navigator 对象包含有关浏览器的信息。如：获取浏览器名称、版本信息、操作系统平台信息等等。 调用方式：window.navigator 或者 navigator。
属性
说明
appCodeName
返回浏览器的代码名
appName
返回浏览器的名称
appVersion
返回浏览器的平台和版本信息
cookieEnabled
返回指明浏览器中是否启用 cookie 的布尔值
platform
返回运行浏览器的操作系统平台
userAgent
返回由客户机发送服务器的user-agent 头部的值

4.Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。如：获取屏幕高度、宽度等等。 调用方式：window.screen 或者 screen。
属性
说明
availHeight
返回屏幕的高度（不包括Windows任务栏）
availWidth
返回屏幕的宽度（不包括Windows任务栏）
colorDepth
返回目标设备或缓冲器上的调色板的比特深度
height
返回屏幕的总高度
pixelDepth
返回屏幕的颜色分辨率（每象素的位数）
width
返回屏幕的总宽度

5.History 对象

history 对象包含用户（在浏览器窗口中）访问过的 URL。可对当前页的浏览历史进行操作，如：前进、后退等。但不能知道浏览了哪些URL。 调用方式：window.history 或者 history。
属性或方法
说明
length
返回历史列表中的网址数
back()
加载 history 列表中的前一个 URL
forward()
加载 history 列表中的下一个 URL
go()
加载 history 列表中的某个具体页面

6.Location 对象

Location 对象包含有关当前 URL 的信息。 Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。，如：导航到新的页面、获取URL信息等。 调用方式：window.location 或者 location。
属性或方法
说明
hash
返回一个URL的锚部分
host
返回一个URL的主机名和端口
hostname
返回URL的主机名
href
返回完整的URL
pathname
返回的URL路径名。
port
返回一个URL服务器使用的端口号
protocol
返回一个URL协议
search
返回一个URL的查询部分
assign()
载入一个新的文档
reload()
重新载入当前文档
replace()
用新的文档替换当前文档
代码如下（例子）

八、正则表达式

1.修饰符

  • i 忽略大写小写匹配
  • g 全局匹配
  • m 多行匹配

2.正则方法

代码如下（ 正则表达式.方法名(字符串) ）
方法
属性
test()
验证字符串是否符合正则 返回true 或 false
exec()
验证字符串是否符合正则 返回数组 或 null
complie()
重写正则表达式规则
lastIndex ()
可读可写，表示下一次匹配从哪个下标开始（全局匹配）
source()
可读,返回正则表达式的字符串形式（不包括反斜杠）
常见字符串搭配正则使用：
方法
属性
match()
返回数组（全局匹配下拿到所有）
search()
查找
replace()
替换

3.正则表达式模式

方法
属性
[]
字符集, 括号里面的每一个字符 都可以匹配到
[^]
脱字符: 如果方括号内的第一个字符是[^]，则表示除了字符集之中的字符，或 以...开头
-
连字符， 用来提供简写形式，表示字符的连续范围。比如，[abc]可以写成[a-c]
.
除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外, 可以匹配所有字符
\
转义符：^、.、[、$、(、)、|、*、+、?、{ 、\\ 在它们前面要加上反斜杠
$
以...结尾
|
在正则表达式中表示“或关系”（OR），即cat|dog表示匹配cat或dog
\n
匹配换行键
\r
匹配回车键
\t
匹配制表符 tab（U+0009）
\0
匹配null字符（U+0000
\xhh
匹配一个以两位十六进制数（\x00-\xFF）表示的字符
\uhhhh
匹配一个以四位十六进制数（\u0000-\uFFFF）表示的 Unicode 字符

4.重复类

介绍：模式的精确匹配次数，使用大括号{}表示。
方法
属性
{n}
表示恰好重复n次，
{min,}
表示至少重复min次，
{min,max}
表示重复最少min次, 最多max次

5.量词符

介绍：量词符用来设定某个模式出现的次数。
方法
属性
?
问号表示某个模式出现0次或1次，等同于{0, 1}。
*
星号表示某个模式出现 任意次（0次或多次），等同于{0,}。
+
加号表示某个模式出现1次或多次，等同于{1,}。

6.先行断言

方法
属性
?=n
先行断言 某种规则后面紧跟着字符n, 才可以被匹配到

7.先行否定断言

方法
属性
?!n
先行否定断言 某种规则后面不跟着字符n, 才可以被匹配到

九、其它

1.this绑定

  • call()
  • apply()
  • bind()
代码如下:（例子）

2.constructor

构造函数: Object Array String Number Date Boolean ...（Math 例外,它不是构造器)。所有对象都会从它的原型上继承一个 constructor 属性：

3. instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

4.继承

代码如下:（拷贝继承）

5.字符串(String)与json的相互转换

1.字符串转json

  • parse()
  • eval()
代码如下:（例子）

2.json转字符串

  • stringify()
代码如下:（例子）

6.其它

属性
说明
isNaN()
查看其它类型是不是非数字
toFixed()
保留小数
isInteger()
判断是否为整数
Math.min()
取最小值
Math.max()
取最大值
preventDefault()
通知浏览器不要执行与事件相关联的默认动作
stopPropagation()
取消事件进一步捕获或者冒泡
Python爬虫Echarts使用心得