JavaScript学习笔记

js相关知识点

1.输入输出语法

(1)document.write(‘要输出的内容’)，是输出语法，如果内容含标签，那将会解析成网页元素

(2)alert(‘输出的内容’)，页面弹出对话窗进行输出

(3)console.log(‘输出的内容’)，控制台输出语法，用于日志查看

(4)prompt(‘’),是输入语法，会有弹窗进行输入，并获取所输入的信息

2.变量的声明

主要用let来进行赋值，其中参数的命名规范一般用驼峰来表示

而var经常用于旧版的JS文件中，但是不规范，其主要问题有：
(1)可以先使用再声明
(2)声明过的变量可以重复声明，后者会覆盖前者
(3)变量提升， 全区变量，没有块级作用等

3.数组

用let arr = []来定义

arr.length用于表示数组长度

4.常量

用const来定义，里面的内容不变，而且定义的时候必须进行赋值

5.数据类型

基本数据类型

number 数字型，string 字符串型，boolean 布尔型，undefined未定义型，null 空型

引用数据类型

Object 对象

%是求余数符号，其优先级同于乘除法，从左到右执行

NaN是计算错误，无论进行什么计算都会得出NaN

单引号、双引号、反引号包裹的数据都是string类型

+号能够起到“数字相加，字符串相连”

模板字符串（免去字符串拼接）document.write(我今年${age}岁了)=document.write("我今年"+age+"岁了")

布尔类型，是非，false和true

undefined，未赋值类型的变量，

null，赋值了，但是内容为空

用typeof检测，直接typeof x

6.类型转换

隐式转换：使用“+ - / ”等，能够直接将字符串转换为数字类型，ex：console.log(+“123”)

显示转换：console.log(Number(str))或者console.log(parseInt(12.34px))后者最终会输出12（因为定义成了int类型，可以改成parseFloat）

7.运算符

(1)赋值运算符：= += *=

(2)一元运算符：‘±’，++，–，

(3)比较运算符：（值是否相等），=（值和类型是否都相等），！=（两边是否不全等）

(4)逻辑运算符：num > 5 && num < 10大于5且小于10————&&（逻辑与），||(逻辑或),!（逻辑非）

(5)运算符优先级：() -> 一元运算符 -> 算术运算符 -> 关系运算符 -> 相等运算符 -> 逻辑运算符（先&&后||） -> 赋值运算符 -> 逗号运算符
\

8.语句

(1)表达式与语句：表达式是可以被求值的代码，语句是一段可以执行的代码
(2)分支语句：

if语句：（数字类型里除了0都为真，字符串类型里除了空字符串都为真）

三元运算符语句：条件 ? 满足条件执行的代码 : 不满足条件执行的代码

(3)Switch分支语句：

switch(数据){
    case 值1
        break
    case 值2:
        break

}

(4)循环语句：while循环(三要素：1、变量起始值 2、终止条件 3、变量变化量):
while(循环条件){
循环体
}

(5)循环词：break：跳出循环；continue：提前结束，重新执行循环

(6)for循环：for(){}

9.操作数组arr（增删改查）

查：对应角标直接输出

改：直接赋值，覆盖

增：arr.push(element1,element2,...,elementn)添加到数组末尾，返回值是新的长度；arr.unshift(element1…)添加到数组开头，返回值也是新的长度

删：arr.pop()删除最后一个元素，返回删除的值；arr.shift()删除开头的一个元素，返回删除的值；arr.splice(start_position,delete_count)删除指定位置开始的几个元素，自己设定

排序：arr.sort(function(a,b){ return a-b})升序；arr.sort(function(a,b){return b-a})

10.函数

1.函数可以设置返回值，return

2.具名函数（常规）：function fn(){} 匿名函数：let fn = function(){} 立即执行函数：(function (){console.log(11)})();or(function(){console.log(11)}())——一般都用于避免全局变量之间的污染

3.逻辑中断:x = x || 0（前真后不执行） y = y && 0（前假后不执行，全真输出后面的值）

11.对象

1.无序的数据集合（相对于数组）
2.

