前端-----随笔

git小乌龟

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YCAZOIwN-1627262113131)(C:\Users\guoxinqiang\AppData\Roaming\Typora\typora-user-images\1616045949098.png)]

切换/检出--------------------切换分支
切换/检出--------------------切换新分支----创建新分支

可视化编辑网页

document.body.contentEditable="true"
document.designMode = "on"

扩大文件

cmd copy 1.txt /b + 2.txt 3.txt

谷歌cookies跨域

chrome://flags/
搜索 SameSite
SameSite by default cookies和Schemeful Same-Site设置为disabled

html

快速创建文档标签

div.class$*3
div>p+span
span{$}*1000

IDEA插件

rem 自动转px插件(px2rem)
ALT+D单个替换
CTRL+ALT全局替换

vue2.0

1.打开cmd，查看当前镜像地址：

npm get registry

**2.**切换为淘宝镜像：

npm config set registry http://registry.npm.taobao.org/

3.切换为原本的npm镜像：

npm config set registry https://registry.npmjs.org/

创建vuecli2.0项目

npm install --global  vue-cli
vue init webpack "项目名"
npm install

创建vuecli3.0项目

卸载2.x
npm uninstall -g vue-cli
下载3.x
npm install -g @vue/cli
vue create "项目名"
npm i
npm i vuex --save
npm i axios
npm i element-ui --save
npm i vue-resource --save	(通过XMLHttpRequest或JSONP发起请求并处理响应)
npm i vue-router --save
npm i --save babel-runtime(es6编译成es5运行，前端可以使用es6的语法来写最终浏览器上运行的是es5)
npm i --save-dev babel-polyfill(Babel 默认只转换新的 JavaScript 语法，而不转换新的 API)
npm i fastclick -D
(作用：处理移动端 click 事件 300 毫秒延迟。
说明： 为什么存在延迟？从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？ 因为它想看看你是不是要进行双击（double tap）操作。)
安装：npm i --save lodash(Lodash是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库)
原生js:
 <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
    <script>
        // init vConsole
        var vConsole = new VConsole();
        console.log('Hello world');
    </script>
npm 安装
npm install vconsole

设置浏览器图标

@change @input

@change当输入框失焦的时候触发
 而且在elementUI中使用change时是这样的@visible-change
@input是输入框发生变化时触发，也就是说输入框一动就出触发了

slot插槽

子组件

父组件

directive自定义指令

生命周期

activated

• activated 生命周期在keep-alive 组件激活时调用
  • 服务器端渲染期间不调用该生命周期
    • 通常和 deactivated 周期一起使用

mounted

组件传值

props 和 $emit()

provide 和 inject

• 父组件使用provide提供数据
• 子组件使用inject获取数据
• 默认不是响应式-----------可通过传递一个 ref property 或 reactive 对象给 provide 来改变这种行为
• 跨级访问(祖<--------->孙)

// 父组件中

    

// 子组件中

$parent和$children

• 可以访问组建中所有方法和数据

// 父组件中

// 子组件

vue 引入公共样式的三种方法

在入口js文件main.js中引入，一些公共的样式文件，可以在这里引入

import Vue from 'vue'
import App from './App' // 引入App这个组件
import router from './router' /* 引入路由配置 */
import axios from 'axios'
import '../static/css/global.css' /*引入公共样式*/

在index.html中引入

<link rel="stylesheet" href="./static/css/global.css"> /*引入公共样式*/

在app.vue中引入，但是这样引入有一个问题，就是在index.html的HEADH上会多出一个空的

this.$set()

对象,键,值
直接给student赋值操作，虽然可以新增属性，但是不会触发视图( 页面 )更新
原因是：vue.js的属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。这里就可以使用this.$set了

监听

子组件

监听方法的参数就是父组件传过来的值，监听变化因为数据变了所以调一下查看接口也就是刷新数据
watch: {
    childId(newVal) {
      this.childId = newVal;
      this.getList(); //一定要刷新数据否则页面不刷新
      console.log(newVal, "这里是监听"); //这个参数就是传来的所有值
    }
  },

 在子组件props接收是number类型
  props: {
    childId: Number
  }

传给后端
id:this.childId 
deep: true //深度监听

$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews

$route.params 对象，含路有种的动态片段和全匹配片段的键值对，不会拼接到路由的url后面

$route.query 对象，包含路由中查询参数的键值对。会拼接到路由url后面

$route.router 路由规则所属的路由器

$route.matchd 数组，包含当前匹配的路径中所包含的所有片段所对象的配置参数对象

$route.name 当前路由的名字，如果没有使用具体路径，则名字为空

组件库

cnpm install element-ui -S （pc端的）
cnpm install mint-ui -S （移动端的）
cnpm install vant -S	(移动端的)

vue 移动端适配(rem布局)

https://blog.csdn.net/dlnu2015250622/article/details/105204478/

router.beforeEach()路由拦截

import store from '@/assets/store'   //把这个userId获取过来
router.beforeEach((to,from,next)=>{
    if(to.meta.requireAuth){
        if(store.state.userId){
            next()
        }else{
            next({path:'/b'})
        }
    }else{
        next()
    }
})

跨域

方式1：nginx代理

不过要知道在生产中，要么使用 CORS 、要么使用 Nginx 反向代理来解决跨域。在 Nginx 的配置文件中进行如下配置即可：

server {
  listen  80;
  server_name  localhost; # 用户访问 localhost，反向代理到 http://webcanteen.com
  location / {
    proxy_pass http://webcanteen.com
  }
}

方式2：vue.config.js文件中

