[JavaScript知识库] 前端白菜纯JavaScript

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端白菜纯JavaScript -> 正文阅读

[JavaScript知识库]前端白菜纯JavaScript

变量

变量即数据存储的容器

变量需要先声明：

es5 ：参考语法篇

var

变量命名规范：

1见名知义

变量可以是字母，数字，下划线，但不能是数字开头

小写字母开头，小驼峰命名，第二个单词首字母大写

不可以是关键字和保留字

因为声明构造函数对象是大写开头

es6 ：语法篇

let 有块级作用域不存在变量提升

不允许重复声明变量 let 替代 var

const 声明常量

定义后不能修改不变的值就能用常量声明

函数表达式可以用const声明

对象声明可以用const 声明

引入外部模块使用常量

定义的数据类型六种

数值：Number：

字符串: String: 定义字符串初始可以给"" 空串

布尔： Boolean：

未定义： Undefined 声明未赋值的变量自动给

空： Null 未初始化对象初始值可以给 null

对象： Object

数据类型：

原始数据类型： typeOf()检测

原始类型赋值时赋值的是推内存中数据

Number；//Number

String //String

Boolean //Boolean

Null //object

Undefined；//undefined

引用数据类型： instanceOf（）

引用类型赋值存储在堆内存中的地址栈内存中数据一样除非深拷贝

object：
Array // arr instanceof Array true 则是array false则不是
Date //
Math //
RegExp //
。。。

表达式：

通过运算符将变量，字面量组合起来，就是表达式

每一个表达式都有一个固定返回值（表达式的结果）

列如： ‘helloworld’ + 123;

字面量：就像字符串数字字面上的意思

返回值：表达式的结果

运算符

== 只比较数值

=== 全等于比较数据类型和数值

&& 逻辑与二边条件都得满足

|| 逻辑或左右一个满足条件即可

！逻辑非

！！把任何数据类型转化为布尔类型

？条件运算符就像三目运算符 bool ？ value1：value2

typeOf（a）其他任何操作未声明的变量都报错！但是typeOf 是个意外！！

条件语句

if(条件){

条件可以是布尔值表达式

if判断条件是否满足判定执行

}else{

不满足条件则执行此段代码

}

循环语句

while（条件）{

}

do{ 不管条件是否成立都执行一次

}while( 条件 ){

}

for（条件）{

双for 循环可以来冒泡选择排序遍历

}

break: 跳出循环

continue: 只是结束本次循环会继续后续的循环

witch（）{

case1：

case2：break；

default：

}

函数基础

函数声明

一次声明可多次调用

函数需要调用才会执行

函数返回值 return 只能返回一个同步的代码

解决方法：

1回调函数：将函数作参数传递

函数参数

形参：占坑的形参可以比实参多用多出来的行参之会提示undefined

为了避免undefined 可以给形参赋值即设置默认值当传入参数时以实参为准；

实参：实际传参多出来的实参不显示

三 函数声明提升

函数声明的时候会整体提升

函数调用前会进行预解析

立即执行函数

一经声明立即执行的函数

声明之后直接调用不能被多次调用执行完就被销毁了

应用场景第三方库的封装

匿名函数

函数没有名字一般将匿名函数当成参数传入

回调函数

即将匿名函数 当成参数传递给另一个函数，或方法。解决了函数return 不能返回异步代码的问题；


      let count = 0; 

        let target = 'hello world';

        function getDate(fn,c){

            count-0; // fn = getDate(()=>{})

      let  timerId  = setInterval(()=>{

        count ++;

        if(count>=5){

        clearInterval(timerId);

        }

                fn(target,count);

            },500)

        }

        getDate((d,c)=>{

            console.log(d,c); //d = target

        })

递归函数：

在函数体内调用自己解决了函数传递同步代码的问题