let obj = {
    name: dyp,
    age: 12,
    sex: man,
    fu : function(){

    },
    ha : function(){

    }

}

3.新增属性写法: obj.NewThing = 123
4.查找的两种写法：console.log(obj.name)console.log(obj[‘name’])
5.遍历对象:
for(let k in obj){
console.log(obj[k])
}//此时k是字符串的形势
6.数学内置对象random（随机函数）,ceil（向上取整）,floor（向下取整）,max（求最大值）,min（求最小值）,pow（幂运算）,abs（开方）

random的使用:
function Ran(m,n){
console.log(Math.random()*(n-m+1)+m)
}//求m到n的随机数

js进阶

12.作用域（局部&全局、JS垃圾回收机制、闭包、变量提升）

1.局部作用域
(1)函数内部声明的变量，在函数外部无法被访问
(2)函数的参数也是函数内部的局部变量
(3)不同函数内部声明的变量无法互相访问
(4)函数执行结束后，函数内部的变量实际被清空了
2.块作用域（大括号）
(1)let声明的变量会产生作用域，var不会产生块作用域
(2)const声明的常量也能产生块作用域
3.作用域链
(1)变量查找机制，在函数被执行时，会优先查找当前函数作用域中查找变量
(2)如果当前内部找不到变量，会依次逐级查找父级作用域直到全局作用域
4.垃圾回收机制(内存的生命周期)
(1)内存分配：当声明函数、变量、对象的时候，系统会自动分配内存
(2)内存使用：读写内存，即使用变量等
(3)内存回收：使用完毕，由垃圾回收器回收不再使用的内存
5.注意
(1)通常情况下，全局变量一般不会回收，局部变量会被自动回收掉
(2)内存泄漏：分配的内存由于某种原因未释放或者无法释放
(3)栈：由操作系统自动分配释放函数的参数值、局部变量等，基本数据类型放到栈里面；堆：一般由程序员分配释放或垃圾回收机制回收，复杂数据类型放入堆中。
(4)引用计数：通过检查是否有指向对应对象的引用（跟踪记录被引用的次数，进行累加或者递减，当引用次数为0，则释放内存），弊端是，当两个对象相互引用时，虽然不再使用，但是垃圾回收器不会将他们回收

function fn(){
    let o1 = {}
    let o2 = {}
    o1.a = o2
    o2.a = o1
    return 'fail to reduce'
}
fu()

(5)标记清除法：将“不再使用的对象”定义为“无法到达的对象”，从根部能够到达扫描到的对象，即是可以到达的对象，无法到达的对象则进行回收
(6)闭包：封闭数据，提供操作，外部也可以访问到函数内部的变量

function outer(){
    let i = 1
    return function(){
        console.log(i)
        i ++
    }
}
const fun = outer()
fun()

13.正则表达式

(1)通常用于js中的截取替换指定文本内容
(2)定义正则 const objx = /正则表达式/
(3)test():objx.text(被检查的字符串),log out true/false
(4)exec():匹配成功则返回一个数组（内容一般是匹配到的字符串的位置等信息），否则返回NULL
(5)匹配字符:[a-z]//[0-9]=[/d]//边界符：^(匹配行首)//$(匹配行尾)//两个一起用，则是精确匹配的意思{/}^{h}ahaaha$/
(6)量词：*(repeat 0 or more)//+(repeat once or more)//?(repeat 0 or once)//{n}(repeat n times)//{n,}(repeat n or more)//{n,m}(repeat n to m)
(7)字符类：[]用于匹配字符集合，包含其中一个就返回true，但是只有一次，所以可以搭配量词使用，[^xxx]匹配除了括号里的单词
(8)预定义：/d(匹配0－9数字);/D(匹配0－9以外的数字);/w(匹配任意字母、数字和下划线);/W(匹配除字母数字下划线以外的东西);/s(匹配空格);/S(匹配非空格以外的东西)
(9)修饰符：使用方法->/表达式/修饰符，i是不区分大小写；g是全局搜索

14.函数参数（特殊情况）

(1)动态参数（arguments）：是函数内部的伪数组变量，将传入的参数以数组的形式传入

