JavaScript知识概括

  • JavaScript简介
  • JavaScript语法
  • 数据类型
  • 运算符
  • 流程控制
  • 对象
  • 函数
  • 数组
  • Date
  • Math
  • 包装类
  • 字符串相关方法
  • 正则表达式
  • DOM
  • 事件
  • BOM
  • JSON

JavaScript简介

什么是语言?

  • 计算机就是一个由人来控制的机器,人让它干嘛,它就得干嘛。
  • 我们要学习的语言就是人和计算机交流的工具,人类通过语言 来控制、操作计算机。
  • 编程语言和我们说的中文、英文本质上没有区别,只是语法比 较特殊。
  • 语言的发展:
    ①纸带机:机器语言
    ②汇编语言:符号语言
    ③现代语言:高级语言

起源:

  • JavaScript诞生于1995年,它的出现主要是用于处理网页中的 前端验证。
  • 所谓的前端验证,就是指检查用户输入的内容是否符合一定的 规则。
  • 比如:用户名的长度,密码的长度,邮箱的格式等。

简史:

  • JavaScript是由网景公司发明,起初命名为LiveScript,后来由 于SUN公司的介入更名为了JavaScript。
  • 1996年微软公司在其最新的IE3浏览器中引入了自己对 JavaScript的实现JScript。
  • 于是在市面上存在两个版本的JavaScript,一个网景公司的 JavaScript和微软的JScript。
  • 为了确保不同的浏览器上运行的JavaScript标准一致,所以几 个公司共同定制了JS的标准名命名为ECMAScript。

实现:

  • ECMAScript是一个标准,而这个标准需要由各个厂商去实现。

javascript language javascript language service_javascript language

  • 不同的浏览器厂商对该标准会有不同的实现。
  • 我们已经知道ECMAScript是JavaScript标准,所以一般情况下这两个词我们认为是一个意思。
  • 但是实际上JavaScript的含义却要更大一些。

javascript language javascript language service_字符串_02

  • 一个完整的JavaScript实现应该由以下三个部分构成:
  • 一个完整的JavaScript实现包含了三个部分:ECMAScript、DOM和BOM。

JS的特点:

  • 解释型语言
  • 类似于 C 和 Java 的语法结构
  • 动态语言
  • 基于原型的面向对象

解释型语言:

  • JavaScript是一门解释型语言,所谓解释型值语言不需要被编 译为机器码在执行,而是直接执行。
  • 由于少了编译这一步骤,所以解释型语言开发起来尤为轻松, 但是解释型语言运行较慢也是它的劣势。
  • 不过解释型语言中使用了JIT技术,使得运行速度得以改善。

动态语言:

  • JavaScript是一门动态语言,所谓的动态语言可以暂时理解为 在语言中的一切内容都是不确定的。比如一个变量,这一时刻是个整型,下一时刻可能会变成字符串了。当然这个问题我们 以后再谈。
  • 不过在补充一句动态语言相比静态语言性能上要差一些,不过由于JavaScript中应用的JIT技术,所以JS可能是运行速度最快的动态语言了。

基于原型的面向对象:

  • JavaScript是一门面向对象的语言。
  • Java也是一门面向对象的语言,但是与Java不同JavaScript是基于原型的面向对象。

JavaScript语法

JavaScript编写位置:

  • JS代码需要编写到script标签中
  • 推荐使用的方式:可以将js代码编写到外部js文件中,然后通过script标签引入,写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制。
    script标签一旦用于引入外部文件了,就不能在编写代码了,即使编写了浏览器也会忽略,如果需要则可以在创建一个新的script标签用于编写内部代码。
  • 可以将js代码写在超链接的href属性中,这样当点击超链接时,会执行js代码。
<a href="javascript:alert('让你点你就点!!');">你也点我一下</a>
<a href="javascript:;">你也点我一下</a>
  • 可以将js代码编写到标签的onclick属性中,当我们点击按钮时,js代码才会执行虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用

JS基本语法:

  • 注释中的内容不会被执行,但是可以在源代码中查看,要养成良好的编写注释的习惯,也可以通过注释来对代码进行一些简单的调试。
  • 多行注释
/*
alert("hello");
*/
  • 单行注释
//alert("hello");
  • JS中严格区分大小写
  • JS中每一条语句以分号(;)结尾
    ①如果不写分号,浏览器会自动添加,但是会消耗一些系统资源,
    ②而且有些时候,浏览器会加错分号,所以在开发中分号必须写
  • JS中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化

字面量和变量:

  • 字面量,都是一些不可改变的值,比如 :1 2 3 4 5 。字面量都是可以直接使用,但是我们一般都不会直接使用字面量
  • 变量 变量可以用来保存字面量,而且变量的值是可以任意改变的。变量更加方便我们使用,所以在开发中都是通过变量去保存一个字面量,而很少直接使用字面量。可以通过变量对字面量进行描述。

标识符:

  • 在JS中所有的可以由我们自主命名的都可以称为是标识符,例如:变量名、函数名、属性名都属于标识符。
  • 命名一个标识符时需要遵守如下的规则:
    ①.标识符中可以含有字母、数字、_、$
    ②标识符不能以数字开头
    ③标识符不能是ES中的关键字或保留字
    ④标识符一般都采用驼峰命名法
    <1>首字母小写,每个单词的开头字母大写,其余字母小写:helloWorld xxxYyyZzz
  • JS底层保存标识符时实际上是采用的Unicode编码,所以理论上讲,所有的utf-8中含有的内容都可以作为标识符。

数据类型:

  • 数据类型指的就是字面量的类型,在JS中一共有六种数据类型:
    ①String 字符串
    ②Number 数值
    ③Boolean 布尔值
    ④Null 空值
    ⑤Undefined 未定义
    ⑥Object 对象
  • 其中String Number Boolean Null Undefined属于基本数据类型,而Object属于引用数据类型。

数据类型

String字符串:

  • 在JS中字符串需要使用引号引起来,使用双引号或单引号都可以,但是不要混着用。
  • 引号不能嵌套,双引号不能放双引号,单引号不能放单引号
  • 在字符串中我们可以使用\作为转义字符,当表示一些特殊符号时可以使用\进行转义。
\" 表示 "
\' 表示 '
\n 表示换行
\t 制表符
\\ 表示\

Number类型:

  • 在JS中所有的数值都是Number类型,包括整数和浮点数(小数)。
  • JS中可以表示:
    ①数字的最大值:Number.MAX_VALUE=1.7976931348623157e+308
    ②Number.MIN_VALUE 大于0的最小值=5e-324
  • 如果使用Number表示的数字超过了最大值,则会返回一个 Infinity 表示正无穷。-Infinity 表示负无穷
  • 使用typeof检查Infinity也会返回number
  • NaN 是一个特殊的数字,表示Not A Number,使用typeof检查一个NaN也会返回number。
  • 可以使用一个运算符 typeof来检查一个变量的类型
    ①语法:typeof 变量
    ②检查字符串时,会返回string
    ③检查数值时,会返回number
  • 在JS中整数的运算基本可以保证精确,如果使用JS进行浮点运算,可能得到一个不精确的结果。所以千万不要使用JS进行对精确度要求比较高的运算。

Boolean类型:

  • Boolean 布尔值 布尔值只有两个,主要用来做逻辑判断
    ①true表示真
    ②false表示假
  • 使用typeof检查一个布尔值时,会返回boolean

Null和Undefined:

  • Null(空值)类型的值只有一个,就是null。null这个值专门用来表示一个为空的对象。使用typeof检查一个null值时,会返回object。
  • Undefined(未定义)类型的值只有一个,就是undefind。当声明一个变量,但是并不给变量赋值时,它的值就是undefined。使用typeof检查一个undefined时也会返回undefined。
    但如果直接使用未声明的变量会直接报错。

强制类型转换:

  • 指将一个数据类型强制转换为其他的数据类型
  • 类型转换主要指,将其他的数据类型,转换为String,Number,Boolean。

转换为String:

  • 方式一:调用被转换数据类型的toString()方法,该方法不会影响到原变量,它会将转换的结果返回。
    ①但是注意:null和undefined这两个值没有toString()方法,如果调用他们的方法,会报错。
  • 方式二:调用String()函数,并将被转换的数据作为参数传递给函数,使用String()函数做强制类型转换时,对于Number和Boolean实际上就是调用的toString()方法,但是对于null和undefined,就不会调用toString()方法。它会将 null 直接转换为 "null",将 undefined 直接转换为 "undefined"。