let target = Math.floor(Math.random() * 100 + 1);

        function guessNumber() {

            let number = prompt('请猜数多少');

            if (number == target) {

                alert('恭喜回答正确');

            } else if (number > target) {

                alert("Your guess so big");

                guessNumber();

            } else {

                alert('you guess than target so small');

                guessNumber();

            }

        }

        guessNumber();

函数表达式

定义变量或常量，匿名函数赋值给一个变量

没有声明提升的特性一次声明可多次调用

方法

arguments 是一个类数组对象就是伪数组。代表传给一个function的参数列表。

Array.prototype.slice.call(arguments); 用此方法来将伪数组转换数组

fn(1,2) argument[0]=1

函数作用域链

函数自带局部作用域即每创建一个函数就会创建新的作用域

里面函数可以访问外部函数的值外面的函数无法访问内部函数的值

这样就会形成作用域链的效果

闭包

声明在一个函数中的函数叫做闭包函数当内部函数被保存到外部时就形成闭包

内部函数总是可以访问其所在外部函数中声明的参数的变量，即使外部函数被调用内部函数返回之后外部函数任然不会被销毁。

箭头函数

箭头函数this 指向执行上下文普通函数指向的是调用该函数的对象

const fn = function（x,y）{

return x+y;

}

const fn = (x,y) => x+y;

构造函数：

new 用来创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

原型对象： prototype 是构造函数的一个属性，这个属性可以为构造函数原型实例添加方法为该原型对象使用

利用原型链：实现继承（了解即可面试用）

    function Fn(name,age){

        this.name=name;

        this.age=age;

    }

    Fn.prototype.say=function(){

console.log('hello world Chunshuai')

    }



    var obj2 = new Fn("wang",20);

    console.log(obj2); // name:wang age 20 say

    // new 干了什么

    var obj= {};

        Fn.call(obj,"gao",19);

        obj.__proto__=Fn.prototype;

    console.log(obj) // name:gao age:19 say

MDN：new

创建一个空的简单JavaScript对象（即**{}**）；
为步骤1新建的对象添加**proto**，prototype属性链接至构造函数的原型对象；
将步骤1新创建的对象作为**this**的上下文；
如果该函数没有返回对象，则返回**this**。

如果你没有使用 new 运算符， 构造函数会像其他的常规函数一样被调用， 并*不会创建一个对象**。***在这种情况下， this 的指向也是不一样的。

class 类：


class  Dog{

    constructor(name,agt){

        this.name = name;

        this.aget = age;

    }

    sayName(){

        console.log(`我是${this.name}`)

    }

}

let dog = new Dog('wangcai',2)

// console.log(dog.name)

Class Animal{

    constructor(name){

        this.name = name;

    }

    sayName(){

        console.log(`我是${this.name}`)

    }

}

    calss Dog extends Animal{

        constructor(name,agt){

            super(name);

            this.age = age;

        }

    }

let dog = new Dog('wangcai',2);

dog.sayName();

类：前端开发中大部分情况我们都是使用别人定义好的类（第三方库框架）

对象

自定义对象：封装

内置对象： Date ，获取当前时间

var T = new Date()
var T = new Date(‘2021-1-1 12:00:30’); 设置时间
获取时间 get
- getfullYear() 年
- getMonth() 月
- getDate() 日
- getDay() 星期
- getHours（）

Math对象：

floor（）向下取整
sqrt （）开方
random（）随机数
abs （）绝对值
pow （）乘方
ceil （）向上取整

宿主对象： document

第三方库的对象： jQuery Vue 等

面向对象

类：类型模版统称 ex: 狗类鸟类

对象：是类的一个实例，会具体到某一个事物上 ex：天上飞的那只鸟

继承：子类可以使用父类的属性和方法 ex 狗类继承至哺乳动物类

面向对象的编程思想：

ex：实现系统

即将代码写成一个个的模块类这个模块就实现处理这一类事物的某种功能谁对此模块有需求就调用即可

面向过程编程思想 ：

