Skip to content
目录

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{

}
1
2
3
4
5
6
7
8

语句

  • 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;
        }
    }
}
1
2
3
4
5
6
7
  • 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()节流
    js
    let enqueued = false
    function expensiveOperation() {
       console.log('Invoked at', Date.now())
       enqueued = false
    }
    window.addEventListener('scroll', () => {
       if (!enqueued) {
          enqueued = true
          window.requestAnimationFrame(expensiveOperation)
       }
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

画布 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)

Released under the MIT License.