转换为Number:

  • 转换方式一:使用Number()函数
    ①字符串 --> 数字
    <1>如果是纯数字的字符串,则直接将其转换为数字
    <2>如果字符串中有非数字的内容,则转换为NaN
    <3>如果字符串是一个空串或者是一个全是空格的字符串,则转换为数字 0
    ②布尔 --> 数字
    <1>true 转成数字 1
    <2>false 转成数字 0
    <3>null --> 数字 0
    <4>undefined --> 数字 NaN
  • 转换方式二:这种方式专门用来对付字符串
    ①parseInt() 把一个字符串转换为一个整数
    ②parseFloat() 把一个字符串转换为一个浮点数

其他的进制的数:

  • 在js中,如果需要表示16进制的数字,则需要以0x开头。如果需要表示8进制的数字,则需要以0开头。如果要要表示2进制的数字,则需要以0b开头。但是不是所有的浏览器都支持。
//十六进制
a = 0x10;
a = 0xff;
a = 0xCafe;
			
//八进制数字
a = 070;
			
//二进制数字
a = 0b10;
  • 像"070"这种字符串,有些浏览器会当成8进制解析,有些会当成10进制解析。 a = “070”;
    可以在parseInt()中传递一个第二个参数,来指定数字的进制。
a = parseInt(a,10);

转换为Boolean:

  • 使用Boolean()函数
    ①数字 —> 布尔
    <1>除了0和NaN,其余的都是true
    ②字符串 —> 布尔
    <1>除了空串,其余的都是true
    null和undefined都会转换为false对象也会转换为true

运算符

运算符:

  • 运算符也叫操作符,通过运算符可以对一个或多个值进行运算,并获取运算结果
    ①比如:typeof就是运算符,可以来获得一个值的类型,它会将该值的类型以字符串的形式返回:
    number string boolean undefined object
  • 算数运算符,当对非Number类型的值进行运算时,会将这些值转换为Number然后再运算。任何值和NaN做运算都得NaN。+ <1>+可以对两个值进行加法运算,并将结果返回,如果对两个字符串进行加法运算,则会做拼串,会将两个字符串拼接为一个字符串,并返回。任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作。
    - <1>可以对两个值进行减法运算,并将结果返回
    * <1>* 可以对两个值进行乘法运算
    / <1>/ 可以对两个值进行除法运算
    % <1>% 取模运算(取余数)
  • 注意:任何值和字符串相加都会转换为字符串,并做拼串操作,我们可以利用这一特点,来将一个任意的数据类型转换为String。我们只需要为任意的数据类型 + 一个 “” 即可将其转换为String。这是一种隐式的类型转换,由浏览器自动完成,实际上它也是调用String()函数。
  • 注意: 任何值做- * /运算时都会自动转换为Number,我们可以利用这一特点做隐式的类型转换。可以通过为一个值 -0 *1 /1来将其转换为Number。原理和Number()函数一样,使用起来更加简单。

一元运算符:

  • 一元运算符,只需要一个操作数
  • +正号: 正号不会对数字产生任何影响
  • - 负号:负号可以对数字进行负号的取反
  • 对于非Number类型的值,它会将先转换为Number,然后再运算。可以对一个其他的数据类型使用+,来将其转换为number,它的原理和Number()函数一样

自增和自减:

  • 自增 ++:通过自增可以使变量在自身的基础上增加1,对于一个变量自增以后,原变量的值会立即自增1。自增分成两种:后++(a++) 和 前++(++a),无论是a++ 还是 ++a,都会立即使原变量的值自增1
    ①不同的是a++ 和 ++a的值不同
    <1>a++的值等于原变量的值(自增前的值)
    <2>++a的值等于新值 (自增后的值)
  • 自减 --,通过自减可以使变量在自身的基础上减1,自减分成两种:后–(a–) 和 前–(--a),无论是a-- 还是 --a 都会立即使原变量的值自减1。
    ①不同的是a-- 和 --a的值不同
    <1>a-- 是变量的原值 (自减前的值)
    <2>–a 是变量的新值 (自减以后的值)

逻辑运算法:

  • JS中为我们提供了三种逻辑运算符:
  • ! 非 ①!可以用来对一个值进行非运算
    ②所谓非运算就是值对一个布尔值进行取反操作,true变false,false变true
    ③如果对一个值进行两次取反,它不会变化,所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值,可以为一个任意数据类型取两次反,来将其转换为布尔值,原理和Boolean()函数一样。
  • && 与 ①&&可以对符号两侧的值进行与运算并返回结果
    ②运算规则:
    <1>两个值中只要有一个值为false就返回false,只有两个值都为true时,才会返回true。
    <2>JS中的“与”属于短路的与,如果第一个值为false,则不会看第二个值。
  • || 或 ① ||可以对符号两侧的值进行或运算并返回结果
    ②运算规则:
    <1>两个值中只要有一个true,就返回true,如果两个值都为false,才返回false。
    <2>JS中的“或”属于短路的或,如果第一个值为true,则不会检查第二个值。

&& || 非布尔值的情况:

  • 对于非布尔值进行与或运算时,会先将其转换为布尔值,然后再运算,并且返回原值
  • 与运算:
    ①如果第一个值为true,则必然返回第二个值
    ②如果第一个值为false,则直接返回第一个值
  • 或运算:
    ①如果第一个值为true,则直接返回第一个值
    ②如果第一个值为false,则返回第二个值

赋值运算:

  • 可以将符号右侧的值赋值给符号左侧的变量
  • += ①a += 5 等价于 a = a + 5
  • -= ①a -= 5 等价于 a = a - 5
  • *= ①a *= 5 等价于 a = a * 5
  • /= ①a /= 5 等价于 a = a / 5
  • %= ①a %= 5 等价于 a = a % 5

关系运算符:

  • 通过关系运算符可以比较两个值之间的大小关系,如果关系成立它会返回true,如果关系不成立则返回false
  • > 大于号 ①以】判断符号左侧的值是否大于右侧的值
    ②如果关系成立,返回true,如果关系不成立则返回false
    ->= 大于等于 ①判断符号左侧的值是否大于或等于右侧的值
    ②如果关系成立,返回true,如果关系不成立则返回false
  • < 小于号 ①判断符号左侧的值是否小于右侧的值
    ②如果关系成立,返回true,如果关系不成立则返回false
  • <= 小于等于 ①判断符号左侧的值是否小于或等于右侧的值
    ②如果关系成立,返回true,如果关系不成立则返回false
  • 非数值的情况: ①对于非数值进行比较时,会将其转换为数字然后在比较
    ②如果符号两侧的值都是字符串时,不会将其转换为数字进行比较,而会分别比较字符串中字符Unicode编码

编码:

  • 字符串中使用转义字符输入Unicode编码
\u四位编码

console.log("\u2620");
  • 在网页中使用Unicode编码,这里的编码需要的是10进制
&#编码;

相等运算法:

  • 相等运算符用来比较两个值是否相等,如果相等会返回true,否则返回false。
  • 使用 =\= 来做相等运算 ①当使用==来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型,然后在比较。
  • 使用 !=不相等 ①不相等用来判断两个值是否不相等,如果不相等返回true,否则返回false。
    ②使用 != 来做不相等运算,不相等也会对变量进行自动的类型转换,如果转换后相等它也会返回false。
  • ===全等 ①用来判断两个值是否全等,它和相等类似,不同的是它不会做自动的类型转换,如果两个值的类型不同,直接返回false。
  • !==不全等 ①用来判断两个值是否不全等,和不等类似,不同的是它不会做自动的类型转换,如果两个值的类型不同,直接返回true。

条件运算符:

  • 条件运算符也叫三元运算符,语法:条件表达式?语句1:语句2;
  • 执行的流程:条件运算符在执行时,首先对条件表达式进行求值,如果该值为true,则执行语句1,并返回执行结果。如果该值为false,则执行语句2,并返回执行结果。如果条件的表达式的求值结果是一个非布尔值,会将其转换为布尔值然后在运算。
false?alert("语句1"):alert("语句2");

运算符的优先级:

  • , 运算使用,可以分割多个语句,一般可以在声明多个变量时使用。
//使用,运算符同时声明多个变量
//var a , b , c;
			
//可以同时声明多个变量并赋值
//var a=1 , b=2 , c=3;
  • 就和数学中一样,在JS中运算符也有优先级,比如:先乘除 后加减。在JS中有一个运算符优先级的表,在表中越靠上优先级越高,优先级越高越优先计算,如果优先级一样,则从左往右计算。
  • 但是这个表我们并不需要记忆,如果遇到优先级不清楚,可以使用()来改变优先级。

流程控制

