(共556篇)
全部分类

JS语法整理补充
[ JS基础 ] 

Array

语法 作用
Array.isArray(arr) 判断目标是否是一个数组
arr.length 获取数组中元素的个数
arr.push(item) 往数组结尾插入新元素,返回数组长度
arr.unshift(item) 往数组开头插入新元素,返回数组长度
arr.pop(item) 删除数组最后一个元素,返回删除的元素
arr.shift(item) 删除数组第一个元素,返回删除的元素
arr.splice(index,length,item1,item2) 在数组的指定位置删除指定数量元素,并添加新元素
arr.concat(item1, item2) 合并多个数组,返回合并后的数组
arr.map(fn(currentValue, currentIndex, arr) [, thisTarget]) 遍历数组,处理之后组成新的数组
arr.forEach(fn(currentValue, currentIndex, arr) [, thisTarget]) 遍历数组,没有返回值
arr.every(fn(currentValue, currentIndex, arr) [, thisTarget]) 判断数组中是否每个元素都符合条件
arr.some(fn(currentValue, currentIndex, arr) [, thisTarget]) 判断数组中是否至少一个元素符合条件
arr.includes(item) 判断数组中是否包含指定元素
arr.indexOf(item) 在数组中从前向后查找指定元素,返回第一个符合条件的元素下标
arr.lastIndexOf(item) 在数组中从后向前查找指定元素,返回第一个符合条件的元素下标
arr.find(fn(currentValue, currentIndex, arr) [, thisTarget]) 返回第一个符合条件的元素
arr.findIndex(fn(currentValue, currentIndex, arr) [, thisTarget]) 返回第一个符合条件的元素的索引值(下标)
arr.filter(fn(currentValue, currentIndex, arr) [, thisTarget]) 筛选出所有符合条件的元素,并返回它们组成的新数组
arr.sort(fn(currentValue, currentIndex, arr) [, thisTarget]) 对数组中的元素重新进行排序
arr.reverse() 翻转数组中的元素
arr.reduce(fn(currentValue, currentIndex, arr) [, thisTarget]) 对数组中的元素从左到右按照指定规则统计
arr.reduceRight(fn(currentValue, currentIndex, arr) [, thisTarget]) 对数组中的元素从右到左按照指定规则统计
arr.join(str) 使用指定字符把数组中的元素拼接成字符串
arr.slice(beginIndex[, endIndex]) 返回指定的开始位置到结束位置之间的元素,不包含结束位置的元素

String

语法 作用
str.length 返回字符串的长度
str.includes(target) 判断字符串中是否包含指定字符
str.charAt(index) 返回字符串中指定位置的字符
str.charCodeAt(index) 返回字符串中指定位置的字符的 unicode 码点(10 进制)
str.slice(beginIndex, endIndex) 返回指定的开始位置到结束位置之间的字符,不包含结束位置的字符
str.substr(beginIndex, length) 从指定位置开始截取指定数量个字符,并返回这些字符
str.substring(beginIndex, endIndex) 返回指定的开始位置到结束位置之间的字符,不包含结束位置的字符,参数小于 0 的会先转成 0
str.indexOf(target) 在字符串中从前向后查找指定字符,返回匹配字符中第一个字符所在索引值,没有返回1
str.lastIndexOf(target) 在字符串中从后向前查找指定字符,返回匹配字符中第一个字符所在索引值,没有返回1
str.toUpperCase() 把字符串中的小写字母转成大写字母
str.toLowerCase() 把字符串中的大写字母转成小写字母
str.trim() 去除字符串中前后的空格
str.concat(str1, str2) 拼接多个字符串
str.split(condation) 使用指定字符分割字符串,返回分割后的字符组成的数组
str.replace(newStr, oldStr) 在字符串中使用新字符替换指定的旧字符
str1.match(str2) 找出字符串中符合条件的字符
str1.search(str2) 查找字符串中符合条件的字符,返回首次找到的索引值

正则表达式

搜索模式

语法 作用
g 在全局中搜索和pattern匹配的字符,而不是找到第一个后就停止了
i 搜索的时候忽略大小写
m 在多行中进行搜索,而不是在当前一行中搜索

元字符

