JS 速查列表
1.数值转换
Boolean() // 布尔型 非0即真
Number() // 转换为数字 只有纯数字字符串才能转, 不然就是NaN
parseInt() // 转换为int 取整3.14->3 为字符串时100a->100 开头不是数字则NaN
// 转换为十进制 parseInt(nmuber, 进制)
parseFloat() // 转换为float 取浮点数
Math.ceil() // 向上取整 3.1->4
JSON.parse(str) // 把字符串解析成对象格式
JSON.stringify(json) // 把对象格式转成字符串
2.作用域
查找变量从最近父级查找, 逐层向上
let 作用域为最近{}内
3.存储数据
对象数据类型, 键值对集合, json
4.数组
1.设置数组长度
// 例子：数组length-1 =>作用：可以用来删除最后的元素
arr.length = 长度
2.从后面加数据
// 返回数组长度
push(value)
3.在前面加数据
// 返回长度
unshift(value)
4.删除最后一个
// 返回被删除的元素
pop()
5.删除第一个
// 返回被删除的元素
shift()
6.数组反转
// 返回反转后的数组
reverse()
7.删除若干数据
// 删除若干数据, 并选择是否插入。默认值(0, 0, 没有) 返回新数组(被删除的数据)
splice(开始索引, 多少个, value)
8.数组排序
// 什么都不传就两个两个换。返回排序好的数组
sort() //例如：1, 2, 3, 4 => 2, 1, 4, 3
// 从小到大排序
sort(function(a, b){return a - b})
// 从大到小排序
sort(function(a, b){return b - a})
9.拼接成字符串
// join(连接符)。将数组用连接符连接成字符串, 返回字符串
join('-') // 例如：1, 2, 3 => 1-2-3
10.拼接数组
// concat(其他数组)将其他数组与数组拼接。返回拼接好的数组
arr1.concat(arr2)
11.截取数组
// 默认(0, 数组长度), 返回截取的新数组, 包前不包后
slice(开始索引, 结束索引)
11.查找value在数组的索引
// 有该数据则返回第一次出现的索引。没有则返回-1
indexOf(value)
12.遍历数组
// item 是数组每一个元素, index 是索引, arr是数组。参数可以不写, 没有返回值
forEach(function(item, index, arr){})
13.映射数组
// 返回新的数组
map(function(item, index, arr){return item*10}) // 将数组每一个元素*10
14.过滤数组
// 返回过滤好的新数组
filter(function(item, index, arr){return item>150}) // 将数组小于150的元素删除
15.判断是否每一项都满足条件
// 返回布尔值
every(function(item, index, arr){return item>150}) // 判断是否大于150
16.判断是否有某一项都满足条件
// 返回布尔值
some(function(item, index, arr){return item>150}) // 判断是否有满足大于150的元素
5.字符串
1.获取对应索引位置的字符
// 返回字符
charAt(索引)
2.将字符串的所有字母转换成小写
// 返回转好的字符串
toLowerCase()
3.将字符串的所有字母转换成大写
// 返回转好的字符串
toUpperCase()
4.将字符串第一个满足的内容更换
// 返回字符串。注意：第一个
replace(换下内容, 换上内容)
5.去除首尾空格
// 返回字符串
trim()
6.按照分隔符切割组成一个数组
// 返回数组
split(分隔符)
// 多个分隔符(x, y是分隔符)
split(/x|y/)
// 若分隔符是. 要加[]
split(/[.]|y/)
7.截取字符串
有三个方法：
substr(开始索引, 个数)
substring(开始索引, 结束索引)
slice(开始索引, 结束索引)
// 示例
var arr = "01234567"
var res1 = substr(1, 6) // 结果为123456, 1是开始索引, 6是6个字符
var res2 = substring(1, 6) // 结果12345, 1是开始索引, 6是结束索引。包前不包后
var res3 = slice(1, 6) // 结果12345, 1是开始索引, 6是结束索引。包前不包后
6.数字常用方法
1.获取0~1之间的随机小数。
// 返回小数。包前不包后, 即可以获取到0, 不可以获取到1
Math.random()
2.对数字进行四舍五入取整
// 返回整数
Math.round(value)
3.对数字进行向上取整
// 返回整数
Math.ceil(value)
4.对数字进行向下取整
// 返回整数。相对于去小数
Math.floor(value)
5.对数字进行取幂运算
// 返回结果
Math.pow(底数, 指数)
// 例如2的5次方
Math.pow(2, 5)
6.对数字进行二次方根运算
// 返回结果
Math.sqrt(value)
// 例如根号4
Math.sqrt(4)
7.对数字进行绝对值运算
// 返回结果
Math.abs()
8.获取若干数字中的最大值
// 返回最大值。
Math.max(value1, value2, ...)
9.获取若干数字中的最小值
// 返回最小值。
Math.min(value1, value2, ...)
10.得到一个近似Π(派：3.14159…)的值
// 返回值
Math.PI
11.示例：
// 获取0~x之间的随机整数,
var a = Math.random()*(x+1)
var result = Math.floor(a)
// 获取x~y之间的随机整数
var b = Math.random()*(y-x+1)
var result1 = Math.floor(b)+x
7.时间常用方法
var time = new data()
time.getFullYear() // 获取年
time.getMonth() // 获取月份
time.getDate() // 获取日期
time.getHours() // 获取小时
time.getMinutes() // 获取分钟
time.getSeconds() // 获取秒
time.getDay() // 获取星期 0~6 周日到周六
time.getTime() // 获取时间戳 1970/1/1 00:00:00 距离今天的毫秒
// 获取时间差函数
function getDiff(time1, time2){
// 获取时间戳
var ms1 = time1.getTime()
var ms1 = time1.getTime()
// 两个时间戳相减的秒数, 向上取整忽略毫秒
var sub = Math.celi((ms2-ms1)/1000)
//换算, 向下取整
var day = Math.floor(sub / (60 * 60 * 24))
var hours = Math.floor(sub % (60 * 60 *24) / (60 * 60))
var minutes = Math.floor(sub % (60*60) / 60)
var seconds = sub % 60
return {day:day, hours:hours, minutes:minutes, seconds:seconds}
}
8.BOM操作
操作浏览器
8.1获取浏览器窗口尺寸
// 获取浏览器可视窗口的宽度 包括滚动条
window.innerWidth
// 获取浏览器可视窗口的高度
window.innerHeight
8.2 浏览器的弹出层
// 提示框
window.alert('value')
// 询问框 有返回值, 确定true, 取消false
window.confirm('value')
// 输入框 有返回值, 确定输入的东西, 取消null
window.prompt('value')
8.3 开启和关闭标签页
// 开启
window.open('地址/url')
// 关闭当前
window.close()
8.4 浏览器常见事件
// 资源加载完毕
window.onload = function(){}
//可视尺寸改变
window.onresize = function(){}
// 滚动条位置改变
window.onscroll = function(){}
8.5 浏览器的历史记录操作
// 回退页面
window.history.back()
// 前进页面
window.history.forward()
8.6 浏览器卷去的尺寸
有滚动条时, 页面隐藏的部分尺寸
// 卷去的高度
document.documentElement.scrollTop //页面有<!DOCTYPE html>
document.body.scrollTop //页面没有<!DOCTYPE html>
//卷去的宽度
document.documentElement.scrollLeft
document.body.scrollLeft
// 卷去的高度/宽度 兼容写法
var height = document.documentElement.scrollTop || document.body.scrollTop
8.7 浏览器滚动到
// left 浏览器卷去的宽度, top 浏览器卷去的高度 , 瞬间移动
window.scrollTo(left, top)
//平滑滚动
window.scrollTo({
left:xx,
top:yy,
behavior:'smooth' //平滑滚动
})
9.定时器
有返回值, 返回第几个定时器, 不区分定时器类型
1.间隔定时器(按照指定周期毫秒, 去执行指定代码)
setInterval(function(){
// 要执行的代码
}, 1000)
2.延时定时器(在固定的时间毫秒后执行一次代码)
setTimeout(function(){
// 要执行的代码
}, 1000)
3.关闭定时器, 不区分定时器类型
// 语法一
clearInterval(要关闭的定时器返回值)
// 语法二
clearTimeout(要关闭的定时器返回值)
10.DOM
操作文档流相关内容的属性和方法
10.1 获取元素
// 根据id获取元素。有-对应元素, 没有-null
document.getElementById('id名称')
// 根据类名获取元素。获取文档流中所有类名对应的元素, 返回伪数组
document.getElementsByClassName('类名')
// 根据元素标签名获取。获取文档流中所有标签名对应的元素, 返回伪数组
document.getElementsByTagName('标签名')
// 根据选择器获取一个, 获取文档流中满足条件的第一个元素
document.querySelector('选择器') //选择器 .nav
// 根据选择器选择一组, 获取文档流中所有满足条件的元素, 返回伪数组
document.querySelectorAll('选择器')
10.2 操作元素内容
// 文本内容
// 获取
元素.innerText
//设置 覆盖/替换
元素.innerText = '新内容'
// 超文本内容
//获取
元素.innerHTML
//设置 覆盖/替换
元素.innerHTML = '新内容'
10.3 操作元素属性
// 原生属性(标签自带的属性)
//获取
元素.属性
//设置
元素.属性 = '新内容'
// 自定义属性(自己设定的一些属性)
//获取
元素.getAttribute('属性名')
//设置
元素.setAttribute('属性名', '属性值')
//删除
元素.removeAttribute('属性名')
// 注意：以上方法一般不用做操作元素 类名 和 样式
10.4 操作元素类名
//获取
元素.className
//设置
元素.className = '新类名'
10.5 操作元素行内样式
// 获取
元素.style.样式名
// 设置
元素.style.样式名 = '样式值' //有中划线-的样式, 写成驼峰, 如backgroundColor
10.6 获取元素非行内样式
// 获取 可以获取非行内样式, 也可以获取行内样式, 只能获取不能设置
window.getComputedStyle(元素).样式名
10.7 节点操作
// 创建节点, 创建一个指定的标签元素, 返回节点
document.createElement('标签名称')
// 插入节点向后插入, 把子节点放在父节点的内部, 并且放在最后的位置
父节点.appendChild(子节点)
// 插入节点向前插入, 把子节点放在父节点的内部, 放在指定位置
父节点.insertBefore(要插入的子节点, 哪个子节点前面)
// 删除节点, 删除指定的节点
父节点.removeChild(子节点)
// 删除节点
节点.remove()
// 替换节点
父节点.replaceChild(换上节点, 换下节点)
// 克隆节点 true/false
节点.cloneNode(是否克隆后代节点)
// 1.获取元素尺寸, 元素 内容 + padding + border 区域的尺寸
元素.offsetHeight
元素.offsetWidth
// 2.获取元素尺寸, 元素 内容 + padding 区域的尺寸
元素.clientHeight
元素.clientWidth
14.ES6
14.1 新增变量命名
ES6以前用var ES6新增let/const
14.2 箭头函数
ES6对函数表达式的简写（声明式函数不能使用）就是把function变成=>
var fn1 = function(){}
var fn1 = ()=>{}
// 1.只有一个形参时,可以不写()
var fn1 = function(a){}
var fn1 = a=>{}
// 2.只有一句话时，可以不写{} 会把这句话的结果当做返回值
var fn1 = function(a,b){return a+b}
var fn1 = (a,b)=> a+b
// 3.箭头函数没有arguments
// 4.箭头函数内部没有this，用的是外部作用域的this
14.3 解构赋值
// 解构数组，使用[]
let arr[a,b] = ['1','2']
console.log(a) // 1
console.log(b) // 2
// 解构对象，使用{}
let obj = {name:lhd, id:10}
let{name,id} = obj
console.log(name) //lhd
console.log(id) //10
// 解构对象起别名
let{name:a} = obj //a=lhd
14.4 模板字符串
可以换行，直接在字符串内解析变量
var str = `ab`
var str = `a
b`
// 解析变量
var age = 18
var str = `我今年${age}岁` // 输出我今年18岁
14.5 展开运算符
展开数组 = 去除[]
var arr = [1,2,3]
console.log(arr) //输出数组
console.log(...arr) //输出1,2,3
// 作用1：合并数组
var arr = [1,2,3]
var arr1 = [4,5,6]
var arr2 = [...arr,...arr1] // 输出数组[1,2,3,4,5,6]
// 作用2：给函数传递参数
var arr1 = [10,20,5,6]
var max = Math.max(...arr1) //输出最大值，max()不能直接放数组
展开对象 = 去除{}
// 作用1：用来复制对象。注意：有相同成员，...obj要放在前面，不然会被obj的覆盖
var obj = {name:lhd}
var obj1 = {
id：10，
...obj
}
14.6 类语法
ES6的语法写构造函数，解决之前写构造函数需要分开写的缺点
// 之前的写法
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.sayHi = function(){ console.log('hello world')}
// 静态属性与方法
Person.a = 100
Person.go = function(){ console.log('go') }
// 实例化对象
var p1 = new Person('lhd','19')
console.log(p1) // 输出对象
p1.sayHi() // 输出hello world
console.log(p1.a) // 输出100
Person.go() // 输出go
var p2 = Person('lhd','19') // 注意：不报错，但不能实例化对象
// ES6 写法
class Person{
// 这里按照 ES5 的构造函数体书写
constructor(name,age){
this.name = name
this.age = age
}
// 直接写原型的函数
sayHi(){ console.log('hello world')}
// 静态属性 + static
static a = 100
// 静态方法
static go() = function(){ console.log('go') }
}
// 实例化对象
var p1 = new Person('lhd','19')
console.log(p1)
p1.sayHi()
var p2 = Person('lhd','19') // 注意：报错，一定要用new
console.log(Person.a)
Person.go()
15.立即执行函数
立即执行函数前面的语句必须有分号
(function(){
// xx
}())
16. 转换
生成日期字符串
话不多说，直接看代码：
function generateDate() {
const date = new Date();
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return year + '-' + month + '-' + day;
}