代码块:

  • 我们的程序是由一条一条语句构成的,语句是按照自上向下的顺序一条一条执行的。在JS中可以使用{}来为语句进行分组,同一个{}中的语句我们称为是一组语句,它们要么都执行,要么都不执行,一个{}中的语句我们也称为叫一个代码块。
  • 在代码块的后边就不用再编写;
{
	var a = 10;	
	alert("hello");
	console.log("你好");
	document.write("语句");
}
  • JS中的代码块,只具有分组的的作用,没有其他的用途,代码块内容的内容,在外部是完全可见的。

流程控制语句:

  • JS中的程序是从上到下一行一行执行的,通过流程控制语句可以控制程序执行流程,使程序可以根据一定的条件来选择执行。
  • 语句的分类:
    条件判断语句条件分支语句循环语句

if语句(条件判断语句):

  • 条件判断语句:使用条件判断语句可以在执行某个语句之前进行判断,如果条件成立才会执行语句,条件不成立则语句不执行。
  • 语法一:
    ①if语句在执行时,会先对条件表达式进行求值判断,如果条件表达式的值为true,则执行if后的语句,如果条件表达式的值为false,则不会执行if后的语句。
    ②if语句只能控制紧随其后的那个语句,如果希望if语句可以控制多条语句,可以将这些语句统一放到代码块中
    ③if语句后的代码块不是必须的,但是在开发中尽量写上代码块,即使if后只有一条语句
if(条件表达式){
		语句
}
  • 语法二:
    ①当该语句执行时,会先对if后的条件表达式进行求值判断,如果该值为true,则执行if后的语句,如果该值为false,则执行else后的语句。
if(条件表达式){
		语句...
}else{
		语句...
}
  • 语法三:
    ①当该语句执行时,会从上到下依次对条件表达式进行求值判断,如果值为true,则执行当前语句。如果值为false,则继续向下判断。如果所有的条件都不满足,则执行最后一个else后的语句。该语句中,只会有一个代码块被执行,一旦代码块执行了,则直接结束语句。
if(条件表达式){
		语句...
}else if(条件表达式){
		语句...
}else if(条件表达式){
		语句...
}else{
		语句...
}

条件分支语句:

  • 条件分支语句也叫switch语句。语法:
switch(条件表达式){
	case 表达式:
 		语句...
		break;
 	case 表达式:
		语句...
		break;
	default:
		语句...
		break;
}
  • 执行流程:switch…case…语句在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较,如果比较结果为true,则从当前case处开始执行代码。
  • 当前case后的所有的代码都会执行,我们可以在case的后边跟着一个break关键字,这样可以确保只会执行当前case后的语句,而不会执行其他的case。如果比较结果为false,则继续向下比较。如果所有的比较结果都为false,则只执行default后的语句。switch语句和if语句的功能实际上有重复的,使用switch可以实现if的功能,同样使用if也可以实现switch的功能,所以我们使用时,可以根据自己的习惯选择。

循环语句:

  • 循环语句:通过循环语句可以反复的执行一段代码多次
  • while循环, 语法:
while(条件表达式){
	语句...
}
  • while语句在执行时,先对条件表达式进行求值判断,如果值为true,则执行循环体,循环体执行完毕以后,继续对表达式进行判断,如果为true,则继续执行循环体,以此类推,如果值为false,则终止循环。
  • do...while循环,语法:
do{
	语句...
}while(条件表达式)
  • 执行流程:do…while语句在执行时,会先执行循环体,循环体执行完毕以后,在对while后的条件表达式进行判断,如果结果为true,则继续执行循环体,执行完毕继续判断以此类推,如果结果为false,则终止循环。
  • 总结:实际上这两个语句功能类似,不同的是while是先判断后执行,而do…while会先执行后判断,do…while可以保证循环体至少执行一次,而while不能。
  • 注意:像这种将条件表达式写死为true的循环,叫做死循环,该循环不会停止,除非浏览器关闭,死循环在开发中慎用,可以使用break,来终止循环。
while(true){
	alert(n++);
}
  • 步骤:创建一个循环,往往需要三个步骤:
//1.创初始化一个变量
var i = 11;			
//2.在循环中设置一个条件表达式
while(i <= 10){
//3.定义一个更新表达式,每次更新初始化变量
document.write(i++ +"<br />")
  • for语句:也是一个循环语句,也称为for循环,在for循环中,为我们提供了专门的位置用来放三个表达式:
    ①初始化表达式
    ②条件表达式
    ③更新表达式
  • for循环的语法:
for(初始化表达式;条件表达式;更新表达式){
	语句
}
  • for循环的执行流程:
    ①执行初始化表达式,初始化变量(初始化表达式只会执行一次)
    ②执行条件表达式,判断是否执行循环。
    <1>如果为true,则执行循环③
    <2>如果为false,终止循环
    ④执行更新表达式,更新表达式执行完毕继续重复②
  • for循环中的三个部分都可以省略,也可以写在外部。如果在for循环中不写任何的表达式,只写两个;。此时循环是一个死循环会一直执行下去,慎用。
for(;;){
	alert("hello");
}

break和continue:

  • break关键字可以用来退出switch或循环语句,不能在if语句中使用break和continue。break关键字,会立即终止离他最近的那个循环语句。
  • 可以为循环语句创建一个label,来标识当前的循环。
label:循环语句
  • 使用break语句时,可以在break后跟着一个label,这样break将会结束指定的循环,而不是最近的。
  • continue关键字可以用来跳过当次循环,同样continue也是默认只会对离他最近的循环循环起作用。

对象

对象:

  • JS中数据类型
    ①String 字符串
    ②Number 数值
    ③Boolean 布尔值
    ④Null 空值
    ⑤Undefined 未定义
  • 以上这五种类型属于基本数据类型,以后我们看到的值,只要不是上边的5种,全都是对象。
  • Object 对象,基本数据类型都是单一的值"hello" 123 true,值和值之间没有任何的联系。
  • 在JS中来表示一个人的信息(name gender age):
var name = "孙悟空";
var gender = "男";
var age = 18;
  • 如果使用基本数据类型的数据,我们所创建的变量都是独立,不能成为一个整体。
  • 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。
  • 对象的分类:
    ①内建对象
    <1>由ES标准中定义的对象,在任何的ES的实现中都可以使用,比如:Math String Number Boolean Function Object。
    ②宿主对象
    <1>由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象。比如 BOM DOM。
    ③自定义对象
    <1>由开发人员自己创建的对象
  • 创建对象:使用new关键字调用的函数,是构造函数constructor。构造函数是专门用来创建对象的函数。使用typeof检查一个对象时,会返回object。
var obj = new Object();
  • 在对象中保存的值称为属性,向对象添加属性。语法:对象.属性名 = 属性值。
  • 读取对象中的属性,语法:对象.属性名如果读取对象中没有的属性,不会报错而是会返回undefined
  • 修改对象的属性值,语法:对象.属性名 = 新值。
  • 删除对象的属性,语法:delete 对象.属性名。

属性名和属性值:

  • 向对象中添加属性,属性名:对象的属性名不强制要求遵守标识符的规范。什么乱七八糟的名字都可以使用。但是我们使用是还是尽量按照标识符的规范去做。
  • 如果要使用特殊的属性名,不能采用.的方式来操作。需要使用另一种方式:语法:对象["属性名"] = 属性值。读取时也需要采用这种方式
  • 使用[]这种形式去操作属性,更加的灵活,在[]中可以直接传递一个变量,这样变量值是多少就会读取那个属性。
  • JS对象的属性值,可以是任意的数据类型,甚至也可以是一个对象。
  • in 运算符,通过该运算符可以检查一个对象中是否含有指定的属性。如果有则返回true,没有则返回false。语法:"属性名" in 对象

基本和引用数据类型:

  • 基本数据类型:String Number Boolean Null Undefined
  • 引用数据类型:Object
  • JS中的变量都是保存到栈内存中的,基本数据类型的值直接在栈内存中存储,值与值之间是独立存在,修改一个变量不会影响其他的变量
  • 对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象引用,当一个通过一个变量修改属性时,另一个也会受到影响。

对象字面量:

  • 使用对象字面量,可以在创建对象时,直接指定对象中的属性 语法:{属性名:属性值,属性名:属性值....}
  • 对象字面量的属性名可以加引号也可以不加,建议不加, 如果要使用一些特殊的名字,则必须加引号
  • 属性名和属性值是一组一组的名值对结构,名和值之间使用:连接,多个名值对之间使用,隔开
  • 如果一个属性之后没有其他的属性了,就不要写,

函数

函数:

  • 函数 function。函数也是一个对象。函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
  • 函数中可以保存一些代码在需要的时候调用。使用typeof检查一个函数对象时,会返回function
  • 我们在实际开发中很少使用构造函数来创建一个函数对象。创建一个函数对象,可以将要封装的代码以字符串的形式传递给构造函数。
var fun = new Function("console.log('Hello 这是我的第一个函数');");
  • 封装到函数中的代码不会立即执行,函数中的代码会在函数调用的时候执行。调用函数语法:函数对象()。当调用函数时,函数中封装的代码会按照顺序执行。
  • 使用函数声明 来创建一个函数。语法:
function 函数名([形参1,形参2...形参N]){
			语句...
}
  • 使用函数表达式 来创建一个函数。语法:
var 函数名  = function([形参1,形参2...形参N]){
   	语句....
}

函数的参数:

  • 可以在函数的()中来指定一个或多个形参(形式参数)。多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量但是并不赋值
  • 在调用函数时,可以在()中指定实参(实际参数)。实参将会赋值给函数中对应的形参。
  • 调用函数时解析器不会检查实参的类型。所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查,函数的实参可以是任意的数据类型
  • 调用函数时,解析器也不会检查实参的数量。多余实参不会被赋值如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined。

传递参数:

  • JS中的所有的参数传递都是按值传递的。 也就是说把函数外部的值赋值给函数内部 的参数,就和把值从一个变量赋值给另一 个变量是一样的。

执行环境:

  • 执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的 行为。
  • 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。
  • 全局执行环境是最外围的一个执行环境。在 Web 浏览器中,全局执行环境被认为是 window 对象,因此所有全局变量和函数都是作为window 对象的属性和方法创建的。
  • 某个执行环境中的所有代码执行完毕后,该环境被销毁,保存在其中的所有变量和函数定义也随之销毁。
  • 在内部环境可以读取外部环境的变量,反之则不行。

返回值:

  • 可以使用 return 来设置函数的返回值,语法:return 值
  • return后的值将会会作为函数的执行结果返回,可以定义一个变量,来接收该结果。
  • 在函数中return后的语句都不会执行。
  • 若函数不返回则为无函数结果,有以下:
    函数中默认不写return,则会返回undefined未定义函数中写了return语句,但后面不跟任何值,就相当于返回一个undefined未定义。
  • 若函数有返回结果则:
    return后可以跟任意类型的值。
  • 在事件处理函数中:
    ①return true; 继续执行默认行为。
    ②return;继续执行默认行为。
    return false;阻止执行默认行为。

立即执行函数:

函数对象();
  • 立即执行函数,函数定义完,立即被调用,这种函数叫做立即执行函数。立即执行函数往往只会执行一次。

对象的函数(方法):

  • 函数也可以称为对象的属性,如果一个函数作为一个对象的属性保存,那么我们称这个函数时这个对象的方法。
  • 调用这个函数就说调用对象的方法(method)。但是它只是名称上的区别没有其他的区别。

枚举对象中的属性:

  • 枚举对象中的属性。使用for … in 语句。语法:
for(var 变量 in 对象){

 }
  • for…in语句 对象中有几个属性,循环体就会执行几次,每次执行时,会将对象中的一个属性的名字赋值给变量。

作用域:

  • 作用域指一个变量的作用的范围
  • 在JS中一共有两种作用域:
    全局作用域:直接编写在script标签中的JS代码,都在全局作用域。全局作用域在页面打开时创建,在页面关闭时销毁。在全局作用域中有一个全局对象window,它代表的是一个浏览器的窗口,它由浏览器创建我们可以直接使用
    <1>在全局作用域中:创建的变量都会作为window对象的属性保存,创建的函数都会作为window对象的方法保存。全局作用域中的变量都是全局变量,在页面的任意的部分都可以访问的到
    函数作用域:下面介绍。

变量的声明提前:

  • 变量的声明提前,使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值),但是如果声明变量时不使用var关键字,则变量不会被声明提前。
  • 函数的声明提前,使用函数声明形式创建的函数 function 函数(){}。它会在所有的代码执行之前就被创建,所以我们可以在函数声明前来调用函数。使用函数表达式创建的函数,不会被声明提前,所以不能在声明前调用。

