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是一个标准,而这个标准需要由各个厂商去实现。
- 不同的浏览器厂商对该标准会有不同的实现。
- 我们已经知道ECMAScript是JavaScript标准,所以一般情况下这两个词我们认为是一个意思。
- 但是实际上JavaScript的含义却要更大一些。
一个完整的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:
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网页文档 ②对象表示将网页中的每一个部分都转换为了一个对象。 ③使用模型来表示对象之间的关系,这样方便我们获取对象。
节点:
- 节点Node,是构成我们网页的最基本的组成部分,网页中的 每一个部分都可以称为是一个节点。
①比如:html标签、属性、文本、注释、整个文档等都是一个节点。 - 虽然都是节点,但是实际上他们的具体类型是不同的。
①比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。 - 节点的类型不同,属性和方法也都不尽相同。
- 节点:Node——构成HTML文档最基本的单元。常用节点分为四类: – 文档节点:整个HTML文档 – 元素节点:HTML文档中的HTML标签 – 属性节点:元素的属性 – 文本节点:HTML标签中的文本内容
节点属性:
文档节点(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设置或获取标签
自身及其所包含
的文本信息(包括自身)
使用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>
});
事件:
事件对象:
- 当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数。
- Event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。
- 在事件对象中封装了当前事件相关的一切信息,比如:
鼠标的坐标 ,键盘哪个按键被按下 ,鼠标滚轮滚动的方向
- 在IE8中,响应函数被处罚时,浏览器不会传递事件对象,在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的。
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。
- 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) |