第一章 JavaScript学前准备
1.JavaScript简介
(1)1992年Nombas的scriptease奠定了JavaScript思想理念;
(2)受当时网速的限制,很多操作过程很漫长,如用户注册个账号,先提交到服务器去验证合法性,然后再返回给用户。Netscape发现了这个问题并开发了JavaScript语言,同时微软也开发了一个叫JScript语言,并且自己制定了一套规则。后来在ECMA(欧洲计算机制造商协会)、TC39(第39技术委员会)、W3C ( World Wide web Consortium )的共同努力下,制定了ECMAScript标准;
(3)JavaScript和Java是两种完全不同的语言,无论在概念还是设计上。一句话,他们的关系就是雷锋和雷峰塔的关系。
2.为什么学习JavaScript
(1)JavaScript能及时响应用户操作,被数以百万计的网页用来改进设计、验证表单、检测浏览器、捕捉用户动作等;
(2)HTML定义了网页的内容,CSS描述了网页的布局,JavaScript实现了网页的行为;
(3)JavaScript可以控制HTML的内容,可以增加、删除、修改、获取标签信息,直接在浏览器上修改标签属性或页面内容;
(4)JavaScript可以控制CSS样式,改变网页布局,比如改变元素背景色、文字大小、显示隐藏等。
3.什么是JavaScript
(1)JavaScript是一种具有面向对象能力的、解释型脚本语言﹔
(2)基于对象和事件驱动、相对安全的客户端脚本语言;
(3)运行在浏览器的JS解释器下;
(4)在提供更好的用户体验上功不可没;
(5)弱类型,定义变量时不必具有明确的数据类型;
4.引入JavaScript的三种方式
(1)行级:给标签设置对应的属性,属性值是要执行的JS代码;
(2)嵌入式:使用script标签,标签需要闭合,标签的内容就是要执行的JS代码;
(3)引入式:是使用script标签,标签需要闭合,设置属性src,src的值是js文件路径,如 <script src="../../day01/data.js"></script>
5.JavaScript输出数据到页面的方式
(1)页面弹窗:alert("弹出的内容"),弹出一个有确定按钮的信息框,多用于信息警告;
(2)页面输出内容:document.write("输出到页面的内容"),将内容输出到HTML文档中,如果文档加载完成后执行,则会覆盖掉所有原文档信息;
(3)弹出选择框:confirm('你确定执行该操作? ’),点击“确定”按钮返回true:点击“取消”返回false。
6.JavaScript输出数据到控制台的方式
(1)console.log(‘打印“日志”信息到控制台’);
(2)console.error(‘打印“错误”信息到控制台’);
(3)console.warn(‘打印“警告”信息到控制台’);
(4)打印表格到控制台:console.table({name:"小明",age:"18"});
(5)清空控制台消息:clear() 实列: console.clear()
7.如何获取页面元素
(1)document.querySelector(‘选择器’)∶这里的选择器和CSS样式定义的选择器是同一个概念,如果该选择器对应多个元素,则只返回第一个。
(2)document.querySelectorAll('选择器')︰获取选择器对应的全部元素,返回值是类数组。
8.如何获取和修改页面元素内容
(1)document.querySelector("选择器").innerHTML:获取指定选择的内容;
(2)document.querySelector("选择器").innerHTML="新内容":修改指定选择器对应的元素内容为新内容、
9.如何连接字符串:使用加号:+
列: var name="小明";
var age="18岁";
var str=name+"今年"+age;
console.log(str);//小明今年18岁
9.时间的概念及其三要素
(1)事件的概念:事件是指可以被JS监测到的网页行为:如:鼠标点击、鼠标移动、鼠标移入/离开、键盘按键、页面加载等;
(2)JavaScript事件的三要素:事件源、事件、事件处理
事件源:操作对象,名词:
事件:做什么动作,动词:
事件处理:背后要做哪些工作,具体要干什么,这里就是我们要写代码具体实现的功能了。
第二章 JavaScript词法结构
1.词法结构-基本概念
(1)编程语言的词法结构是一套基础性规则,用来描述如何使用这门语言来编写程序;
(2)词法结构是语法的基础,定义了如何定义变量、写注释、分割语句等基本规则。
2.词法结构-严格区分大小写
(1)JavaScript是严格区分大小写的:
JavaScript区分大小写,包括关键字、变量、函数名、所有标识符:
querySelector的S是大写,你写成小写就会报错;
alert() 全部是小写,你写一个大写字母就会提示你该函数不存在:
myname、myName、mynamE、MyName他们不是一个变量:
3.词法结构-空格
(1)JavaScript会忽略标识符前后的空格:
(2)空格是为了让代码有整齐一致的缩进,形成统一的编码风格,让代码更具可读性;
(3)在标识里面加空格,是把一个标识符分割成了两个或多个标识符:
(4)—般加空格是为了代码排版,不能乱加空格.
4.词法结构-注释
(1)JavaScript支持两种注释方式:
单行注释://这里是注释内容;
多行或段落注释: /*
*这里是段落注释
*可以写多行
换行可以不要星号(*)
*加星号(*)就是为了注释的可读性
*段落注释是不能嵌套的
*/
(2)注释部分不会执行,合理的注释能显著提高代码的可读性;
5.词法结构-标识符
(1)标识符就是一个名字;
(2)JS使用标识符对变量和函数及其参数进行命名;
(3)JS标识符必须以字母、下划线_)、美元符号($)作为开始符;
(4)后续可以是字母、数字、下划线或美元符号($);
(5)数字不允许作为首字符出现,以便可以轻易区分开变量和数字,如∶12345就是个数字,不用考虑是个变量的情况;
(6)合法的标识符:myname、_age、$classnaiie、abc、hqyj_h5;
(7)不合法的标识符:5myname;
(8)也可以使用非英语来定义标识符:var n = 3.14, α ;
(9)标识符最好见名知意;
6.词法结构-保留字
(1)JavaScript默认的把一些标识符拿来作为自己的关键词,如: for、if、while,这些关键词称作保留字;
(2)在书写代码定义标识符的时候不能使用保留字;
break | do | instanceof | typeof |
case | else | new | var |
catch | finally | return | void |
continue | for | switch | while |
debugger | function | this | with |
default | if | throw | delete |
in | try |
7.词法结构-分号
(1)JavaScript使用分号(;)将语句分隔开;
(2)分号并不是必须的,换行也可以表示一个语句结束,执行时会自动填充分号;
(3)JavaScript并不是在所有的换行处都填充分号:只有在缺少了分号无法正确解析时才会填充分号;
(4)建议养成以分号结束语句的习惯,使用分号来明确标记语句的结束,即使在并不完全需要分号的时候也是如此。
第三章 类型、值和变量
1.基本概念及类型分类
(1)一些基本概念:
在编程语言中,能够表示并操作的值(value)的类型,称为数据类型(type);
变量(variable):是一个值的符号名称,可以通过变量引用值;
可以把一个值赋值给一个变量(variable),这样程序在任何需要使用该值的地方,就可以直接引用该变量;
(2)JavaScript的数据类型分类:
原始类型:数字、字符串、布尔值、null(空)、undefined(未定义);
对象类型:原始类型之外的类型,如数组、对象、函数等;
2.变量类型-数字
(1)JS部分整数和浮点数,所有数字均用浮点数字表示;
(2)直接出现在程序中的数字类型的直接量称为数字直接量;
(3)数字直接量分为整型直接量和浮点型直接量;
(4)整型直接量支持十六进制: 0x作为前缀,其后跟0-9A-F ;
(5)浮点型由整数部分、小数点、小数部分组成支持指数计数法,如:3.14e13 ;
(6)数字直接量前面加负号(-) ,得到它的负值;
(7)需注意:负号(-)不是数字直接量的一部分,负号(-)是求反运算符;
(8)数字支持的运算符有: +、-、 *. /. %(取余) ;
(9)Math对象定义的方法可以实现更复杂的操作, 如: Math.random()、Math.cil0等;
(10)Infinity表示正无穷大 , -Infinity表示负无穷大;
(11)isNaN(判断一个值是不是数字,如: isNaN(5) ,返回false ;
3.变量类型-字符串
(1)JS通过字符串类型来表示文本;
(2)字符串的索引从0开始,第一个字符的位置是0 ,第二个是1 ,以此类推;
(3)长度为1的字符串代表一个字符 , JS里面并没有“字符型”;
(4)字符串直接量是指用单引号或双引号括起来的字符序列;
(5)单引号括起来的字符串可以包含双引号;双引号括起来的字符串可以包含单引号;
(6)一个字符串可以定义在多行上,建议在非常必要的时候才这么写。
4.变量类型-字符串-转义字符
(1)反斜线(\)后面加上一个字符,就不再表示字符的字面含义了,此时称为转义字符;
(2)\'表示对单引号进行转义,这样就可以在单引号括起来的字符串中有单引号了;
(3)常见的转义字符:
\t:水平制表符;
\n:换行符;
\r:回车符;
\":双引号,而不是字符串分界符;
\’:单引号,而不是字符串分界符;
\\:反斜杠。
5.变量类型-字符串的一些操作
(1)字符串的连接:+;
(2)求字符串的长度:str.length;
(3)指定位置的字符:str[2]表示第三个字符;
(4)字符串是固定不变的,对其操作时,会返回一个新的字符串,原始字符串不变。
6.变量类型-布尔值
(1)布尔值指对或错、是或否;
(2)布尔类型只有两个值: true和false ,是保留字,小写;
(3)布尔值通常用于控制语句中,如if、for、 while等 ;
(4)JS的任意值都可以转换为布尔值 ,可直接使用Boolean()进行转换 ,下面六个值会转换为false :
undefined
null
0
NaN
(5)其他值则转换为true ,包括空数组、对象等。
7.变量类型-null和undefined
(1)null
是保留字,常用来描述空值;
typeof null:返回的是字符串object,也就是说可以把null看成一个特殊的对象:
通常来讲我们把null看成他自有类型的唯一成员:
(2)undefined
undefined 表明变量没有初始化;
如果函数没有返回值,则返回undefined;
typeof undefined:返回的是字符串undefined;
==认为null和undefined是相等的; ===则返回false;
8.变量类型-对象
(1)JS对象是一种复合值,是属性或已命名值的集合,也就是键值对集合;
(2)当值是函数的时候,我们称他为方法;
(3)使用大括号定义对象: var person={ name:"xiaoming", say:function(){ console.log("hello"); } }
(4)通过点(.)访问对象的属性:person.name;
(5)通过点(.)访问对象的方法:person.say();
9.变量类型-全局对象
(1)全局对象是全局定义的符号,在程序中可以直接用;
(2)JS解释器启动时,将创建一个新的全局对象;
(3)常见的全局对象: 全局属性:如undefined、Infinity、NaN等: 全局函数:如parseInt()、eval()、isNaN()、toFixedo 等; 构造函数:如Array()、 String0、 Date0等; 全局对象:如Math;
(4)在代码最顶级,可以用关键词this来引用全局对象,也可以用window自身属性来引用; 如: this.alert(1); window.alert(1);
(5)当我们声明一个全局变量时,这个全局变量就会作为全局对象的一个属性如: var a = 8 ; window.alert(this.a);
(6)我们在写程序时最好把全局对象当做保留字,避免出现意外错误。
10.变量类型-包装对象
存取字符串、数字或布尔值的属性时创建的临时对象称作包装对象。
11.不可变的原始值和可变的对象引用
(1)不可变的原始值:
任何方法都无法更改一个原始类型的值:数字、字符串、布尔值、nul1、undefined;
对字符串类型的修改操作,只会返回一个新的字符串,原始字符串不会被修改:
原始值在做比较时,只要值相等,他们就是相等的。
(2)可变的对象引用
对象类型的值是可以修改的,如: var obj ={name:'yourname', age:20}; obj.age= 30; console.log(obj .age);
12.数据类型-对象的比较
(1)包含相同属性及相同值的两个对象类型的值是不相等的: 我们通常将对象称为引用类型(reference type):
依照术语叫法,对象值都是引用,对象的比较均是引用比较; 所以,当且仅当他们引用同一个对象时,才相等:
var a= [1,2.3];
var b = a;//变量b也引用这个数组
b[2]=9://通过变量b来修改引用的数组,变量a也会被修改 console.log(a=== b);
console.log(a);//这个时候控制台会打印出来:[1,2.9]
将对象或者数组赋值给一个变量时,是对值的引用,本身并没有复制一份:
如果想复制一个副本出来,则需要显式的复制对象的每个属性或者数组的每个元素:
(2)如果我们想比较两个对象或者数组的值是否相等,则需要比较他们的属性或元素;数组可以循环比较每一个元素;
13.数据类型-类型转换
(1)JS总是把值自动转换为它需要的数据类型
(2)转换为数字: -(减)、*(乘)、/(除),会把类型转换成数字; true转化为1,false、空字符串转换为0;
加号:+,只要有一个是字符串,则全部作为字符串:因为加号(+)同时还是字符串连接符 号; parseInt ()、 parseFloat()函数。
(3)原始值到对象的转换:直接使用String()、Number()、Boolean()构造函数转换;
14.数据类型-变量声明
(1)JavaScript中使用一个变量之前需要先声明,使用没有声明的变量会报错;
(2)使用var来声明一个变量:JS是弱类型语言,不需要设置类型; 一次声明一个变量:var name,var age; 一次声明多个变量:var a,b,c; 如果var声明的变量没有赋值,则初始值是undefined 声明变量的同时可以赋值(初始值):var h="abc"; var a=1,b=2,c=3;
15.数据类型-变量作用域及提升
(1)变量作用域: JS变量的作用域分全局变量和局部变量; JS中声明的全局变量是全局对象的属性; 函数体内(var声明)的变量称为局部变量,函数的参数也是局部变量; 函数体内不使用var声明而直接赋值的变量当做全局变量; 函数体内局部变量的优先级高于全局变量。
(2)变量提升: 变量的提升是指会把变量的声明提升到前面,但是不提升变量赋值; 解释器在执行js代码的时候,会把所有的声明,包括变量和函数的声明,提到最前面; 变量的提升本质上是声明的提升。
16.数据类型-作用域链
(1)JS里的全局代码或者函数,都有一个与之对应的作用域链;
(2)作用域链可以理解为对象的列表,或叫对象的链表,他们是按优先级顺序排列的;
(3)这些对象定义了一段代码或者函数的“作用域中”的变量;
(4)在全局(函数外的)代码中,作用域链由一个全局对象组成;
(5)在无嵌套的函数中,作用域链有两个对象: 定义函数参数和局部变量的对象; 定义全局变量的对象; 如果是嵌套函数,则作用域链上至少三个对象。
(6)当代码运行需要变量解析(就是查找需要的变量的值)的时候,就在作用域链(有顺序的对象或者链表)里面寻找对应的变量,一旦找到就使用该变量并结束寻找;如果作用域链里面找不到对应的变量,则抛出错误。
17.数据类型-作为属性的变量
(1)使用var声明变量时,作为全局对象的一个属性,无法通过delete运算符删除;
(2)不使用var,直接给一个未声明的变量赋值,该变量是可以delete的;
(3)不使用var,使用关键词this给一个变量赋值,可以delete 。
第四章 表达式和运算符
1.表达式和运算符-原始表达式
(1)原始表达式不可再分割,是最小的表达式;
(2)原始表达式包含直接量、关键字(保留字)和变量名;
(3)常见原始表达式举例: 直接量:1;1.02;“Hello World!”; 保留字:true;false; 变量名:name;age;
2.表达式和运算符-数组原始化表达式
(1)可以简单理解为:数组直接量;
(2)数组初始表达式:由中括号([])和其内部用逗号(英文状态)分隔开的列表构成;
(3)初始化的结果是创建一个新的数组;数组的元素是逗号分隔开的表达式的值;
(4)“数组初始化表达式”中的“元素”也可以是“数组初始化表达式”,即多维数组;
(5)常见数组初始化表达式举例: 空数组:[];一维数组:[1,2,3,'a','b'];多维数组:[['a','s','d'],[1,2,'b'],['g','h']];
3.表达式和运算符-对象原始化表达式
(1)可以简单理解为:对象直接量;
(2)对象初始化表达式︰由花括号({})和其内用逗号(英文状态,)分隔开的列表构成;
(3)初始化的结果是创建一个新的对象;对象的属性是逗号分隔开的表达式的值;属性包括属性名和属性值,属性名和属性值之间用冒号隔开;
(4)“对象初始化表达式”中的“元素”也可以是“对象初始化表达式”,可以任意层级嵌套;
(5)对象初始化表达式举例︰ {name:"xiaoming",age:22}; { p1:{name:"xiaohong",age:12}, p2:{name:"xiaogang",age:15} }
4.表达式和运算符-函数定义表达式
(1)可以简单理解为:函数直接量;
(2)表达式的值是这个新定义的函数;
(3)函数表达式举例:var fn=function(a,b){ return a+b; }
5.表达式和运算符-属性访问表达式
(1)有两种访问方式:点(.)、中括号([]);
(2)点的访问方式更方便,中括号的访问方式适用所有情况;
(3)参考例子:
6.表达式和运算符-调用表达式
(1)如果调用的函数或方法有返回值,则表达式的值就是该返回值;
(2)如果调用的函数或方法没有返回值,则表达式的值是undefined ;
(3)简单理解就是函数或方法名称后面跟上小括号代表执行;
7.表达式和运算符-对象创建表达式
(1)由函数调用表达式延伸而来,前面加个new即可;
(2)如果不需要传递参数,函数后面的小括号可以省略;
(3)如果调用的函数或方法没有返回值,则表达式的值是undefined ;
(4)简单理解就是函数或方法名称后面跟上小括号代表执行;
(5)例子:new Array(1,2,3); new String("hello world");
8.表达式和运算符-算术表达式
(1)算术表达式:加减乘除取余:+ - / * %;
(2)+:数字相加 或 字符串连接: 如果其中一个操作数是对象,则JavaScript会自动把他转成原始类型的值; 如果其中一个操作数是字符串的话,则另一个也会转成字符串,此时是字符串连接: 如果两个操作数都是数字,则进行加法运算;
(3)例子:
9.表达式和运算符-一元算术表达式
(1)+ :可以拿来很方便的把操作数转换为数字;
(2)- :把操作数转换成数字,改变运算结果的符号;
(3)++、-- :自增自减运算符,常用于循环的计数器控制; 放在操作数前面表示先运算后执行; 放在操作数后面表示先执行后运算;
(4)例子:
10.表达式和运算符-关系表达式
(1)==:相等运算符,检查两个值是否相等,不考虑类型;
(2)===:全等运算符,检查两个值是否相等,同时考虑类型;
(3)比较运算符:>、>=、<、<=;
(4)in运算符:检查右侧对象里面是否拥有左侧属性名,如果有返回true ;
(5)instanceof:检查左侧的对象是否是右侧的实例,如果是返回true;
(6)如果一个对象是一个“父类”的子类的实例,则返回true ;
(7)所有的对象都是Object的子类; 例子:
11.表达式和运算符-逻辑表达式
(1)逻辑 &&:都为true是才才返回true,一但遇到false,后面的代码不会执行;
(2)逻辑 ||:有一个为true是返回true,一旦遇到一个true,后面的代码不会执行;
(3)逻辑 ! :首先将操作数转换为布尔值,然后对布尔值取反;
12.表达式和运算符-赋值表达式
(1)赋值:=;
(2)带运算的赋值:+=、-=、*=、/=、%= ......
13.表达式和运算符-更多运算符
(1)三元运算符: 结构:条件?条件为true执行:条件为false执行; 举例:let a1=3; a1==3?console.log("等于3"):console.log("不等于3"); //等于3
(2)void:忽略计算结果并返回undefined; let x = void (1 + 2); //undefined
(3)逗号运算符:用于分割语句,返回的是最后一个语句的值;
第五章 语句
1.语句-基本概念
(1)语句就是JS的命令: 语句以分号(;)结束,也可以换行作为新的语句开始; 简单理解就是告诉JS解释器要干什么,所谓JS程序就是一系列语句的集合;
JS解释器在执行程序的时候,就是按编写顺序来执行语句,JS解释器会把声明提升到前面; 各种表达式就是表达式语句;
2.语句-复合语句
(1)复合语句就是用大括号将多条语句括起来;
(2)语句块的结尾不需要分号;
var a=10;
console.log(a)
(3)整齐缩进的代码看上去更安逸,更容易理解:
(4)当需要把多条语句当做一条语句来执行时,用复合语句,如循环:
3.语句-空语句
(1)空语句就是只有语句的结束符号分号(;),没有其他的代码;
(2);这就是一个空语句,只有分号;
4.语句-声明语句
(1)用于声明变量的var var之后跟随的是要声明的变量列表; 可以指定或不指定初始值,不指定初始值则默认值是undef ined; 在函数体内用var声明的变量是局部变量; 在全局代码中用var声明的变量是全局变量; var声明的变量无法用delete删除。
(2)用于定义函数的function 函数声明的语法格式如下: function 函数名 (形参){ 函数体 }; 函数名(实参) //调用函数 列:
在定义函数时,并不执行函数体内的语句; 函数名后跟小括号,代表执行函数,也就是会执行函数体(大括号)里面的语句; 和变量提升类似,function声明的函数(名及其函数体)会提升到作用域最前面; 默认返回值undefined,如果需要指定返回值使用return。
5.语句-条件语句
(1)条件语句是通过判断表达式的值来确定是执行还是跳过某些语句(分支) :
if(如果):
第一种形式:if (expression) { statements; };
第二种形式: if (expression) { statements 1; } else { statements2; };
括住表达式的圆括号是必须的;
括住语句主体的大括号在只有一个语句的时候,是可以省略的。
else if: else和if之间有空格:
当有多个分支时我们使用else if实现;
else if并不是真正的JS语句,他是多个if/else连在一起的惯用写法。
(2)switch:适用于多个分支依赖于同一个表达式:
switch语句的语法结构 : switch(expression){ statements;} ;
代码块中可以使用多个由case关键字标记的代码片段;
case后面跟的是一个表达式和一个冒号;
如果其中一个case子句中的表达式和条件表达式相同(===),则从对应的代码块开始执行;
不能简单理解为执行对应的代码块,这就是为什么代码块最后要加break跳出switch的原因 :case只标记开始位置,不标记结束位置;
如果找不到和条件表达式相同的case,则执行default下面的代码块。
6.语句-循环语句
(1)while循环语句
while循环语句的语法结构: while (expression) { statement} ;
不断的执行statement主体语句,直到expression为false;
(2)do...while循环语句
语法结构: do{ statement} whi le (expression) ;
至少执行一次,用分号结尾;
不断的执行statement主体语句,直到expression为false;
(3)for循环语句
for循环的语法结构:for (初始化语句;循环判断条件:计数器变量更新) { statement;};
不断的执行statement主体语句,直到判断条件不成立;
(4)for...in循环语句
for... in循环的语法结构:for(variable in object) { statement ;};
for...in循环出来object里所有属性的属性名或者元素的下标;
7.语句-跳转语句-标签语句
(1)跳转语句可以让JavaScript代码的执行从一个位置跳转到另一一个位置;
(2)标签语句:
标签由标识符加冒号组成,如: gohere:
标签标识符+冒号(:)+语句,就组成了标签语句;
break和continue可以使用语句标签。
(3)break用于结束一个循环;
(4)continue用于结束当次循环,并继续执行下一次循环。
8.语句-跳转语句-return
(1)return指定函数调用后的返回值;
return只能在函数体内出现;
return后面的代码不会再执行;
在调试函数时可以使用return指定断点位置。
9.语句-跳转语句-throw
(1)throw用于抛出异常;立即停止正在执行的程序,跳转至就近的逻辑异常处理程序;
10.语句-其他语句
(1)with
用于临时扩展作用域, with代码块执行完成后恢复原始状态;
不推荐使用with ,因为代码不好优化,运行慢等问题;
严格模式下是不能使用with的。
(2)debugger
debugger语句会产生一个断点,用于调试程序,并没有实际功能;
使用debugger的前提是手动打开了“开发者工具”;
debugger会产生一个断点,代码会停止在这里不再往下执行。
(3)use strict:use strict是将后续的代码解析为严格代码(开启严格模式);
严格模式下禁止使用with;
严格模式下所有的变量都要先声明;
严格模式下调用函数的this值是undefined。
第六章:对象
1.对象-基本概念
(1)除了字符串、数字、null、undefined、true、false,JS里面的其他值都是对象;
(2)字符串、数字布尔值的行为和不可变对象非常类似;
2.对象-创建对象-对象直接量
(1)由若干名/值对组成的映射表;
名和值中间用冒号分开;
多个名/值对之间用逗号和分号;
(2)整个映射表用大括号括起来;
(3)定义一个对象直接量:
3.对象-创建对象-new创建对象
(1)new后面跟一个函数表示创建对象,这里的函数是构造函数(constructor) ;
(2)用new创建几个内置对象:
4.对象-创建对象-原型初识
(1)构造函数、原型和实例的关系
构造函数都有一个属性prototype,这个属性是一个对象,是object的实例;
原型对象prototype里有一个constructor属性,该属性指向原型对象所属的构造函数;
实例对象都有一个__proto__属性, 该属性指向构造函数的原型对象;
(2)prototype与__proto__的关系
prototype是构造函数的属性;
__proto__是实例对象的属性;
两者都指向同一个对象。
5.对象-创建对象-Object.create()
(1)Object.create()是一个静态函数:
用于创建一个新对象,第一个参数是这个对象的原型;
6.创建对象-属性的查询、设置和删除
(1)使用(.)和中括号([])访问和设置对象的属性;
(2)delete运算符可以删除对象的属性;
只能删除自有属性,不能删除继承属性;
delete删除成功或删除不存在的属性或没有副作用时,返回true。
7.对象-检测属性
(1)判断某个属性是否存在于某个对象中:
in:检查一个属性是否属于某个对象,包括继承来的属性;
hasOwnProperty():检查一个属性是否属于某个对象自有属性,不包括继承来的属性;
propertyIsEnumerable():检查一个属性是否属于某个对象自有属性,且该属性可枚举,不包括继承来的属性。
8.对象-枚举属性
(1)for/in循环遍历对象中所有可枚举属性,把属性名称赋值给循环变量;
对象继承的内置方法不可枚举。
9.对象-属性getter和setter
(1)存取器属性:
属性值可以由一个或两个方法替代,这两个方法就是getter和setter;
由getter和setter定义的属性,称为“存取器属性”;
一般的只有一个值的属性称为“数据属性”;
查询存取器属性的值,用getter:拥有getter则该属性可读;
设置存取器属性的值,用setter:拥有setter则该属性可写。
10.对象-序列化对象
(1)序列化对象是指将对象的状态转成字符串,也可以将字符串还原为对象:
转成字符串:JSON.stringfy();还原为对象:JSON.parse();
第七章:数组
1.数组-创建数组
(1)数组是对象的特殊表达形式:数组的元素可以是数字、值、表达式、对象、数组等;
(2)定义数组的几种方式:
中括号的方式,简单方便:
new Array()创建数组对象:
2.数组-元素的读写
(1)用中括号对数组元素进行读写操作
3.数组-稀疏数组
(1)数组元素不连续的数组我们称为稀疏数组:
4.数组-数组长度(length)
(1)arr.length:得到数组的长度
5.数组-元素的添加和删除
(1)元素的添加
(2)元素的删除
6.数组-遍历
(1)for循环对数组元素进行遍历
7.数组-多维数组
(1)数组的元素可以是数组,可以多层嵌套,这就是多维数组:
8.数组-数组的方法
(1)join():将数组中的元素转换成字符串并连接在一起,默认是逗号(,)连接,可以指定连接符号:
(2)reverse():把数组中的元素顺序反转
(3)sort():对数组中的元素排序并返回排序后的值
(4)concat():数组连接,将添加的元素放到数组的最后面,连接后返回一个新数组
(5)slice():截取数组,两个参数,指定开始和结束位置(包左不包右)
参数支持负数,表示从后面往前面数,第一个-1,依次-2,-3...
(6)splice(arg1, arg2, arg3, arg4, arg...). :插入、删除、替换元素的通用方法
会直接修改原数组;
参数1:操作起始位置;
参数2:操作元素个数;
为空表示到结尾:为0表示插入元素:大于0表示替换元素;
arg3, arg4, argn... :新的元素,代表要插入的元素;
(7)数组元素的增删:
push():在数组的结尾添加一个或多个元素,返回新数组的长度;
pop():移除数组最后一个元素,返回移除的元素;
unshift():在数组的开头添加一个或多个元素,返回新数组的长度;
shift():删除数组第一个元素,并返回删除的元素;
这四个函数都是在原始数组上进行修改。
(8)toString():将数组的元素转换成字符串,并用逗号连接起来
(9)forEach():遍历数组元素,并调用指定的函数;
forEach调用的函数支持三个参数,依次为元素、索引、数组本身;
forEach不支持break;
(10)map():类似forEach ,为每个元素调用指定函数,该函数一般有返回值;(该操作返回一个新数组,不会修改原始数组)
(11)filter()返回数组的子集,是否返回当前元素是根据调用的函数来判断的
调用的函数参数是数组的元素:
(12)every()和some():对数组的所有元素执行函数检查;
every():当每个元素都返回true是才返回true;
some():当每个元素都返回false才返回false;
(12)reduce和reduceRight :使用指定的函数对数组元素进行组合,生成一个值(reduceRight表示从右向左操作)
参数1:要执行的函数,有返回值:
参数2:传递给函数的默认值,可忽略:
(13)indexOf()和lastIndexOf :搜索指定的元素并返回其索引,不存在返回-1(lastIndex0f:从后面往前搜索)
参数1:要搜索的元素;
参数2:从数组的哪个位置开始搜索,可省略,默认0;
9.数组-数组类型
(1)Array.isArray():判断是否是数组;
(2)数组是一种特殊类型的对象;
(3)有些对象看起来像数组,称为类数组;
第七章:函数
1.函数-基本概念
(1)函数是实现功能的代码块;
(2)一处定义,处处调用;
(3)如果把函数作为一个对象的属性,则称为方法;
(4)每次调用函数会产生一个this,谁调用这个函数或者方法,this就指向谁;
(5)函数就是对象,可以给他设置属性或方法
2.函数-定义函数
(1)使用function声明─个函数
(2)实例:
普通函数:
递归函数:
表达式函数:
3.函数-嵌套函数
(1)函数是可以嵌套的:
函数可以嵌套在其他函数里面,也就是在函数里面可以定义函数;
被嵌套的函数可以访问父级函数的变量或参数;
嵌套的函数不会从父级函数中继承this;如果想使用外层函数的this,需要把他保存到一个变量中。
3.函数-函数调用
(1)函数只有在调用时才会执行:
作为函数:
作为方法:
作为构造函数:
通过他们的call或者apply方法调用;
函数名后面加小括号代表执行函数:
4.函数-形参和实参
(1)函数的参数相对来讲还是比较自由:
形参:在定义函数时使用的参数,用来接收调用函数时传进来的值;
实参:是在调用时传递给函数的值;
实参保存在一个类数组arguments里面,函数内部可用;
如果实参少于形参个数,则多出的形参是undefined;
如果实参多于形参,则只使用有效的实参,多出部分没影响。
(2)实例:
5.函数-作为值的函数
(1)可以将函数作为值赋值给变量;也可以作为实参直接使用.
(2)实例:
6.函数-作为命名空间的函数
(1)函数内声明的变量整个函数内可见,函数外不可见;
(2)定义一个函数作为变量的作用域空间,这样不会污染到全局变量;避免同名变量冲突;
(3)这在js里面是一种很常见的修改变量作用域的写法.
7.函数-闭包
(1)JS执行时用到作用域链,作用域链在函数定义时就已经定好了; 每次执行函数时又有自己的新的作用域链;
(2)函数内不仅包含函数主题,还要引用当前的作用域链;
(3)函数体内部变量保存在函数作用域内,这种特性叫闭包;
(4)JS函数都是闭包:都是对象并关联到作用域链;
(5)实例:
(6)可以这么理解闭包∶把外层函数看成对象,内部的局部变量看成属性,内部的函数看成对象的方法。
8.函数-函数的属性
(1)函数是JavaScript代码中特殊的对象;
(2)length :属性,应该传递的实参个数,也就是形参个数;
(3)prototype:指向一个对象的引用,称为原型对象:console.log(Array.prototype)。
9.函数-方法call和apply
(1)call()和apply()︰实现方法劫持
(2)apply(为谁做事情,一个数组参数)∶
apply传递过来的数组参数会和方法的参数一一对应;
apply语法格式:被劫持的函数.apply()。
(3)call(thisArg: any, args...: any) :
call传递的参数是一个一个的,这样可以很方便的和被劫持的函数参数保持一致;
(4)函数被劫持以后会改变函数内this的指向,因为谁使用这个函数,this就指向谁。
10.函数-方法toString
(1)toString:返回自定义函数的完整代码;
(2)实例:
11.函数-高阶函数
(1)高阶函数是指操作函数的函数;
(2)实例:
第八章:类和对象
1.类和对象-类和构造函数
(1)构造函数用来创建实例对象:
构造函数首字母大写:一般用于初始化一些属性值。
(2)实例:
(3)构造函数的prototype属性用于定义该函数对象的原型:该原型会被所有的实例对象继承;
(4)实例:
(5)使用关键词new调用构造函数创建一个实例对象;
(6)新创建的实例对象会继承构造函数的原型,也就是prototype属性;
(7)此时原型对象或实例都没有constructor(构造函数)属性,需要显式指定:Range.prototype. constructor = Range;
2.类和对象-类的扩充
(1)JavaScript基于原型的继承机制是动态的;
如果原型对象发生改变,继承这个原型的所有实例对象也跟着改变;
(2)内置构造函数扩展︰
(3)禁止对构造函数扩展的方法︰
设置为不可扩展:Object.preventExtensions(Range.prototype);
设置为不可扩展不可删除:Object.seal(Array.prototype);
3.模块化编程-用作命名空间的对象
(1)代码的模块化可以让代码在不同的场景中重复使用︰
模块化的中心思想是代码的可重用性;
一般模块是一个独立的JS文件:里面可以是一个或一组相关的类、常用函数等;
模块是为了大规模JS开发:模块中尽可能少定义全局变量,最好不超过一个。
(2)用作命名空间的对象∶
在模块创建过程中,用对象作为命名空间,可避免全局变量被污染;
函数和变量可以作为命名空间的属性存储起来,而不是直接定义全局变量。
4.模块化编程-私有命名空间的函数
(1)用作私有命名空间的函数:
在一个函数中定义的变量和函数是局部变量,也就是私有变量:可以使用函数的方式把成员变量变成私有的;
这里的函数一般是立即执行函数,也就是函数后面跟个小括号;
(2)实例:
5.类和对象-全局对象-Math
(1)数学函数和常量,没有构造函数;他的函数就是简单的函数,不是对象操作;
常量:Math.E:常量e;Math.PI:常量∏;
静态函数:
6.类和对象-全局对象-Date
(1)Date对象用于操作曰期和时间;
构造函数:
new Date():不传参表示以当前时间创建一个Date对象;
new Date(参数):参数可以是一个时间戳或者时间格式的字符串,也可以多个参数,依次为年、月、日、时、分、秒、毫秒;
常用方法:
7.类和对象-全局对象-String
(1)String对象用于操作字符串;
属性:length:字符串长度;
常用方法:
第九章:正则表达式
1.正则表达式-基本概念及定义方式
(1)正则表达式:regular expression,是描述字符模式的对象;
(2)JavaScript中的RegExp类表示正则表达式;
(3)正则表达式的定义:
2.正则表达式-直接量字符
(1)正则表达式中的字母和数字按字面含义进行匹配;
(2)支持非字母的字符匹配,而这些字符就需要反斜线(\)进行转义了;
(3)常见的直接量字符:
3.正则表达式-字符类
(1)字符类是指代表特殊含义而不再是字面意思;
如果需要匹配字符类的字面意思,需要反斜线(\)进行转义;
常见的正则表达式字符类:
4.正则表达式-重复字符
(1)有时候需要对指定字符多次匹配:
可以在正则表达式中定义元素的重复出现次数;
正则表达式重复字符语法:
5.正则表达式-选择和分组
(1)正则表达式支持选择项或子表达式;
选择和分组:
6.正则表达式-指定位置
(1)指定匹配位置:
指定位置:
(2)零宽断言︰我们说断言一般是指零宽断言,它匹配到的内容不会保存到匹配结果中去,只是用于指定一个位置而已。
7.正则表达式-修饰符
(1)正则表达式支持修饰符;
修饰符放在正则表达式的后边界之后:
8.String支持正则表达式的方法
支持正则表达式的String对象方法:
(1) search(regexp):
参数是正则表达式,返回第一个匹配的子串位置,找不着返回-1;
因为只返回第一个匹配子串,所以忽略修饰符g;
如果参数不是正则表达式则转成正则表达式。
(2)replace(var1, var2):
第一个参数是正则表达式,第二个参数是要替换成的字符串;
如果参数一不是正则表达式,则直接把对应的字符串替换为参数二;
如果修饰符有g,会全部替换,否则只替换第一个。
(3)match(regexp):
参数是正则表达式,返回匹配的结果,数组;
如果有修饰符g则全部匹配,否则只匹配第一个。
(4)split():
用指定字符串把字符串分割成数组;
参数支持字符串和正则表达式。
9.正则表达式对象的方法
正则表达式的方法;
(1)exec(str):
参数是字符串,对该字符串进行匹配检索;
总是返回一个结果,并提供匹配的完整信息;
再次执行会进行下次匹配;
没找到返回null。
(2) test(str):
对字符串进行检测,包含返回true,否则返回false。