函数作用域:

  • 函数作用域:调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁。每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的。在函数作用域中可以访问到全局作用域的变量。在全局作用域中无法访问到函数作用域的变量。
  • 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用。如果没有则向上一级作用域中寻找,直到找到全局作用域,如果全局作用域中依然没有找到,则会报错ReferenceError。
  • 在函数中要访问全局变量可以使用window对象
  • 在函数作用域也有声明提前的特性,使用var关键字声明的变量,会在函数中所有的代码执行之前被声明。函数声明也会在函数中所有的代码执行之前执行
  • 在函数中,不是用var声明的变量都会成为全局变量
  • 定义形参就相当于在函数作用域中声明了变量
  • 全局变量可以通过window.属性找到。

使用与不使用var定义的变量:

  • JavaScript变量分为 局部变量 和 全局变量简单理解:
    ①在函数中用var声明的变量即为 局部变量
    ②在函数外用var声明的变量即为 全局变量
  • 使用var声明变量也叫显示声明,不用var声明变量也叫隐式声明
  • 在函数外,不管是使用var声明变量,还是不用var声明变量,它们都是全局变量。 全局变量其实是在window对象中添加属性并赋值。
  • 在函数中,使用var声明的变量为局部变量,不用var声明的变量为全局变量
  • 用var声明变量和不用var声明变量的区别之一:
    ①在函数外,用var声明的变量为全局变量,不用var声明的变量为全局变量
    ②在函数中,用var声明的变量为局部变量,不用var声明的变量为全局变量
    ③除了作用域的区别以外,同为全局变量,同为window对象的其中一个属性,用var声明的变量不可以删除,不用var声明的变量可以删除!
  • 对象属性是否可删除, 其实是可以配置的
    ①Object.getOwnPropertyDescriptor(); 方法返回某个对象属性的描述对象
    ②Object.defineProperty(); 方法会直接在某个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象
    ③描述对象包含以下信息:
    <1>value 属性的值
    <2>writable 属性是否可读写
    <3>enumerable 属性是否可枚举
    <4>configurable 属性是否可配置(删除)
  • 对象的属性是否可删除,取决于描述对象的配置属性configurable 用var声明的变量默认不可删除,不用var声明的变量默认带可删除。

debug:

javascript language javascript language service_运算符_03

this:

  • 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this,this指向的是一个对象,这个对象我们称为函数执行的上下文对象,根据函数的调用方式的不同,this会指向不同的对象
    ①以函数的形式调用时,this永远都是window
    ②以方法的形式调用时,this就是调用方法的那个对象

工厂方法创建对象:

  • 使用工厂方法创建对象,通过该方法可以大批量的创建对象 。
  • 使用工厂方法创建的对象,使用的构造函数都是Object。所以创建的对象都是Object这个类型,就导致我们无法区分出多种不同类型的对象。

构造函数:

  • 创建一个构造函数,专门用来创建Person对象的,构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写
  • 构造函数和普通函数的区别就是调用方式的不同。普通函数是直接调用,而构造函数需要使用new关键字来调用
  • 对于不加new来执行构造函数来说,返回值就是构造函数的执行结果;对于加new关键字来执行构造函数而言,如果return的是基本数据类型,那么忽视掉该return值,如果返回的是一个引用类型,那么返回该引用类型。
  • 构造函数的执行流程:
    ①立刻创建一个新的对象
    ②将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
    ③逐行执行函数中的代码
    ④将新建的对象作为返回值返回
  • 使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。 我们将通过一个构造函数创建的对象,称为是该类的实例
  • this的情况:
    ①当以函数的形式调用时,this是window
    ②当以方法的形式调用时,谁调用方法this就是谁
    ③当以构造函数的形式调用时,this就是新创建的那个对象
  • 使用instanceof可以检查一个对象是否是一个类的实例,语法:对象 instanceof 构造函数
  • 所有的对象都是Object的后代,所以任何对象和Object做instanceof检查时都会返回true

构造函数的方法:

  • 创建一个Person构造函数,在Person构造函数中,为每一个对象都添加了一个sayName方法,目前我们的方法是在构造函数内部创建的,也就是构造函数每执行一次就会创建一个新的sayName方法。也是所有实例的sayName都是唯一的。这样就导致了构造函数执行一次就会创建一个新的方法,
  • 执行10000次就会创建10000个新的方法,而10000个方法都是一摸一样的。这是完全没有必要,完全可以使所有的对象共享同一个方法
  • 将函数定义在全局作用域,污染了全局作用域的命名空间。而且定义在全局作用域中也很不安全
  • 向原型中添加sayName方法

