Paresta's Blog

基本#

动态语言

use strict启用严格模式

推荐使用单引号, 以与HTML区分

数据类型#

• Number
  • 不区分整数, 浮点数
  • Nan, isNaN()判断是否为`NaN“
  • “Infinity: 超过Number.MAX_SAFE_INTEGER(2^53-1)`时
• Boolean
  • true, false
• String
• BigInt
• null, undefined
• Array
• Object
• Map
• Set

变量#

• 变量名可以包含英文, 数字, $, _, 不能以数字开头

• let x = ...;声明变量

  • 可以先声明再赋值

• const x = ...;声明常量

• 全局变量为window的属性

• 解构赋值: let [x, y, z] = [a, b, c];

  • 可忽略元素: let [, , z] = [a, b, c]

  • 可嵌套: let [x, [y, z]] = [a, [b, c]]

  • 中括号或花括号需要与源数据对应

  • 对对象解构赋值:

    • 变量名与对应属性名相同, 不存在则赋值为undefined
    • 使用let {x:a} = {a: val};将a属性值赋给x
    • 使用默认值: let {x=default} = {x: val};

  • 已声明的变量解构赋值时, 需要将赋值语句用()包裹

  • [x, y] = [y, x]交换变量

  • 解构赋值语句左侧可作为函数形参, 接收一个对象并自动解构绑定: function func({x, y, z}) { ... }

• parseInt(), parseFloat()将任意类型转换为number

• String()将任意类型转换为string

• 判断变量是否存在: x === undefined

• 原始类型(number, string, boolean)的复制为拷贝, 对象的复制为引用

运算符#

• +, -, *, /, %, **, ++, --

• =, +=, -=, *=, /=, **=

• ==, !=, ===, !==, >, <, >=, <=

  • ==会自动转换数据类型并比较, 不使用, 只使用===

• &&, ||, !, ? :, ??

  • a ?? b, 如果a不为null/undefined, 则返回a, 否则返回b

• typeof, instanceof

• ., ?.

  • a?.b, 如果a不为null/undefined, 则返回a.b,否则返回undefined
  • 可以链式调用a?.b?.c
  • a?.()调用可能存在的函数a(), b?.[key]读取属性

字符串#

• ''或""
• \转义
• 多行字符串用反引号
• +连接字符串
• 模板字符串`${arg}`进行格式化 (反引号)
• str.length获取字符串长度
• [x]下标访问
• [ES2022] str.at(x)访问, 支持负数索引
• 字符串不可变
• rawstring使用 String.raw`...`

数组#

• []或new Array()定义
• 数组元素类型不唯一
• [x]下标访问, 赋值
  • 为超出长度的索引赋值合法, 未赋值的元素为undefined
• arr.length获取数组长度
  • 可以给arr.length重新赋值, 改变后在末尾减少或添加新元素undefined
• [ES2022] arr.at(x)访问, 支持负数索引

对象#

• 键值对的无序集合, 关键字称为属性
• 关键字类型: string或symbol, 值类型: 任意
• {prop1: val1, prop2: val2, ...}定义
• 计算属性名: {[var]: val}根据变量var自动计算属性名
• 属性名非合法变量名时, 需用引号包围
• 属性名非字符串时, 会自动转换为字符串
• obj.prop或obj[prop]访问, 修改值
  • 属性名非合法变量名时, 只能用obj[prop]
• 属性名和值为上文变量时, 可省略值, 自动获取上文变量值 let x = 1; let obj = {x, y: 2}; // obj.x === 1
• 访问不存在的属性返回undefined
• 可以直接添加和delete删除属性
• prop in obj判断是否具有属性, 包括继承属性
• obj.hasOwnProperty(prop)判断自身是否拥有属性, 不包括继承
• 遍历时有顺序, 整数属性名升序排列, 其余按添加顺序
• Object.assign(dest, src1, src2, ...)将对象src中的属性拷贝到dest对象中
• Object.values(obj)返回一个obj中所有值的数组

Map#

