javasript 思维导图模板_ProcessOn思维导图、流程图

浏览端的JS

    ECMAScript，包含JS基础语法
    DOM，文档对象模型，可以操作HTML文档的结构和元素的增删改查
    BOM，浏览器对象模型，控制浏览器的，比如地址跳转、大小、滚动等

选择器

querySelector(selector) - 通过 CSS 选择器获取第一个符合条件的元素节点。
querySelectorAll(selector) - 通过 CSS 选择器获取一个或多个元素节点。
    getElementById(id) - 通过元素 id 属性获取一个元素节点。
    getElementsByClassName(class) - 通过元素 class 属性获取一个或多个元素节点。
    getElementsByTagName(tag) - 通过元素标签名获取一个或多个元素节点。
    getElementByName(name) - 通过元素 name 属性获取一个或多个元素节点。
    document.forms[name] - 通过表单 name 属性获取一个表单元素节点。
    document.images - 获取文档中所有的图像元素节点。

输出和输入

    输入：prompt()、页面表单输入、后台数据输入
    输出：
        console.log()控制台输出
        document.write()：了解
        dom操作，比如给页面上标签添加内容

变量

定义变量名命名规则命名规范赋值使用作用域全局作用域块级作用域，{}之间的范围函数作用域，函数的{}之间的范围形参：整个函数中有效局部变量：从定义语句到函数的{}结尾位置

wbepack

npx webpack

执行打包

npx webpack-dev-server

启动服务器

ctrl=c

关闭服务器

Express

命令

帮助命令

express -h

运行

node app.js

保持刷新

nodemon app.js

文件

public：保存项目的静态资源，比html、css、图片等，因为传统的后台项目这静态和后台的代码是放在一个项目中的 routes：存放Express中路由文件，路由就是处理每一个请求的代码文件。（重点） views：保存页面模板的，只是在传统后台项目中需要，后面使用前后端分离项目之后会删除。 app.js：就是项目的启动入口文件。（重点）

使用介绍

    创建请求接口，一般使用路由来处理
    获取请求参数。
        get：http://localhost:3000/getMovies?参数名=参数值&参数名=参数值
            在浏览器地址栏输入的地址然后回车，就是发起get请求
            在html中使用超链接跳转页面
            通过location.href等操作
            表单提交时，method不写或者method=”get”时。
            请求图片
            ajax.get()，不同的ajax库有不同的写法
            通过其它工具来模拟，postman或apifox
        post：保存在请求体中，post支持get传参方式
            表单提交时，method=”post”
            ajax.post
            通过其它工具来模拟，postman或apifox
    post和get请求的区别
        传参不一样
        post更安全，因为数据不会暴露在地址栏中
        post没有传参数据的大小限制，所以可以实现文件上传。get有传参数据大小限制，具体限制由浏览器决定
    连接数据库，从数据库中操作数据

ECMAScript

运算符

算术运算符，(+-*/%)数字类型，Number()，parseInt(), parseFloat()
    比较运算符，==和===，其它就不写了。返回的都布尔值，true或false
    赋值运算符，=，+=，-=，/=，*=，%=
    逻辑运算符：&&(且)，||(或)，!（非），返回的都是布尔值

数据类型

简单(基本)数据类型
        number：数字类型，包含小数和整数
        string：字符串，使用单引号、双引号、反引号包裹
        boolean：布尔值
            false：在条件语句中，undefined、null、””或’’、0等都是假值，注意[]空数组不是
            true：除了假值都是真值
        undefined：变量没有被赋值
        null：变量尝试去赋值，但是失败了。null，确切来说是表示引用数据类型为空的概念。
            null == undefined
            null === undefined
        Symbol
        bigInt
    复杂(引用)数据类型
        Object
        数组
        函数

数据类型的转换

转换成数字：Number、parseInt、parseFloat
转换成字符串：String()或+号与字符串进行拼接
转换成布尔值：Boolean()

数组