原型 prototype:

  • 我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype。这个属性对应着一个对象,这个对象就是我们所谓的原型对象
  • 如果函数作为普通函数调用prototype没有任何作用。当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过__proto__来访问该属性
  • 原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。
  • 当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找,如果找到则直接使用。以后我们创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了
  • 使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
  • 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性,使用该方法只有当对象自身中含有属性时,才会返回true
  • 原型对象也是对象,所以它也有原型,当我们使用一个对象的属性或方法时,会现在自身中寻找,自身中如果有,则直接使用,如果没有则去原型对象中寻找,如果原型对象中有,则使用,如果没有则去原型的原型中寻找,直到找到Object对象的原型,Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回undefined
  • 当我们直接在页面中打印一个对象时,事件上是输出的对象的toString()方法的返回值。如果我们希望在输出对象时不输出[object Object],可以为对象添加一个toString()方法。

垃圾回收(GC):

  • 就像人生活的时间长了会产生垃圾一样,程序运行过程中也会产生垃圾。这些垃圾积攒过多以后,会导致程序运行的速度过慢,所以我们需要一个垃圾回收的机制,来处理程序运行过程中产生垃圾
  • 当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象,此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢,所以这种垃圾必须进行清理。
  • 在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁,我们不需要也不能进行垃圾回收的操作。我们需要做的只是要将不再使用的对象设置null即可。

数组

数组(Array):

  • 数组也是一个对象。是内建对象,它和我们普通对象功能类似,也是用来存储一些值的。不同的是普通对象是使用字符串作为属性名的,而数组时使用数字来作为索引操作元素。
  • 索引:从0开始的整数就是索引。 数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据
  • 向数组中添加元素。语法:数组[索引] = 值
  • 读取数组中的元素。语法:数组[索引] 。如果读取不存在的索引,他不会报错而是返回undefined
  • 获取数组的长度,可以使用length属性来获取数组的长度(元素的个数)。语法:数组.length
    ①对于连续的数组,使用length可以获取到数组的长度(元素的个数)
    ②对于非连续的数组,使用length会获取到数组的最大的索引+1,尽量不要创建非连续的数组
  • 修改length。如果修改的length大于原长度,则多出部分会空出来。如果修改的length小于原长度,则多出的元素会被删除
  • 向数组的最后一个位置添加元素。语法:数组[数组.length] = 值;

创建一个数组:

  • 使用字面量来创建数组,语法:[]。使用字面量创建数组时,可以在创建时就指定数组中的元素
  • 使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作文构造函数的参数传递
  • 数组中的元素可以是任意的数据类型,也可以是对象。也可以是一个函数。数组中也可以放数组,如下这种数组我们称为二维数组

数组的方法:

  • push()
    ①该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度,可以将要添加的元素作为方法的参数传递,这样这些元素将会自动添加到数组的末尾。该方法会将数组新的长度作为返回值返回
  • pop()
    ①该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
  • unshift()
    ①向数组开头添加一个或多个元素,并返回新的数组长度。向前边插入元素以后,其他的元素索引会依次调整
  • shift()
    ①可以删除数组的第一个元素,并将被删除的元素作为返回值返回

数组遍历:

  • 所谓的遍历数组,就是将数组中所有的元素都取出来
for(var i=0 ; i<arr.length ; i++){
				console.log(arr[i]);
			}

forEach():

  • 一般我们都是使用for循环去遍历数组,JS中还为我们提供了一个方法,用来遍历数组
  • forEach()这个方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach。还是使用for循环来遍历
  • forEach()方法需要一个函数作为参数,像这种函数,由我们创建但是不由我们调用的,我们称为回调函数,数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素。以实参的形式传递进来,我们可以来定义形参,来读取这些内容
  • 浏览器会在回调函数中传递三个参数:
    第一个参数,就是当前正在遍历的元素
    第二个参数,就是当前正在遍历的元素的索引
    第三个参数,就是正在遍历的数组
arr.forEach(function(value , index , obj){
				console.log(value);
			});

数组的方法详解:

  • slice() ①可以用来从数组提取指定元素。该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回
    ②参数:
    <1>截取开始的位置的索引,包含开始索引
    <2>截取结束的位置的索引,不包含结束索引
    1、第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
    2、索引可以传递一个负值,如果传递一个负值,则从后往前计算。例如:-1 倒数第一个。-2 倒数第二个、
  • splice() ①可以用于删除数组中的指定元素,使用splice()会影响到原数组,会将指定元素从原数组中删除。并将被删除的元素作为返回值返回
    ②参数:
    第一个,表示开始位置的索引
    第二个,表示删除的数量
    第三个及以后可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
  • concat() ①可以连接两个或多个数组,并将新的数组返回。该方法不会对原数组产生影响
  • join() ①该方法可以将数组转换为一个字符串,该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回。在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符。如果不指定连接符,则默认使用,作为连接符。
  • reverse() ①该方法用来反转数组(前边的去后边,后边的去前边),该方法会直接修改原数组
  • sort() ①可以用来对数组中的元素进行排序。也会影响原数组,默认会按照Unicode编码进行排序。即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序,所以对数字进排序时,可能会得到错误的结果。
    ②我们可以自己来指定排序的规则,我们可以在sort()添加一个回调函数,来指定排序规则,回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数,使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边。浏览器会根据回调函数的返回值来决定元素的顺序,
    <1>如果返回一个大于0的值,则元素会交换位置
    <2>如果返回一个小于0的值,则元素位置不变
    <3>如果返回一个0,则认为两个元素相等,也不交换位置
  • 如果需要升序排列,则返回 a-b。如果需要降序排列,则返回b-a。

函数的方法:

  • call()和apply() ①这两个方法都是函数对象的方法,需要通过函数对象来调用。当对函数调用call()和apply()都会调用函数执行。在调用call()和apply()可以将一个对象指定为第一个参数。此时这个对象将会成为函数执行时的this
    ②call()方法可以将实参在对象之后依次传递
    ③apply()方法需要将实参封装到一个数组中统一传递
  • this的情况:
    ①以函数形式调用时,this永远都是window
    ②以方法的形式调用时,this是调用方法的对象
    ③以构造函数的形式调用时,this是新创建的那个对象
    ④使用call和apply调用时,this是指定的那个对象

arguments:

  • 在调用函数时,浏览器每次都会传递进两个隐含的参数:
    ①函数的上下文对象 this
    ②封装实参的对象 arguments
    arguments是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度,在调用函数时,我们所传递的实参都会在arguments中保存。arguments.length可以用来获取实参的长度。我们即使不定义形参,也可以通过arguments来使用实参,只不过比较麻烦。
    <1>arguments[0] 表示第一个实参
    <2>arguments[1] 表示第二个实参 。。。
    <3>它里边有一个属性叫做callee,这个属性对应一个函数对象,就是当前正在指向的函数的对象。

Date

Date:

  • Date对象,在JS中使用Date对象来表示一个时间
  • 如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
var d = new Date();
  • 创建一个指定的时间对象,需要在构造函数中传递一个表示时间的字符串作为参数。日期的格式: 月份/日/年 时:分:秒
var d2 = new Date("2/18/2011 11:10:30");
  • getDate()获取当前日期对象是几日
  • getDay()获取当前日期对象时周几。会返回一个0-6的值。0 表示周日。1表示周一
  • getMonth()获取当前时间对象的月份,会返回一个0-11的值。0 表示1月,1 表示2月,11 表示12月。
  • getFullYear()获取当前日期对象的年份
  • getTime()获取当前日期对象的时间戳
    ①时间戳,指的是从格林威治标准时间的1970年1月1日,0时0分0秒。到当前日期所花费的毫秒数(1秒 = 1000毫秒)。计算机底层在保存时间时使用都是时间戳。(保存不了其他格式)

Math

Math:

  • Math和其他的对象不同,它不是一个构造函数,它属于一个工具类不用创建对象,它里边封装了数学运算相关的属性和方法,比如Math.PI 表示的圆周率
  • abs()可以用来计算一个数的绝对值
  • Math.ceil()可以对一个数进行向上取整,小数位只有有值就自动进1
  • Math.floor()可以对一个数进行向下取整,小数部分会被舍掉
  • Math.round()可以对一个数进行四舍五入取整
  • Math.random()可以用来生成一个0-1之间的随机数
    ①生成一个0-x之间的随机数:Math.round(Math.random()x)
    ②生成一个x-y之间的随机数:Math.round(Math.random()
    (y-x)+x)
  • max()可以获取多个数中的最大值
  • min()可以获取多个数中的最小值
  • Math.pow(x,y)返回x的y次幂
  • Math.sqrt() 用于对一个数进行开方运算