• 任意类型关键字的键值对的有序集合
• new Map([[key1, val1], [key2, val2], ...])定义
• map.get(key)获取值
• map.set(key, val)设置值, 可以添加不存在的关键字
• map.has(key)返回是否存在关键字
• map.delete(key)删除关键字

Set#

• 关键字的无序集合
• new Set([key1, key2, ...])
• set.add(key)
• set.has(key)
• set.delete(key)

语句#

函数#

• function func(args) { ... }定义函数
• let func = function (args) { ... };定义匿名函数
• 无return语句时返回undefined
• 调用时允许传入任意个参数, 超出或少于要求依然合法
  • 少于时接收undefined, 可能导致返回NaN
  • 因此需要检查参数
• 将iterable传入函数时可用...iterable展开
• 函数内部变量arguments, 为传入参数的Array-like对象, arguments.length获取参数数量, 可下标访问
• 剩余参数: 捕获所有未被形参绑定的传入参数, 为数组
  • function func(a, b, ...rest)定义, 可自定义名字
  • 若无多余参数, 为空数组

1
function decorator(func) {
2
          return function (...args) {
3
              // ...Before calling...
4
              const result = func(...args);
5
              // ...After calling...
6
              return result;
7
          }
8
      }
9

10
let decorated = decorator(myFunc);

类#

• class MyClass { constructor() { ... } method() { ... }}定义
• new调用constructor()构造器, 内部使用this.prop = val设置属性
• 类实质为函数
• 类方法不可枚举
• 类自动使用use strict
• 类可以作为变量值, 或创建匿名类
• 类字段class MyClass { x = val; }
  • 使用func = () => { ... }定义函数, 传递时不会丢失this
• static关键字定义静态方法和属性
• class Class1 extends Class2 {}继承类
  • class MyClass extends func(args) {}通过返回类的函数func生成类
• super(args)调用父类的构造器
  • 子类重写构造器时, 必须在构造器开头调用super()
• super.method(args)调用父类方法method

错误处理#

• try { ... } catch (e) { ... } finally { ... }
• err为捕获的Error对象, 属性:name, message, stack调用栈字符串
  • 可以省略(e)
• if (err instance of ErrorType)判断异常类型
• 计划调度的函数无法被捕获
• throw new Error(message)抛出异常
• try...finally用于不捕获异常, 但始终执行finally语句
• windows.onerror全局catch, 捕获所有未捕获的异常

异步#

• new Promise((resolve, reject) => { ... })构造Promise对象

  • 传入executor函数, resolve, reject为js自身提供的函数, 直接使用
    • 如果任务完成, 应调用resolve(value), value为期望的返回值
    • 如果出现错误, 应调用reject(error), error为要抛出的Error对象
    • 只能调用一次resolve和reject
  • 创建Promise时自动运行executor

• 私有属性:

  • state: 初始为"pending", 调用resolve后自动变为"fulfilled", 调用reject变为"rejected"
  • result: 初始为undefined, 调用resolve后变为value, 调用reject变为error

• promise.then(result => { ... }, error => { ... })注册回调函数

  • 回调函数可改名

  • 第一个参数在resolved后执行, 第二个参数在rejected后执行

  • 第二个参数可以省略

  • 如果两个参数均省略(或传入null), 不执行操作, 称为Promise穿透

  • 返回新的Promise对象

    1. 若回调函数返回值为普通值: state为fulfilled, result为返回值

    2. 若回调函数返回值为另一个Promise对象: state和result跟随另一个Promise

    3. 若回调函数抛出错误: state为rejected, result为error

    4. Promise穿透: state和result与原先的promise相同

• promise.catch(error => { ... })相当于.then省略第一个参数

• promise.finally(() => { ... })无论resolved还是rejected均执行

  • 返回Promise对象
    • state和result与原先的promise相同, finally传入函数的返回值无效
    • 仅当finally内部函数抛出错误时, state为rejected, result为error

• 可以进行链式调用promise.then(return ...).then(return ...).catch(...)

  • 多次调用promise.then(...)则非链式调用, 而是彼此独立运行任务

