20200828-叶梦宇-md

学习总结

css sprite

重载

相同函数名，不同参数列表的多个函数，在调用时，根据传入参数的不同，自动选择匹配的函数执行

减少API的数量，减轻调用者的负担

只要一项任务，需要根据不同的参数，执行不同的操作时，就需要使用重载

JS语法不支持重载，JS中不允许多个同名函数同时存在 ，

length方法：可以获取数组，对象 ，字符串的长度

arguments是函数自带的，可以接收所有的传入的 参数

解决重载问题

每一个函数内，都有一个arguments对象接住所有传入函数的参数值，根据arguments的元素内容或元素个数，判断执行不同的操作

function hhhh(wu){
// 测试 console.log(arguments)
// console.log(argument.length)
switch(arguments.length){
case 1: console.log(1);break;
case 2: console.log(2);break;
case 3: console.log(3);break;

​ }

​ }
​ hhhh("wu","wa","we")

数组Array

我们单纯的使用变量只有一个值，但是可以通过数组，将多个变量的值，保存在数组中，然后使用的时候，直接调用数组就可以了

下标：数组中的每个元素用下标进行表示，下标从0开始 ，从左往右

方法：arr。length 获取数组的长度

对象

3对象 使用一对双花括号{},{}就是我们要保存的对象

参数按值传递

原始类型按值传递

原始类型的按值传递，在两变量之间赋值时，或将变量作为参数传入函数时，仅将原变量的值复制一个副本给对方，若修改新变量的值，不会影响原变量的值

var a=1;
var b=a;
b=2;
console.log(a,b) //1 2

引用类型的传递

引用类型的传递，在两变量之间赋值时，或将变量作为参数传入函数时，将原对象的引用地址复制一份新变量，两个变量的引用地址是一样的，若使用新变量修改对象，等效于直接修改原对象

​ var obj1={
​ name:'liming',
​ sex:'man'
}
var obj2=obj1;
obj2.name='lidaming';
console.log(obj1.name) //lidaming

作用域

变量的可作用范围，其实是一个对象

全局作用域对象

全局作用域对象(window)，保存全局变量

优点：可反复使用
缺点：随处可用，容易造成全局污染，我们建议尽量少用全局变量

函数作用域对象

函数作用域对象(AO)，保存局部变量
参数变量 函数内var声明的变量
优点：仅函数内可用，不会被污染
缺点：不可重用

函数的生命周期(要背)
开始执行程序前
创建ECS
首先在ECS中添加浏览器主程序的执行环境main
创建全局作用域对象window，所有全局变量都是保存在window对象中
main执行环境引用window
定义函数时
用函数名声明全局变量
创建函数对象，封装函数定义
函数对象的scope属性，指回函数创建时的作用域
函数名变量引用函数对象
调用函数时
向ECS中压入本次函数调用的执行环境元素
创建本次函数调用时使用的函数作用域对象(AO)
在AO中创建所有局部变量
包含
1. 形参变量
2. 函数内用var声明的变量
设置AO的parent属性引用函数的scope属性指向的父级作用域对象
函数的执行环境引用AO
变量的使用顺序
调用后
函数的执行环境出栈，导致AO释放，同时导致AO中的局部变量一同被释放

闭包

即重用变量，又保护变量不被污染的机制

使用闭包

​ var add = (function () {
​ var counter = 0;

​ return function () {return counter += 1;}

})();
add(); // counter=1;
add(); // counter=2;
add(); // counter=3;
​ 特点(3步)
​ 外层函数
​ function fn(){
​ var num=0;
​ return [fn1,fn2,fn3]
}

​ 外层函数要返回内层函数的对象

直接给全局变量赋值一个内部function
return function(){...}

将内部函数保存在一个对象的属性或数组元素中
return [function,function,function]
return { fun:function(){...} }
调用外层函数，用外部变量接住返回的内层函数对象，形成闭包
function fn(){
return [

function fn1(){

console.log(1)
},
function fn2(){

console.log(2)
},
function fn3(){

console.log(3)
}
]
}
var show=fn()
show[0]（）

闭包如何形成
缺点
比普通函数占用更多内存，多的是外层函数的作用域对象(AO)始终存在
容易造成内存泄漏

解决如何释放闭包
show[0]=null

理解闭包的流程

找受保护的的变量，确定外层函数调用后，受保护变量的最终值

找操作受保护的变量的内层函数对象

注意：同一次外层函数调用，返回的内层函数对象，共用同一个受保护的变量

对象

对象是一组属性(property)和方法(method)的集合，对象属于引用类型数据

JS对象分类
内置对象
ES标准中规定的，浏览器厂商已经实现的对象，即JS官方提供的对象
包含11个
String Number Boolean
Global Array Date Math RegExp Error Function Object
包装类型

包装类型，专门封装原始类型的值，并提供操作原始类型值的API

原始类型的值本身不具有任何功能

只要试图对原始类型的值调用函数时，引擎就会自动创建对应类型的包装类型对象，封装原始类型的值，调用包装类型中的方法操作原始类型的值

使用包装对象
1. 将数据转为数值，并取小数点后2位
new Number(n).toFixed(2)
2. 将数据转为字符串，并获取字符串第一位的Unicode码
new String(str).charCodeAt();

自定义对象

使用对象字面量创建对象
var obj={

name:"liLeilei",
sex:"男",
age:20
}