包装类

包装类:

  • 基本数据类型String Number Boolean Null Undefined
  • 引用数据类型 Object
  • 在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
    ①String()可以将基本数据类型字符串转换为String对象
    ②Number()可以将基本数据类型的数字转换为Number对象
    ③Boolean()可以将基本数据类型的布尔值转换为Boolean对象
  • 但是注意:我们在实际应用中不会使用基本数据类型的对象,如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果
  • 方法和属性能添加给对象,不能添加给基本数据类型,当我们对一些基本数据类型的值去调用属性和方法时,浏览器会临时使用包装类将其转换为对象,然后在调用对象的属性和方法,调用完以后,在将其转换为基本数据类型。

字符串相关方法

字符串相关方法:

  • 在底层字符串是以字符数组的形式保存的 [“H”,“e”,“l”]
  • length属性,可以用来获取字符串的长度
  • charAt()可以返回字符串中指定位置的字符,根据索引获取指定的字符
  • charCodeAt()获取指定位置字符的字符编码(Unicode编码)
  • String.formCharCode()可以根据字符编码去获取字符
  • concat()可以用来连接两个或多个字符串。作用和+一样
  • indexof()该方法可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容,则会返回其第一次出现的索引,如果没有找到指定的内容,则返回-1。可以指定一个第二个参数,指定开始查找的位置
  • lastIndexOf(); 该方法的用法和indexOf()一样,不同的是indexOf是从前往后找,而lastIndexOf是从后往前找,也可以指定开始查找的位置
  • slice()可以从字符串中截取指定的内容,不会影响原字符串,而是将截取到内容返回。
    ①参数:
    第一个,开始位置的索引(包括开始位置)
    第二个,结束位置的索引(不包括结束位置),如果省略第二个参数,则会截取到后边所有的。也可以传递一个负数作为参数,负数的话将会从后边计算
  • substring()可以用来截取一个字符串,可以slice()类似
    ①参数:
    第一个:开始截取位置的索引(包括开始位置)
    第二个:结束位置的索引(不包括结束位置)
    ②不同的是这个方法不能接受负值作为参数,如果传递了一个负值,则默认使用0。而且他还自动调整参数的位置,如果第二个参数小于第一个,则自动交换
  • substr()用来截取字符串
    ①参数:
    1.截取开始位置的索引
    2.截取的长度
  • split()可以将一个字符串拆分为一个数组
    ①参数:需要一个字符串作为参数,将会根据该字符串去拆分数组
    ②如果传递一个空串作为参数,则会将每个字符都拆分为数组中的一个元素
  • toUpperCase()将一个字符串转换为大写并返回
  • toLowerCase()将一个字符串转换为小写并返回

正则表达式

正则表达式:

  • 邮箱号:admin@.com adminatguigu.com
  • 邮件的规则:
    1.前边可以是xxxx乱七八糟
    2.跟着一个@
    3.后边可以是xxxx乱七八糟
    4…com获取其他的乱七八糟
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
  • 正则表达式用于定义一些字符串的规则,计算机可以根据正则表达式,来检查一个字符串是否符合规则,获取将字符串中符合规则的内容提取出来
  • 创建正则表达式的对象语法:
var 变量 = new RegExp("正则表达式","匹配模式");
使用typeof检查正则对象,会返回object
var reg = new RegExp("a"); 这个正则表达式可以来检查一个字符串中是否含有a
在构造函数中可以传递一个匹配模式作为第二个参数,
可以是 i 忽略大小写  g 全局匹配模式
  • 正则表达式的方法:test()。使用这个方法可以用来检查一个字符串是否符合正则表达式的规则,如果符合则返回true,否则返回false
  • 使用字面量来创建正则表达式,语法:var 变量 = /正则表达式/匹配模式。使用字面量的方式创建更加简单,使用构造函数创建更加灵活
var reg = new RegExp("a","i");
var reg = /a/i;

正则表达式语法:

  • 使用 | 表示或者的意思
  • []里的内容也是或的关系
[ab] == a|b
[a-z] 任意小写字母
[A-Z] 任意大写字母
[A-z] 任意字母
[0-9] 任意数字
  • [^ ] 除了的意思
reg = /[^ab]/; 除了ab的所有字母

字符串和正则相关的方法:

  • test()方法是一个正则表达式方法,用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
  • split()可以将一个字符串拆分为一个数组。方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串。这个方法即使不指定全局匹配,也会全都插分
  • search()可以搜索字符串中是否含有指定内容,如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1。
    ①它可以接受一个正则表达式作为参数,然后会根据正则表达式去检索字符串,serach()只会查找第一个,即使设置全局匹配也没用
  • match()可以根据正则表达式,从一个字符串中将符合条件的内容提取出来。
    ①默认情况下我们的match只会找到第一个符合要求的内容,找到以后就停止检索,我们可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容
    ②可以为一个正则表达式设置多个匹配模式,且顺序无所谓。match()会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果。
  • replace()可以将字符串中指定内容替换为新的内容
    ①参数:
    1.被替换的内容,可以接受一个正则表达式作为参数
    2.新的内容
    ②默认只会替换第一个

正则表达式语法详解:

  • 量词:通过量词可以设置一个内容出现的次数。量词只对它前边的一个内容起作用
    {n}正好出现n次
    {m,n}出现m-n次
    {m,} m次以上
    +至少一个,相当于{1,}
    * 0个或多个,相当于{0,}
    ?0个或1个,相当于{0,1}
  • 检查一个字符串中是否以a开头
    ①^ 表示开头
    ②$ 表示结尾
    如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达
  • 创建一个正则表达式,用来检查一个字符串是否是一个合法手机号
    ①手机号的规则:13567890123 (11位)
    <1>以1开头
    <2>第二位3-9任意数字
    <3>三位以后任意数字9个
    ②var phoneReg = /^1[3-9][0-9]{9}$/;
  • 检查一个字符串中是否含有.. 表示任意字符,在正则表达式中使用\作为转义字符。
\. 来表示.
\\  表示\
  • 注意:使用构造函数时,由于它的参数是一个字符串,而\是字符串中转义字符,如果要使用\则需要使用\来代替
  • 其他正则表达式语法:
    \w任意字母、数字、_ [A-z0-9_]
    \W除了字母、数字、_ [^A-z0-9_]
    \d任意的数字 [0-9]
    \D除了数字 [^0-9]
    \s空格
    \S除了空格
    \b单词边界
    \B除了单词边界

DOM

DOM简介:

  • 浏览器已经为我们提供 文档节点 对象这个对象是window属性,可以在页面中直接使用,文档节点代表的是整个网页。
  • DOM,全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。 ①文档表示的就是整个的HTML网页文档 ②对象表示将网页中的每一个部分都转换为了一个对象。 ③使用模型来表示对象之间的关系,这样方便我们获取对象。

javascript language javascript language service_javascript_04

节点:

  • 节点Node,是构成我们网页的最基本的组成部分,网页中的 每一个部分都可以称为是一个节点。
    ①比如:html标签、属性、文本、注释、整个文档等都是一个节点。
  • 虽然都是节点,但是实际上他们的具体类型是不同的。
    ①比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
  • 节点的类型不同,属性和方法也都不尽相同。
  • 节点:Node——构成HTML文档最基本的单元。常用节点分为四类: – 文档节点:整个HTML文档 – 元素节点:HTML文档中的HTML标签 – 属性节点:元素的属性 – 文本节点:HTML标签中的文本内容

javascript language javascript language service_运算符_05

节点属性:

javascript language javascript language service_javascript_06


文档节点(document)

  • 文档节点document,代表的是整个HTML文档,网页中的所有节点都是它的子节点。
  • document对象作为window对象的属性存在的,我们不用获取可以直接使用。
  • 通过该对象我们可以在整个文档访问内查找节点对象,并可以通过该对象创建各种节点对象。

元素节点(Element):

  • HTML中的各种标签都是元素节点,这也是我们最常用 的一个节点。
  • 浏览器会将页面中所有的标签都转换为一个元素节点,我们可以通过document的方法来获取元素节点。
    ① 比如:document.getElementById()根据id属性值获取一个元素节点对象。

文本节点(Text):

  • 文本节点表示的是HTML标签以外的文本内容,任意非HTML的文本都是文本节点。
    ①它包括可以字面解释的纯文本内容。
  • 文本节点一般是作为元素节点的子节点存在的。
  • 获取文本节点时,一般先要获取元素节点。在通过元素节点获取文本 节点。
    ①例如: 元素节点.firstChild;获取元素节点的第一个子节点,一般为文本节点

