首页 > 编程语言 >浅谈JavaScript

浅谈JavaScript

时间:2024-03-13 11:05:12浏览次数:28  
标签:语句 浅谈 对象 JavaScript 数组 属性 变量 函数

第一章 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)在书写代码定义标识符的时候不能使用保留字;

breakdoinstanceoftypeof
caseelsenewvar
catchfinallyreturnvoid
continueforswitchwhile
debuggerfunctionthiswith
defaultifthrowdelete
intry

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。


 




 

标签:语句,浅谈,对象,JavaScript,数组,属性,变量,函数
From: https://blog.csdn.net/weixin_52820235/article/details/135849474

相关文章

  • 浅谈有向无环图游戏
    以前写的,一直没发。浅谈有向无环图游戏在做题的时候,往往能遇到一些有关博弈论的游戏…公平组合游戏的解释在一般计算机竞赛中,博弈论的题目通常以“公平组合游戏ImpartialCombinatorialGame”的题干呈现给选手。所谓的公平组合游戏,定义如下:游戏有且仅有两个玩家,且游戏规......
  • 浅谈非内存对抗类和AI自瞄类FPS作弊程序原理及常用反反作弊措施与反作弊应对手段(上)
    一、引言    闲来无事,在浏览微信公众号的时候无意刷到了江西余江警方关于破获全国首例“AI自瞄”类外挂的案件,涉案金额达到惊人的3000余万。不得不感叹近年来AI相关科技发展之迅速及国内有关于FPS类及其他大类游戏作弊的黑产市场之大。    在工作学习之余,......
  • JavaScript 高阶技巧
    0x01深浅拷贝开发中经常需要拷贝(复制)一个对象,如果直接赋值,则对拷贝对象的修改会影响到源对象consto1={a:1,b:2}consto2=o1console.log(o2)//{a:1,b:2}o2.a=3console.log(o1)//{a:3,b:2}console.log(o2)//{a:3,b:2}原因在于,直......
  • 跨端轻量JavaScript引擎的实现与探索
    一、JavaScript1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史:时间版本说明1997年7月ES1.0发布当年7月,ECMA262标准出台1998年6月ES2.0发布该版本修改完全符合ISO......
  • 从keys命令出发-浅谈redis的字典和字典迭代器
    1.keys命令keys命令相信大家应该都用过,该命令会遍历整个redis的字典空间,对要查找的key进行匹配并返回。就像官方文档所说:在生产环境使用该方法的过程中要非常小心,因为redis服务器在执行该命令的时候其他客户端读写命令都会被阻塞。使用方法:KEYSpattern示例:127.0.0.1:6379......
  • JavaScript逆向之有道翻译加解密全过程解析
    本篇文章用于解析有道翻译中的加解密全过程url:https://fanyi.youdao.com/index.html#/加密访问网址,输入框中随便输入一个英文单词,查看触发流量包,只看Fetch/XHR类型的。这里主要关注webtranslate的这条,请求参数和响应数据都是有加密的,主要了解其的加解密逻辑。根据url定位......
  • [JavaScript] JavaScript的时间与时区
    0序言第1章节,原创,主要关注:JS的时间、时区国际化问题第2章节,主要来自于第1篇参考文献(系对第1章节的基础知识的夯实)1JavaScript时间、时区的国际化(案例)本案例等同于问题:JavaScript从浏览器根据不同时区获取时间的问题假定现在有两台Windows笔记本电脑。Step1设置......
  • JavaScript 打包器esbuild的基础使用
    esbuild是一种类似于webpack的极速JavaScript打包器。esbuild项目主要目标是:开辟一个构建工具性能的新时代,创建一个易用的现代打包器。先安装esbuildnpmiesbuild-g-g代表全局范围检查esbuild的版本esbuild--version命令行构建esbuildsrc\app.jsx--bundle--outfi......
  • JavaScript 常用取整、四舍五入方法汇总
    https://juejin.cn/post/7184257661339172919  2023-01-0314,624阅读2分钟 在JavaScript中,对数值进行四舍五入操作的场景有以下几种:向上取整:ceil向下取整:floor四舍五入:round固定精度:toFixed固定长度:toPrecision取整:parseInt1.向上取整:ceilceil是天花板......
  • javascript匹配文件名相同然后在后面增加数字的正则表达式
    在一个文件列表中constrenameFileName=(fileName:string)=>{console.log("originfilename",fileName)letfileList=getFileList()//获取文件列表,包含了文件名letcount=-1//记录当前包含了几个文件名fileList.forEach(value=>{letfullFil......