• 当一个.then报错, 会跳过后面的所有.then直到一个.catch

  • 因此可以只把.catch写在链的末尾

• 如果存在没有.catch的error, 触发事件unhandledrejection

• async function f() { ... }构造Promise对象, 其state和fulfilled的值由函数内部决定, 与.then的回调函数规则一致

  • 箭头函数async () => { ... }

• 在async函数中, let result = await promise让js引擎等待promise完成并返回结果, 等待期间可以同时执行其它任务

  • 在module中, 可以在顶层写async

• Promise.all(iterable)接收一个Promise的可迭代对象, 返回一个并行执行各promise的Promise对象

模块#

• <script type="module">标明脚本为模块
• 模块始终在严格模式下运行
• 模块脚本延迟加载
• 模块只在第一次导入时解析
• 导出:
  • 在任何声明前加export关键字以导出变量/函数/类, 之后该模块可以在外部被访问
  • 也可使用export {varA, classB}导出
  • export {varA as a, classB as b}对导出内容重命名
• 导入:
  • import {varA, classB} from '.../module.js'导入模块的内容
  • import * as obj from ...导入所有内容为obj对象的属性, 以obj.xx使用
  • import {varA as a, classB as b} from ...对导入内容重命名
• 对于只存放单个实体的模块, 在声明前使用export default, 此时在导入时不加花括号import classA from ...

弹窗#

• alert(message)弹出一条信息
• prompt(title, *default)弹出带有文本和输入框的窗口, 返回输入, 取消输入时返回null
  • default可选, 指定输入框的初始值
• confirm(question)弹出一个是否确认窗口, 返回true或false

Date#

• let now = new Date()获取当前时间
• let date = new Date(YYYY, MM, DD, hh, mm, ss)或Date(timestampInt)创建指定时间
• date.getFullYear()四位数年份, getMonth(), getDate()日, getDay()星期几, getHours(), getMinutes(), getSeconds(), getMilliseconds(), getTime()时间戳int
• 月份从0开始计数

RegExp#

• 通过let re = /.../;或let re = new RegExp('...');定义
  • 第一种写法不需考虑\\转义
• re.test(str)判断re是否匹配str
• str.split(re)按re切分字符串, 返回切分的字符串数组
• re.exec(str)匹配分组, 返回匹配的字符串数组, 匹配失败返回null
• /.../g或RegExp(..., 'g')全局匹配, 每次re.exec(str)匹配一组, re.lastIndex存储上次匹配的字符串的下一个字符索引
• i忽略大小写, m多行匹配

URL#

• let url = new URL(url, [base])创建URL对象

  • 如有base, url为相对路径

• 获取各部分

  

• ?...搜索参数: url.searchParams下的方法:

  • append(name, value)添加参数
  • set(name, value)设置参数, 移除重复值
  • delete(name)移除参数
  • get(name)获取参数
  • getAll(name)获取相同命名的参数
  • has(name)参数是否存在的布尔值
  • 可按map方式迭代

JSON#

• 数据类型: number, boolean, string, array, null, object
• 字符串使用""
• JSON.stringify(obj, *replacer, *space)将对象序列化, 返回JSON格式字符串
  • replacer
    1. 为字符串的数组, 只序列化存在于数组中的属性
    2. 为函数function (key, value), 如返回新值, 则替换原值; 如返回undefined, 则删除键值对
  • space: 美化输出
    1. 为数字, 指定缩进的空格数量
    2. 为字符串, 指定用于缩进的字符
  • obj中若定义toJSON方法, 直接调用该方法输出
    • toJSON无参数, 返回一个object
• JSON.parse(str, *reviver)将JSON字符串转换为对象
  • reviver为字符串的数组, 只反序列化存在于数组中的属性

网络请求#

• fetch(url, [options])请求访问url并返回结果的Promise

  • options为对象
    • method: 'GET', 'POST', ...指定请求方法
    • headers: {'Authentication': 'secret', ...}指定请求头, 值为对象
    • body要发送的数据, 值为JSON字符串, FormData, blob等

• new Request(url, {method: ..., headers: ..., body: ...})手动创建Request对象