属性节点(Attr):

  • 属性节点表示的是标签中的一个一个的属 性,这里要注意的是属性节点并非是元素 节点的子节点,而是元素节点的一部分。
  • 可以通过元素节点来获取指定的属性节点。
    ①例如:元素节点.getAttributeNode(“属性名”);
    ②注意:我们一般不使用属性节点。

文档的加载:

  • 浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面的上边,在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载,会导致无法获取到DOM对象。
  • onload事件会在整个页面加载完成之后才触发。为window绑定一个onload事件。该事件对应的响应函数将会在页面加载完成之后执行,这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

语法API:

  • 获取元素节点,通过document对象调用
    ①getElementById()通过id属性获取一个元素节点对象
    ②getElementsByTagName()通过标签名获取一组元素节点对象
    ③getElementsByName()通过name属性获取一组元素节点对象
  • 获取元素节点的子节点,通过具体的元素节点调用
    ①getElementsByTagName()方法,返回当前节点的指定标签名后代节点
    ②childNodes属性,表示当前节点的所有子节点
    ③firstChild属性,表示当前节点的第一个子节点
    ④lastChild属性,表示当前节点的最后一个子节点
  • 获取父节点和兄弟节点,通过具体的节点调用
    ①parentNode属性,表示当前节点的父节点
    ②previousSibling属性,表示当前节点的前一个兄弟节点
    ③nextSibling属性,表示当前节点的后一个兄弟节点
  • 元素节点的属性,获取,元素对象.属性名
    ①element.value
    ②element.id
    ③element.className
  • 设置,元素对象.属性名=新的值
    ①element.value = “hello”
    ②element.id = “id01”
    ③element.className = “newClass”
  • 其他属性
    ①nodeValue文本节点可以通过nodeValue属性获取和设置文本节点的内容
    ②innerHTML元素节点通过该属性获取和设置标签内部的html代码
    ③innerText该属性可以获取到元素内部的文本内容,它和innerHTML类似,不同的是它会自动将html去除。
  • 使用CSS选择器进行查询。这两个方法都是用document对象来调用,两个方法使用相同,都是传递一个选择器字符串作为参数,方法会自动根据选择器字符串去网页中查找元素。不同的地方是querySelector()只会返回找到的第一个元素,而querySelectorAll()会返回所有符合条件的元素。
    ①querySelector(),虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替。
    ②querySelectorAll()
  • 节点的修改,这里的修改我们主要指对元素节点的操作。
    ①创建节点
    <1>document.createElement(标签名)
    <2>document.createTextNode(文本)
    <3>document.createAttribute(属性名);
    ②删除节点,父节点.removeChild(子节点)
    ③替换节点,父节点.replaceChild(新节点 , 旧节点)
    ④插入节点:
    <1>父节点.appendChild(子节点)
    <2>父节点.insertBefore(新节点 , 旧节点)

inner/outer-HTML/Text详解:

  • 以下都是以div这个标签元素调用
  • innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容,包括HTML标签,但不包括自身)
  • outerHTML设置或获取标签自身及其所包含的HTML+文本信息(包括自身)
  • innerText设置或获取标签所包含的文本信息(从标签起始位置到终止位置的内容,去除HTML标签,但不包括自身)
  • outerText设置或获取标签自身及其所包含的文本信息(包括自身)

javascript language javascript language service_运算符_07

使用DOM操作CSS:

  • 通过JS修改元素的样式:语法:元素.style.样式名 = 样式值
  • 注意:如果CSS的样式名中含有-,这种名称在JS中是不合法的比如background-color。需要将这种样式名修改为驼峰命名法,去掉-,然后将-后的字母大写
  • 我们通过style属性设置的样式都是内联样式,而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示
  • 但是如果在样式中写了!important,则此时样式会有最高的优先级,即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效。所以尽量不要为样式添加!important

使用DOM读取元素样式:

  • 获取元素的当前显示的样式语法:元素.currentStyle.样式名,它可以用来读取当前元素正在显示的样式,如果当前元素没有设置该样式,则获取它的默认值。currentStyle只有IE浏览器支持,其他的浏览器都不支持
  • 在其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式。这个方法是window的方法,可以直接使用。
    ①需要两个参数,第一个:要获取样式的元素,第二个:可以传递一个伪元素,一般都传null
    ②该方法会返回一个对象,对象中封装了当前元素对应的样式,可以通过对象.样式名来读取样式。如果获取的样式没有设置,则会获取到真实的值,而不是默认值。比如:没有设置width,它不会获取到auto,而是一个长度。但是该方法不支持IE8及以下的浏览器
  • 通过currentStyle和getComputedStyle()读取到的样式都是只读的,不能修改,如果要修改必须通过style属性

其他样式操作的属性:

  • clientWidth 和clientHeight
    ①这两个属性可以获取元素的可见宽度和高度,这些属性都是不带px的,返回都是一个数字,可以直接进行计算。
    ②会获取元素宽度和高度,包括内容区和内边距
    ③这些属性都是只读的,不能修改
  • offsetWidth和offsetHeight
    ①获取元素的整个的宽度和高度,包括内容区、内边距和边框
  • offsetParent
    ①可以用来获取当前元素的定位父元素,会获取到离当前元素最近的开启了定位的祖先元素。如果所有的祖先元素都没有开启定位,则返回body
  • offsetLeft
    ①当前元素相对于其定位父元素的水平偏移量
  • offsetTop
    ①当前元素相对于其定位父元素的垂直偏移量
  • scrollWidth和scrollHeight
    ①可以获取元素整个滚动区域的宽度和高度
  • scrollLeft
    ①可以获取水平滚动条滚动的距离
  • scrollTop
    ①可以获取垂直滚动条滚动的距离

事件

事件处理中的this:

  • 在事件处理程序内的 this 所引用的对象即是设定了该事件处理程序的元素。(但前提是在js中通过元素调用事件函数)
document.getElementById('aa').onclick = function () {
	console.log(this);  //  <div id="aa"></div>
}
  • 如果是在元素上绑定事件。此时 this 指向 全局变量也就是Window。
<div class="container">
    <div id="aa" onclick="clicke()"></div>
</div>
//定义函数
function clicke() {
  	console.log(this);
}
  • js 使用 addEventListener 绑定事件,此时的 this 指向该元素。(注意:在IE浏览器中使用为 attachEvent(), this 指向全局变量也就是window)
document.getElementById('aa').addEventListener('click', function () {
	console.log(this);  //  <div id="aa"></div>
});

事件:

javascript language javascript language service_字符串_08

事件对象:

  • 当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数。
  • Event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。
  • 在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标 ,键盘哪个按键被按下 ,鼠标滚轮滚动的方向

javascript language javascript language service_数据类型_09

  • 在IE8中,响应函数被处罚时,浏览器不会传递事件对象,在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的。

javascript language javascript language service_运算符_10

areaDiv.onmousemove = function(event){
	event = event || window.event;
}
  • 属性:
    ①获取到鼠标的坐标
    <1>clientX和clientY用于获取鼠标在当前的可见窗口的坐标
    <2>pageX和pageY可以获取鼠标相对于当前页面的坐标,但是这个两个属性在IE8中不支持,所以如果需要兼容IE8,则不要使用

事件的冒泡(Bubble):

  • 所谓的冒泡指的就是事件的向上传导当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
  • 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡,可以将事件对象的cancelBubble设置为true,即可取消冒泡

事件的委派:

  • 我们希望,只绑定一次事件,即可应用到多个的元素上,即使元素是后添加的。我们可以尝试将其绑定给元素的共同的祖先元素
  • 事件的委派:指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。
  • 事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能

事件和绑定:

  • 我们可以在事件对应的属性中设置一些js代码,这样当事件被触发时,这些代码将会执行
  • 这种写法我们称为结构和行为耦合,不方便维护,不推荐使用
-<button id="btn" onmousemove="alert('讨厌,你点我干嘛!');">我是一个按钮</button>-->
  • 事件,就是用户和浏览器之间的交互行为,比如:点击按钮,鼠标移动、关闭窗口。
  • 可以为按钮的对应事件绑定处理函数的形式来响应事件,这样当事件被触发时,其对应的函数将会被调用。

事件的绑定:

  • 使用对象.事件 = 函数的形式绑定响应函数,它只能同时为一个元素的一个事件绑定一个响应函数,不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的
btn01.onclick = function(){
		alert(1);
};
  • addEventListener()通过这个方法也可以为元素绑定响应函数
    ①参数:
    1.事件的字符串,不要on
    2.回调函数,当事件触发时该函数会被调用
    3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
    ②使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,这样当事件被触发时,响应函数将会按照函数的绑定顺序执行,这个方法不支持IE8及以下的浏览器。
  • attachEvent(),在IE8中可以使用attachEvent()来绑定事件
    ②参数:
    1.事件的字符串,要on
    2.回调函数
    ② 这个方法也可以同时为一个事件绑定多个处理函数,不同的是它是后绑定先执行,执行顺序和addEventListener()相反。