语法 作用
[] 表示其中任意一个字符
[a-z] 表示所有的小写字母
[A-Z] 表示所有的大写字母
[0-9] 表示所有的数字
语法 作用
. 表示换行符以外的所有字符
\d 表示所有的数字字符,相当于[0-9]
\D 与\d 相反,表示所有的非数字字符 , 相当于[^0-9]
\w 表示所有的大小写字母或数字或下划线,相当于[a-zA-Z0-9_]
\W 与\w 相反,相当于[^a-za-z0-9_]
\s 表示所有的空白字符(不可见字符),
\S 表示所以的非空白字符(可见字符)
\bx 表示 x 必须是所在单词的第一个字符
x\b 表示 x 必须是所在单词的最后一个字符
\Bx 表示 x 不能是所在单词的第一个字符
x\B 表示 x 不能是所在单词的最后一个字符
语法 作用
^x 在正则表达式的开头,表示必须以 x 开头
[^x] 在[]的开头,表示取反的意思
x\$ 在正则表达式的结尾,表示必须以 x 结尾
语法 作用
x{m} 表示字符 x 只能出现 m 次
x{m,} 表示字符 x 可以连续出现 m 或更多的次数
x{m,n} 表示字符 x 可以出现 m~n 之间的次数
x? 相当于{0,1},表示字符 x 可以没有或者出现 1 次
x+ 相当于{1,} , 表示字符 x 可以出现 1 次或者连续出现多次
x* 相当于{0,}, 表示字符可以不出现,或者连续出现多次
语法 作用
`x y`
() 用于记住匹配项中对应的字符
\数字 用于在正则表达式中使用对应顺序()中的字符
$数字 用于在 replace 函数中使用正则表达式中()所对应的字符
语法 作用
(?:ab) 表示非捕获匹配,这里的()只用于把 ab 合并为一个整体,不会用作捕获对应的字符
x(?=y) 正向肯定查找,表示要找到的字符 x 后一个字符必须是 y
x(?!y) 正向否定查找,表示要找到的字符 x 后一个字符不能是 y
语法 作用
x+? 表示非贪婪匹配,匹配项中会显示最少次数的 x 字符
x*? 表示非贪婪匹配,匹配项中会显示最少次数的 x 字符
x?? 表示非贪婪匹配,匹配项中会显示最少次数的 x 字符
x{m,}? 表示非贪婪匹配,匹配项中会显示最少次数的 x 字符

方法

语法 作用
regexp.test(string) 判断字符串中是否包含指定条件的字符
string.match(regexp) 找出字符串中符合条件的字符
string.replace(regexp, newStr) 把用新的字符替换原字符串中复合条件的字符
string.search(regexp) 查找字符串中符合条件的字符,返回首次找到的索引值

Number

语法 作用
num.toFixed(x) 把数字转为字符串,可以指定保留的小数部分数字位数
num.toString(x) 把数字转为字符串,并指定字符串的显示基数(进制)
num.toExponential(x) 把数字转为 10 进制计数法
num.toPrecision(x) 把数字转为字符串,可以指定保留的整体数字位数

Math 对象

语法 作用
Math.random() 获取一个 01 之间的随机小数
Math.PI 获取圆周率
Math.floor(n) 对数字进行向下取整
Math.ceil(n) 对数字进行向上取整
Math.round(n) 对数字进行四舍五入
Math.max(a,b,c,d) 找出最大的数字
Math.min(a,b,c,d) 找出最小的数字

Date 对象

语法 作用
var date = new Date() 获取当前日期/时间
date.getFullYear() 获取日期的年份
date.getMonth() 获取日期的月份,从 0 开始
date.getDate() 获取日期的日期,从 1 开始
date.getHours() 获取日期的小时数,从 0 开始
date.getMinutes() 获取日期的分钟数,从 0 开始
date.getSeconds() 获取日期的秒数,从 0 开始
date.getMilliseconds() 获取日期的毫秒数,从 0 开始
date.getDay() 获取日期对应一周的时间,从 0 开始
date.getTime() 获取日期的时间戳
date.setFullYear() 修改日期中的年份
date.setMonth() 修改日期中的月份
date.setDate() 修改日期中的日期
date.setHours() 修改日期中的小时数
date.setMinutes() 修改日期中的分钟数
date.setSeconds() 修改日期中的秒数
date.setMilliseconds() 修改日期中的毫秒数
date.setTime() 修改日期的时间戳

