JavaScript

数据类型

  • Number：默认值0
    • 具体细节：
      • 0开头8进制
      • 0b二进制
      • 默认是10进制
      • 0x表示16进制
      • Number.MAX_VALUE数字型最大值
      • Number.MIN_VALUE最小值
      • Infinity无穷大
      • -Infinity无穷小
      • NaN非数字
    • 相关函数：
      • isNaN：判断是否是非数字
  • Boolean：默认值false
  • String：默认值””
    • length属性：返回长度
  • Undefined：默认值undefined
  • Null：默认值null

类型函数

  • typeof()：判断类型

  • toString()：转换字符串

  • String()：转成字符串

  • parseInt()：转换为数字型

  • parseFloat()：转换为浮点型

  • Number()：转换为数字型

  • Boolean()：转换为布尔值

数组

创建方式:

  • new出来：new Array()
  • 利用字面量：let arr = [1,2,”1231”,true];

获取方式

  • 利用索引（索引号从0开始）：数组名[索引号]

获取长度

  • arr.length：获取数组长度

判断是否为数组

  • arr instanceof Array;
  • Array.isArray();

相关函数

  • arr.push()：添加元素，返回数组长度
  • arr.pop()：删除最后一个元素，并返回删除的元素值
  • arr.unshift()：向数组开头添加元素，返回数组长度
  • arr.shift()：删除数组的第一个元素，返回第一个删除的值
  • arr.reverse()：翻转数组
  • arr.sort(function(a,b){return a-b})：数组排序升序
  • arr.indexOf()：查找元素索引,查不到返回-1
  • arr.lastIndexOf()：在数组中的最后一个索引
  • arr.toString()：转换为字符串
  • arr.join(‘分隔符’):以分隔符转换为字符串

函数

申明方式

  • 直接申明：function 函数名(){}
  • 利用变量名：var 变量名 = function(){}

属性

  • arguments：可以接收函数的参数（以伪数组的形式）

对象

创建方式

  • 利用字面量：var obj = {name:”11”,age=18,hello:function(){}};
  • new一个：var obj = new Object();obj.name=”111”;
  • 利用构造函数：function gg(name,age){this.name=name,this.age=age};

遍历对象

  • 利用for循环：for(var k : obj){console.log(k)};

内置对象

Math对象

  • Math.PI：圆周率
  • Math.max()：输出最大值
  • Math.min()：返回最小值
  • Math.floor()：向下取整
  • Math.ceil()：向上取整
  • Math.round：四舍五入
  • Math.abs()：最对值
  • Math.random()：返回随机的小数[0~1)

Date对象

  • 构造函数：new Date()/new Date(“2000-10-1 8:8:8”)/new Date(2000,10,1);
  • 格式化日期：通过get获取日期并利用字符串拼接输出
  • 获取总毫秒数：date.valueOf()/Date.now()

字符串对象

  • str.indexOf(‘x’)：返回字符索引
  • str.charAt(index)：返回该位置上的字符
  • str.charCodeAt(index)：返回该位置字符的ASCII码
  • str[index]：获取该位字符
  • concat(str1,str2,…)：拼接字符串
  • substr(start,length)：截取字符串
  • slice(start,end)：截取到end位置，end不取
  • substring(start,end)：基本和slice一致单不接受负值
  • replace(‘被替换的字符’,’替换为的字符’):替换字符
  • split(‘分隔符’):将字符串以分隔符分割

操作DOM

获取元素

  • getElementById：以id获取元素
  • getElementsByTagName：以标签名获取元素
  • getElementsByClassName：根据类名元素集合
  • quertSelector(‘选择器’)：以选择器直接选择
  • document.body：直接获取body标签
  • document.documentElement：获取html标签
  • 元素.parentNode：获取父节点
  • 元素.childNodes：获取所有子节点，如果只需要元素节点，需要判断nodeType==1
  • 元素.children：只获取所有子元素节点
  • 元素.firstElementChild：获取第一个子元素
  • 元素.lastElementChild：获取最后一个子元素
  • 元素.nextSibling：获取下一个兄弟节点包括文本节点
  • 元素.previousSibling：获取上一个兄弟节点包括文本节点
  • 元素.nextElementSibling：获取下一个兄弟节点不包括文本节点
  • 元素.previousElementSibling：获取上一个兄弟节点不包括文本节点

绑定事件

传统方式
  • 元素.onclick = function(){}：绑定点击事件
  • 元素.onclick=null：解绑事件
  • onmouseover：鼠标经过触发
  • mouseenter：鼠标进入不会冒泡
  • onmouseout：鼠标离开触发
  • onfocus：获得鼠标焦点触发
  • onblur：失去鼠标焦点触发
  • onmousemove：鼠标移动触发
  • onmouseup：鼠标弹起触发
  • onmousedown：鼠标按下触发
  • contextmenu：文本操作菜单
  • selectstart：禁止选择文字
方法监听注册事件

同一个元素同一个事件可以添加多个监听器

  • 元素.addEventListener(type,listener[useCapture])
    • type：事件类型，不需要加on
    • listener：回调函数
  • 元素.removeEventListener(type,listener[useCapture])