• let response = await fetch(...)下载响应头并得到Response对象

• new Response(content[, {status: ..., headers: ...}])手动创建Response对象

  • status和headers可省略, status默认值200, headers自动猜测
  • 如果content为stringify字符串, 必须写headers: {"Content-Type": "application/json"}
    • Response.json(content)为JSON创建Response对象并自动添加status和headers

• response.status请求的HTTP状态码

• response.ok 布尔值, 当status为200~299为true

• response.headers获取响应头

  • response.headers.get(name)按name字符串获取一个header并返回
  • for (let [key, value] of response.headers)遍历

• 响应体读取方法(均返回Promise, 使用await下载响应体并获得结果):

  • response.text()纯文本格式
  • response.json() JSON对象
  • response.formData() FormData对象
  • 同一reponse只能使用一种读取方法

BOM#

• navigator.userAgent, language, platform获取浏览器信息
• screen.width, screen.height, screen.colorDepth获取客户端显示器屏幕的宽度, 高度, 颜色位数
• location.href获取当前页面URL
• location.protocol, host, port, pathname, search, hash获取当前页面URL各部分
• location.assign(URL)加载新页面
• location.reload()刷新页面
• document DOM树的根节点
• document.title获取当前页面title
• document.cookie获取当前页面cookie

DOM#

nodeList分为live(自动更新)和static, 均支持下标访问, for...of和forEach()

Node包括元素节点, 文本节点, 注释节点等

尺寸与坐标#

• window属性

  • window.innerWidth, window.innerHeight获取浏览器窗口内部宽高(去除菜单栏, 工具栏等) (包括滚动条)
  • window.outerWidth, window.outerHeight获取浏览器外部宽高
  • window.scrollX, scrollY获取文档已滚动的距离, 相当于document.documentElement.scrollTop, scrollLeft

• 元素属性

  • 如下图

    

    • clientWidth, clientHeight不包括滚动条
    • offsetWidth, offsetHeight包括滚动条和border
    • scrollWidth, scrollHeight为总宽高, 包括未显示部分
    • scrollLeft, scrollTop为已滚动的距离
    • offsetLeft, offsetTop为偏移父元素的距离

  • document.documentElement.prop用于获取文档作为元素的属性

  • elem.getBoundingClientRect()返回相对于窗口的DOMRect对象(只读)

    • x, y矩形左上角相对于窗口内部的坐标
    • width, height矩形的宽高
    • left, right, top, bottom各边界的坐标

• document.elementFromPoint(x, y)获取坐标处最上层的元素

• window.scrollTo(x, y), window.scrollBy(x, y)将文档滚动到绝对坐标或相对坐标

  • 或使用对象作为参数windows.scrollTo({left: x, top: y, behavior: 'smooth'})实现平滑滚动

• elem.scrollIntoView(top)滚动文档使elem可见

  • top=true(default)时, elem定位在窗口顶部, 反之在底部

事件#

• 通过HTML元素on<event>="function()"属性添加, function()定义在<script>中

  • 可以使用this和event

• 通过elem.on<event> = function() { ... }添加

  • 如需捕获事件属性, 应添加形参event

• 通过elem.addEventListener(event, handler, options)

  • event: 事件名, 如"click"
  • handler:
    • 为函数: 处理程序
    • 为object或类实例: 调用对象中的handleEvent方法
  • options:
    • 为object: {capture: false, once: false, passive: false, signal: null}
      • capture: 是否在捕获阶段处理事件
      • once: 是否在调用后自动移除监听器
      • passive: 是否不调用event.preventDefault()
        • 用于优化滚动
      • signal: AbortSignal 对象, 当关联的 AbortController 调用 abort() 时移除监听器
    • 为boolean: 对应capture属性

• elem.removeEventListener(event, handler, options): 移除监听器, 参数需与添加时完全相同. handler需为同一函数的引用, 因此需要命名函数

表单#

其它#

• display从none转为显示时, 会覆盖其它过渡效果. 其它过渡应设置setTimeout(..., 20)