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";

学习 心得

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

标签

评论

this is is footer