JavaScript初体验:
简介:用来制作web页面交互效果,提升用户体验,JavaScript由布兰登•艾奇(Brendan Eich) 1995年在网景公司发明。一开始JavaScript叫做LiveScript, 但是由于当时Java这个语言特别火,所以为了傍大牌,就改名为JavaScript。同时期还有其他的网页语言,比如VBScript、JScript等,但是后来都被JavaScript打败,所以现在的浏览器中,只运行一种脚本语言就是JavaScript。
基本结构:
1.使用转义符:
\“:代表双引号。
\’:代表单引号。
\n:表示换行。
\t:表示缩进。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
console.log('\"');
console.log('\'');
console.log('我\n爱');
console.log('我爱变魔术');
</script>
</head>
<body>
</body>
</html>
jS的注释
单行注释://
多行注释:/* */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
//这是单行注释,不会执行;
/*这是多行注释
就像这样*/
</script>
</head>
<body>
</body>
</html>
代码语法约定
- 代码区分大小写
- 代码缩进
- 一行只写一条语句
- 每条语句以分号结尾
- 代码执行顺序:从上到下,从左到右。
- 对空格,换行,缩进是不敏感的。
引用js的方式
有三种方式:
1,内嵌法
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
alert('你好')
</script>
</head>
2,外部引入法
<script src""type="text/javascript">
3,写在body主体,不常用(这个代码写起来太难了 放弃)
<input type="button" value="点我" onclick="javascript:alert('hello')">
js的基本模型
变量(var)
变量的实际意义为内存,声明变量就是可以存储数据。
变量命名注意事项:
- 只能由英文字母,下划线以及$开头。
- 不能使用js中的关键字和保留字。
定义变量:语法:var 变量名 = 变量值;
事实上变量的定义有三种方法:
1.先声明变量再赋值:
var name;
name="heergou";
2.同时声明和赋值变量:
var name="heergou";
3.不声明直接赋值:
name="heergou"
(由于js语法的不严谨也就出现了此情况,具体操作不建议)
<script type="text/javascript">
var age;
age=5;
var name="heergou";
console.log(age);
console.log(name);
</script>
“+”的作用:
1.将两个字符串连接起来。
2.两个数值相加。
3.字符串和其他值连接起来。
<script type="text/javascript">
var age;
age=5;
var name="heergou";
var aihao="rap;"
var tizhong=115
console.log(age+tizhong);
console.log(name+aihao);
</script>
字量面literals
直接量:表示如何表达这个值,理解起来就是字面上就能看出代码类型
- 字符串字面量(string literal),如var name=“heergou"
- 数组字面量(array literal),如var array=[12,32];
- 对象字面量(object literal),如var stu={name:“heergou”,age:20}
- 函数字面量(function literal)
数据类型
变量中存储什么类型,那么就是变量就是什么样的类型。
- string:字符串,用双引号或单引号括起来
- number:整数或浮点数(小数)
- boolean:表示真假,true或false
- undefined:变量被声明了,但未被赋值
- null:空值/以前赋过值,但现在没有值
判断数据的类型
使用typeof判断数据类型
语法:typeof(变量)或typeof 变量
返回值:
- string
- number
- boolean
- undefined
- object:对象,null(这是一个特殊的语法,可能是个bug)
<script type="text/javascript">
var string="你的名字";
var number=5;
var boolean=false
console.log(typeof string);
console.log(typeof number);
console.log(typeof boolean);
</script>
数据间的相互转换
转换为String
1.调用被转换数据的toString()方法
var a = 123;
a = a.toString();
console.log(typeof(a))
ps:这个方法不适用于null和undefined
由于这两个类型的数据中没有方法,所以调用toString()时会报错
2.调用String()函数
var a = 123;
a=string(a)
ps:原理:对于NumberBooleanString都会调用他们的toString()方法来将其转换为字符串,
对于null值,直接转换为字符串"null"。对于undefined直接转换为字符串"undefined"
var a = undefined;
a = a.toString();
console.log(typeof(a));
var a = null;
a=String(a)
console.log(typeof(a));
3.隐式的类型转换
为任意的数据类型+""
vara=true;
a=a+"";
转换为Number
调用Number()函数
vars="123";
s=Number(s);
转换的情况:
1.字符串>数字
如果字符串是一个合法的数字,则直接转换为对应的数字
如果字符串是一个非法的数字,则转换为NaN
如果是一个空串或纯空格的字符串,则转换为0
2.布尔值>数字
true转换为1
false转换为0
3.空值>数字
null转换为0
4.未定义>数字
undefined转换为NaN
var a=true
var b=false
var c=null
var d=undefined
console.log(Number(a))
console.log(Number(b))
console.log(Number(c))
console.log(Number(d))
2.调用parseInt()或parseFloat()
这两个函数专门用来将一个字符串转换为数字的
parseInt()
可以将一个字符串中的有效的整数位提取出来,并转换为Number
vara="123.456px";
a=parseInt(a);
parseFloat()
可以将一个字符串中的有效的小数位提取出来,并转换为Number
vara="123.456px";
a=parseFloat(a);//123.456
3.使用一元的+来进行隐式的类型转换
vara="123";
a=+a;
console.log(a)
转换为布尔值
方式一(强制类型转换):
使用Boolean()函数
vars="false";
s=Boolean(s);
console.log(s)
转换的情况:
字符串>布尔
除了空串其余全是true
数值>布尔
除了0和NaN其余的全是true
null、undefined>布尔
都是false
对象>布尔
都是true
方式二(隐式类型转换):
为任意的数据类型做两次非运算,即可将其转换为布尔值
var a="hello";
a=!!a;
console.log(typeof(a));
运算符
运算符也称为操作符
通过运算符可以对一个或多个值进行运算或操作
typeof运算符
用来检查一个变量的数据类型
typeof(变量)
算数运算符
+对两个值进行加法运算并返回结果
-对两个值进行减法运算并返回结果
*对两个值进行乘法运算并返回结果
/对两个值进行除法运算并返回结果
%对两个值进行取余运算并返回结果
自增
自增可以使变量在原值的基础上自增1
自增使用++
自增可以使用前++(++a)后++(a++)
无论是++a还是a++都会立即使原变量自增1
不同的是++a和a++的值是不同的,
++a的值是变量的新值(自增后的值)(先计算后赋值)
a++的值是变量的原值(自增前的值)(先赋值后计算)
var a=55
a=a++
var b=66
b=++b
console.log(a)
console.log(b);
自减
自减可以使变量在原值的基础上自减1
自减使用–
自减可以使用前(–a)后(a–)
无论是–a还是a–都会立即使原变量自减1
不同的是–a和a–的值是不同的,
–a的值是变量的新值(自减后的值)(先计算后赋值)
a–的值是变量的原值(自减前的值)(先赋值后计算)
运算符
逻辑运算符:
!
非运算可以对一个布尔值进行取反,true变false false边true
当对非布尔值使用!时,会先将其转换为布尔值然后再取反
我们可以利用!来将其他的数据类型转换为布尔值
&&
&&可以对符号两侧的值进行与运算
只有两端的值都为true时,才会返回true。只要有一个false就会返回false。
与是一个短路的与,如果第一个值是false,则不再检查第二个值
对于非布尔值,它会将其转换为布尔值然后做运算,并返回原值
规则:
1.如果第一个值为false,则返回第一个值
2.如果第一个值为true,则返回第二个值
||
||可以对符号两侧的值进行或运算
只有两端都是false时,才会返回false。只要有一个true,就会返回true。
或是一个短路的或,如果第一个值是true,则不再检查第二个值
对于非布尔值,它会将其转换为布尔值然后做运算,并返回原值
规则:
1.如果第一个值为true,则返回第一个值
2.如果第一个值为false,则返回第二个值
赋值运算符
=
可以将符号右侧的值赋值给左侧变量
+=
a += 5 相当于 a = a+5
-=
a -= 5 相当于 a = a-5
*=
a = 5 相当于 a = a5
/=
a /= 5 相当于 a = a/5
%=
a %= 5 相当于 a = a%5
关系运算符
关系运算符用来比较两个值之间的大小关系的
=
<
<=
关系运算符的规则和数学中一致,用来比较两个值之间的关系,
如果关系成立则返回true,关系不成立则返回false。
如果比较的两个值是非数值,会将其转换为Number然后再比较。
如果比较的两个值都是字符串,此时会比较字符串的Unicode编码,而不会转换为Number。
相等运算符
==
相等,判断左右两个值是否相等,如果相等返回true,如果不等返回false
相等会自动对两个值进行类型转换,如果对不同的类型进行比较,会将其转换为相同的类型然后再比较,
转换后相等它也会返回true
!=
不等,判断左右两个值是否不等,如果不等则返回true,如果相等则返回false
不等也会做自动的类型转换。
===
全等,判断左右两个值是否全等,它和相等类似,只不过它不会进行自动的类型转换,
如果两个值的类型不同,则直接返回false
!==
不全等,和不等类似,但是它不会进行自动的类型转换,如果两个值的类型不同,它会直接返回true
特殊的值:
null和undefined
由于undefined衍生自null,所以null == undefined 会返回true。
但是 null === undefined 会返回false。
NaN
NaN不与任何值相等,报告它自身 NaN == NaN //false
判断一个值是否是NaN
使用isNaN()函数
三元运算符:
?:
语法:条件表达式?语句1:语句2;
执行流程:
先对条件表达式求值判断,
如果判断结果为true,则执行语句1,并返回执行结果
如果判断结果为false,则执行语句2,并返回执行结果
var a = 300;
var b = 143;
var c = 50;
a > b ? alert("a大"):alert("b大");
优先级:
和数学中一样,JS中的运算符也是具有优先级的,
比如 先乘除 后加减 先与 后或
具体的优先级可以参考优先级的表格,在表格中越靠上的优先级越高,
优先级越高的越优先计算,优先级相同的,从左往右计算。
优先级不需要记忆,如果越到拿不准的,使用()来改变优先级。
实例导读
获取当前的日期
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool在线教程(w3cschool.cn)</title>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
</body>
</html>
javascript 简介
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言实例应用
1.JavaScript:直接写入 HTML 输出流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中:
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>
</body>
</html>
JavaScript:对事件的反应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<h1>我的第一个 JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击:
</p>
<button type="button" onclick="alert('欢迎!')">点我!</button>
</body>
</html>
ps:alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。
JavaScript:改变 HTML 内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
JavaScript:改变 HTML 图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/statics/images/course/pic_bulboff.gif";
}
else
{
element.src="/statics/images/course/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()"
src="/statics/images/course/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
</body>
</html>
JavaScript:验证输入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
var x=document.getElementById("demo").value;
if(x==""||isNaN(x))
{
alert("不是数字");
}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
JavaScript 用法
HTML 中的脚本必须位于 标签之间。
脚本可被放置在 HTML 页面的 和 部分中。
JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 可以通过不同的方式来输出数据:
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
使用 window.alert()
你可以弹出警告框来显示数据:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
</body>
</html>
ps:以上 JavaScript 语句(在
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。该方法是 HTML DOM 中定义的。
innerHTML = “Paragraph changed.” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
写到 HTML 文档
使用 document.write() 方法将内容写到 HTML 文档中。此功能可用于写入文本和HTML。
出于测试目的,您可以将JavaScript直接写在HTML 文档中:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
写到控制台
如果您的浏览器支持调试,你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 “Console” 菜单。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
JavaScript 语法
JavaScript 字面量
在编程语言中,一个字面量是一个常量,如 3.14。
-
数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。
-
字符串(String)字面量 可以使用单引号或双引号
-
表达式字面量 用于计算
-
数组(Array)字面量 定义一个数组
-
对象(Object)字面量 定义一个对象
-
函数(Function)字面量 定义一个函数
JavaScript 变量
在编程语言中,变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值
var x, length
x = 5
length = 6
ps:变量是一个名称。字面量是一个值。
JavaScript 操作符
- JavaScript使用 算术运算符 来计算值
- JavaScript使用赋值运算符给变量赋值
Type | 实例 | 描述 |
---|---|---|
赋值,算术和位运算符 | = + - * / | 在 JS 运算符中描述 |
条件,比较及逻辑运算符 | == != < > | 在 JS 比较运算符中描述 |
JavaScript 关键词
javaScript 语句通常以关键词为开头。 var 关键词告诉浏览器创建一个新的变量:
var x = 5 + 6;
var y = x * 10;
JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
下表列出了 JavaScript 语句标识符 (关键字) :
语句 描述
break | 用于跳出循环。 |
---|---|
catch | 语句块,在 try 语句块执行出错时执行 catch 语句块。 |
continue | 跳过循环中的一个迭代。 |
do … while | 执行一个语句块,在条件语句为 true 时继续执行该语句块。 |
for | 在条件语句为 true 时,可以将代码块执行指定的次数。 |
for … in | 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 |
function | 定义一个函数 |
if … else | 用于基于不同的条件来执行不同的动作。 |
return | 退出函数 |
switch | 用于基于不同的条件来执行不同的动作。 |
throw | 抛出(生成)错误 。 |
try | 实现错误处理,与 catch 一同使用。 |
var | 声明一个变量。 |
while | 当条件语句为 true 时,执行语句块。 |
JavaScript 代码块
JavaScript 可以分批地组合起来。
代码块以左花括号开始,以右花括号结束。
代码块的作用是一并地执行语句序列。
本例向网页输出一个标题和两个段落:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="myPar">我是一个段落。</p>
<div id="myDiv">我是一个div。</div>
<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>
<script>
function myFunction()
{
document.getElementById("myPar").innerHTML="你好世界";
document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>
<p>当您点击上面的按钮时,两个元素会改变。</p>
</body>
</html>
JavaScript 注释
JavaScript 不会执行注释。
我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性。
单行注释以 // 开头。
本例用单行注释来解释代码:
// 输出标题:
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落:
document.getElementById("myP").innerHTML="这是我的第一个段落。";
JavaScript 多行注释
多行注释以 /* 开始,以 */ 结尾。
下面的例子使用多行注释来解释代码:
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
JavaScript 变量
变量是用于存储信息的"容器"。
var x=5;
var y=6;
var z=x+y;
一条语句,多个变量
var lastname="Doe", age=30, job="carpenter";
重新声明 JavaScript 变量
如果重新声明 JavaScript 变量,该变量的值不会丢失:
在以下两条语句执行后,变量 carname 的值依然是 “Volvo”:
var carname="Volvo";
var carname;
流程控制语句
程序都是自上向下的顺序执行的,
通过流程控制语句可以改变程序执行的顺序,或者反复的执行某一段的程序。
分类:
1.条件判断语句
2.条件分支语句
3.循环语句
条件判断语句
条件判断语句也称为if语句
语法一:
if(条件表达式){
语句...
}
执行流程:
if语句执行时,会先对条件表达式进行求值判断,
如果值为true,则执行if后的语句
如果值为false,则不执行
语法二:
if(条件表达式){
语句...
}else{
语句...
}
执行流程:
if…else语句执行时,会对条件表达式进行求值判断,
如果值为true,则执行if后的语句
如果值为false,则执行else后的语句
语法三:
if(条件表达式){
语句...
}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语句在执行时,会先对条件表达式进行求值判断,
如果判断结果为false,则终止循环
如果判断结果为true,则执行循环体
循环体执行完毕,继续对条件表达式进行求值判断,依此类推
do…while循环
语法:
do{
语句...
}while(条件表达式)
执行流程
do…while在执行时,会先执行do后的循环体,然后在对条件表达式进行判断,
如果判断判断结果为false,则终止循环。
如果判断结果为true,则继续执行循环体,依此类推
和while的区别:
while:先判断后执行
do…while: 先执行后判断
do…while可以确保循环体至少执行一次。
for循环
语法:
for(①初始化表达式 ; ②条件表达式 ; ④更新表达式){
③语句...
}
执行流程:
首先执行①初始化表达式,初始化一个变量,
然后对②条件表达式进行求值判断,如果为false则终止循环
如果判断结果为true,则执行③循环体
循环体执行完毕,执行④更新表达式,对变量进行更新。
更新表达式执行完毕重复②
死循环
while(true){
}
for(){
}
对象(Object)
对象是JS中的引用数据类型
对象是一种复合数据类型,在对象中可以保存多个不同数据类型的属性
使用typeof检查一个对象时,会返回object
创建对象
方式一:
var obj = new Object();
方式二:
var obj = {};
向对象中添加属性
语法:
对象.属性名 = 属性值;
对象["属性名"] = 属性值;
对象的属性名没有任何要求,不需要遵守标识符的规范,
但是在开发中,尽量按照标识符的要求去写。
属性值也可以任意的数据类型。
读取对象中的属性
语法:
对象.属性名
对象["属性名"]
如果读取一个对象中没有的属性,它不会报错,而是返回一个undefined
删除对象中的属性
语法:
delete 对象.属性名
delete 对象["属性名"]
使用in检查对象中是否含有指定属性
语法:
"属性名" in 对象
如果在对象中含有该属性,则返回true
如果没有则返回false
枚举对象中的属性
语法:
for(var 变量 in 对象){
console.log("属性名:"+n);
/*这个会显示属性名*/
console.log("属性值:"+obj[n]); }
/*这个加了中括号可以显示属性值*/
for…in语句的循环体会执行多次,对象中有几个属性就会执行几次,
每次讲一个属性名赋值给我们定义的变量,我们可以通过它来获取对象中的属性
使用对象字面量,在创建对象时直接向对象中添加属性
语法:
var obj = {
属性名:属性值,
属性名:属性值,
属性名:属性值,
属性名:属性值
}
基本数据类型和引用数据类型
基本数据类型
String Number Boolean Null Undefined
引用数据类型
Object
基本数据类型的数据,变量是直接保存的它的值。
变量与变量之间是互相独立的,修改一个变量不会影响其他的变量。
引用数据类型的数据,变量是保存的对象的引用(内存地址)。
如果多个变量指向的是同一个对象,此时修改一个变量的属性,会影响其他的变量。
比较两个变量时,对于基本数据类型,比较的就是值,
对于引用数据类型比较的是地址,地址相同才相同
函数(Function)
函数也是一个对象,也具有普通对象的功能
函数中可以封装一些代码,在需要的时候可以去调用函数来执行这些代码
使用typeof检查一个函数时会返回function
创建函数
函数声明
function 函数名([形参1,形参2...形参N]){
语句...
}
函数表达式
var 函数名 = function([形参1,形参2...形参N]){
语句...
};
调用函数
语法:
函数对象([实参1,实参2...实参N]);
fun() sum() alert() Number() parseInt()
当我们调用函数时,函数中封装的代码会按照编写的顺序执行
形参和实参
形参:形式参数
定义函数时,可以在()中定义一个或多个形参,形参之间使用,隔开
定义形参就相当于在函数内声明了对应的变量但是并不赋值,
形参会在调用时才赋值。
实参:实际参数
调用函数时,可以在()传递实参,传递的实参会赋值给对应的形参,
调用函数时JS解析器不会检查实参的类型和个数,可以传递任意数据类型的值。
如果实参的数量大于形参,多余实参将不会赋值,
如果实参的数量小于形参,则没有对应实参的形参将会赋值undefined
函数
返回值,就是函数执行的结果。
使用return 来设置函数的返回值。
语法:
return 值;
该值就会成为函数的返回值,可以通过一个变量来接收返回值
return后边的代码都不会执行,一旦执行到return语句时,函数将会立刻退出。
return后可以跟任意类型的值,可以是基本数据类型,也可以是一个对象。
如果return后不跟值,或者是不写return则函数默认返回undefined。
break、continue和return的区别
break | 退出循环 |
---|---|
continue | 跳过当前循环 |
return | 退出函数 |
参数
函数的实参也可以是任意的数据类型。
立即执行函数
函数定义完,立即被调用,这种函数叫做立即执行函数
立即执行函数往往只会执行一次
语法:
(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);
方法(method)
可以将一个函数设置为一个对象的属性,
当一个对象的属性是一个函数时,
我们称这个函数是该对象的方法。
对象.方法名();
函数名();
语法:
obj.sayName = function(){
console.log(obj.name);
};
作用域
作用域简单来说就是一个变量的作用范围。
在JS中作用域分成两种:
1.全局作用域
直接在script标签中编写的代码都运行在全局作用域中
全局作用域在打开页面时创建,在页面关闭时销毁。
全局作用域中有一个全局对象window,window对象由浏览器提供,
可以在页面中直接使用,它代表的是整个的浏览器的窗口。
在全局作用域中创建的变量都会作为window对象的属性保存
在全局作用域中创建的函数都会作为window对象的方法保存
在全局作用域中创建的变量和函数可以在页面的任意位置访问。
在函数作用域中也可以访问到全局作用域的变量。
尽量不要在全局中创建变量
2.函数作用域
函数作用域是函数执行时创建的作用域,每次调用函数都会创建一个新的函数作用域。
函数作用域在函数执行时创建,在函数执行结束时销毁。
在函数作用域中创建的变量,不能在全局中访问。
当在函数作用域中使用一个变量时,它会先在自身作用域中寻找,
如果找到了则直接使用,如果没有找到则到上一级作用域中寻找,
如果找到了则使用,找不到则继续向上找,一直会
变量的声明提前
在全局作用域中,使用var关键字声明的变量会在所有的代码执行之前被声明,但是不会赋值。
所以我们可以在变量声明前使用变量。但是不使用var关键字声明的变量不会被声明提前。
在函数作用域中,也具有该特性,使用var关键字声明的变量会在函数所有的代码执行前被声明,
如果没有使用var关键字声明变量,则变量会变成全局变量
函数的声明提前
在全局作用域中,使用函数声明创建的函数(function fun(){}),会在所有的代码执行之前被创建,
也就是我们可以在函数声明前去调用函数,但是使用函数表达式(var fun = function(){})创建的函数没有该特性
在函数作用域中,使用函数声明创建的函数,会在所有的函数中的代码执行之前就被创建好了。
this(上下文对象)
我们每次调用函数时,解析器都会将一个上下文对象作为隐含的参数传递进函数。
使用this来引用上下文对象,根据函数的调用形式不同,this的值也不同。
this的不同的情况:
1.以函数的形式调用时,this是window
2.以方法的形式调用时,this就是调用方法的对象
3.以构造函数的形式调用时,this就是新创建的对象
构造函数
构造函数是专门用来创建对象的函数
一个构造函数我们也可以称为一个类
通过一个构造函数创建的对象,我们称该对象时这个构造函数的实例
通过同一个构造函数创建的对象,我们称为一类对象
构造函数就是一个普通的函数,只是他的调用方式不同,
如果直接调用,它就是一个普通函数
如果使用new来调用,则它就是一个构造函数
例子:
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert(this.name);
};
}
构造函数的调用
var per = new Person("孙悟空",18,"男");
构造函数的执行流程:
1.创建一个新的对象
2.将新的对象作为函数的上下文对象(this)
3.执行函数中的代码
4.将新建的对象返回
普通函数和构造函数的区别
构造函数就是一个普通的函数,创建方式和普通函数没有区别,
不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用方式的不同
普通函数是直接调用,而构造函数需要使用new关键字来调用
instanceof 用来检查一个对象是否是一个类的实例
语法:对象 instanceof 构造函数
如果该对象时构造函数的实例,则返回true,否则返回false
Object是所有对象的祖先,所以任何对象和Object做instanceof都会返回true
原型(prototype)
创建一个函数以后,解析器都会默认在函数中添加一个数prototype
prototype属性指向的是一个对象,这个对象我们称为原型对象。
当函数作为构造函数使用,它所创建的对象中都会有一个隐含的属性执行该原型对象。
这个隐含的属性可以通过对象.__proto__来访问。
原型对象就相当于一个公共的区域,凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。
我们可以将对象中共有的属性和方法统一添加到原型对象中,
这样我们只需要添加一次,就可以使所有的对象都可以使用。
当我们去访问对象的一个属性或调用对象的一个方法时,它会先自身中寻找,
如果在自身中找到了,则直接使用。
如果没有找到,则去原型对象中寻找,如果找到了则使用,
如果没有找到,则去原型的原型中寻找,依此类推。直到找到Object的原型为止,Object的原型的原型为null,
如果依然没有找到则返回undefined
向原型中添加方法语法:
Person.prototype.sayName = function(){
alert("Hello大家好,我是:"+this.name);
};
hasOwnProperty()
这个方法可以用来检查对象自身中是否含有某个属性
语法:
对象.hasOwnProperty("属性名")
tostring()
当我们直接在页面中打印一个对象时,事件上是输出的对象的toString()方法的返回值
如果我们希望在输出对象时不输出[object Object],可以为对象添加一个toString()方法
实例:
Person.prototype.toString = function(){
return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
};
垃圾回收
就像人生活的时间长了会产生垃圾一样,程序运行过程中也会产生垃圾
这些垃圾积攒过多以后,会导致程序运行的速度过慢,
所以我们需要一个垃圾回收的机制,来处理程序运行过程中产生垃圾
当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象,
此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢,
所以这种垃圾必须进行清理。
在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁,
我们不需要也不能进行垃圾回收的操作
我们需要做的只是要将不再使用的对象设置null即可
语法:
obj = null;
数组(Array)
数组也是一个对象,是一个用来存储数据的对象
和Object类似,但是它的存储效率比普通对象要高
数组中保存的内容我们称为元素
数组使用索引(index)来操作元素
索引指由0开始的整数
数组的操作:
创建数组
var arr = new Array();
var arr = [];
向数组中添加元素
语法;
数组对象[索引] = 值;
arr[0] = 123;
arr[1] = "hello";
创建数组时直接添加元素
语法:
var arr = [元素1,元素2....元素N];
例子:
var arr = [123,“hello”,true,null];
获取和修改数组的长度
使用length属性来操作数组的长度
获取长度:
数组.length
length获取到的是数组的最大索引+1
对于连续的数组,length获取到的就是数组中元素的个数
修改数组的长度
数组.length = 新长度
如果修改后的length大于原长度,则多出的部分会空出来
如果修改后的length小于原长度,则原数组中多出的元素会被删除
向数组的最后添加元素
数组[数组.length] = 值;
数组的方法
push()
用来向数组的末尾添加一个或多个元素,并返回数组新的长度
语法:
数组.push(元素1,元素2,元素N)
pop()
用来删除数组的最后一个元素,并返回被删除的元素
unshift()
向数组的前边添加一个或多个元素,并返回数组的新的长度
shift()
删除数组的前边的一个元素,并返回被删除的元素
slice()
可以从一个数组中截取指定的元素
该方法不会影响原数组,而是将截取到的内容封装为一个新的数组并返回
参数:
1.截取开始位置的索引(包括开始位置)
2.截取结束位置的索引(不包括结束位置)
第二个参数可以省略不写,如果不写则一直截取到最后
参数可以传递一个负值,如果是负值,则从后往前数
splice()
可以用来删除数组中指定元素,并使用新的元素替换
该方法会将删除的元素封装到新数组中返回
参数:
1.删除开始位置的索引
2.删除的个数
3.三个以后,都是替换的元素,这些元素将会插入到开始位置索引的前边
遍历数组
遍历数组就是将数组中元素都获取到
一般情况我们都是使用for循环来遍历数组:
for(var i=0 ; i<数组.length ; i++){
//数组[i]
}
使用forEach()方法来遍历数组(不兼容IE8)
数组.forEach(function(value , index , obj){
});
forEach()方法需要一个回调函数作为参数,
数组中有几个元素,回调函数就会被调用几次,
每次调用时,都会将遍历到的信息以实参的形式传递进来,
我们可以定义形参来获取这些信息。
value:正在遍历的元素
index:正在遍历元素的索引
obj:被遍历对象