window 对象

语法 作用
window.name 设置或者获取当前窗口的名称
window.open() 打开一个新窗口 ,返回一个该窗口的引用对象 windowRefrenceObject
window.closed 判断当前窗口是否已被关闭,true表示已被关闭
window.close() 关闭当前窗口
window.outerWidth 获取浏览器的宽度
window.outerHeight 获取浏览器的高度
window.innerWidth 获取浏览器可视区域的宽度
window.innerHeight 获取浏览器可视区域的高度
window.setInterval(fn,timeout) 设置一个永久定时器,指定毫秒后自动执行某个函数
window.setTimeout(fn,timeout) 设置一个一次性定时器,指定毫秒后自动执行某个函数
window.clearInterval(name) 清除一个永久定时器
window.clearTimeout(name) 清除一个一次性定时器
window.scrollX 获取水平滚动条的位置
window.scrollY 获取垂直滚动条的位置
window.scrollTo(x,y) 让滚动条垂直滚动到 y 位置,水平滚动到 x 位置
window.scrollBy(x,y) 让滚动条垂直方移动 x 像素,水平方向移动 y 像素
window.screenX/screenLeft 获取浏览器窗口到屏幕最左边的距离
window.screenY/screenTop 获取浏览器窗口相屏幕最顶部的距离
encodeURI(string) 编码字符串
decodeURI(string) 解码字符串
encodeComponentURI(string) 编码字符串,比encodeURI编码范围更大
decodeComponentURI(string) 解码字符串,比decodeURI解码范围更大
parseInt(string [,radio]) 按照指定的基数提取字符串中的整数
parseFloat(string) 提取字符串中的数字部分
isNaN(n) 判断参数是否不是一个数组
window.getComputedStyle(element [,伪类]) 获取元素或伪元素的所有样式
语法 作用
navigator.appCodeName 获取浏览器的代码名
navigator.appName 获取浏览器的名称
navigator.appVersion 获取浏览器的平台和版本信息
navigator.platform 获取浏览器的操作系统平台
navigator.userAgent 获取浏览器给服务器发送信息时的头部信息

location 对象

语法 作用
location.href 设置或获取 当前窗口完整的 url
location.protocol 设置或获取 url 中的协议
location.host 设置或获取 url 中的主机名(域名)和端口
location.hostname 设置或获取 url 中的主机名(域名)
location.pathname 设置或获取 url 中的文件路径
location.port 设置或获取 url 中的端口号
location.search 设置或获取 url 中的查询部分
location.hash 设置或获取 url 的锚点部分
location.reload() 重新加载本页面
location.assign(url) 载入一个新页面
location.replace(url) 用新页面替换本页面

history 对象

语法 作用
history.length 获取当前窗口历史记录的个数
history.back() 返回上一页
history.forward() 返回下一页
history.go(x) 以当前页为相对位置, 返回第 x 历史记录页面

document 对象

语法 作用
document.title 获取当前页面的标题
document.documentURI 获取当前页面的 URI 地址
document.contentType 获取当前页面的contenttype属性值
document.documentElement 获取 html 元素
document.head 获取 head 元素
document.body 获取 body 元素
document.scripts 返回所有的script元素
document.links 返回所有的超链接元素
document.images 返回所有的img元素
document.forms 返回所有的form元素
document.getElementById(id) 通过id属性值查找元素,返回该元素
document.getElementsByName(name) 通过元素的 name 属性值查找元素,返回所有符合条件的元素
document.getElementsByTagName(tagName) 通过元素的标签名查找元素,返回所有符合条件的元素
document.getElementsByClassName(className) 通过元素的 class 属性值查找元素,返回所有符合条件的元素
document.querySelector(cssSelector) 通过 css 选择器查找元素,返回第 1 个符合条件的元素
document.querySelectorAll(cssSelector) 通过 css 选择器查找元素,返回所有符合条件的元素

操作 DOM 节点