function sum(){
    let s = 0
    for(let i = 0;i<arguments.length;i++){
        s+=arguments[i]
    }
    console.log(s)
}

(2)剩余参数：使用…，来获取多余的参数，且获取后的参数会组成一个真数组

function readIT(Fr,...other){
    console.log(Fr)
    console.log(other)
}

(3)展开运算符：也是…，不过是应用在数组中，主要是用于展示数组内容

15.箭头函数

(1)写法：

const haha = function(){

}
const haha = () =>{

}

(2)this指的是上一个对象，在事件回调中，this为全局的Window

16.数组解构

1.赋值运算符=左侧的[]用于批量声明变量，右侧数组的单元值江北赋值给左侧的变量
2.变量的顺序对应数组单元值的位置依次进行赋值操作
3.

const arr = [1,2,3,4,5]
const [a,b,c]=arr
//此时a=1，b=2，c=3
[a,b]=[b,a]
//此时a=2，b=1

17.对象解构

1.赋值运算符 = 左侧的{}用于批量声明变量，右侧对象的属性值将赋值给左侧的变量
2.对象属性的值将被赋值给与属性名相同的变量
3.解构的变量名不要和外面的变量名冲突，否则会报错，如果找不到一致的属性时，变量值为undefined

//多级对象解构
const pig={
    name:'peiqi',
    family:{
        mom:'mom',
        dad:'dad',
        bro:'bro'
    },
    age:6
}
const {
    name,
    family:{
        mom,
        dad
        bro
    }
} = pig
//此时，输出name以及mom都是对应的对象里的属性值

18.一些数组方法

1.forEach，objarray.forEach(function(当前,当前元素组号){

})
2.filter：用于过滤数组，返回的是满足筛选条件的新数组
3.map：迭代数组，返回新数组，返回的是处理之后的数组元素
4.reduce：累计器，返回累计处理的结果，常用于求和
5.join：数组元素拼接成字符串，返回字符串
6.find：查找元素，返回符合测试条件的第一个数组元素值，如果未找到，则返回undefined
7.every：检测数组所有元素是否都符合制定条件，如果所有元素都通过则返回true，否则返回false
8.some：检测数组中的元素是否满足指定条件，如果数组中有元素满足则返回true，否则返回false
9.concat：合并两个数组，返回生成新数组
10.sort：对原数组单元值排序
11.splice：删除或者替换原数组单元
12.reverse：反转数组
13.findIndex：查找元素的索引值

19.对象的创建

1.利用对象字面量创建对象

const obj ={
    name:'sg'
}

2.利用new Object创建对象

const obj = new Object({
    name:'sg'
})

3.利用构造函数，这种方法能够快速创建多个类似的对象,函数名开头必须大写。当使用new调用函数时，这一行为被称为实例化，实例化没有参数时可以省略括号，构造函数内部无需写return

//创建构造函数
function Peop(name,age,gender){
    this.name =name
    this.age = age
    this.gender = gender
}

//创建具体对象
const p1= new Peop('sg1',12,'1')
const p2 = new Peop('sg2',43,'0')

20.构造函数更多知识点（常用知识点已经在上一点提到过）

1.通过构造函数创建的对象叫做实例对象，实例对象中的属性和方法被称为实例成员，实例对象相互独立，实例成员当前实例对象使用
2.构造函数的属性和方法称为静态成员，静态成员只能由构造函数访问

21.一些字符串的方法

1.lengt:用来获取字符串的长度
2.split(‘分隔符’):用来将字符串拆分成数组
3.substring(需要截取的第一个字符的索引[,结束的索引号]):用于字符串截取
4.startsWith(检测字符串[,检测位置索引号])：检测是否以某字符开头
5.includes(搜索的字符串[,检测位置索引号])：判断一个字符串是否包含在另一个字符串中，返回true或false
6.toUpperCase:用于将字符转换成大写
7.toLowerCase:用于将字母准换成小写
8.indexOf:检测是否包含某字符
9.endsWith:检测是否以某字符结尾
10.replace:用于替换字符串，支持正则匹配
11.match:用于查找字符串，支持正则匹配

