(syntax)js
2022-09-01 00:00:00

js

基础

  • 输入&输出
    • 输入 prompt()、confirm()
    • 输出 console.log()、document.write()、innerHTML ="" alert()
  • 变量和常量
    • var / const 常量 大写下划线命名
    • let 变量 驼峰式命名法
    • 变量提升 先使用后声明
  • 标识符 vs 关键字
  • 数据类型
    • 声明变量类型 直接声明、new 声明(new Number)
    • 基本(原始)数据类型
      • Number
      • String
      • Boolean
      • Null
      • Underfined
      • BigInt
      • Symbol
    • 复杂(引用)数据类型
  • 运算符
    • 算术
      • +、- 、 * 、 / 、% 、++ 、 –
      • ** 求幂 指数运算符
      • -负数
      • +x 数值运算符
    • 赋值 = 、+=、-=、*=、/=、%=
    • 字符串 + += ${} 模板字符串
    • 比较 ==、===、!=、!==、>、<、>=、<=
      • 相等比较
        • (不)相等运算符 == !==
        • 严格不、相等运算符=== !===
      • 非相等比较
    • 条件 变量 = (条件) ? 值1（true）:值2（false）
    • 布尔(逻辑) 取反运算符（!）非 【6个值true/und/false/0/NaN/空字符串 其余false】 且运算符（&&） 与假假 或运算符（||） 或真真
    • 位 按位与 ( & ) AND(和) 按位或 ( | ) OR(或) 按位异或 ( ^ ) 按位取反 ( ~ ) 非 左移 ( << ) 右移 ( >> ) 无符号右移 ( >>> ) 异或运算符 xor x >>= y x = x >> y
    • 逗号 ，
    • 空值合并 ??
    • void
  • 流程控制
    • 顺序
    • 选择
      • if else
      • switch(){ case值: 语句; break; default: ; }
      • (条件) ? 表达式1 : 表达式2
    • 循环
      • label
      • for while do(){} while for in for of forEach(value,key)
      • break continue

五大对象

对象

  • js 是面向对象的语言 js不创建类 基于prototype 而不是基于类
  • prototype（原型对象） js对象都会从prototype 中继承属性和方法
  • for in

内置对象

  • new Array array.prototype var obj = { }

  • for in Object.keys delete 删除属性

  • 访问 . []

  • Array

    • constructor length prototype
    • of from isArray
    • fill 填充 concat 连接 join 转字符串 toString 转字符串 reverse 翻转 sort 排序 valueof
    • slice 截取 shift unshift（增） 头 push pop（删） 末尾 splice 添加 + 删除 修改 array 的万能方法
    • indexOf lastIndexOf

  • String

    • constructor prototype length
    • fromCharCode Unicode 转 字符串
    • concat repeat slice substring substr 截取
    • trim toLoweCase toUpperCase replace(All)
    • 数组 => 字符串 join + toString 字符串=> 数组 split valueOf
    • fromCharCode() 将 Unicode 编码转为字符
    • charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
    • localeCompare 比较两个字符串
    • match() 查找找到一个或多个正则表达式的匹配。
    • search() 查找与正则表达式相匹配的值。
    • charAt() 获取（n+1）指定索引位置的字符 charCodeAt() 获取索引位置字符的Unicode值
    • indexOf lastindexOf

  • RegExp

  • Number

    • parseFloat/int isFinte isInteger isNaN isSafeInteger
    • toString toFixed toExponential toPrecision toLocaleString

  • Boolean

    • toString valueOf constructor prototype

  • Obeject

    • keys values valueOf toString

  • Date

    • now parse UTC to类、get类 、set类