事件的传播:

  • 关于事件的传播网景公司和微软公司有不同的理解
    ①微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
    ②网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素
  • W3C综合了两个公司的方案,将事件传播分成了三个阶段
    捕获阶段:在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件 ②目标阶段:事件捕获到目标元素,捕获结束开始在目标元素上触发事件
    ③冒泡阶段:事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
  • 如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true,一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false。

javascript language javascript language service_运算符_11

  • IE8及以下的浏览器中没有捕获阶段

拖拽的流程:

  • 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
  • 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
  • 当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
  • 当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,此时会导致拖拽功能的异常,这个是浏览器提供的默认行为, 如果不希望发生这个行为,则可以通过return false来取消默认行为
  • 使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false。需要使用event来取消默认行为event.preventDefault();。但是IE8不支持event.preventDefault();这个玩意,如果直接调用会报错

键盘事件:

  • onkeydown按键被按下。对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发。当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常的快。这种设计是为了防止误操作的发生。
  • onkeyup按键被松开。键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
  • 可以通过event.keyCode来获取按键的编码。
    ①通过它可以判断哪个按键被按下,除了keyCode,
    ②事件对象中还提供了几个属性
    <1>altKey
    <2>ctrlKey
    <3>shiftKey
    ③这个三个用来判断alt ctrl 和 shift是否被按下。如果按下则返回true,否则返回false

BOM

BOM:

  • 浏览器对象模型,BOM可以使我们通过JS来操作浏览器
  • 在BOM中为我们提供了一组对象,用来完成对浏览器的操作
  • BOM对象
    ①Window代表的是整个浏览器的窗口,同时window也是网页中的全局对象
    ②Navigator代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
    ③Location代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
    ④History代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录,由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且该操作只在当次访问时有效。
    ⑤Screen代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
  • 这些BOM对象在浏览器中都是作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用

Navigator:

  • 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器,由于历史原因,Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了,一般我们只会使用userAgent来判断浏览器的信息,userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不同的userAgent
    ①火狐的userAgent
    Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
    ②Chrome的userAgent
    Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
    ③IE8
    Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
    ④IE11
    Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
  • 在IE11中已经将微软和IE相关的标识都已经去除了,所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
  • 如果通过UserAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器的信息。比如:ActiveXObject

History:

  • 对象可以用来操作浏览器向前或向后翻页
  • length属性,可以获取到当成访问的链接数量
  • back() 可以用来回退到上一个页面,作用和浏览器的回退按钮一样
  • forward()可以跳转下一个页面,作用和浏览器的前进按钮一样
  • go()可以用来跳转到指定的页面,它需要一个整数作为参数
    1:表示向前跳转一个页面 相当于forward()
    2:表示向前跳转两个页面
    -1:表示向后跳转一个页面
    -2:表示向后跳转两个页面

Location:

  • 该对象中封装了浏览器的地址栏的信息
  • 如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
  • 如果直接将location属性修改为一个完整的路径,或相对路径,则我们页面会自动跳转到该路径,并且会生成相应的历史记录
  • assign()用来跳转到其他的页面,作用和直接修改location一样
  • reload()用于重新加载当前页面,作用和刷新按钮一样。如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面
  • replace() 可以使用一个新的页面替换当前页面,调用完毕也会跳转页面。不会生成历史记录,不能使用回退按钮回退

screen对象:

  • screen 对象基本上只用来表明客户端的能 力,其中包括浏览器窗口外部的显示器的 信息,如像素宽度和高度等。
  • 该对象作用不大,我们一般不太使用。

定时调用:

  • JS的程序的执行速度是非常非常快的。如果希望一段程序,可以每间隔一段时间执行一次,可以使用定时调用
  • setInterval()定时调用。可以将一个函数,每隔一段时间执行一次
    ①参数:
    1.回调函数,该函数会每隔一段时间被调用一次
    2.每次调用间隔的时间,单位是毫秒
    ②返回值:返回一个Number类型的数据,这个数字用来作为定时器的唯一标识
  • clearInterval()可以用来关闭一个定时器,方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器

窗口大小:

  • 浏览器中提供了四个属性用来确定窗口的 大小:
    ①网页窗口的大小
    – innerWidth
    – innerHeight
    ②浏览器本身的尺寸
    – outerWidth
    – outerHeight

打开窗口:

  • 使用 window.open() 方法既可以导航到一个 特定的 URL,也可以打开一个新的浏览器窗口。
  • 这个方法需要四个参数:
    – 需要加载的url地址
    – 窗口的目标
    – 一个特性的字符串
    – 是否创建新的历史记录

系统对话框:

  • 浏览器通过 alert() 、 confirm() 和 prompt() 方法可以调用系统对话框向用户显示消息。
  • 它们的外观由操作系统及(或)浏览器设置决 定,而不是由 CSS 决定。
  • 显示系统对话框时会导致程序终止,当关闭对 话框程序会恢复执行。
  • alert:alert()接收一个字符串并显示给用户。调用alert()方法会向用户显示一个包含一个确认
    按钮的对话框。
  • confirm:confirm和alert类似,只不过confirm弹出的对话框有一个确认和取消按钮。用户可以通过按钮来确认是否执行操作。
    ①这个函数的执行会返回一个布尔值,如果选择确定则返回true,如果点击取消则返回false。
  • prompt:prompt会弹出一个带输入框的提示框,并可以将用户输入的内容返回。
    ①它需要两个值作为参数:
    – 显示的提示文字
    – 文本框中的默认值
    ②例子:
    – prompt(‘你的年龄是?’,‘18’);

延时调用:

  • 延时调用一个函数不马上执行,而是隔一段时间以后在执行,而且只会执行一次
  • 延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次
  • 延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择
  • 使用clearTimeout()来关闭一个延时调用

JSON

json简介:

  • 如果需要兼容IE7及以下的JSON操作,则可以通过引入一个外部的js文件来处理
  • JS中的对象只有JS自己认识,其他的语言都不认识。 JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别,并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
  • JSON:JavaScript Object Notation JS对象表示法。JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号。其他的和JS语法一致。
  • JSON分类:
    1.对象 {}
    2.数组 []
  • JSON中允许的值:
    1.字符串
    2.数值
    3.布尔值
    4.null
    5.对象
    6.数组
var arr = '[1,2,3,"hello",true]';
			
var obj2 = '{"arr":[1,2,3]}';
			
var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]';
  • 将JSON字符串转换为JS中的对象,在JS中,为我们提供了一个工具类,就叫JSON。这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON。
  • json --> js对象: JSON.parse()
    ① 可以将以JSON字符串转换为js对象
    ② 它需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回
  • JS对象 —> JSON:JSON.stringify()
    ①可以将一个JS对象转换为JSON字符串
    ②需要一个js对象作为参数,会返回一个JSON字符串
  • eval()这个函数可以用来执行一段字符串形式的JS代码,并将执行结果返回,如果使用eval()执行的字符串中含有{},它会将{}当成是代码块。如果不希望将其当成代码块解析,则需要在字符串前后各加一个()
  • eval()这个函数的功能很强大,可以直接执行一个字符串中的js代码,但是在开发中尽量不要使用,首先它的执行性能比较差,然后它还具有安全隐患。
var str = '{"name":"孙悟空","age":18,"gender":"男"}';

var str2 = "alert('hello');";
			
var obj = eval("("+str+")");

json总结:

  • 理解:主要分为JSON字符串,JSON对象,JS对象。
    JSON字符串:所谓字符串:单引号或者双引号引起来,只不过格式按照JSON进行构建。JSON对象:也是普通JS对象,只不过属性必须加双引号,且值不可以是方法函数、undefined以及NAN。JS对象:就是普通JS对象。
  • 使用时一般使用JSON对象(也就是JS对象)和JSON字符串。

区 别

JSON

JavaScript

含 义

数据格式

类实例

传输

可以跨平台数据传输,速度快

类实例

表现1

键值对的方式,属性必须加双引号

键值对的方式,属性不加双引号

表现2

值不可以是方法函数、undefined以及NAN

值可以是函数、对象、字符串、数字、boolean 等

相互转换1

JSON.parse(str),不兼容IE7

JS对象转换为Json字符串

相互转换2

eval("(" + str + “)”);(兼容所有浏览器,但是不安全,会执行json里面的表达式)

JSON.stringify(obj)