前端整个javascript中的学习总结解读.docx
- 文档编号:25546652
- 上传时间:2023-06-09
- 格式:DOCX
- 页数:34
- 大小:65.06KB
前端整个javascript中的学习总结解读.docx
《前端整个javascript中的学习总结解读.docx》由会员分享,可在线阅读,更多相关《前端整个javascript中的学习总结解读.docx(34页珍藏版)》请在冰豆网上搜索。
前端整个javascript中的学习总结解读
一:
javascript的组成
Javascript是一门轻量级的脚本编程语言
由ECMAScriptDOMBOM这三部分组成
1、ECMAScript(45):
定义了JS里面的命名规范,变量,数据类型,基本语法,和操作语句最核心的东西等
2、DOMdocumentobjectmodel文档对象模型
3、BOMbrowserobjectmodel浏览器对象模型
第一块:
ECMAScript
1、命名规范避开关键字保留字(1、在JS当中严格区分大小2、驼峰命名法首字母小写,其他有意义的单词首字母大写3、可以使用数字字母下划线和$符号----数字不能作为首位)
------------------关键字:
在JS当中有特殊意义的字
保留字:
未来可能成为关键字的
2、变量:
可变的量
JS当中的变量是个抽象的概念,用来存储值和代表值的!
在JS当中定义一个变量非常简单var变量名=变量值;
=是赋值操作,左边是变量名右边是存储的值
JS当中的变量是松散类型的,通过一个var变量名就可以存储任何的数据类型!
3、数据类型
Js当中的数据类型的分类
1基本数据类型:
由简单的结构组成
数字number字符串string布尔booleannullundefined
2引用数据类型:
结构相对复杂一些的
对象数据类型:
object(数组和正则都是对象数据类型)
函数数据类型:
function
具体的数据类型详解
1,number数据类型:
整数负数0小数NaN(不是一个有效数但是他属于number类型的)
NaN==NaN是不相等的
isNaN检测是不是一个有效的数,是一个有效的数返回false不是一个有效的数是true,如果检测的值不是number类型的浏览器会默认的转换成number类型的然后在判断是否是有效数组isNaN(”123”)先经过Number(“123”)转化成123,Number强制将其他的数据类型转化成number要求如果是字符串的话一定是数字才可以转化;案例:
Number(“12px”)=NaN
非强制数据类型转化:
parseIntparseFloat
parseInt:
从左到右一个个查找,把是数字的转化为有效的数字,中途如果遇到一个非有效的数字就不再查找了!
Console.log(parseInt(“12px”));===>12
parseFloat:
和上面的一样只是可以多识别一个.点
console.log(parseInt(“12.333px”));-------------------12
console.log(parseFloat(“12.2333px”));--------------12.2333
案例:
var=Number(“12px”);
if(var==12){
console.log(12);
}elseif(var==NaN){
Console.log(“我是NaN”);
}else{
Console.log(以上俩个条件都不成立);
}
重点2.boolean!
一个叹号是取反,先将值转化为布尔类型值,然后再取反
数据类型转化的规则:
判断一个值是真是假,只有null0NaN“”undefined为假其余的值都为真,[]{}空数组和空对象都为真
如果俩个值比较,遵循这个规律:
//val1==val2俩个值不是同一种数据类型的:
如果是==进行比较的话会进行默认的数据类型转化:
1.对象和对象比较永远不相等[]==[]----false{}=={}---falsefunctionfn(){}=functionfn(){}-------false
2对象和字符串先将对象转化为字符串然后在进行比较
[]==””[].toString()-----------经过toString方法把对象转化为字符串[]数组转化为字符串为空字符串true
{}转化为字符串为“[objectObject]”所以{}==“”------------false
3,对象==布尔类型对象先转化为字符串(toString())然后在转化为数字(Number())布尔类型也转化为数字(true为1,false为0)
4,对象和数字:
对象先转化为字符串(toString())然后在转化为数字(Number())[]==1false
5数字和布尔布尔转化为数字
6,字符串和数字字符串转化为数字
7字符串和布尔都转化为数字
8.null==undefinedtrue
9.null和undefined和其他数据类型比较都是false
3===这也是比较如果数据类型不一样绝对不相当
Null===undefinedfalse数据类型不同false
对象数据类型:
由多组属性名和属性值组成;属性名和属性值是用来描述这个对象特征的!
Varobj={name:
”hewenbang”,age:
13};------字面量创建方式
Varobj=newObject();实例的创建的方式,
给一个对象增加一组属性名和属性值
Obj.name=”hewenbang”,
Obj[“name”]=”hewenbang”;
修改原有的属性名和属性值,规定一个对象当中的属性名不能重复,如果有的话就是修改,没有的话就是新增
Obj[“name”]=”zhufengpeixun”;
获取属性值:
Console.log(Obj[“name”]);
如果属性名不存在默认返回的结果是undefined
删除属性名字和属性值:
假删除:
obj[“name”]=null;
真删除:
deleteobj[“name”];
对象数据类中还可以具体的细分:
对象类(Object)数组类(Array)正则类(RegExp)时间类(Date)数学函数(Math)字符串类(String)布尔类(boolean)
Varobj={};
Vararray=[];
Varreg=/^ww$/;
Js中对象,类和实例的区别:
对象是个泛指,JS中万物皆对象,类是对对象的具体的细分,实例是类中一个具体的事物!
自然界中万物皆对象,可以分为人类植物类低等动物类物体类每一个人都是人类中的一个实例
Function数据类型
Function:
函数数据类型相当于一个方法或者功能
------定义一个函数的步骤:
开辟一块堆内存地址叫xxxfff111,把函数体中的代码当作字符串存储到这块堆内存地址中;因为这一点:
如果一个函数只是定义了,并没有执行的话,这个函数没有任何意义!
在把我们的地址给我们的函数名
Functionfn(){
//函数体
//一个功能或者一个功能的实现
Alert(“欢迎来到珠峰培训”);
}
函数体里执行的代码在堆内存里用字符串的形式存储起来
本质的存储这块堆内存的地址:
xxxfff111
fn()执行这个函数,首先会形成一个自己的私有地盘,然后把定义的时候,存在空间的js代码字符串当作js代码执行!
Js中函数一个特别大的功能:
将实现一个功能的代码进行分装,以后如果用到了这个功能,这些代码没有必要重写了,只需要执行以下这个方法就好了我们把这个叫做函数的封装!
Functionsum(a,b){
Returna+b;
}
Arguments是函数内置接受参数的机制!
(天生自带的)
1,不管你传递没传递写没写形参arguments一直存在
2,Arguments是一个类数组:
以数字作为索引,索引从0开始,还有一个length的属性代表了传递了多少个参数
3,Arguments.callee:
代表的是当前函数本身
Functionfn(){
Vartotal=0;
For(vari=0;i Varcur=arguments[i];//argumets是类数组只能用argument[i]这样的形式来获取 Cur=Number(cul); If(! isNaN(cul)){} Total+=cul; } Returntotal; } 闭包: 函数执行的时候,会形成一个新的私有的作用域来保护里面的变量不受外界的干扰,我们把这种保护机制,叫做闭包! 外面想用什么就直接在函数里面return什么,函数执行完成的整体就是这个值; 1,如果一个方法没有写return的话,函数默认返回的值是undefined在函数体中return后面的代码不在执行! 2,控制函数体中的代码执行到指定位置就结束 函数的种类: 实名函数,匿名函数 上面的都是实名函数; 匿名函数: 函数表达式,把一个匿名函数的定义部分当作一个值赋值给一个变量或者一个元素的事件! Varfn=function(){} Fn(); 自执行函数--定义和执行一起完成了! (function(){})(); ~function(){}();! function(){}();+function(){}();-function(){}(); 都是我们的自执行函数 (重点)基本数据类型和引用数据类型的本质区别 Varnum1=11;varnum2=num1;把num1代表的值给了num2这个变量 Num2++;相当于在num2=num2+1也就是在自己原有的基础上加1;也相当于num2+=1; Console.log(num1);---------------------输出11 Varobj={name: ”zhufeng”}; Varobj1=obj; Obj1[“name”]=”hewenbang”; Console.log(obj[“name”]);-----------------------输出hewenbang --------发现基本数据类型没有跟着发生改变,而引用类型跟着发生了改变 基本数据类型和引用数据类型的本质区别 ------基本类型操作的是值,而引用类型操作的是新空间的地址 ----------基本数据类型是吧值直接给的变量。 接下来的操作过程中,直接拿这个值进行操作,可能俩个变量存储的值一样,但你的是你的,我的是我的没有任何的影响,其中一个改变,另一个没有任何影响! (全在栈空间) --------引用数据类型1.定义一个变量2.开辟一个新的堆内存空间,然后把属性名和属性值保存在这个空间,并且有一个空间地址3.把空间的地址给了这个变量,变量并没有存储这个数值,而是存储的对这个空间的引用地址4.接下来我们把这个地址又给了另外一个变量,另外一个变量存储的也是这个地址,此时俩个变量操作的是同一个空间5.其中一个改变了空间的内容,另外一个也跟着改变了 JS中检测数据类型的方式: Typeof运算符instanceof运算符constructorObject.prototype.toString.call(); Console.log(typeof“zhiufeng”); Typeof用法: typeof要检测的值 返回值: 是个字符串包含数据类型字符“string”“number”“boolean”“object”“function”“undefined” Typeofnull-----------------“object” Typeof的局限性: 不能具体检测object下细分的类型,检测放回的是object 操作语句部分 三个判断语句: ifelse用的最多的可以解决js当中所有的项目需求 三元运算符应于于简单ifelse操作 Switchcase运用于不同值情况下的不同操作 Varnum=10; If(num<0){ Console.log(“负数”); }elseif(num>0&&num<=10){ Console.log(“0-10之间”); }else{ Console.log(“大于10”); } If条件里面可以是大于小于等于也可以是一个值(判断一个值是真是假)也可以多个小条件组成||(条件一个成立即可)&&(条件都成立才行) 三木运算符 Varnum=12; Num>=0? num=13: num=-8; ? 号是条件成立时执行的: 是条件不成立时执行的当不需要执行的时候用void0;来占位 Switchcase Switch(num){ Case1: Alert (1); Break; Case2: Alert (2); Break; Default: Alert(“我是NaN”); } 每一中case相当于===在比较,一定要注意数据类型, 循环语句: For循环 四部曲: 1,设置初始值vari=0,2,设置循环执行条件i<6;3,执行循环体中的内容{}包起来的部分4,每一轮循环完成后都执行我们i++累加操作 For(vari=0;i<6;i++){ Console.log(“hah”); } Break: 在循环体中出现break整个循环就整体的结束了,i++最后的这个累加操作也不知行了, Continue: 在循环体中出现continue当前这一轮的循环就结束了,继续下一轮循环,i++操作继续执行 在循环体中遇到这俩个关键字,循环体中后面的代码就不执行了 For(vari=0;i<10;i++){ If(i<=5){ i+=2; continue; } i+3; break; } Console.log(i);--------------9 Forin循环 就是用来循环对象中的属性名和属性值的对象中有多少键值对,我们就循环多少次 顺序问题: 首先循环键名为数字的属性值,按照从小到大,剩下的按照我们写的顺序循环 Varobj={ Name: ”hewenbagn”, Age: ”15”; Height: ”20”; } For(varkeyinobj){ Console.log(obj[key]); 获取属性值: 在forin循环中只能通过obj[key]来获取属性值 } 数组Array Vararr=[1,2,3,4]----------字面量创建方式 Vararr=newArray();实例创建方式 Console.dir(arr);看数组的详细信息,包含我们数组中常用的几个方法(找到—prototpe__展开这个里面提供了我们数组中常用的方法) Varary=[“zhufeng”,”liji”,28,true,null,undefined,{},functionfn(){}]; 1,//数组是由多个项组成的,每一项之间用逗号隔开,并且每一项存储的数据类型,可以是任何的数据类型! 2,数组也是对象数据类型,对象数据类型是由属性名: 熟悉值组成,健名我们在数组中我们称之为索引ary[索引]就是获取数组中地索引加1项的内容 3,获取当前数组的长度ary.length 4,如果我们写的索引超过了总长度返回的结果是undefined 5,在操作数组的时候我们一般用for循环来操作 数组中常用的方法: 学习数组方法注意事项: 1,方法是做什么用的,实现了什么功能! 2,传递的参数是什么 3,返回值是什么 4,原数组是否发生了变化 关于数组的增删改查 Push----向数组的末尾添加新的元素(一个或者多个),传递的参数就是要添加的元素,返回值内容是添加后新数组的最终的长度原有的数改变了 Unshift向数组的开头添加新的元素(一个或者多个),传递的参数就是要添加的元素,返回值内容是添加后新数组的最终的长度原有的数组也改变了 Ary.push(“14”,”15”);、 Splice(n,0,x)向数组的某个位置添加新的内容, 从索引n开始,删除0个内容,把索引x放在索引n的前面,返回的是一个空数组,原有数组发生了改变 Splice(n,m)从索引n开始(包含n)删除m个元素删除数组中指定的某些项把删除的内容当做一个新的内容返回,原有数组发生了变化 Splice(n,m,x)把原有数组中的某些项进行替换先进行删除,然后用x替换,从索引n开始,删除m个元素,用x替换原来的,把删除的内容当做一个新数组返回,原有数组发生了变化 Splice(0,0,x)相当于unshift Splice(ary.length,0,x)相当于我们的push Pop删除数组最后一个返回的是删除的那一项原有数组发生改变 Shift删除数组最后一个返回的是删除的那一项,原有数组发生改变 数组的查询和复制 Slice(n,m)从索引n开始包含n找到索引为m数不包含m然后把找到内容作为一个新的数组返回,原数组没有发生变化 Slice(n)索引n开始一直查找到末尾,把找到数组返回原有数组不发生变化 Slice(0)将原有的数组原封不动的复制一份这属于数组的克隆 Concat也可以实现数组的克隆 Ary.concat();原来的数组也不改变相当于slice(0) Concat是实现数组的拼接的 Vararr=[1,2];varar2=[3,4]; Arr.concat(ar2); 将数组转化为字符串 toString把数组中的每一项用逗号隔开,组成一个字符串原有数组不变 join(“分隔符”)把数组中的每一项拿出来,按照指定分隔符隔开 实现数组中数字的求和 Eval将指定的字符串变成真正的表达式来执行 5,数组的排列排序 Reverse让数组到过来排列 Sort排序sort(function(a,b){returna-b;}); A代表每一次循环的时候当前这个项,b是后面的这个项; Returna-b;当前项减去后一项如果大于0说明当前项大于后一项这样的话就交换位置 第五组: 常用但不兼容: ForEachindexOfmap 正式课总结 第一周预解释和作用域 在刚开始加载页面的时候,浏览器会天生自带一个供我们当期JS代码执行的环境,我们把这个环境称之为“栈内存”,我们也可以叫他为作用域 而且开始加载页面的那个作用域称之为全局作用域(window) 在全局作用域下声明的变量叫做全局变量,(功能用函数) 预解释是发生在当前作用域下的,刚开始只是声明或者定义全局下的var或者function 只有funciton里面的不是全局的 带var和带function关键字的,进行预解释的时候是不一样的, var只是提前声明 function在预解释的时候就声明和定义 一个function在代码执行之前(预解释的时候)就把声明和定义完成了,在接下来执行代码的过程中,如果遇到了函数定义的那块代码直接的跳就OK了 函数执行可以写在任何位置,原因是定义的这个操作在预解释就完成了 函数的执行 sum(1.2.3)会形成一个新的私有作用域(栈内存: 执行代码和存储基本数据类型),进来之后第一步首先进行的就是把这个私有作用域预解释 其次代码执行 在函数的这个私有作用域定义的变量都是私有的变量,形成的这个作用域保护里面的私有变量不受外界的干扰,我们把这种机制叫做闭包! 函数执行一次形成一个新的私有作用域,上述的步骤重复一次 //预解释是发生在当前作用域下的, 一般情况下,函数在每一次执行完成,函数新形成的作用域都自动销毁 JS当中只有window和funciton会产生作用域: 预解释是一种毫无节操的变态机制 1.预解释只发生在当前作用域下 2.不管条件成立与否,都要进行预解释 3.预解释时发生在=的左边,等号的右边不进行预解释 4.只有预解释只发生在同一个JS脚本里面 5,;(function(){})();自执行函数不进行预解释(在全局下不把()包起来的那个function预解释,但是执行的时候形成的私有作用域的进行预解释) 6,函数中return后面的代码也要进行预解释 7.在预解释的时候,如果发现重名了,不重新声明,但要重新定义 fn();//预解释好无节操 varfn=12; fn();//12();Error: numberisanotfunction; functionfn(){ console.log("预解释好无节操"); } ------预解释是发生在当前作用域下的 如何的判断他的上一级作用域 看存储这个函数的堆内存在哪一个作用域下(比如这个作用域是A),那么这个函数执行的上一级作用域就是A 如何判断是私有的还是全局的 在一个函数中只有预解释声明过的和形参是私有的,否则的话往他的上一级作用域找,如果上一级也没有则继续找,一直找到window作用域 在JS当中,如果当前行JS报错,下面代码都不执行了,(前提是: 没有进行异常捕获处理) 全局作用域下才有的这样一个机制 我们return的是一个堆内存地址,当前这个堆内存在这个fn这个作用域 一个大函数,返回的是引用数据类型(经常是function)那么当前这个大的函数形成的作用域就不能销毁(里面的私有变量也一直存在) 一个大函数,套一个小函数给这个小函数绑定点击事件这种大的作用域也不销毁 //varname="china"; //varage=5000; //;(function(name,age){//是自执行函数的俩个形参变量 ////私有作用域中私有变量name和age,这个和全局的没有半毛线关系 //varname="zhufeng"; //varage=6; //})(name,age);//把全局变量name和age所存储的值传入到函数中,给函数的俩个形参变量 //函数执行。 //1.如果有形参,先给形参变量赋值 //2.然后在预解释 //然后在执行代码 varname="china"; varage=5000; ;(function(name,age){//是自执行函数的俩个形参变量 //私有作用域中私有变量name和age,这个和全局的没有半毛线关系 console.log("name+"+name+"age"+age); })(name,age); //通过window.属性名直接查找全局的 //这个是移动端Zepto.js实现的原理 varfn=(function(){ functionfn(){}; functionsum(){}; functiondd(){}; returnfn; })(); //在真是项目当中,为了避免全局变量污染,静止使用全局变量(尤其是大公司)我们把要实现的功能用闭包的机制封装起来 ;(function(){ functionfn(){
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 整个 javascript 中的 学习 总结 解读