登录功能学生查询功能，设置学生成绩功能，学生选课功能。

即按步骤走谁要啥功能处理啥就谁去做

面向对象语法 es5没有类的概念，通过构造函数来实现的

构造函数的函数名，首字母大写

构造函数是用来创造对象用的

多态，接口。。。

数组

list=[]

var list = new Array();

遍历数组

while 循环遍历数组

for in 输出数组下标

for 循环遍历数组

for of 输出数组值

arr.map(funciton(v,i){

v是值 i 是下标 map的回调函数

})

方法

push 追加数组元素

map 遍历数组

sort 排序数组

filter（function(item){if(条件){return} }）过滤器过滤满足条件的元素，赋值给新数组

join 连接将数组连接成字符串

判断数组还是对象

instanceOf

Object.prototype.toString.call()

字符串

split 将字符串炸开成数组；

项目里尽量统一： ’ ’ / " " / 模版字符串${}

正则表达式

可以实现字符串的截取的规则替换字符

var reg = newReg()

var reg = //;

reg.test(str); test 返回值的布尔值

reg.exec(str); exec 返回值是匹配的内容

[] 表示范围

$ 以什么结尾

^ 以什么开头

() 分组

+匹配1位或多位同{1，}

？0位或1位，同{0，1}

. 匹配所有

\ 转义

\d 数字

\w 数字字母下划线

\s 空格或换行

g 贪婪模式

结构赋值

1数组结构赋值

[ ] 下标对应

let[n,m] = [10,20]

2对象结构赋值

{name：’张三‘，age：18}

{ } 对象 key值对应

function（{name}）{

console.log(name); //直接解构{} 得到张三

}

3通过结构赋值传递参数

DOM

是一套标准编程接口

我们通过dom这套接口来操作

location对象

location.href 属性返回当前页面的URL - “https://ww.biadu.com/"

location.hostname 主机域名： www.baidu.com

location.pathname 当前网页的路径和文件名 ‘/s’

location.port 端口： 8080

location.protocol 协议： https || http

navigate

获取浏览器信息

userAgent

元素节点1 属性节点2 文本节点3

document对象提供很多的API（接口）来操作Dom树。

获取节点：

document.getElementById();

document.getElementsByTag();

document.getElementsByClassName();

document.querySelector();

document.querySelectorAll();

设置元素内容 innerHTML innerText

节点操作：

节点操纵操纵元素节点就行其他的操作了解即可

创建元素节点： createElement

创建文本节点： createText Node

添加节点： appendChild

删除节点： removeChild

点击选中不选中


<style>

    .active{

        background-color: #f40;

        color: white;

    }

</style>

<body>

    <div class="box">

        <ul>

            <li class="active">南瓜</li>

            <li class="">黄瓜</li>

            <li class="">西瓜</li>

            <li class="">窝瓜</li>

            <li class="">冬瓜</li>

        </ul>

    </div>

    <script>

        var uls = document.querySelectorAll('li');

        for(let i = 0;i<uls.length;i++){

          uls[i].onclick = function(){

                if(uls[i].className != 'active'){

                    uls[i].className = 'active';

                }else{

                    uls[i].className = ''

                }

                return ;

            }

        }

    </script>

事件：

事件源：触发事件

事件流：事件流向

事件函数：执行代码

事件流：

二个流向：

1.从内层流向外层事件冒泡

默认情况下，事件会在冒泡阶段执行

2.从外层流向内层事件捕获

事件绑定：

addEventListener(‘eventType’,funciton)

element.onEventType = funciton


// 事件绑定-封装

// ele 元素  type 事件类型 handler回调函数；

function bindEvent(ele,type,handler){

    if(ele.addEventListener){

        ele.addEventListener(type,handler)

    }else if(ele.attachEvent){

        ele.attachEvent('on'+type,handler)

    }else{

        ele['on'+type] = handler

    }

}


