JS综合

数据类型

原始类型(原始值, 传值)
- Undefined
- Null(对空对象的引用)
- Boolean
- Number
- String
- Symbol(ES6)
引用类型(引用值, 传址)
- Object是一个基础类型，所有引用类型都从它继承了基本的行为
- 函数也是一种引用类型，函数是Function类型的实例
- 引用值（就是对象）是某个特定引用类型的实例，新的对象通过new操作符后跟一个构造函数（constructor）来创建
- 基本引用类型
  - Date(构造函数，实例化再使用)
    - getFullYear() 年份
    - getMonth() 0-11月
    - getDate() 日期
    - getDay() 星期：0-6（0是周日）
    - getHours() 0-23时
    - getMinutes() 0-59分钟
    - getSeconds()
    - getTime() 时间戳
    - Date.now()===+new Date()===new Date().valueOf()===Number(new Date()) 时间戳
  - RegExp
  - 原始值包装类型
    - Boolean
    - Number
      - Number.isInteger()
      - toFixed()
      - Math.PI
      - Math.abs()
      - Math.random() [0,1)
        生成[0,x)：Math.random()*x
        生成[x,y)：Math.random()*(y-x)+x
        生成[x,y]：Math.floor(Math.random()*(y-x+1))+x
      - Math.floor()
      - Math.ceil()
      - Math.round()
      - Math.max()
      - Math.min()
      - Math.pow()
      - Math.sqrt()
    - String
      - indexOf(), lastindexOf()
      - search()
      - includes()
      - startsWith()
      - endsWith()
      - charAt()等效str[index]
      - charCodeAt(index)
      - slice()
      - substring()
      - substr()
      - concat()
      - split()
      - replace()
      - String.fromCharCode([unicode])
      - repeat()
      - toLowerCase()
      - toUpperCase()
    - 每当原始值使用属性和方法时，后台会创建一个相应原始包装类型的对象
  - 单例内置对象
    - 任何由ECMAScript实现提供，与宿主环境无关，并在ECMAScript程序开始执行就存在的对象，不需要显式地实例化内置对象
    - Global: 在全局作用域的变量和函数都会成为Global对象的属性，isNaN(), isFinite(), parseInt(), parseFloat(), encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()等都是Global对象的方法，undefined, NaN, Infinity, Object, Array, Function, Boolean, String, Number, Date等对象都是Global对象的属性（浏览器宿主环境下把window对象做为Global对象的代理）
    - Math: 属性和方法（上网查）：abs, sin, cos, tan等
- 集合引用类型
  - Object
    - 显式地创建Object实例，一种是用new操作符和Object构造函数，另一种是使用对象字面量(属性名可以是字符串或数值)
    - 对象的属性是用点语法来存取的，或者用中括号(括号内要使用属性名的字符串形式)
    - 每个Object实例都有以下属性和方法
      - constructor: 创建当前对象的函数
      - hasOwnProperty(propertyName[属性名: 字符串或Symbol]): 用于判断当前对象实例是否存在给定的属性
      - isPrototypeOf(object): 判断当前对象是否为另一个对象的原型
      - propertyIsEnumerable(propertyName[属性名: 字符串或Symbol]): 判断给定属性能否用for-in语句枚举
      - toLocaleString(): 返回对象的字符串表示，该字符串反映对象所在的本地化执行环境
      - toString(): 返回对象的字符串表示
      - valueOf(): 返回对象对应的字符串、数字、布尔值表示
  - Array(数组)
    - 创建数组方式：Array构造函数, 或数组字面量
    - 属性和方法
      - Array.length
      - Array[i]
      - Array.sort(--)
      - Array.forEach(--，callback func)
      - Array.map(--,同上但返回数组)
      - Array.unshift(--)第一位添加元素
      - Array.push(--)最后一位添加元素
      - 创建多维数组
        Array.from(--)
        Array.fill(--)填充数组
        Array.from(new Array(r), ()=>{new Array(c).fill(0)});
        new Array(r).fill(0).map(()=>{new Array(c).fill(0)});
  - Map(ES6): 实现”键/值“式存储的新标准
  - Set(ES6): 集合类型

变量声明规范

尽量使用ES6新出的let和const声明变量而不是var
- let: 块作用域,且没有声明提升
- const: 声明并赋值, 声明对象时，对象不可再赋值，但是可以修改对象的属性方法

执行上下文

每个上下文都有一个关联的变量对象
全局上下文就是最外层的上下文: 取决于SCMAScript的宿主环境，浏览器中全局上下文就是window对象，所有通过var定义的全局变量和函数都会成为window对象的属性和方法，使用let和const的顶级声明则不会定义在上下文中，在函数内未声明就初始化的变量会加到全局上下文

模板字面量定义字符串(ES6)

用法: --${js表达式}--
会保留内部的空格

try catch语法糖

javascript

try{

  //throw(error)
}catch(error){

}finally{

}

语句

for-in语句
- 一种严格的迭代语句，用于枚举对象中的非符号键属性
  - 用法：for(propertyname in expression)
for-of语句
- 一种严格的迭代语句，用于遍历可迭代对象(数组等)的元素
  - 用法：for(element of expression)
with语句: 将代码的作用域设置为特定的对象
- 用法: with(expression)

事件处理程序（监听器）

HTML：行内声明（onclick='func(event)'）->过时
- 会有一个局部变量event对象
- 而且能扩展作用域，在函数中document对象和元素自身的成员都当局部变量访问(with实现)

function(){
    with(document){
        with(this){
            statement;
        }
    }
}