函数

  • 函数概念

    • JS 函数(一等公民)可以看做一种值 与其他数据类型地位平等
      • 赋值给变量和对象的属性
      • 当作参数传入给其他函数
      • 作为函数的返回结果
      • 函数可以作为一个可以执行的值 函数表达式

  • 函数声明

    • function
      • function 函数名(形参){ return;}
        • return 多个值 数组 对象
        • arguments 只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array
        • rest 接受任意参数 rest参数只能写在最后，前面用…标识
      • 变量
        • 局部变量 外部变量
      • 参数
    • 函数命名
      • 用动词前缀来开始一个函数 一个函数应该只包含函数名所指定的功能，而不是做更多与函数名无关的功能。 set... getxxx createxxx checkxxx
    • 函数表达式 匿名函数赋值给变量
      • var f = function(){ };
      • var f = function f(){ };
    • new/Function() new/ Function(参数1，参数2，函数体) 可以多个参数 最后一个参数是函数体 参数都是双引号

  • 函数调用

    • 作为一个函数调用 函数名()
    • 函数作为方法调用（对象里面的方法） var obj = { full:funciton(){ rerturn this.firestname }}
    • 使用构造函数new 构造函数调用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 构造函数:
    function myFunction(arg1, arg2) {
        this.firstName = arg1;
        this.lastName  = arg2;
    }

    // This creates a new object
    var x = new myFunction("John","Doe");
    x.firstName;                             // 返回 "John"
    • 作为函数方法调用函数 在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法

  • 函数参数

    • 实参 实际使用的参数
    • 形参 没用的占位置的参数 定义函数使用的参数 接受调用函数时传递的参数
    • 默认值 function func(x,y = 100)

  • 返回值

  • 函数种类

    • 匿名函数 没有名字的函数 let fuc = function(){}
    • 构造函数 new Function() const fuc = new Function(“a”,”b”,”return a* b”);
    • 自调用函数（立即调用函数）IIFE 实际上是一个匿名自调用函数（没有函数名）
      • function f(){ //code }();
      • (function(){ //code })();
      • (function(){}());
    • 箭头函数 ES6新增箭头函数
      • (参数1, 参数2, …, 参数N) => { 函数声明 }
      • (参数1, 参数2, …, 参数N) => 表达式(单一)
      • (参数1, 参数2, …, 参数N) =>{ return 表达式; }
        (…args) => expression
      • (单一参数) => {函数声明}
      • 单一参数 => {函数声明}
      • () => {函数声明}
    • 回调函数 也就是说函数不是立即执行的或者是执行的，而是定义好函数等待被回头调用的
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function ask(question, yes, no) {
      if (confirm(question)) yes()
      else no();
    }

    function add(x, y, f) {
        return f(x) + f(y);
    }
    add(-5, 6, Math.abs)
    • 函数表达式 var func = function(a,b){ return a +b }
    • 高阶函数
      • 函数可以作为变量
      • 函数可以作为返回值

  • 函数的属性和方法

    • 属性 name 函数名 length 参数个数 toString 返回一个字符串
    • 方法 对象中的函数 方法中的this、始终指向当前对象
      • call和apply call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。
        • 通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用
      • call 值 将函数作为对象的方法来调用 将指定参数传递给该方法Math.max.call(null, 3, 5, 4);
      • apply 数组 myFunction.apply(myObject, myArray);Math.max.apply(null, [3, 5, 4])
      • bind

  • 函数的作用域

    • 全局作用域
    • 局部作用域
      • 函数作用域
      • 块级作用域

  • 函数提升

    • 提升（Hoisting）应用在变量的声明与函数的声明 函数表达式不存在函数提升

  • eval(表达式)

  • void 关键字

  • 闭包

  • 递归 函数可以调用自身就是递归

  • 防抖和节流

    • 防抖 解决什么：使用在一些点击请求的事件上，避免多次点击向后端发送多次请求
      是什么：事件在触发n秒后再执行回调，在n秒后触发，又重新计时（就是每隔n秒执行一次，避免重复操作）
    • 节流 解决什么：使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。（滚动上，减低使用频率）
      是什么：规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。（每个单位时间多次操作只执行一次）

  • 函数是对象

  • 函数柯里化 把一个多参数的函数，转化为单参数函数

DOM

  • DOM 元素节点

    • 获取DOM

      • getElementById(“id名”)
      • getElementsByTagName(“标签名”)[下标值]
      • getElementByClassName()
      • querySelector()和querySelectorAll()
      • getElementsByName()

    • 创建DOM

      • createElement() 创建标签元素
      • createTextNode() 创建文本节点（添加文本）
      • createDocumentFragment() 创建文档片段
      • createAttribute 创建属性
      • createComment 创建注释

    • 插入DOM

      • appendChild()
      • insertBefore
      • innerHTML/Text()
      • outHTML/Text()
      • textConent()

    • 删除DOM

      • removeChild()
      • removerNode

    • 复制DOM

      • cloneNode()

    • 替换DOM

      • replaceChild()
  • DOM 属性节点
    • html属性 ： hasAttribute(key);removeAttribute(“attribute”) attribute=新属性值 setAttribute
    • css属性： getComputedStyle() ele.style.styleName=styleValue

BOM

  • window

    • 方法

      • open()、close()、print()、stop()

      • move/resize/scroll + By/To

        • moveTo() 把窗口的左上角移动到一个指定的坐标
          moveBy() 可相对窗口的当前坐标把它移动指定的像素。
          resizeBy() 按照指定的像素调整窗口的大小。
          resizeTo() ß把窗口的大小调整到指定的宽度和高度。
          scrollBy() 按照指定的像素值来滚动内容。
          scrollTo() 把内容滚动到指定的坐标。

      • base-64 编码 atob() 解码一个 base-64 编码的字符串。 btoa() 创建一个 base-64 编码的字符串。

      • blur focus

      • postMessage() 安全地实现跨源通信。

      • createPopup() 创建一个 pop-up 窗口。
        getSelection() 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
        getComputedStyle() 获取指定元素的 CSS 样式。
        matchMedia() 该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。

    • 属性

      • length name close top parent self
      • defaultStatus 设置或返回窗口状态栏中的默认文本。 status 设置窗口状态栏的文本。
      • 窗口
        • outerHeight 返回窗口的外部高度，包含工具条与滚动条。
          outerWidth 返回窗口的外部宽度，包含工具条与滚动条。
          pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
          pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

    • 计时

      • 不断 setInterval(“function”,milliseconds) 不断执行 clearInterval(intervalVariable)

      • 一次 setTimeout(“function”,milliseconds) 一次性 clearTimeout(timeoutVariable)

    • 弹窗 alert() 警告框 confirm() 确认框 prompt() 提示框（输入框）

  • navigator

    • appCodeName\appName\appVersion
      navigator.appCodeName 浏览器代号
      navigator.appName 浏览器名称
      navigator.appVersion 浏览器版本
      navigator.cookieEnabled 启用Cookies
      navigator.platform 硬件平台
      navigator.userAgent 用户代理
      navigator.systemLanguage 用户代理语言
      navigator.language：浏览器设置的语言
    • javaEnabled() 指定是否在浏览器中启用Java
      taintEnabled() 规定浏览器是否启用数据污点(data tainting)

  • cookie

  • location

    • 重载 reload\replace\assign
      • location.reload()重新加载页面
      • location.replace() 用新的文档替换当前文档
      • location.assign() 方法加载新的文档
    • location.href = “url” /href返回当前页面的URL
      • protocol 协议 hostname 主机的域名 port pathname search hash

  • screen

    • width height 屏幕的总高度
    • availWidth./Height 返回访问者可用屏幕的宽度/高度
    • colorDepth pixelDepth
    • screenLeft 返回相对于屏幕窗口的x坐标
      screenTop 返回相对于屏幕窗口的y坐标
      screenX 返回相对于屏幕窗口的x坐标
      screenY 返回相对于屏幕窗口的y坐标
    • window.innerWidth/innerHeight 返回窗口的文档显示区的高度 宽度 浏览器窗口的内部高度/宽度（包括滚动条）
    • outerWidth和 outerHeight 获取浏览器窗口的整个宽高

  • history

    • length
    • back() 后退、forward() 向前、go()

  • 存储 key get/set/removeItem clear

    • cookie document.cookie = “username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/“ 修改直接重写 删除 设置以前的时间 document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;

    • window.localStorage

      • setItem getItem removeItem clear
      • 设置 storage[“a”] = 1 storage.b = 1 storage.setItem(“c”,2);

    • window.sessionStorage

      • set/get/removeItem clear

Event 事件

  • 常用事件

    • 鼠标

      • 点击onclick/ondbclick、onmousedown / mouseup —— 当在元素上按下/释放鼠标按钮时

      • onmousemove 移动

      • 移除与移入

        • mouseover / mouseout —— 当鼠标指针移入/离开一个元素时
        • mouseleave/mouseenter 移除/移入

      • oncontextmenu 菜单

    • 键盘

      • onkeypress 按键被按下并松开 onkeydown 按下按键 onkeyup 松开按键
      • keyCode

    • 进度

    • 表单

      • onfocus
      • onblur
      • onsearch
      • onselect
      • oninput
      • onchange 在表单元素的内容改变时触发
      • onreset 表单重置时触发
      • onsubmit 表单提交时触发

    • 触摸

      • Touch 接口
      • TouchList 接口
      • TouchEvent 接口

    • 拖动

      • ondrag 该事件在元素正在拖动时触发
      • ondragend 该事件在用户完成元素的拖动时触发
      • ondragenter 该事件在拖动的元素进入放置目标时触发
      • ondragleave 该事件在拖动元素离开放置目标时触发
      • ondragover 该事件在拖动元素在放置目标上时触发
      • ondragstart 该事件在用户开始拖动元素时触发
      • ondrop 该事件在拖动元素放置在目标区域时触发

    • 计时

      • 不断执行 setInterval(“function”,milliseconds)

        • clearInterval(intervalVariable)

      • 执行一次 setTimeout(“function”,milliseconds)

        • clearTimeout(intervalVariable)

    • 其他

      • onload
      • onresize
      • onscroll
      • resize 重置窗口大小
      • onchange 元素改变
      • oncopy
      • oncut

      • onpaste

  • 事件传递 ：冒泡与捕获

    • 冒泡： 在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素
    • 捕获：外部元素的事件会先被触发，然后才会触发内部元素的事件

  • 事件绑定方式

    • html onclick=function
    • DOM 绑定
    • 事件监听 add/removeEventListener()
      • element.addEventListener(event, function, useCapture); 同一个元素添加多个句柄 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的
        • element.addEventListener(“mouseover”, myFunction);
          element.addEventListener(“click”, myFunctionMy);

异步编程

  • 回调函数：异步操作函数往往通过回调函数来实现异步任务的结果处理 是一个函数 完成这个任务后要干什么 不用关心异步任务的状态
    • setTimout(fuc(){},time) 延时触发函数 异步函数
  • 回调地狱 多个嵌套的回调函数
  • setTimeout
  • Promise
    • resolve 代表一切正常 传递参数，reject 是出现异常时所调用 传递异常
    • .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数
1
2
3
4
5
6
7
8
9
10
11
12
new Promise(function (resolve, reject) {
    // 要做的事情...
}).then(function(){}).catch(function(){}).finally(){};

function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}
  • async/await 异步函数（async function） + Promise
1
2
3
4
5
6
7
8
9
10
11
12
13
14
async function  asyncFunc(){
 await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}

async function asyncFunc() {
    let value = await new Promise(
        function (resolve, reject) {
            resolve("Return value");
        }
    );
    console.log(value);
}
上一页
2022-09-01 00:00:00
下一页