// 封装通用的解绑函数

function unBind(ele,type,handler){

    if(ele.removeEventListener){

        ele.removeEventListener(type,handler)

    }else if(ele.detachEvent){

        ele.detachEvent('on'+type,handler)

    }else{

        ele['on'+type] = null

    }

}

//绑定如果使用的匿名函数就会无法解绑 - addEventListener

区别：

addEventListener 同一元素的同一事件类型添加多个事件，不会被覆盖，而onEventType 会覆盖。

addEventListener可以设置元素在捕获阶段触发事件，而onEventType不能

addEventListener(eventType,function,boolean); 默认false 触发 true 捕获阶段触发

阻止事件冒泡：

event.stopPropagation()

e.cancelBubble = true;

事件委托：

让子元素事件委托给父元素来解决


var e  = e || window.event;

e.target  ||  e = event;

事件类型：

鼠标事件：点击移入移出

键盘事件： keyup keydown keyCode

触屏事件：

键盘事件操纵元素盒子移动

ex：


div.box>

let box = document.queryselector('.box');

document.onkeydown = function(e){

    let code = e.keyCode;

    switch(Code){

        case 37: box.style.left = box.offsetLeft -num +'px' break;

        case 38:box.style.top = box.offsetTop - num +'px' break;

        case 39: box.style.left = box.offsetLeft +num +'px' break;

        case 40: box.style.top = box.offsetTop + num +'px'

    }

}

offset获取 Left Top

client 页面 pageX pageY

计时器：

setTimeOut（）

clearTimeOut（）

setInterval（function（）{}，times）

clearInterval（）

防抖与节流：

解决性能问题，开发中常会遇到。

防抖：对于事件内多次触发事件的情况，可以使用防抖停止事件持续触发。多次触发只执行一次；点击提交

节流：防止短时间内多次触发使事件的情况，但是，时间间隔事件内，还需要不断触发。 ex: window.onScroll 事件


// 防抖： 在这一段事件多次触发 变为最后一次执行 只执行一次

///对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null，就可以再次点击了

let timer = null

window.onscroll = function(){

  if(timer!==null){

      clearTimeout(timer);

  }

    timer = setInterval(()=>{

    if(document.documentElement.scrollTop >500){

        btn.style.display = 'none';

    }else{

        btn.style.display = 'block'

    }

        timer = null;

    }.300)

}

// 节流 throttle  设置节流闸  将多次执行变成每隔一段时间执行 持续执行  每次触发事件时都判断当前是否有等待执行的延时函数。

let flag = true;

window.onscroll = function(){

  if(flag){

      setInterval(()=>{

        ccc();

        timer = null;

    }.300)

  }

  flag = false;

}

window.onscroll 事件

window.scrollTO(0,0) // x , y 轴

异步编程：

同步编程：是由上倒下执行输出

异步编程：不会受程序卡顿影响

Promise；

专门用来处理异步操作

1回调函数解决


        let target = 'hello world';

        function getDate(fn,c){

// fn = getDate(()=>{})

      let  timerId  = setInterval(()=>{

  fn(target);

            },500)

        }

        getDate((d)=>{

            console.log(d); //d = target

        })

2 resolve .then


let target = 'hello world';

        function getDate(){

            return new Promise((resolve)=>{

                setInterval(()=>{

                    resolve(target);

                },500)

            });

        }

        let p = getDate();

        p.then((data)=>{

            console.log(data);

        })

3 async await

async 异步编程 resolve回调

await 会实现等待的过程

await 后接promise对象


function getDate(){

    return new Promise((resolve)=>{

        setTimeout(()=>{

            resolve(target);

        },500)

    })

}

async  fun(){

    let da1 = await getDate();

    console.log(da1);

    let da1 = await getDate();

    console.log(da1);

    let da1 = await getDate();

    console.log(da1)

}

fun();

一起学习一同成长；###### 变量