proxy: {
    '/api': {
        target: 'https://you.163.com/', //接口域名
        changeOrigin: true,             //是否跨域
        ws: true,                       //是否代理 websockets
        secure: true,                   //是否https接口
        pathRewrite: {                  //路径重置
            '^/api': ''
        }
    }
}

axios接口封装

src下创建文件

config文件->http.js下

import axios from "axios";
//import store from "../store"
var instance = axios.create({
    baseURL:'http://www.jiaju.com',
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    if (store.state.token) {
        config.headers.token=store.state.token;
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    if (response.data.code==999){
        window.location.href="/";
    }else{
        return response;
    }
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
export default instance;

api文件->index.js下

import login from "./Login"
import carousel from "./carousel"
import category from "./category"
export default {
    login,
    carousel,
    category,
}

其他接口页面->例如：good.js

import http from '../config/http.js';
export default {
    post(data){
        return http.post('/goods',data)
    },
    get(page,){
        return http.get(`/goods?page=${page}`)
    },
}

main.js文件下

Vue.prototype.$http=Axios;

页面中使用

import api from "../../api/index"

api.recom.get().then(res=>{
                    this.tableData = res.data.data;
                }).catch(err=>{
                    this.$message({
                        type:'error',
                        message:'获取失败'
                    })
                })
                
api.recom.post(this.formLabelAlign).then(res=>{
                    if (res.data.code == 200){
                        this.$message({
                            type:'success',
                            message:'添加成功'
                        });
                        this.dialogFormVisible = false;
                        this.gettpl();
                        this.formLabelAlign = {}
                    } else{
                        this.$message({
                            type:"error",
                            message:'添加失败'
                        })
                    }
                }).catch(error=>{
                    this.$message({
                        type:"error",
                        message:'添加失败'
                    })
                })

移动端禁止放大缩小

表格文字溢出省略

:show-overflow-tooltip="true"

正则表达式处理公司名称

var a = "天津市11111公司"
var c = a.replace(/(?<=市)(\S*)(?=公)/, "****")
console.log(c);

rules校验

{  pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,  // required: true,  message: '请输入正确的手机号',  // trigger: 'blur'},
{ pattern: /^[0-9]*$/,message: '只能输入数字'},

时间过滤

shijiantime(times) {
                var timearr = times.replace(" ", ":").replace(/\:/g, "-").split("-");
                var timestr = "" + timearr[0] + "-" + timearr[1] + "-" + timearr[2]
                // var timestr = "" + timearr[1].split("")[1] + "月" + timearr[2] + "日\t" + timearr[3] + ":" + timearr[4] + ""
                return timestr
            },

JS获取指定字符的前/后值

str = "12345?789”
str.split("?")[0]  输出为 12345
str.split("?")[1]  输出为 789

vue3.0

mint-ui

解决input问题

type=“number”

    
    
    
    
    
    


    

    
42341

缩放
transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
/* IE 9 */
-webkit-transform: scale(1.05, 1.05);
/* Safari and Chrome */
transition: 0.3s;

正则匹配元素中的图片标签

const regex = new RegExp('

String字符串截取操作

substr(start,length) 返回从start位置开始length长度的子串

substring(start,end) 返回从start位置开始到end位置的子串（不包含end）

//1 取字符串的前i个字符
   str=str.substring(0,i);

//2 去掉字符串的前i个字符
  str=str.substring(i); 

//3 从右边开始取i个字符
  str=str.substring(str.length()-i); 
  str=str.substring(str.length()-i,str.length()); 

//4 从右边开始去掉i个字符
  str=str.substring(0,str.Length-i);

//5 如果字符串中有"abc"则替换成"ABC"
 str=str.replace("abc","ABC");

Array数组截取操作

var heros=["李白",'蔡文姬','韩信','赵云','甄姬','阿珂','貂蝉','妲己'];
console.log(heros.slice(1,4))//  [ "蔡文姬", "韩信", "赵云" ]开始索引为1 结束索引为4(不包括4)
console.log(heros)// 不改变原数组  [ "李白", "蔡文姬", "韩信", "赵云", "甄姬", "阿珂", "貂蝉", "妲己" ]

//若开始索引为负数,则将该值加上数组长度后作为开始索引,如果此时还是负数,开始索引为0。
var heros=["李白",'蔡文姬','韩信','赵云','甄姬','阿珂','貂蝉','妲己'];
console.log(heros.slice(-6,4))//  [ "韩信", "赵云" ]开始索引为2 结束索引为4(不包括4)
console.log(heros.slice(-10,4))//  [ "李白", "蔡文姬", "韩信", "赵云" ]开始索引为0 结束索引为4(不包括4)

//如果结束索引省略，截取到数组的末尾。如果为负,数组长度加上该值即为结束索引,如果此时还为负数,返回空数组
var heros=["李白",'蔡文姬','韩信','赵云','甄姬','阿珂','貂蝉','妲己'];
console.log(heros.slice(1))// [ "蔡文姬", "韩信", "赵云", "甄姬", "阿珂", "貂蝉", "妲己" ]
console.log(heros.slice(1,-4))//  [ "蔡文姬", "韩信", "赵云" ] 开始索引1  结束索引8+(-4)=4
console.log(heros.slice(1,-10)) //[ ] 开始索引1  结束索引8+(-10)=-2

var heros=["李白",'蔡文姬','韩信','赵云','甄姬','阿珂','貂蝉','妲己'];

//当只有索引,从当前索引截取到最后
console.log(heros.splice(1))// [ "蔡文姬", "韩信", "赵云", "甄姬", "阿珂", "貂蝉", "妲己" ]
console.log(heros) //['李白']

//当第二个参数(删除数量)小于0视为0
var heros=["李白",'蔡文姬','韩信','赵云','甄姬','阿珂','貂蝉','妲己'];
console.log(heros.splice(1,-10))//[]
console.log(heros) // [ "李白", "蔡文姬", "韩信", "赵云", "甄姬", "阿珂", "貂蝉", "妲己" ]

//删除并添加
var heros=["李白",'蔡文姬','韩信','赵云','甄姬','阿珂','貂蝉','妲己'];
console.log(heros.splice(1,2,['扁鹊'],'孙膑'))//[ "蔡文姬", "韩信" ]
console.log(heros) //[ "李白",  [扁鹊], "孙膑", "赵云", "甄姬", "阿珂", "貂蝉", "妲己" ]

可以输入数字和小数点

oninput =“value=value.replace(/[^\d]/g,'')” //只能输入数字
oninput =“value=value.replace(/[^0-9.]/g,’’)” //只能输入数字和小数

JavaScript

客户端脚本语言。

h5（css3 JS ）：

1.语义化

2.表单标签

3.本地存储

4.表单属性

5.canvas 画布

6.audio video音频 视频

git svn:分布式版本控制系统；

作用：

• 完成页面交互效果；

• 数据验证

• 动态创建元素

• 动态操作元素的属性样式

• ajax 100%

组成：

• ECMAscript基础语法：（es5、es6）

变量（命名规范、赋值）、数据类型（基本、引用）、运算符（算术运算符、关系、赋值、逻辑）、流程

控制（顺序、条件、循环）、数组（方法）、函数（定义、调用、参数、返回值、默认值）、对象（定义、原型、原型链、继承、this、this改变方式）、作用域（全局、局部、块级、作用域链、闭包）、字符串、日期、Math

• BOM(浏览器对象模型)

window对象、location对象、history对象、document对象

• DOM(文档对象模型)document对象

获取元素、操作元素的内容、属性、样式、节点、元素的尺寸与位置、事件（添加事件的方式、事件的分类、事件流、事件委派）

特征：

基于对象与事件驱动与松散型、解释型语言。

单线型、异步机制

引入方式：

• 外部引入方式

<script src="demo.js"></script>

• 嵌入式

在script标签对中写js代码

• 事件后

注意事项：

1.嵌入式的script标签上边不写src属性

2.外部引入方式中的js文件不写script标签对

3.几种js引入方式都是相互关联的，可以进行相互操作

调试工具：

• 输出到控制台

console.log(1)

• 弹出框

alert("a")

• 写入到页面中（识别标签对）

document.write("b")
document.write("
识别标签对
");

• 接收用户输入的一个数：

prompt("请输入一个数")

• 有确定与取消按钮的弹框

confirm("确定退出吗")；   //true  false

注释：

• 单行注释：// ctrl+/

• 块级注释：/**/ ctrl+shift+/

变量：

一个容器，用来存储数据；

利用var关键字声明变量。

命名规范：

数字、字母、下划线、$

• 不能以数字开头
• 区分大小写
• 变量要有意义
• 不能用关键字（js中已经用到的）命名
• 不能用保留字（js中未用到的）命名
• 首字母大写法 Object Array
• 驼峰命名 getElementByld

赋值：

1.先声明后赋值：`var a;a=12;

2.声明的同时赋值

3.一次性声明多个变量在赋值，用逗号隔开

4.一次性声明多个变量同时赋值

注意事项：

• 先声明后使用

• 变量的默认值为undefind

• 新值覆盖旧值

• 变量可以重复声明

• 不用var关键字声明变量，但是赋值了，不报错，这个变量是全局变量

• 不用var关键字声明变量，但是没有赋值，会报错

• 先使用后声明，会输出默认值，`undefined.预解析（var,function）与解析；

数据类型：

变量中存放的数据的类型，按照数据在内存中的存储位置，分为基本数据类型与引用数据类型；

基本数据类型：（栈区）

• number（数字型）：正数、负数、小数、二进制、八进制、十进制、十六进制、科学计数

  NaN:特殊的number型（not a number).期望出现数字，但不会出现时，生成nan
  

• string（字符串型）：加单双引号

• boolean(布尔型)：true，false（真假）

• undefined：变量声明但未赋值；变量直接赋值为undefined

• null：直接赋值null，typeof的结果为object；

引用数据类型：（堆区）

• object:对象

  • 数组、对象的数据类型是object

  • 函数的数据类型是function

  • typeof null的结果是object

typeof检测变量的数据类型

运算符：

算数运算符：

+ - * / % ++var var++ --var var--

• - * / %

两个操作数是数字型，如果不是会隐式调用Number（）函数，试图转换为数字型。true 1;false 0;

null 0；undefind NaN;数字型字符串转化为number，非数字型字符串转换为NaN;

• +

  • 加法：两个操作数都是number型；
  • 拼接：有一个操作数是字符串时 ，做拼接；
  • 拼接：（ES6）模板字符串

  `${i}-${j}`
  

• var++ ++var

  • ++在前，先做本条语句中的加法运算，再做其他运算；

  • ++在后先做其他语句中的其他运算，在做加法运算；

关系运算符：

< > >= == === != !==

返回值为布尔值；

• 如果两个操作数都是数字，正常比较大小；
• 如果两个数都是字符串、数字型字符串（第一位数），转换为ASCII码值进行比较；
• 如果一个操作数是数字，另一个操作数是字符串，要将字符串转换为数字，转换成功，正常比较，转换不成功，返回false；
• true==1 false==0
• ==要求数值相等 ===要求数据类型、数值相等；
• undefind==null

赋值运算符；

= += -= *= /= %=

var num=10;
num+=12;
console.log(num);    输出22

逻辑运算符：

测定值与变量之间的逻辑关系：

false、null、undefind、0、NaN、空字符串 -> false；

&&与

同真为真.返回第一个假值，如果没有假值，返回最后一个真值

|| 或

同假为假，返回第一个真值，如果没有真值，返回最后一个假值；

！非

取反

?? 空值合并操作符

//当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数
const nullValue = null;
const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;
let a;
let b = a ?? 5;

console.log(b); // 5
console.log(valA); // "valA 的默认值"
console.log(valB); // ""（空字符串虽然是假值，但不是 null 或者 undefined）
console.log(valC); // 42

?. 可选链操作符

//允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值
let customer = {
        details: {
          age: {
            num: '999',
              getsonme:function(){
                  return "有"
              }
          },
        }
	};
let customerCity = customer.details?.age?.nu ?? "无" 
//age是否存在?存在则继续链式.nu<值为undefind,所以返回 无>
console.log(customerCity); //无
let yes = customer.details?.age?.getsonme() ?? "无" 
console.log(yes) //有

&&= 逻辑赋值操作符

let x = null;
let y = 2;
x &&= y;
console.log(x); // 2
//如果x存在,则赋值,否则返回x 
//等价于 
x && (x = y)
//或者等价于 
if(x) {
  x = y
}

||= 逻辑赋值操作符

let x = 1;
let y = 2;
x ||= y;
console.log(x); // 1

??= 逻辑赋值操作符

let x;
let y = 2;
x ??= y;
console.log(x); // 2

逻辑运算真值表：

A	B	A&&B	A||B	!A
T	T	T	T	F
F	F	F	T	F
T	F	F	T	T
F	T	F	T	T

三元运算符：

条件？值1：值2;

判断条件的真假，如果条件为真，执行1；如果为假，执行2；

特殊运算符：

• ，一次性声明多个变量
• （）提高优先级；

一元运算符：

• typeof:检测变量的数据类型
• new：实例化对象；

流程控制

代码的执行顺序

• 顺序结构
• 分支
• 循环

分支结构：

满足一定条件时；执行相应的代码；

单分支

if(条件){
满足条件执行的代码；
}

双分支：

if（条件）{
    满足条件时执行的代码；
}else{
    不满足条件时执行的代码；
}

多分支：

if(条件){
    满足条件1时执行的代码；
}else if{
    不满足条件1，满足条件2时执行的代码；
}else if{
    不满足条件1和2，满足条件3时执行的代码；
}
else{
    以上条件都不满足时执行的代码
}

嵌套分支：

if(){
   if(){}else{}
}else{
    if(){}else{}
}

switch

switch(变量){
        //值为变量能够取到的结果；值与变量的数据类型相同；
        case"值1"：语句1；break；（终止）
        case"值2"：语句2；break；
        case"值3"；语句3；break；
        default：以上条件都不满足时执行此语句；
}

注意：

• if中的条件不能重复
• switch用在条件有限的情况下

循环结构：

满足一定条件时，重复执行一段代码；

for循环：

for（初始条件；终止条件；步行值）{
    循环体；
}

while循环：

while（条件）{
    循环体
}

do while循环：

do{
    循环体
}while（条件）

跳出循环的语句：

• continue：跳出本次循环，后面的循环仍然会执行；
• break：终止循环，后面的循环不执行；

数组：

存储一系列相关信息；

声明：

// 使用数组字面量表示法
var arr=[];
// 使用array构造函数
var arr1 = new Array();   //创建一个空数组
var arr1 = new Array(20);   //创建一个长度为20的空数组
// Array.of 方法创建数组(es6 新增)
let arr = Array.of(1, 2);
console.log(arr.length);//2

let arr1 = Array.of(3);
console.log(arr1.length);//1
console.log(arr1[0]);//3

let arr2 = Array.of( 2 );
console.log(arr2.length);//1
console.log(arr2[0]);// 2
// Array.from 方法创建数组(es6 新增)
function arga(...args) {  //...args剩余参数数组,由传递给函数的实际参数提供
    let arg = Array.from(args);
    console.log(arg);
}
arga( arr1 , 26,  from ); // [ arr1 ,26, from ]

赋值：

• 声明的同时赋值：

var arr=[1,2,3,4]

• 先声明后赋值：

var =[]
arr[0]=1,arr[1]=3; //通过下标赋值

访问：

通过下标去访问；arr[下标],下标开始为0，结束为arr.length-1

长度：

arr.length

遍历：

全部访问每一个元素；

for(var i=0;i<arr.length;i++){
    arr[i];
}

注意：

• 数组元素的数据类型可以是任意数据类型；
• 数组元素的默认值为undefind
• 数组可以越界访问；

二维数组：

数组的每一个元素数据类型还是数组；

• 访问：双重下标访问

arr[i][j]  arr[0][0]

• 遍历：

var arr=[[1,2,3],[2,3,],[true]];
for(var i=0;i<arr.length;i++){
    for(var j=0;j<arr[i].length;j++){
        arr[i][j];
    }
}

赋值数组

浅拷贝：传址

var arr1=arr;

深拷贝：传值

var arr1=[];
for(var i=0;i<length;i++){
    arr1.push(arr[i]);
}

定义函数；

• function关键字

function functionname(){
    
}

• 字面量

var variable=function(){
    函数体
}

• 实例化构造函数

  调用函数：

  • functionName()

  • variable()

参数：

使函数更加灵活；

• 参数可以是任意数据类型

形参：

定义函数里括号中的叫形参（目的是接受实参）

实参：

调用函数里括号里的叫实参，目的是给形参传值。

参数的传递：

• 形参=实参，–对应，从左向右传递；
• 形参>实参，多余的形参为undefind;
• 形参<实参：用arguments对象接受；

arguments：

• 接收函书中所有实参
• 定义函数时在函数内部自动生成的对象，在函数外部不能访问；
• 属性：length；长度； callee：返回函数；

for(var i=0;i

剩余参数：

• 接收函书中剩余参数
• rest是一个数组，可以使用数组的方法；

function fn(a,b,...rest){
    console.log(rest);
    for(var i=0;i<rest.length;i++){
        rest[i];
    }
}

参数的默认值：

• 分支结构
• 三元运算符
• 逻辑或||
• ES6参数默认值；

返回值：

• return终止函数，后面的代码不执行；
• 函数的返回值可以是任意数据类型；
• 一个函数可以有多个return语句，最终只执行一个return语句；
• 函数没有返回值，则返回undefind

内置顶层函数：

进行数据类型转换；ECMAscript自带的函数，在全局都能访问的函数；

• escape（）：对字符串进行编码；
• unescape（）：对编码的字符串进行解码；
• Number（）：将任意数据类转换为number型；
• String():将任意数字类型转换为字符串型；
• Boolean（）：将任意数字类型转换为布尔型（6种假值）；

0 null NaN undefind 空字符串 false

• parselnt():将字符串转换为整型；方法超过16位失真

识别数字开头(+、-、空格)的到数字结尾的字符串；其余返回NaN;

• parseFloat：将字符串转换为浮点型；

识别数字开头（+、-、空格）的到数字结尾的字符串，其余返回NaN;

• isNaN:判断一个数是否能转换为数字型，能返回false，不能返回true；
• eval（）：将字符串转换为js的命令执行；

数据类型转换：

• 隐式数据类型转换；

• 强制数据类型转换；

回调函数：

把一个函数传递给另一个函数，当做参数的这个函数调用时就叫做回调函数；

作用域：

变量起作用的范围；

全局作用域；

在函数外部用var关键字声明的变量；

不用var关键字声明但赋值的变量；

块级作用域：

{ } let const

let:

• let 用来声明变量，可以识别块级作用域；

• let不存在变量提升 （先访问后声明） ；

• let不可以重复声明；

const

• const用来声明常量。声明的同时赋值；可以识别块级作用域；
• const不存在变量提升；
• const不可以重复声明；

作用域链：

为变量赋值时遵循的一条规则，从内到外进行访问，局部作用域优先于全局作用域；

局部作用域；

在函数内部用var关键字声明的变量

形参是局部变量；

立即执行函数 (匿名函数)

(function(){}());

apply()和call()

call() 方法分别接受参数。

apply() 方法接受数组形式的参数

//  apply
  let ob1 = {
    namefunc: function (city, rural) {
      return `${this.firstname},${city},${rural}`
    }
  }
  let ob2 = {
    firstname: '郭辛强'
  }
  let ob3 = ob1.namefunc.apply(ob2, ["万安镇", "兰家节村"])
  console.log(ob3); /*郭辛强,万安镇,兰家节村*/

对象：

• 类：相同属性具有相同方法的对象的集合；
• 对象：属性与方法的集合；
• 属性：对象具有的特征；
• 方法：对象具有的功能；

声明对象：

• 利用构造函数实例化对象；

function Computer(color,size,price){
        this.color=color;
        this.size=size;
        this.price=price;
        this.code=function(){
           "敲代码"
        }
        this.play=function(){
            "玩游戏"
        }
}
let apple=new computer("white",100,100000);
let asus=new  computer("black",10,1000000);  
console.log(apple);//访问对象；
console.log(asus);//访问对象；
apple.band="APPLE";//添加属性；
console.log(apple.color);//访问属性；0 b
console.log(apple.play);//访问方法；
delete apple.color;//删除属性；
apple.color="red";//修改属性(直接覆盖)；
for(let i in apple){//访问；
         console.log(i)；//键  属性名；
         console.log(apple[i]);//值  属性 方法；
}
console.log(apple.constructor);//显示构造函数

• json:

let apple={
    color:"white",
    size:15.6,
    price:10000,
    code:function(){
        console.log(code)
    },
    play:function(){
        console.log(play)
    }
}
console.log(apple.color);
apple.code();
for(let i in apple){
    console.log(apple[i])
},
for(let i in apple){
    console.log(i);    
}    
console.log(apple.constructor);//显示构造函数

• 利用类实例化对象 es6

class computer{
    constructor(color){
        this.color=color;
        this.size=size;
    }
    play(num){
        console.log(num);
        console.log(this.color);
    }
}
let apple=new Computer("red");

• 实例化object：

var obj=new object();

增删改访问：

• 增：对象
• 删：
• 改：
• 访问：

遍历：（键值对）

for(let i in obj){
    i;// 键  属性名
    object[i];//值 属性 方法
}

constructor：

对象的属性，返回对象的构造函数； apple.constructor

instanceof:

console.log(对象 instanceof 构造函数)，用来判断对象的构造函数，是true，否false；

prototype:

• 构造函数的属性；json；
• 存放公共属性和方法；解决构造函数不能共享属性和方法的问题造成资源浪费；
• 原型、原型对象；(格式)构造函数点.proyotype;

Person.prototype={
    height:180,
    code:function(){
        
    }
}

--proto--

• 对象拥有的属性；

• 对象的–proto–属性。指向构造函数的原型对象；

• --proto--形成原型链，实现继承；

• 继承顺序：找自己、找构造函数、找原型对象、Object.prototype、null；

原型链：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yPd7D1zf-1627262113135)(C:\Users\Administrator.USER-20190109DE\Desktop\JS\原型链继承.png)]

寻找对象属性与方法时遵循的规则；实现继承。

function Markey() {
    this.color="brown";
    this.height=180;
}
Markey.prototype.play=function(){
        console.log("game");
};
function Parson() {
    this.character="Extroversion";
    this.gander="man";
}
Parson.prototype=new Markey();
Parson.prototype.play=function () {
    console.log("wan");
}
Parson.prototype.height=110;
let student=new Parson();
console.log(student);
console.log(student.__proto__==Parson.prototype);
console.log(Parson.prototype.__proto__==Markey.prototype);
console.log(Markey.prototype.__proto__==Object.prototype);
console.log(Object.prototype.__proto__ == null);

数组对象：

属性：

• length：数组长度；
• __proto__：指向构造函数的原型对象；
• constuctor:返回构造函数；

方法：

• concat:arr.concat（[1,2,3,4])链接一个或多个数组，不会改变原数组；
• every:arr.every(function(ele,index,obj){return ele>0}).当所有元素都满足条件是，返回true，否则返回false；
• some:只要有一个元素满足条件，返回true；
• fill：arr.fill("a",start,end)用于将一个固定值替换数组的元素,会影响原数组；
• *filter:arr.filter(function(ele,index){return ele>2})过滤，从一个集合到另一个更小的集合；
• *map：映射，从一个集合到另一个集合;arr.map(function(ele){return ele*2})
• find:arr.find(function(ele){return ele>2})返回满足条件的第一个元素，没有满足返回false；
• findindex：arr.findindex(function(ele){return ele>2})返回满足条件的第一个元素的下标，否则返回-1；
• ***forEach:arr.forEach(function(ele,index){console.log(ele)})遍历数组；
• includes：arr.includes(1)判断是否包含指定元素，包含返回true，否则返回false;
• indexOf:arr.lastIndexOf(1)返回包含指定元素的下标（从后往前找），不包含返回-1；
• join:arr.join("-")将数组转换为字符串，默认用逗号拼接；
• toString:arr.toString()将数组转换为字符串，只能用逗号拼接；
• push：arr.push("a")向数组的后面添加一个元素或多个元素，返回新数组的长度，影响原数组；
• pop：arr.pop()删除数组的最后一个元素，返回删除的元素，会影响原素组；
• reduces:arr.reduce(function(tot,ele){return tot+ele})从·从前向后累加；
• reduceRight:arr.reduceRight(function(tot,ele){return tot+ele})从后向前累加；
• reverse:arr.reverse()反转，影响原数组；
• unshift：arr.unshit("a","b")在数组的前面插入一个或多个元素，返回新数组的长度，影响原数组；
• shift:arr.shift()删除数组的第一个元素，返回被删除的元素，影响原数组；
• sort：arr.sort(function(a,b){return a-b})排序a-b从小到大，b-a从大到小；
• slice：arr.slice(start,end)截取 从start位置开始到end位置，但不包含end在内；
• splice:万能的增加删除

arr.splice(index,num);
arr.splice(index,0,item1,item2);
arr.splice(index.4,item1,item2);

Math:用于执行数学任务。

Math	属性	方法
PI	属性就是 π，即圆的周长和它的直径之比。	Math.PI	document.write("PI: " + Math.PI);
abs(x)	返回数的绝对值。	x 必需。必须是一个数值。	document.write(Math.abs(7.25) + “ ”)
ceil(x)	可对一个数进行向上取舍	ceil() 方法执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数。	document.write(Math.ceil(0.60) + “ ”)
floor(x)	可对一个数进行下舍入	floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。	document.write(Math.floor(0.60) + “ ”)
log(x)	可返回一个数的自然对数	参数 x 必须大于 0。	document.write(Math.floor(0.60) + “ ”)
max(x,y)	返回 x 和 y 中的最高值。	参数中最大的值。如果没有参数，则返回 -Infinity。如果有某个参数为 NaN，或是不能转换成数字的非数字值，则返回 NaN。	x： 0 或多个值。在 ECMASCript v3 之前，该方法只有两个参数。
min(x,y)	返回 x 和 y 中的最低值。	参数中最小的值。如果没有参数，则返回 Infinity。如果有某个参数为 NaN，或是不能转换成数字的非数字值，则返回 NaN。	document.write(Math.min(5,7) + “ ”)
pow(x,y)	返回 x 的 y 次幂。	如果结果是虚数或负数，则该方法将返回 NaN。如果由于指数过大而引起浮点溢出，则该方法将返回 Infinity。
random()	返回 0 ~ 1 之间的随机数。	0 到1之间的一个伪随机数。（不包括1）
round(x)	把数四舍五入为最接近的整数。	与 x 最接近的整数。
sqrt(x)	返回数的平方根。	参数 x 的平方根。如果 x 小于 0，则返回 NaN。
toSource()	返回该对象的源代码。	该方法在 Internet Explorer 中无效。
valueOf()	返回 Math 对象的原始值。	该原始值由 Math 对象派生的所有对象继承。 valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

源代码：toSource的用法：
function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

document.write(bill.toSource());

字符串：

属性:

• constructor
• proto
• length:字符串的长度；

方法：

• charAt(i):返回指定位置对应的字符；’
• charCodeAt(i):返回指定位置对应字符的ASCll码值；
• String.fromCharCode(99):将ASCll码值转换为指定的字符；
• indexOf(str1):返回指定字符串str1在字符串str中首次出现的位置；
• lastIndexOf(str1):返回指定字符串str1在字符串str中最后出现的位置，否则返回-1；
• includes(str1)：判断字符串str中是否包含str1，是返回true，否则返回false；

替换：

• replace(str1,str2):利用str2替换str1首次出现的位置，不会对原字符串造成影响；

重复：

• repeat(num)：字符串重复出现num次；

转换：

• **toUpperCase():转换为大写
• **toLowerCase():转换成小写；
• split(标志)：按照指定的标识符将字符传转换为数组；

截取：

• ***slice(start,end):截取开始到结束的位置，不包含结束位置的字符；
• subString(start,end):不支持负数，
• substr(start,length):从指定位置开始截取指定长度的字符串；

BOM（浏览器对象模型）：

负责窗口与窗口之间的通信；window对象是其核心对象；

window对象：

• history

• location

• dom

• screen（屏幕）

• navigation（航行）

• frames（框架）

• closed	返回窗口是否已被关闭。
  defaultStatus	设置或返回窗口状态栏中的默认文本。
  document	对 Document 对象的只读引用。(请参阅对象)
  frames	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
  history	对 History 对象的只读引用。请参数 History 对象。
  innerHeight	返回窗口的文档显示区的高度。
  innerWidth	返回窗口的文档显示区的宽度。
  localStorage	在浏览器中存储 key/value 对。没有过期时间。
  length	设置或返回窗口中的框架数量。
  location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
  name	设置或返回窗口的名称。
  navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
  opener	返回对创建此窗口的窗口的引用。
  outerHeight	返回窗口的外部高度，包含工具条与滚动条。
  outerWidth	返回窗口的外部宽度，包含工具条与滚动条。
  pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
  pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
  parent	返回父窗口。
  screen	对 Screen 对象的只读引用。请参数 Screen 对象。
  screenLeft	返回相对于屏幕窗口的x坐标
  screenTop	返回相对于屏幕窗口的y坐标
  screenX	返回相对于屏幕窗口的x坐标
  sessionStorage	在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
  screenY	返回相对于屏幕窗口的y坐标
  self	返回对当前窗口的引用。等价于 Window 属性。
  status	设置窗口状态栏的文本。
  top	返回最顶层的父窗口。

属性：

• 窗口的大小：

  window.innerWidth(浏览器的宽度) ie8及以下的浏览器不支持；

  window.innerHeight(浏览器的高度)

  document.documentElement.clientWidth  浏览器的高度  ie8及以下的浏览器支持
  document.documentElement.clientHeight  浏览器的高度
  

  window.screenLeft 浏览器距离窗口左边的距离

  window.screenTop 浏览器距离窗口顶部的距离

方法：

• alert（）；
• prompt（）；
• confirm（）；
• open(url):打开新窗口
• close():关闭窗口
• setlnterval(fn,1000)在一定时间间隔重复不断地执行一段代码
• clearInal(t):清除时间函数；
• setTimeout(fn,1000)：在一定时间间隔后只执行一段代码
• clearTimeout(t):清除时间函数；

history：

• 历史纪录对象

属性;

• length 历史记录的长度

方法：

history.forword() 前进

history.back() 后退

history.go() 刷新

location对象：地址对象

属性:

• href:获取或设置地址

方法：

• reload():重新加载；

DOM（文档对象模型）：

获取元素：

• id（一个）

document.getElementById("box");  //id名

• 类名（HTML集合）下标访问

    document.getElementsByClassName("类名");  

• 标签名（HTML集合）下标

document.getElementByTagName("标签名"); 

• 获取第一个元素

document.querySelector("选择器")；

• 获取节点列表 forEach （集合） 下标

document.querySelectorAll("选择器")；

操作内容：

• innerHTML 识别标签对
• innerText 不识别标签对

操作样式：

设置：

• 行内 obj.style.color="#fff"

  • 批量操作类obj.classList.add("box")添加类
  • obj.classList.remove("box")移出类
  • obj.classList.toggle("box")切换类

• 操作id

obj.id="box"添加id

obj.id=""删除id

获取：

• 行内：obj.style.background
• 通用：getComputedStyle(obj,null).width

操作属性：

标准属性：

• 获取：obj.src
• 设置：obj.src=属性值

非标准属性：

• 设置：obj.setAttribute(属性名，属性值)
  • 获取：obj.getAttribute(属性名)

元素的尺寸与位置：

• offsetWidth:元素的真实宽度 width+padding+border;
• offsetHeight:元素的真实高度
• offsetLeft:获取具有定位属性的父元素左边的距离；如果没有定位属性，
• offsetTop:获取具定位属性的父元素的上边的距离；
• scrollTop:获取具有滚动条元素滚动时距离窗口顶部的距离；
• scrollLeft：获取具有滚动条元素滚动时距离窗口左边的距离；

window.onscroll=function(){
    let top=document.body.scrollTop=document.documentElement.scrollTOP;
    let top=document.body.scrollLeft=document.documentElement.scrollLeft;
}

节点类型：

• 整个文档叫做文档节点
• 文本内容叫做文本节点；
• 元素属性叫做属性节点；
• 注释标签叫做注释节点；
• 标签叫做元素节点；

节点的详细信息：

	nodeType节点类型	nodeName节点名称	nodeValue节点值
文档节点	9	#document	null
元素节点	1	大写的标签名	null
属性节点	2	属性名	属性值
注释节点	8	#comment	注释的内容
文本几点	3	#text	文本内容

属性：

• childNodes获取所有子节点；
• firstChild获取第一个子节点；
• lastChild获取最后一个子节点；
• nextSibling获取下一个兄弟节点；
• previousSibling获取上一个兄弟节点；
• parentNode获取父节点
• children获取所有的子元素；
• firstElementChild获取第一个子元素；
• lastElementChild获取最后一个子元素；
• previousElementSibling获取上一个兄弟元素；
• nextElementSibling获取下一个兄弟元素；

方法：

• 创建：document.createElement(标签名)；

• 插入：父节点 . appendChild(新节点)； 插入父节点的末尾

  ​ 父节点 . insertBefore(新节点，被插入的节点)

• 删除：父节点 . removeChild（要删除的节点）；

• 替换：父节点 . replaceChild（新节点，旧节点）；

• 克隆：节点 . cloneNode() false:只克隆本节点，默认值； true：包括子节点内的内容；

事件：

• 鼠标：click,dblclick,mouseleave,mouseover,mouseout,mousemove,mouseenter;

• 键盘：keydown,keyup,keypress

• window:load,scroll,resize

• 表单：focus，blur,submit,reset,input(表单输入事件)，change(改变内容并失去焦点)，

添加事件的方式：

• 行内:
• on+type
• addEventLisenter(type,callback,boolean)事件监听

同一个事件源的同一个事件，可以添加多个事件处理函数；

obj.addEventLisenter(type,fn,false);
obj.addEventLisenter(type,function(){},false);

• removeEventListener(type,callback)

obj.removeEventListener("click",fn1);

事件对象：

记录事件发生时的详细信息；

属性：

键盘：

• key:键盘码；

• keycode：键盘码对应的ASCll码；

• alt 18 ctrl 17 shift 16

• 上（38）右（39）下（40）左（37）

鼠标：

• offsetX，offsetY:获取距事件源左上角的水平、垂直方向距离；

• clientX，clientY：获取距浏览器左上角的水平、垂直方向距离；

方法：

• e.preventDefault(): 阻止浏览器的默认行为；

<a href="#">a>
<a href="javascript:;">a>
<a href="javascript:void(0);">a>

事件流：

事件发生时会在元素节点与跟节点指尖按照特定顺序传播，路径经过的所有节点都会收到该事件，这个传播过程叫做DOM事件流

事件流类型：

• 冒泡事件流：事件传播从最确定的元素到最不确定的元素；addEventListener(false),on+type;
• 捕获型事件流：事件传播从最不确定的元素到最确定的元素；addEventListener(true)

事件流三阶段:

• 捕获阶段
• 目标阶段
• 冒泡阶段

事件委派：

把原来加给子元素的事件绑定到父元素身上；

应用场景:

• 大量元素
• 异步加载的元素

e.target:获得当前元素

本地存储：（h5）

• localStorage:

​ 存：localStorage.setltem(key,value);

​ 取：localStorage.getltem(key)

​ 删：localStorage.removeItem(key)

• sessionStorage:

​ JSON.stringify():将对象转换为字符串；

​ JSON.parse()：将字符串转换为对象；

localStorage\sessionStorage\cookis的区别：

cookis是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）；

cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递；

localStorage\sessionStorage不会自动把数据发给服务器，仅在本地保存；

存储大小：

cookie数据大小不能超过4k;

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。      数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。    - 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

`localStorage、sessionStorage、cookie的区别：

1. 共同点：都是保存在浏览器端，且同源的。
2. 区别：    - cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。    - 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。      数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。    - 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

key:键盘码；

• keycode：键盘码对应的ASCll码；

• alt 18 ctrl 17 shift 16

• 上（38）右（39）下（40）左（37）

鼠标：

• offsetX，offsetY:获取距事件源左上角的水平、垂直方向距离；

• clientX，clientY：获取距浏览器左上角的水平、垂直方向距离；

方法：

• e.preventDefault(): 阻止浏览器的默认行为；

<a href="#">a>
<a href="javascript:;">a>
<a href="javascript:void(0);">a>

事件流：

事件发生时会在元素节点与跟节点指尖按照特定顺序传播，路径经过的所有节点都会收到该事件，这个传播过程叫做DOM事件流

事件流类型：

• 冒泡事件流：事件传播从最确定的元素到最不确定的元素；addEventListener(false),on+type;
• 捕获型事件流：事件传播从最不确定的元素到最确定的元素；addEventListener(true)

事件流三阶段:

• 捕获阶段
• 目标阶段
• 冒泡阶段

事件委派：

把原来加给子元素的事件绑定到父元素身上；

应用场景:

• 大量元素
• 异步加载的元素

e.target:获得当前元素

本地存储：（h5）

• localStorage:

​ 存：localStorage.setltem(key,value);

​ 取：localStorage.getltem(key)

​ 删：localStorage.removeItem(key)

• sessionStorage:

​ JSON.stringify():将对象转换为字符串；

​ JSON.parse()：将字符串转换为对象；

localStorage\sessionStorage\cookis的区别：

cookis是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）；

cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递；

localStorage\sessionStorage不会自动把数据发给服务器，仅在本地保存；

存储大小：

cookie数据大小不能超过4k;

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。      数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。    - 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

`localStorage、sessionStorage、cookie的区别：

1. 共同点：都是保存在浏览器端，且同源的。
2. 区别：    - cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。    - 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。      数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。    - 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。