修改属性
  • innerText：修改标签文本内容
  • innerHtml（常用）：修改标签的结构内容
  • src：修改src属性
  • href：修改href
  • 表单属性：type、value、checked、selected、disabled
  • 修改样式属性：元素.style.样式属性=’修改的值’
  • 修改类名属性:元素.className=”修改的类名”
  • 元素.属性：获取内置属性
  • 元素.getAttribute(‘’)：获取自定义属性
  • 元素.setAttribute(‘属性’,’值’)：设置自定义属性值
  • 元素.removeAttribute()：移除属性
  • 元素.dataset.属性名：获取data-属性的值
节点操作

  • document.createElement(‘标签名’)：创建节点（效率远远比innerHtml快的多）但是可以利用数组先存好，再添加到innerHtml中更快

  • 元素.appendChild()：在父节点的子节点末尾添加节点

  • 元素.insertBefore(child,指定元素)：在父节点的指定元素前面添加节点

  • 元素.removeChild()：移除元素

  • 元素.cloneNode(false/true)：复制当前节点(false为浅拷贝，true为深拷贝复制内容)

事件对象

event就是一个事件对象写到我们侦听函数的小括号里面当形参来看；事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数；事件对象是我们事件的一系列相关数据的集合跟事件相关的比如鼠标点击里面就包含了鼠标的相长信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键

  • target：触发该事件的元素
  • this：返回绑定的对象
  • type：事件类型
  • preventDefalut：阻止默认行为如跳转等/或者用return false；
  • stopPropagation：阻止冒泡行为
  • pageX：鼠标在页面文档的x坐标
  • pageY：鼠标在页面文档的y坐标
  • keyCode：获取相应键的ASCII码值

Window对象

相关事件

  • window.onload：页面加载事件
  • window.onresize：调整窗口大小加载事件（window.innerWidth获取窗口宽度）
  • scroll(x,y)：滚动到指定位置

定时器

  • window.setTimeout（调用函数，延迟毫秒值）;
  • window.clearTimeout(timeoutId)：停止定时器
  • window.setInterval（调用函数，延迟毫秒值）：会循环调用
  • window.clearInterval(IntervalId)：停止定时器

Localtion对象

  • href：该页面的url地址
  • host：主机名
  • port：端口
  • pathname：路径
  • search：返回参数
  • hash：片段
  • assign：进行页面跳转记录历史可以后退
  • replace：不记录历史不能后退
  • reload()：刷新页面，如果带了true这个参数会强制刷新
  • userAgent：可以判断使用什么端访问

History

  • back()：后退功能
  • forward()：前进功能
  • go(参数)：前进后退功能，后退为负数

高级特性

  • 元素.offsetTop：返回元素

  • 元素.offsetParent返回作为该元嘉带有足位的父级元素如果父烟都设有定位则返回body

  • 元素.offsetTop返回元素相对带有定位父元素上方的偏移

  • 元素.offsetLeft返回元素相对带有定位父元素左边的偏移

  • 元素.offsetWidth返回自身包括padding，边框。内容区的宽度，返回数值不带单位

  • 元素.offsetHeight返回自身包括adding。边框、内容区的亮度，返回数值不带单位

  • 元素.clientTop：返回元素上边框的大小

  • 元素.clientLeft：返回元素左边框的大小

  • 元素.clientWidth：返回自身报考padding、内容区的宽度，不包含边框

  • 元素.clientHeight：返回自身报考padding、内容区的高度，不包含边框

  • 元素.srcollTop：返回被卷去的上侧距离，返回数值不带单位

  • 元素.scrollLeft：返回被卷去的左侧距离，返回数值不带单位

  • 元素.srollWiddth：返回自身实际宽度，不含边框，返回数值不带单位

  • 元素.srollHeight：返回自身实际高度，不含边框，返回数值不带单位

  • window.pageYOffset：获取页面被卷去的高度

存储对象

SessionStorage

会话级别，关闭浏览器失效

  • setItem(key,value)：存储数据
  • getItem(key)：获取数据
  • removeItem(key)：移除数据

LocalStorage

永久生效，除非手动删除

  • setItem(key,value)：存储数据
  • getItem(key)：获取数据
  • removeItem(key)：移除数据

ES6

新特性

  • let变量：修饰局部变量
  • const：声明常量，不能修改
  • 解构赋值：let{name,age} = {name:”1”,age=2};
  • 模板字符串：里面直接写字符串${里面写拼接的变量}
  • 对象得简写：{name:name,age:age}简写为{name,age}
  • 箭头函数：()=>{};注意this指向该函数定义的位置
  • …args：rest参数根argments一样
  • …运算符：将数组以逗号分割，
  • Number.EPSILON：表示js的最小精度可以用来比较浮点数
  • isFinite()：判断是否是有限数
  • isInteger()：判断是否是整数
  • Object.is()：判断两个值是否想等，和===差不多
  • Object.assign()：对象合并

Set集合

  • new Set()：构造set集合
  • set.has(‘’)：是否包含

Map

  • new Map()
  • m.set(“key”,”value”)：添加元素
  • m.delete(“key”)：删除元素
  • m.get(key)：获取元素
  • m.clear()：清空map集合