变量一次只能保存一个数据，但数组可以保存多个数据的。
    定义
    长度
    索引
    遍历
    常用方法
        push
        pop
        shift
        unshift
        splice
        includes
        indexOf
        filter
        forEach
        map
        some
        every
        reduce
    常用操作
        最大值
        最小值
        求和
        求平均
        去重
        排序

增
push(元素)：在数组的底部添加元素，可以添加多个元素，使用逗号分隔，返回值是数组添加成功后的长度 unshift()
向数组的开头添加一个或更多元素，并返回新的长度。
splice(第几个元素, 0, 添加的元素1, 添加的元素2, ...)     从数组中添加或删除元素。
删
splice(第几个元素, 删除的数量, 添加的元素1, 添加的元素2, ...)     从数组中添加或删除元素。
pop()     删除数组的最后一个元素并返回删除的元素。
shift()     删除并返回数组的第一个元素。
改：原来位置上的数据先删除，再添加新的
splice(第几个元素, 删除的数量, 添加的元素1, 添加的元素2, ...)     从数组中添加或删除元素。
查
for循环遍历
indexOf(值)：从左到右，查看指定的值在数组中的索引位置，如果数组中不存在则返回-1
lastIndexOf(值)：从右到左
includes()     判断一个数组是否包含一个指定的值。
includes 是字符串和数组对象方法之一，用于判断一个字符串或数组是否包含另一个子串或元素，并返回布尔值。

循环语句

for循环
        计数for循环
            初始语句：创建一个计数变量i
            条件语句：判断i的值是否符合条件，符合就执行循环体，然后再执行迭代语句，如果不符合条件则退出循环
            循环体
            迭代语句：修改i的值
        for-in
        for-of
    while循环
    do-while循环

嵌套循环

内循环：执行次数=内循环的次数*外循环的次数
外循环

循环的控制语句

break
continue
return

break：结束整个循环，如果有嵌套循环，就近原则。如果需要打印1~10，当打印5的时候遇到break，那么1234
continue：结束当次循环，如果有嵌套循环，就近原则。如果需要打印1~10，当打印5的时候遇到continue，那么1234678910
eturn：必须写在函数中，代码整个函数提前结束，函数都结束了，函数中的循环肯定也结束了

分支语句

if语句
        if(条件)
        if(条件)-else
        if(条件)-else if(条件)-else
        也支持嵌套
    switch语句
        case
        break

函数

定义
        全局函数：function 函数名(形参列表){函数体}
        函数表达式：let 函数名 = function() {}
    调用
        全局函数：调用和定义代码没有顺序要求
        函数表达式：调用的代码必须在定义的代码后面
    函数参数及传参
        形参
        实参
        注意：在JS中形参和实参数据可以不一致
        arguments：接收实参
    返回值：return 值或变量

本地存储

只能存字符串
localstaorage.setitem(属性名，属性值)

localStorage：永久存储
sessionStorage：临时存储，页面关闭，数据丢失

setItem(key, value)：将数据写入本地存储
key:字符串，存储的唯一标识
value：字符串，存储的内容，只能使用字符串，如果存的是对象或数组，使用将该对象转换为字符串
对象或数组转换为字符串：JSON.stringify(对象或数组)
getItem(key)：获取存储的数据，返回的类型是字符串
key
字符串转换为对象或数组：JSON.parse(字符串)
clear()：清空存储的数据
removeItem(key)：删除指定的key的数据

将对象转换为字符串
let Str = JSON.stringify(对象)
将字符串转换为对象或数组
let Str = JSON.parse( key )

对象

就是一种数据结构，可以形容一个物品或生物等，{属性名: 属性值, 属性名: 属性值, 属性名: 属性值, …}
    定义：let 对象名 = {}
    使用属性：对象名.属性名或对象名[“属性名”]
    修改属性值：对象名.属性名 = 值或对象名[“属性名”] = 值
    添加属性：对象名.新的属性名 = 值;
    删除属性：delete 对象名.属性名

高阶函数