22.对象原型杂谈

1.构造函数通过原型分配的函数是所有对象所共享的
2.js规定，每一个构造函数都有一个prototype属性，指向另一个对象，也成原型对象，这个对象可以挂在函数节约内存
3.构造函数和原型对象中的this都指向实例化的对象

function Peo(name,age){
    this.name=name
    this.age=age
}
Peo.prototype.family =()=>{
    console.log('Du')
}
const pp1 = new Peo('p1',21)
pp1.family()

4.每个原型对象里都有constructor属性，该属性指向该原型对象的构造函数
5._proto_是JS非标准属性，其意义与[[prototype]]相同，用来表名当前实例对象指向哪个原型对象prototype，里面也有一个constructor属性，指向创建该实例对象的构造函数。

23.关于拷贝

1.浅拷贝：拷贝的是引用地址
2.对象浅拷贝：Object.assgin()
3.数组浅拷贝：Array.prototype.concat()//[…arr]
4.对象深拷贝实现:

const obj={
    name:'ppp',
    age:18,
    hobby:['ball','sing']
}
const o = {}
function deepCopy(new,old){
    for(let k in old){
        if(old[k] instanceof Array){
            new[k] = []
            deepCopy(new,old)
        }
        else{
            new[k]=old[k]
        }
    }
}

5.利用lodash和JOSN实现深拷贝

const obj={
    name:'ppp',
    age:18,
    hobby:['ball','sing']
    family:{
        mom:'mom',
        dad:'dad'
    }
}
const o = _.cloneDeep(obj)

24.异常处理

1.throw:用throw抛出异常信息，程序也会终止执行，后面会跟对应的错误提示信息，利用Error对象配合throw使用，效果更佳

throw new Error('message')

2.try-catch-finally:将预估发生错误的代码写在try里面，如果这部分代码出错，会由catch拦截，最终不管有没有错，finally都会在最后执行

try{

}catch(error){
    console.log(error.message)
}
finally{

}

3.debugger主要用于调试，能够强制设置断点

25.动态改变this指向

1.call()：

fun.call(thisArg,arg1,arg2,...arg3)
//thisArg:在fun函数运行时指定的this值
//agr1...：传递的其他的参数
//返回值就是函数的返回值

2.apply()：

fun.apply(thisArg,[arr])
//thisArg:在fun函数运行的时候指定的this值
//arr：传递的值，必须包含在数组里面
//返回值就是函数的返回值
//apply经常和数组有关系，比如使用Math.max()求数组最大值

3.bind()：

fun.bind(thisArg,arg1,arg2,...arg3)
//thisArg:在fun函数运行时指定的this值
//arg1:传递的其他参数
//返回由指定的this值和初始化参数改造的原函数拷贝，即新函数
//当只改变this指向而不调用当前函数的时候，经常使用bind，比如改变定时器内的this指向

26.优化内容——防抖和节流

1.防抖：一个事件在一定时间段内多次触发，为了避免资源浪费，我们只需要允许他最后一次执行过程实现成功。
2.节流：一个事件在一定时间内多次触发，为了避免资源浪费，我们允许他第一次时间的开始，并且让第一次事件一直持续到时间段的结尾再结束
3.防抖具体实现：

function fangdou(fn,t){
    let timer 
    return function(){
        if(timer){
            clearTimeout(timer)
        }
        else{
            timer=setTimeout(function(){
                fn()
            },t)
        }
    }
}
//原理上是利用定时器延迟事件的发生
//先定义一个函数
//每当事件要发生的时候，首先判断有无定时器，若没有，则加一个定时器
//当定时器执行完毕，则进行一次
//使用匿名函数完成对timer的设定
//

4.节流具体实现：

//能够利用lodash库完成
function jieliu(fn,t){
    let timer = null
    return function(){
        if(!timer){
            timer = setTimeout(function(){
                fn()
                timer =null
            },t)
        }
    }
}
//原理也是利用settimeout
//通过给函数加一个定时器，让事件发生完之后有一个空白期
//通过对定时器的强制加减实现
//
//