DOM0级
- 用法：element.onclick(或别的事件属性)=function(){};其中this为此元素
- 移除：element.onclick=null;
DOM2级
- element.addEventListener("[event]",[func],[false(默认，冒泡)])
- element.removeEventListener(参数): 参数与addEventListener一样时才能remove那个添加的监听->若监听事件处理函数是匿名函数则不能remove
事件对象event
- event.currentTarget(即this): 事件处理函数所在的元素
- event.target: 触发事件的目标(因为是冒泡，有时候点击的元素并没有事件监听，但冒泡过程中有元素有监听器，这样子的话，target就是触发事件的元素，currentTarget就是绑定了点击事件的元素) event.type: 返回事件的类型, 若同一个元素有多个事件处理，就有用 event.preventDefault()，用于把某事件的默认行为取消，比如a标签的点击跳转 event.stopPropagation(): 取消后续事件的冒泡 -用户界面事件
- loadwindow.addeventlistener("load",func) (本应该由document触发，考虑兼容性window也行)
- resize(window触发)
- scroll(window触发)
焦点事件
- blur, focusout
- focus, focusin
鼠标和滚轮事件
- click
- mouseover
- mouseout
- mousemove
- mouseenter: 在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发
- mouseleave: 在用户把鼠标光标从元素内部移到元素外部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。
- 客户端坐标
  - event对象的clientX和clientY属性（事件触发时鼠标相对视口的坐标）
  - event对象的pageX和pageY属性（事件触发时鼠标相对页面的坐标）
  - event对象的screenX和screenY属性（事件触发时鼠标相对电脑屏幕窗口的坐标）
其他事件
- window 的 load 事件会在页面完全加载后触发，因为要等待很多外部资源加载完成，所以会花费较长时间。而 document的DOMContentLoaded 事件会在 DOM 树构建完成后立即触发，而不用等待图片、JavaScript文件、CSS 文件或其他资源加载完成
- window的hashchange事件：用于在 URL 散列值（URL 最后#后面的部分）发生变化时通知开发者。这是因为开发者经常在 Ajax 应用程序中使用 URL 散列值存储状态信息或路由导航信息
触摸事件：代办（红宝书p531）
模拟事件：代办（红宝书p543）

动画

window.requestAnimationFrame()方法，参数为一个回调函数，回调函数内可重复使用window.requestAnimationFrame()，可绘制连续动画
window.cancelAnimationFrame()，接受一个参数（为window.requestAnimationFrame()的返回值）,可取消动画

window.requestAnimationFrame()节流

let enqueued = false
function expensiveOperation() {
   console.log('Invoked at', Date.now())
   enqueued = false
}
window.addEventListener('scroll', () => {
   if (!enqueued) {
      enqueued = true
      window.requestAnimationFrame(expensiveOperation)
   }
})

画布 Canvas

基础

创建canvas元素要设置width和height属性
用js创建指定canvas元素的上下文对象

const canvas=document.querySelector(""); const context=canvas.getContext("2d");

2D绘图上下文的方法和属性

2d绘图上下文提供了绘制2d图形的方法，包括矩形、弧形、路径，2d上下文的坐标原点（0，0）在canvas元素的左上角，所有坐标值都相对该点计算
两个基本操作：填充和描边，对应两个属性：fillStyle和strokeStyle，可设置颜色
绘制矩形
- fillRect(x,y,width,height): 指定颜色在画布绘制并填充矩形, 颜色用fillStyle指定
- strokeRect(x,y,width,height): 通过 strokeStyle 属性指定的颜色绘制矩形轮廓
- clearRect(x,y,width,height): 可以擦除画布中某个区域, 该方法用于把绘图上下文中的某个区域变透明，通过先绘制形状再擦除指定区域
绘制路径
- 首先调用beginPath()方法开始绘制新路径
- arc(x,y,radius,startAngle,endAngle,counterclockwise):，(x,y)为圆心以x轴正方向为初始角度,-pi/2就是y轴（和数学三角函数相反）
- arcTo(x1,y1,x2,y2,radius):画弧线
- lineTo(x,y): 绘制直线
- moveTo(x,y)：不绘制线条，只把绘制光标移动到(x, y)
- rect(x, y, width, height)：它创建的是一条路径，而不是独立的图形(使用时自动moveTo(0,0))
- 创建路径之后，可以使用 closePath()方法绘制一条返回起点的线。
- 如果路径已经完成
  - 则既可以指定 fillStyle 属性并调用 fill()方法来填充路径
  - 也可以指定 strokeStyle 属性并调用stroke()方法来描画路径
绘制文本
- 两个方法都接受四个参数：要绘制的字符串、x 坐标、y 坐标和最大像素宽度(可选)
- fillText()：使用fillStyle 属性绘制文本
- strokeText()：使用strokeStyle属性
- font属性：以CSS语法指定的字体样式、大小、字体族等，比如"bold 16px Arial"
- textAlign属性：指定文本的对齐方式（"center"、"start"和"end"）
- textBaseLine属性：指定文本的基线（"middle"）
save()和restore()保存和恢复画布状态，不是绘图！！
变换等（红宝书p560）

JS综合 #

数据类型 #

变量声明规范 #

执行上下文 #

模板字面量定义字符串(ES6) #

try catch语法糖 #

语句 #

事件处理程序（监听器） #

动画 #

画布 Canvas #

基础 #

2D绘图上下文的方法和属性 #

JS综合

数据类型

变量声明规范

执行上下文

模板字面量定义字符串(ES6)

try catch语法糖

语句

事件处理程序（监听器）

动画

画布 Canvas

基础

2D绘图上下文的方法和属性