使用内置构造函数创建对象
// 创建空对象
var obj=new Object()
// 添加属性
obj.name="lileilei";
obj.sex="男";

使用自定义构造函数创建对象
. 定义构造函数

this 指针

​ function Person(name,age,job）{
​ this.name=name;
​ this.age=age;
​ this.job=job;
​ this.sayName=function(){
​ alert(this.name)
​ }
}
​ . 创建一个新对象，要创建Person对象的新实例，必须使用new操作符

new 构造函数

​ var person1=new Person("lili",24,"teacher")
​ var person2=new Person("leilei",20,"student")
​ . 将构造函数的作用域赋给新对象(因此this就指向这个新对象)
​ . 执行构造函数中的代码(为这个新对象添加属性)
​ person1.sayName()
​ person2.sayName()
访问对象中的值

​ 对象.属性名
​ obj.name
​ 对象['属性名']
​ obj["name"]

遍历对象中的属性

for in 遍历

​ for(var key in 对象){
//key代表对象中的每一个属性名
//对象[key]获取每个属性值
}

API

Math

向上取整 Math.ceil

向下取整 Math.floor（num）

四舍五入取整 Math.round（num）

乘方 Math.pow(底数,幂) pow(x,y) 取x的y次幂 === x**y

开平方 Math.sqrt(num)
最大值和最小值
Math.max/min(值1,值2,...)

max()：最大值

min()：最小值
问题：不支持查找一个数组中的最大值／最小值
解决：Math.max/min.apply(null,arr)

随机数 Math.random(）

圆周率 Math.PI

绝对值 Math.abs()

Boolean
new Boolean()

将数据转为布尔型，返回对象

​ var bool=new Boolean('str');
​ Boolean()

将数据转为布尔型，返回布尔型

​ var bool=Boolean(null)
​ !!数据
​ !!"str" //true
​ !!null //false

number

使用new构造返回的值是一个类数组对象。

new Number(true) 将数据转为数值，返回对象

Number(true) 将数据转为数值，返回数值

Number.MAX_VALUE 获取所能存储的最大值
Number.MIN_VALUE 获取所能存储的最小值
toFixed(n) 取小数点后的n位 toString(n)
toString(n) 将数值转为字符串，同时可以设置进制，n就是要设置的进制，可以是2,8,16.....

Date

用于对日期时间进行存储和计算，封装一个时间，并提供操作时间的API

创建Date对象

自动获得客户端当前系统时间 new Date() var nowTime=new Date()

创建日期对象保存自定义时间 new Date(2019,4,17,9,52,30)
复制一个日期对象 var d1=new Date(); var d2=new Date(d1);

用毫秒数 new Date(123456789)

提示：存储的是距离计算机元年的毫秒数，计算机元年时间：1970-1-1 0:0:0

获取Date对象中的日期时间

​ getFullYear()
​ getMonth()
​ getDate()
​ getHours()
​ getMinutes()
​ getSeconds()
​ getMilliseconds()
​ getDay()
​ getTime()
​ 获取本地字符串格式 toLocaleString()
​ toLocaleDateString()
​ toLocaleTimeString()
​ toString()
​ toGMTString()

设置日期时间
setFullYear()
setMonth()
setDate()
setHours()
setMinutes()
setSeconds()
setMilliseconds()
setTime()

Date计算

两日期对象可相减，得到ms差，可计算倒计时
var date1=new Date(2020,5,22,18,0,0)
var date2=new Date();
console.log(date1-date2)

对任意单位做加减
var date=new Date();
date.setFullYear(date.getFullYear()+20)
console.log(date)

erro（了解）
什么是错误？
错误处理
什么是错误处理？
使用try...catch
try{
// 尝试执行的代码，可能出现的错误
}catch(err){
// 只有出错才执行的错误处理代码
// err捕获的错误
// 具体处理错误的内容
// 比如: 错误提示，记录日志，保存进度/数据
}finally{
// 无论是否出错都必须执行的代码
// 释放资源
}
Error错误对象
什么是Error错误对象？
name
message
String(err)
经常出现的错误

            1.  SyntaxError：语法错误，错误的使用了中文，缺少括号等；出现后所有的代码都不执行
                // 变量名错误 

var 1a;
// 缺少括号
console.log 'hello');
2. ReferenceError：引用错误，使用了未声明的错误，影响后续代码的执行
console.log() = 1
3. TypeError：类型错误，错误的使用了数据类型，影响后续代码的执行
new 123
4. RangeError：范围错误，出现参数的使用超出了范围，影响后续代码的执行
new Array(-1)
抛出自定义错误
优化

Function

new
var 函数名=new Function("参数名1","参数名2",...,"函数体;return 返回值")
var fn=new Function("a","b","console.log(a);return b")
var show=fn(1,2)
console.log(show)

注意：开发禁止使用 面试可能要用

数组

创建数组
创建空数组
数组直接量
var arr=[];
使用内置构造函数
var arr=new Array();

创建数组同时初始化数组元素
数组直接量
var arr=[值1, 值2,...];
使用内置构造函数
var arr=new Array(值1,值2,...);
var arr=new Array('name','sex','age');
创建含有n个空元素的数组
var arr=new Array(n)
var arr=new Array(3);
arr[0]="name";
arr[1]="sex";
arr[2]="age";

学习 心得

还是觉得有一点快，自己还是要提前预习看看概念性的东西。