语法 作用
node.childNodes 获取当前节点包含的所有节点,返回一个 NodeList 对象
node.parentNode 获取当前节点的父节点
node.firstChild 获取当前节点包含的第一个子节点 ,没有返回null
node.lastChild 获取当前节点包含的最后一个子节点,没有返回null
node.previousSibling 获取当前节点的前一个兄弟节点
node.nextSibling 获取当前节点的后一个兄弟节点
node.nodeType 获取节点的类型
node.nodeName 获取普通节点或者属性节点的名称
node.textContent 获取节点的文本内容
document.createElement(tagName) 创建一个元素节点
document.createTextNode(data) 创建一个文本节点
document.createComment(data) 创建一个注释节点
document.createDocumentFragment() 创建一个空的文档片段
parentNode.appendChild(newNode) 在节点的内部结尾插入一个新节点
parentNode.insertBefore(newNode, nextNode) 在节点的制定子节点前插入一个新的节点
node.cloneNode([deep]) 复制节点 node,返回复制的节点
parentNode.replaceChild(newNode, oldNode) 用新节点替换旧节点
parentNode.removeChild(childNode) 删除父节点中指定的子节点
node.isConnected 判断元素是否已经被渲染在当前页面中
node.hasChildNodes() 判断节点是否有子节点
parentNode.contains(node) 判断节点是否是另一个节点的后代
node1.isEqualNode(node2) 判断两个节点是否相同

操作元素

语法 作用
element.getElementsByClassName(name) 在元素的后代元素中根据类名查找元素,返回所有符合条件的元素
element.getElementsByTagName(name) 在元素的后代元素中根据标签名查找元素,返回所有符合条件的元素
element.querySelector(cssSelector) 在元素的后代元素中使用css 选择器查找元素,返回第一个符合条件的元素
element.querySelectorAll(cssSelector) 在元素的后代元素中使用css 选择器查找元素,返回所有符合条件的元素
element.children 获取元素的所有子元素
element.childrenElementCount 获取元素的所有子元素的个数
element.firstElementChild 获取元素的第一个子元素
element.lastElementChild 获取元素的最后一个子元素
element.previousElementSibling 获取元素的上一个兄弟元素
element.nextElementSibling 获取元素的下一个兄弟元素
element.insertAdjacentElement(position,element) 在元素的指定位置插入一个新元素
element.insertAdjacentHTML(position,text) 把 text 解析成 html 元素。并插入到指定位置
element.insertAdjacentText(position,text) 在元素的指定位置插入一段文本
element.textContent 获取或者设置元素中的文本内容,ie8不支持
element.innerText 获取或者设置元素中文本内容
element.innerHTML 获取或者设置元素中的的html内容

元素的标签属性

语法 作用
element.attributes() 获取元素所有的属性节点
element.hasAttributes() 判断元素标签中是否有属性节点
element.hasAttribute(name) 判断元素标签中是否含有指定属性节点
element.setAttribute(name, value) 在元素上新增或修改属性节点
element.getAttributeNames() 获取元素标签中的所有属性名
element.getAttribute(name) 获取元素标签中指定属性的值
element.removeAttribute(name) 移除元素中的某个属性节点
element.style 获取或者设置元素的行内样式
window.getComputedStyle(element [,伪类]) 获取元素或伪元素的所有样式
element.className 获取元素的 class 属性值(字符串)
element.classList 获取元素的 class 属性值列表(类数组集合)
element.classList.add(string) 给元素新增指定类名
element.classList.remove(string) 移除元素指定类名
element.classList.toggle(string) 新增或移除元素的指定类名

元素节点的尺寸和位置信息

语法 作用
element.clientLeft 获取元素左边框的宽度
element.clientTop 获取元素上边框的高度
element.clientWidth 获取元素的内容+padding的宽度
element.clientHeight 获取元素的内容+padding的高度
element.offsetLeft 获取元素定位样式的左偏移量
element.offsetTop 获取元素顶部偏移量
element.offsetWidth 获取元素的内容+padding+border的宽度
element.offsetHeight 获取元素的内容+padding+border的高度
element.scrollTop 元素内容在垂直方向上滚动距离
element.scrollLeft 元素内容在水平方向上滚动的距离
element.getBoundingClientRect() 获取元素的大小和相对于可视区域的位置
.width 元素整体所占的宽度,包含 margin 高度
.height 元素整体所占的高度,包含 margin 高度
.left/x 元素左边框边缘到浏览器可视区域左边的距离
.top/y 元素上边框边缘到浏览器可视区域左边的距离
.right 元素右边框边缘到浏览器可视区域顶边的距离
.bottom 元素下边框边缘到浏览器可视区域顶边的距离