array.函数(function(currentValue,index,arr), thisValue)

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。

循环遍历数组

filter

数组.filter（（element，index）=> 条件）

filter() 是 JavaScript 中一个数组方法，它用于过滤出符合给定条件的数组元素并将它们返回。具体用法如下：

const newArray = array.filter(callback(element[, index][, array][, thisArg]);

其中，array 表示原始数组，callback 是一个回调函数，它接受三个参数：

    element：当前处理的元素
    index（可选）：当前元素在数组中的索引
    array（可选）：原始数组对象

callback 函数必须返回一个布尔值。如果返回 true，则表示当前元素符合过滤条件，将被保留在新的数组中；如果返回 false，则当前元素会被过滤掉。

filter() 方法将遍历原始数组中的每个元素，并对每个元素执行 callback 函数。最终返回符合条件的数组元素组成的新数组 newArray，而不会改变原始数组 array。

以下是一个使用 filter() 方法计算整数数组中偶数元素的例子：

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // 输出 [2, 4, 6]

以上代码中，我们定义了一个名为 numbers 的数组。然后通过调用 filter() 方法并传入一个回调函数，选出其中所有能被 2 整除的元素并存储在名为 evenNumbers 的新数组中。最后，打印出 evenNumbers 数组的内容。

通过使用 filter() 方法，我们可以方便地过滤出符合特定条件的数组元素，这在实际应用中很常见。

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。

indIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。

事件

点击事件

onclick 只能传简单类型数据，在html通过onXXX绑定事件，成为dom0级事件

按钮事件

event

e.target.value
获取触发事件的元素值

切换事件

onchange

焦点事件

blur

获取焦点事件

focus

输入框输入事件

input

滚动事件

scorll

函数中使用，html标签使用

on事件名=null
dom0级移除

标签对象.removeEventListener("事件名"，绑定的事件函数名，是否冒泡)

DOM的节点

节点代表整个HTML文档中所有内容，包含文本内容。

查找
        整个文档中查找
            document.querySelector(“选择器”)：返回最先匹配到的元素对象
            document.querySelectorAll(“选择器”)：返回所有匹配到的元素对象，是一个类似数组的对象
    创建
        document.createElement(“标签名”)
    添加
        元素对象.appendChild
    删除
        元素对象.remove()：自对象remove()方法的元素对象删除
    修改

选择器.addEventListener("click", function (e) {}）

添加点击事件

其他代码

addEventListener
变量名. .（事件，function( ) ）
js里添加点击事件

变量名. .（事件，function( ) ）{} tus )

createElement
document..(" ")
创造一个元素

HTML页面标签.appendChild(被变量保存的元素)
把创造的元素放入HTML

保存创建的元素名的变量.className=" scss样式名 "   添加和删除是字符串操作
i.classList.add(" scss样式名 ")   添加
i.classList.remove("  scss样式名  ")   删除

instanceof 判断一个变量是否属于指定类型

if(!Array.isArray(array))

if(typeof(fn) != "function")

H5技术栈

H5介绍

提供很多新的特性，可以更方便的完成一些特定功能，比如本地存储、视频、音频的播放。提供更多语义化(见名知意)标签， header、footer、main、aside等。https://www.runoob.com/html/html5-new-element.html 新的表单元素 date color email range 新的属性 required：必填属性移动端开发 app开发：要使用JAVA或Objective-C或者Swift开发相应app。需要打包成对应的安装文件，然后下载安装 h5开发：直接在移动端的浏览器上去运行。没有平台限制小程序开发：微信小程序，支付宝、百度、飞书等大概有十几个

响应式布局

媒体查询
    @media screen and|,|not (expression) {
        CSS样式代码
    }
expression
    max-width：最大宽度
    min-width：最小宽度
    orientation：手机是竖屏还是横屏

两者布局的比较

响应式：当项目页面内容不多时，可以用来做移动端的布局方案，比如官网之类的，apple官网。如果网站内容过多，不推荐使用响应式，比如京东、淘宝
自适应布局：适用于移动端，不同分辨率的布局方案。

自适应布局

自动去适应不同屏幕(分辨率)大小
    弹性盒子：自动压缩，只对直接子元素有效
    em和rem：都是数值单位，跟px差不多
        em：根据父元素的font-size来设置元素大小
        rem：根据html标签上的font-size来调整元素的大小，默认1rem = 16px;

vh和vw：CSS提供一种自适应布局方案。兼容相对来说差一点 vw：将手机屏幕的宽度分为100份。100vw，就是占满整个浏览器。有点像百分比 vh：100vh就是整个手机屏幕的高度。

修改rem的参考值 document.documentElement.style.fontSize = "10px";

JavaScript单词用法

选择器

通过名称获取属性的值

格式转换

转换为数字

Number(字符串)

渲染HTML

innerText

只能渲染文字和数字

innerHTML

渲染标签

去除其他样式

去除空格

trim()

函数相关

alert('获得一台iphone10086')

弹窗

return

结束函数

长度

length

window.onresize

页面大小

ul标签内部长度

childElementCount

时间

定时器

setTimeout(要执行的代码, 等待的毫秒数)

clearTimeout

清除定时器

随机数

Math

ceil(x) 对数进行上舍入。

floor(x) 对 x 进行下舍入。

random() 返回 0 ~ 1 之间的随机数。

Math.floor(Math.random() * (1000 - 100) + 100);

数组

数组名=["x","y"]

数组对象

数组名=[ {属性名：”属性值“}，{属性名：”属性值“，} ]

增push(元素)：
splice(第几个元素, 0, 添加的元素1, 添加的元素2, ...) 从数组中添加或删除元素。

查indexOf(值)：从左到右，查看指定的值在数组中的索引位置，如果数组中不存在则返回-1
lastIndexOf(值)：从右到左
includes(值) 判断一个数组是否包含一个指定的值。
includes 是字符串和数组对象方法之一，用于判断一个字符串或数组是否包含另一个子串或元素，并返回布尔值。

删splice(第几个元素, 删除的数量, 添加的元素1, 添加的元素2, ...) 从数组中添加或删除元素。
pop() 删除数组的最后一个元素并返回删除的元素。
shift() 删除并返回数组的第一个元素。
改：原来位置上的数据先删除，再添加新的
splice(第几个元素, 删除的数量, 添加的元素1, 添加的元素2, ...) 从数组中添加或删除元素。

存储

存

setItem

本地

localStorage

会话

sessionStorage

数组或者对象

JSON.stringify(数组名)

localStorage.setItem('key', JSON.stringify(数组名));

取

getItem

JSON.parse(localStorage.getItem('key'));

事件

点击事件

onclick

onclick="ac()"

括号里面可以传参数，函数（）里面随便写一个接收

按钮事件

event

e.target.value
获取触发事件的元素值

事件委托

addEventListener

p.addEventListener("change", function(e) {}）

给父元素添加

失焦事件

onblur

鼠标点别的地方就失焦

切换事件

onchange

DOM添加

className

添加class样式

classList

.classList.add("active");

.classList.remove("active");

单词用法

img

选择器获取img之后可以直接修改

document.querySelector(".info img").src = selectMovie.imgSrc;

join

把数组中的所有元素转换为一个字符串：

.join(",")

Array.from(object, mapFunction, thisValue)

通过字符串创建一个数组：

.split("-")

分割字符串

instanceof 判断一个变量是否属于指定类型

Array.isArray(array)

hasOwnproperty(属性名)

判断对象是否具有指定属性名

Object.assign({},obj)

复制对象数组

size

返回Set集合的大小，即里面数据的总数

Set集合

特点：不允许有重复的数据。

使用：只能通过new关键字来创建对象

new Set()

size：返回Set集合的大小，即里面数据的总数
    add(数据)：在Set集合中添加数据，返回set对象本身，因此支持链式写法
    clear()：清空Set集合
    delete(数据)：删除数据
    forEach()：Set的遍历方法
    has(数据)：判断是否存在指定的数据

函数

class函数

person构造函数

类永远是constructor

Webpack

创建项目后用集成终端打开

在项目中下载webpack相关工具

npm install webpack webpack-cli --save-dev

npm install --save-dev html-webpack-plugin

插件

npm i webpack-dev-server

服务器

npm install --save-dev style-loader css-loader sass-loader sass webpack

处理css，scss，

npm i html-withimg-loader -D

处理图片

创建src目录

在webpack项目规范，所有的源代码(程序自己写的代码)，即JS、CSS、HTML、图片等都要放在src中。那webpack一般都将src中的文件打包处理。如果不需要webpack打包处理的文件，就不需要放在src中

创建webpack配置文件

配置文件默认名称为webpack.config.js，且默认路径为项目的根目录下，即与package.json在同一层目录

执行打包命令

在终端输入 webpack 回车或者 npx webpack

插件

npm install --save-dev html-webpack-plugin

NOdejs

path、fs(文件模块)

1、path
路径模块，所有跟路径相关的操作都可以使用path
    join
    resolve
    extname：获取路径的后缀名，包含了小数点
2、FS
文件操作模块，文件读取，一般配合path模块来处理文件的路径
    readFile()：读取指定文件
    writeFile()：在指定的文件中写入内容，会覆盖整个文件
    appendFile()：在文件中追加内容

//引入文件模块 const fs = require('fs'); const path = require('path');

fs.readFile('./files/1.txt', 'utf8', (err, data) => {
if (err) throw err; //抛出错误，后面的程序就不会再执行了
console.log(data); //data就是文件读取到的内容
});

处理错误

try-catch

async function read() {
    try {
        let data1 = await fsp.readFile('./files/4.txt', 'utf8');
        console.log(data1);
    } catch (err) {
        //当try中的代码出现异常时，就会执行catch中来
        console.log('上面的代码出现异常了', err);
        // throw err;
    }
    console.log('程序执行完成');
}

3、全局模块
Global，提供一全局性的内容，与浏览器环境中的window对象类似。所以全局模块中的内容不需要导入，直接使用即可
__dirname：当前正在执行的文件所在的目录
__filename：当前正在执行的文件路径

同步，异步

Promise是一种JavaScript对象，用于表示一个异步操作的最终完成结果(完成了，未完成)。在异步编程中，Promise被广泛的应用于解决回调地狱的问题，提高代码的可读性和减少错误处理的复杂度问题。

1、状态
Promise对象有三种状态。
    进行中，pending，只要创建了Promise对象，那么该对象就进入pending状态。
    已成功，fulfilled
    已失败，rejected

3、Promise的实例方法 then()：对应成功状态的方法 catch()：对应失败状态的方法

2、创建Promise对象
    // executor(resolve: (value: any) => void, reject: (reason?: any) => void): void
    console.log('程序开始了');
    let p1 = new Promise((resolve, rejects) => {
        //resolve，返回成功状态
        // resolve(); //Promise里面的代码是成功执行了
        // rejects(); // Promise里面的代码是失败执行了
        setTimeout(function () {
            console.log('异步执行了');
            // resolve('成功了');
            rejects('失败了');
        }, 1000);
    });
    p1.then((data) => {
        console.log('data', data);
    }).catch((res) => {
        console.log('res', res);
    });

1、async 用来声明一个函数是一个异步的函数，当一个函数被async关键字修饰后，其返回结果就会默认变成一个Promise.resovle状态的对象。并且函数内部不再需要使用回调函数或者传递Promise来处理异步操作了。 2、await 也是一个关键字，用于等待一个Promise对象的状态变为resovled（已完成）或rejected（已失败）。使用await只能接收resovled的返回值。rejected则会抛出异常。有了await之后和Promise，可以将异步代码写成同步代码的方式。注意，只是方式上像同步代码，但本质上还是异步代码。