- JS Study
- JavaScript 变量
- *JavaScript 数据类型
- JavaScript 对象
- JavaScript 函数
- JavaScript 作用域
- JavaScript 事件
- JavaScript 运算符
- JavaScript 比较 和 逻辑运算符
- JavaScript if...Else 语句
- JavaScript for 循环
- JavaScript while 循环
- JavaScript break 和 continue 语句
- JavaScript typeof, null, undefined,valueOf()
- JavaScript 类型转换
- JavaScript 正则表达式
- JavaScript 错误 - throw、try 和 catch
- JavaScript 调试
- JavaScript 变量提升
- JavaScript 严格模式(use strict)
- JavaScript 表单
- JavaScript 表单验证
- JavaScript this 关键字
- JavaScript JSON
- JavaScript 异步编程
- JS 函数定义
- JavaScript 函数参数
- JavaScript 函数调用
- JavaScript 闭包
- JavaScript 对象
- JavaScript prototype(原型对象)
- JavaScript Number 对象
- JavaScript 字符串(String) 对象
- JavaScript Date(日期) 对象
- JavaScript Array(数组) 对象
- JavaScript Boolean(布尔) 对象
- JavaScript Math(算数) 对象
- JavaScript RegExp 对象
JS Study
JavaScript 变量
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
JavaScript 数据类型
- 当您向变量分配文本值时,应该用双引号或单引号包围这个值。
- 当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。
var pi=3.14;//数字赋值不要加引号
var person="John Doe";
var answer='Yes I am!';
声明(创建) JavaScript 变量
- 先声明,后赋值
var name;
name="HuangXin";
- 声明同时赋值
var name="HuangXin";
- 一条语句,多个变量
//可以一行
var lastname="Doe", age=30, job="carpenter";
//可以多行
var lastname="Doe",
age=30,
job="carpenter";
误区:
一条语句中声明的多个变量不可以同时赋同一个值:
var x,y,z=1;
x,y为undefined;z为1。
注:
声明的变量没有的为undefined
var name;
//等价于
var name=nudefined;
重新声明 JavaScript 变量
在以下两条语句执行后,变量 name 的值依然是 "HuangXin":
var name="HuangXin";
var name;
JavaScript 算数
声明变量赋值的同时可以进行计算:
var a=4;
var b=a+1;//b=5
*JavaScript 数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
JavaScript 字符串
字符串可以是引号中的任意文本。您可以使用单引号或双引号。
您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
JavaScript 数字
- JavaScript 只有一种数字类型。数字可以带小数点,也可以不带;
- 极大或极小的数字可以通过科学(指数)计数法来书写:
var x=123e5;//12300000
var y=123e-5;//0.00123
JavaScript 布尔
布尔(逻辑)只能有两个值:true 或 false。
var x=true;
var y=false;
JavaScript 数组
创建cars数组:
var cars=new Array();
cars[0]="Saab";
cars[1]="BMW";
或者:
var cars=new Array("Saab","BMW");
or:
var cars=["Saab","BMW"];
JavaScript 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={id:"10010",name:"HuangXin"};
or:
var person={
id:"10010",
name:"HuangXin";
};
对象属性有两种寻址方式:
id=person["id"];
id=person.id;//推荐
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
cars=null;
person=null;
JavaScript 对象
对象定义
var person={
id:"10010",
name:"HuangXin",
address:"SD"
};
访问对象方法
如果使用 fullName 属性,不添加 (), 它会返回函数的定义:
function() { return "id:" + this.id + "name:" + this.name + "address:" + this.address; }
JavaScript 函数
调用带参数的函数
可以发送任意多的参数,由逗号 (,) 分隔:
function myFunction(var1,var2)
{
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值
带有返回值的函数
function myFunction()
{
var x=5;
return x;
}
函数调用将被返回值取代:
var myVar=myFunction();
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
- JavaScript 变量的生命期从它们被声明的时间开始。
- 局部变量会在函数运行以后被删除。
- 全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量分配值
- 如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。
- 非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明,可配置全局属性
console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2
delete var1; // false 无法删除
console.log(var1); //1
delete var2;
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义
JavaScript 作用域
JavaScript 作用域
变量在函数内声明,变量为局部作用域。
局部变量:只能在函数内部访问。
JavaScript 全局变量
- 变量在函数外定义,即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
- 如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
JavaScript 变量生命周期
- JavaScript 变量生命周期在它声明时初始化。
- 局部变量在函数执行完毕后销毁。
- 全局变量在页面关闭后销毁。
函数参数
函数参数只在函数内起作用,是局部变量。
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
JavaScript 事件
JavaScript 字符串
- 字符串的索引从 0 开始,这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。
- 你可以在字符串中使用引号,字符串中的引号不要与字符串的引号相同。
字符串可以是对象
- 通常, JavaScript 字符串是原始值,可以使用字符创建: var firstName = "John"
- 但我们也可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John")
var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object
注:
- 不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用。
- === 为绝对相等,即数据类型与值都必须相等。
字符串属性和方法
原始值字符串没有属性和方法(因为他们不是对象),但可以使用JavaScript的属性和方法,
因为JavaScript在执行方法和属性时可以把原始值当作对象。
字符串属性
属性 | 描述 |
---|---|
constructor | 返回创建字符串属性的函数 |
length | 返回字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
字符串方法
方法 | 描述 |
---|---|
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() | 将 Unicode 转换为字符串 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() | 把字符串分割为子字符串数组 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLowerCase() | 把字符串转换为小写 |
toString() | 返回字符串对象值 |
toUpperCase() | 把字符串转换为大写 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
JavaScript 运算符
略
JavaScript 比较 和 逻辑运算符
比较运算符
比较运算符在逻辑语句中使用,以测定变量或值是否相等。
逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
条件运算符
?:(三目运算符)
JavaScript if...Else 语句
条件语句
- if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
- if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
- if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
if 语句
if (time<20)
{
x="Good day";
}
if...else 语句
if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
if...else if...else 语句
if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
document.write("<b>今天好</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
JavaScript switch 语句
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。
请使用 break 来阻止代码自动地向下一个 case 运行。
请使用 default 关键词来规定匹配不存在时做的事情:
JavaScript for 循环
循环可以将代码块执行指定的次数。
JavaScript 循环
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
不同类型的循环
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
For 循环
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
For/In 循环
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名(fname,lname,age)
{
txt=txt + person[x];
}
JavaScript while 循环
while 循环
while 循环会在指定条件为真时循环执行代码块。
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
}
do/while 循环
do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5);
JavaScript break 和 continue 语句
- break 语句用于跳出循环。
- continue 用于跳过循环中的一个迭代。
JavaScript 标签
- continue 语句(带有或不带标签引用)只能用在循环中。
- break 语句(不带标签引用),只能用在循环或 switch 中。
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
JavaScript typeof, null, undefined,valueOf()
typeof 操作符
你可以使用 typeof 操作符来检测变量的数据类型。
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
在JavaScript中,数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。
null
在 JavaScript 中 null 表示 "什么都没有"。
null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是object。
undefined
在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
任何变量都可以通过设置值为 undefined 来清空。
null 和 undefined 的值相等,但类型不等。
JavaScript 类型转换
JavaScript 数据类型
6 种不同的数据类型
- string
- number
- boolean
- object
- function
- symbol
3 种对象类型
- Object
- Date
- Array
2 个不包含任何值的数据类型
- null
- undefined
Notion:
- NaN 的数据类型是 number
- 数组(Array)的数据类型是 object
- 日期(Date)的数据类型为 object
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined
constructor 属性
constructor 属性返回所有 JavaScript 变量的构造函数。
JavaScript 类型转换
JavaScript 变量可以转换为新变量或其他数据类型:
- 通过使用 JavaScript 函数
- 通过 JavaScript 自身自动转换
将数字转换为字符串
- 全局方法 String() 可以将数字转换为字符串。该方法可用于任何类型的数字,字母,变量,表达式.
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
- Number 方法 toString() 也是有同样的效果。
x.toString()
(123).toString()
(100 + 23).toString()
将日期转换为字符串
- Date() 返回字符串。
Date()
- 全局方法 String() 可以将日期对象转换为字符串。
- Date 方法 toString()。
- Other methods:
|方法 |描述 |
|-- |-- |
|getDate() |从 Date 对象返回一个月中的某一天 (1 ~ 31)。|
|getDay() |从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
|getFullYear() |从 Date 对象以四位数字返回年份。 |
|getHours() |返回 Date 对象的小时 (0 ~ 23)。 |
|getMilliseconds() |返回 Date 对象的毫秒(0 ~ 999)。 |
|getMinutes() |返回 Date 对象的分钟 (0 ~ 59)。 |
|getMonth() |从 Date 对象返回月份 (0 ~ 11)。 |
|getSeconds() |返回 Date 对象的秒数 (0 ~ 59)。 |
|getTime() |返回 1970 年 1 月 1 日至今的毫秒数。 |
将字符串转换为数字
全局方法 Number() 可以将字符串转换为数字。
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
JavaScript 正则表达式
语法
/正则表达式主体/修饰符(可选)
使用字符串方法
search() 方法使用正则表达式
使用正则表达式搜索 "Runoob" 字符串,且不区分大小写:
var str = "Visit Runoob!";
var n = str.search(/Runoob/i);
search() 方法使用字符串
search 方法可使用字符串作为参数。字符串参数会转换为正则表达式:
var str = "Visit Runoob!";
var n = str.search("Runoob");
replace() 方法使用正则表达式
使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/microsoft/i,"Runoob");
replace() 方法使用字符串
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","Runoob");
正则表达式修饰符
修饰符 可以在全局搜索中不区分大小写:
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
正则表达式模式
方括号用于查找某个范围内的字符:
表达式 | 描述 |
---|---|
[abc] | 查找方括号之间的任何字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
(x|y) | 查找任何以"|" 分隔的选项。 |
元字符是拥有特殊含义的字符:
元字符 | 描述 |
---|---|
d | 查找数字。 |
s | 查找空白字符。 |
匹配单词边界。 | |
uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词:
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个 n 的字符串。 |
n* | 匹配任何包含零个或多个 n 的字符串。 |
n? | 匹配任何包含零个或一个 n 的字符串。 |
使用 RegExp 对象
在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。
使用 test()
- test() 方法是一个正则表达式方法。
- test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
var patt = /e/;
patt.test("The best things in life are free!");
使用 exec()
- exec() 方法是一个正则表达式方法。
- exec() 方法用于检索字符串中的正则表达式的匹配。
- 该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
/e/.exec("The best things in life are free!");
JavaScript 错误 - throw、try 和 catch
- try 语句测试代码块的错误。
- catch 语句处理错误。
- throw 语句创建自定义错误。
- finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。
JavaScript 错误
JavaScript try 和 catch
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}
JavaScript 调试
debugger 关键字
var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;
JavaScript 变量提升
- JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
- JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。
JavaScript 初始化不会提升。
JavaScript 只有声明的变量会提升,初始化的不会。
JavaScript 严格模式(strict mode)不允许使用未声明的变量。
JavaScript 严格模式(use strict)
JavaScript 严格模式(strict mode)即在严格的条件下运行。严格模式下你不能使用未声明的变量。
"use strict";
x = 3.14; // 报错 (x 未定义)
严格模式的限制
- 不允许使用未声明的变量
- 不允许删除变量或对象。
- 不允许删除函数。
- 不允许变量重名
- 不允许使用八进制
- 不允许使用转义字符
- 不允许对只读属性赋值
- 不允许对一个使用getter方法读取的属性进行赋值
- 不允许删除一个不允许删除的属性
- 变量名不能使用 "eval" 字符串
- 变量名不能使用 "arguments" 字符串
- 不允许使用以下这种语句
- 由于一些安全原因,在作用域 eval() 创建的变量不能被调用
- 禁止this关键字指向全局对象。
保留关键字
- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield
"use strict" 指令只允许出现在脚本或函数的开头。
JavaScript 表单
JavaScript 表单验证
JavaScript this 关键字
- 在方法中,this 表示该方法所属的对象。
- 如果单独使用,this 表示全局对象。
- 在函数中,this 表示全局对象。
- 在函数中,在严格模式下,this 是未定义的(undefined)。
- 在事件中,this 表示接收事件的元素。
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
JavaScript JSON
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
JSON 语法规则
- 数据为 键/值 对。
- 数据由逗号分隔。
- 大括号保存对象
- 方括号保存数组
JSON 对象
{"name":"Runoob", "url":"www.runoob.com"}
JSON 数组
"sites":[
{"name":"Runoob", "url":"www.runoob.com"},
{"name":"Google", "url":"www.google.com"},
{"name":"Taobao", "url":"www.taobao.com"}
]
JSON 字符串转换为 JavaScript 对象
使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
将 JavaScript 值转换为 JSON 字符串。
JSON.stringify()
var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"};
str_pretty1 = JSON.stringify(str);
JavaScript 异步编程
回调函数
JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。
回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。
setTimeout(function () {
document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
异步 AJAX
jQuery主用
JS 函数定义
- JavaScript 使用关键字 function 定义函数。
- 函数可以通过声明定义,也可以是一个表达式。
函数声明
function functionName(parameters) {
执行的代码;//只有可执行js语句才用分号分开
}
声明之后不会执行,被调用时才会执行。
分号是用来分隔可执行JavaScript语句。由于函数声明不是一个可执行语句,所以不以分号结束。
函数表达式
函数表达式以分号结尾,因为它是一个执行语句。
JavaScript 函数可以通过一个表达式定义。都是匿名函数(没有函数名)。
函数表达式可以存储在变量中:
var x = function(a, b) {return a * b};
在函数表达式存储在变量后,变量也可作为一个函数使用:
var x = function (a, b) {return a * b};
var z = x(4, 3);
Function() 构造函数(少用:速度慢)
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
在 JavaScript 中,很多时候,你需要避免使用 new 关键字。
函数提升(Hoisting)
函数可以在声明之前调用
myFunction(5);//调用
function myFunction(y) {
return y * y;
}//声明
使用表达式定义函数时无法提升。
自调用函数
- 函数表达式可以 "自调用"。
- 自调用表达式会自动调用。
- 如果表达式后面紧跟 () ,则会自动调用。
- 不能自调用声明的函数。
- 通过添加括号,来说明它是一个函数表达式:
(function () {
var x = "Hello!!"; // 我将调用自己
})();//无参
(function(a, b) {
console.log(a + b); // 我将调用自己
})(2, 3);//有参数
- 以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。
函数可作为一个值使用
- JavaScript 函数作为一个值使用:
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3);
- JavaScript 函数可作为表达式使用:
function myFunction(a, b) {
return a * b;
}
var x = myFunction(4, 3) * 2;
箭头函数
ES6 新增了箭头函数。
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)
当只有一个参数时,圆括号是可选的:
(单一参数) => {函数声明}
单一参数 => {函数声明}
没有参数的函数应该写成一对圆括号:
() => {函数声明}
const xx = () => console.log("xx");
xx();//xx
const yy = x => console.log("yy:" + x * x);
yy(6);//36
const zz = (x, y) => {
console.log("zz");
return x;
}
console.log("zz:"+zz(2,3));//zz 2
- 箭头函数是不能提升的,所以需要在使用之前定义。
- 使用 const 比使用 var 更安全,因为函数表达式始终是一个常量。
- 如果函数部分只是一个语句,则可以省略 return 关键字和大括号 {}
JavaScript 函数参数
JavaScript 函数对参数的值没有进行任何的检查。
函数显式参数(Parameters)与隐式参数(Arguments)
- 函数显式参数在函数定义时列出。
- 函数隐式参数在函数调用时传递给函数真正的值。
参数规则
- JavaScript 函数定义显式参数时没有指定数据类型。
- JavaScript 函数对隐式参数没有进行类型检测。
- JavaScript 函数对隐式参数的个数没有进行检测。
默认参数
ES5 中如果函数在调用时未提供隐式参数,参数会默认设置为: undefined
function myFunction(x, y) {
y = y || 0;
}
如果y已经定义 , y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。
ES6 函数可以自带参数
ES6 支持函数带有默认参数,就判断 undefined 和 || 的操作:
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y 参数的默认值
arguments 对象
JavaScript 函数有个内置的对象 arguments 对象。argument 对象包含了函数调用的参数数组。
通过值传递参数
在函数中调用的参数是函数的隐式参数。
JavaScript 隐式参数通过值来传递:函数仅仅只是获取值。
如果函数修改参数的值,不会修改显式参数的初始值(在函数外定义)。
隐式参数的改变在函数外是不可见的。
通过对象传递参数
在JavaScript中,可以引用对象的值。
因此我们在函数内部修改对象的属性就会修改其初始的值。
修改对象属性可作用于函数外部(全局变量)。
修改对象属性在函数外是可见的。
JavaScript 函数调用
JavaScript 函数有 4 种调用方式。每种方式的不同在于 this 的初始化。
this 关键字
一般而言,在Javascript中,this指向函数执行时的当前对象。
作为一个函数调用
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) 返回 20
以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。
- 在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面。
- 在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。
myFunction() 和 window.myFunction() 是一样的。
全局对象
当函数没有被自身的对象调用时 this 的值就会变成全局对象。
在 web 浏览器中全局对象是浏览器窗口(window 对象)。
function myFunction() {
return this;
}
myFunction(); // 返回 window 对象
函数作为全局对象调用,会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。
函数作为方法调用
在 JavaScript 中你可以将函数定义为对象的方法。
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
- fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。
- this对象,拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。
函数作为对象方法调用,会使得 this 的值成为对象本身。
使用构造函数调用函数
如果函数调用前使用了 new 关键字, 则是调用了构造函数。使用new关键字则会创建一个新的对象。
// 构造函数:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
// This creates a new object
var x = new myFunction("John","Doe");
x.firstName; // 返回 "John"
构造函数中 this 关键字没有任何的值。this 的值在函数调用实例化对象(new object)时创建。
作为函数方法调用函数
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。
function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2); // 返回 20
function myFunction(a, b) {
return a * b;
}
let myArray = [10, 2];
let myObject = myFunction.apply(myObject, myArray); // 返回 20
两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。
在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。
var let const
在javascript中有三种声明变量的方式:var、let、const。
JS中作用域有:全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。块作用域由 { } 包括,if语句和for语句里面的{ }也属于块作用域。
var
var定义的变量可以修改,如果不初始化会输出undefined,不会报错。
var 声明全局变量,换句话理解就是,声明在for循环中的变量,跳出for循环同样可以使用。
声明在for循环内部的sum,跳出for循环一样可以使用,不会报错正常弹出结果
let
同一个变量,不可在声明之前调用,必须先定义再使用,否则会报错,循环体中可以用let
let是块级作用域,函数内部使用let定义后,对函数外部无影响。并且let不能定义同名变量,否则会报错。
const
用于声明常量,也具有块级作用域 ,也可声明块级。const定义的变量不可以修改,而且必须初始化。
const和let一样,也不能重复定义同一个变量,const一旦定义,无法修改.
let和const属于局部变量,不会出现变量提升的情况,全局定义的let和const变量,不属于顶层变量,不属于window的属性,
JavaScript 闭包
JavaScript 变量可以是局部变量或全局变量。私有变量可以用到闭包。
全局变量
变量声明时如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义。
变量生命周期
全局变量的作用域是全局性的,即在整个JavaScript程序中,全局变量处处都在。
而在函数内部声明的变量,只在函数内部起作用。这些变量是局部变量,作用域是局部性的;函数的参数也是局部性的,只在函数内部起作用。
JavaScript 内嵌函数
所有函数都能访问全局变量。
实际上,在 JavaScript 中,所有函数都能访问它们上一层的作用域。
JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。
该实例中,内嵌函数 plus() 可以访问父函数的 counter 变量:
function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
JavaScript 闭包
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// 计数器为 3
- 变量 add 指定了函数自我调用的返回字值。
- 自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
- add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
- 这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。计数器受匿名函数的作用域保护,只能通过 add 方法修改。
闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。
JavaScript 对象
JavaScript 中的所有事物都是对象。对象只是带有属性和方法的特殊数据类型。
访问对象的属性
//语法:
objectName.propertyName
//如:
var message="Hello World!";
var x=message.length;
访问对象的方法
//讲法:
objectName.methodName();
//如:
var message="Hello world!";
var x=message.toUpperCase();
创建 JavaScript 对象
- 使用 Object 定义并创建对象的实例。
- 使用函数来定义对象,然后创建新的对象实例。
使用 Object
Object 构造函数,会根据给定的参数创建对象,具体有以下情况:
- 如果给定值是 null 或 undefined,将会创建并返回一个空对象。
- 如果传进去的是一个基本类型的值,则会构造其包装类型的对象。
- 如果传进去的是引用类型的值,仍然会返回这个值,经他们复制的变量保有和源对象相同的引用地址。(传地址)
- 当以非构造函数形式被调用时,Object 的行为等同于 new Object()。
// 以构造函数形式来调用
new Object([value]);//vaule 可以是任何值。
//如:
person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";
也可以使用对象字面量来创建对象,语法格式如下:
{ name1 : value1, name2 : value2,...nameN : valueN }
//如:
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
JavaScript 对象就是一个 name:value 集合。
使用对象构造器
function person(firstname,lastname,age)
{
//在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
}
//创建 JavaScript 对象实例
myFather=new person("John","Doe",50);
把属性添加到 JavaScript 对象
您可以通过为对象赋值,向已有对象添加新属性
把方法添加到 JavaScript 对象
在构造器函数内部定义对象的方法
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
//or
p.changeName = function(name) {
this.lastName = name;
}
JavaScript 类
JavaScript 是面向对象的语言,但 JavaScript 不使用类。
JavaScript 基于 prototype(标准,原型,样本),而不是基于类的。
JavaScript for...in 循环
for (variable in object)
{
执行的代码……
}
//**for...in 循环中的代码块将针对每个属性执行一次。**
//如:
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
JavaScript 的对象是可变的
对象是可变的,它们是通过引用来传递的。
var x = person; // 不会创建 person 的副本,是引用
如果修改来 x ,person 的属性也会改变,
JavaScript prototype(原型对象)
所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。
在一个已存在的对象构造器中是不能添加新的属性的。
要添加一个新的属性需要在在构造器函数中添加:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
prototype 继承
所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。
添加属性和方法
使用 prototype 属性就可以给对象的构造函数添加新的属性和方法:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
//add new method
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};
JavaScript Number 对象
JavaScript 只有一种数字类型。可以使用也可以不使用小数点来书写数字。
const PI=3.14;
var x=6;
var y = 123e5;//12300000
var z = 123e-5;//0.00123
所有 JavaScript 数字均为 64 位
avaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。所有的数字都是浮点型类型。
精度
- 整数(不使用小数点或指数计数法)最多为 15 位。
- 小数的最大位数是 17,但是浮点运算并不总是 100% 准确。
八进制和十六进制
如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。
var y = 0377;//八进制
var z = 0xFF;//十六进制
默认情况下,JavaScript 数字为十进制显示。但是可以使用 toString() 方法 输出16进制、8进制、2进制。
var myNumber=128;
myNumber.toString(16); // 返回 80
myNumber.toString(8); // 返回 200
myNumber.toString(2); // 返回 10000000
无穷大(Infinity)
当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示。
NaN - 非数字值
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
var x = 1000 / "Apple";//字符串
isNaN(x); // 返回 true
var y = 100 / "1000";//字符串数字
isNaN(y); // 返回 false
//除以0是无穷大,无穷大是一个数字
var x = 1000 / 0;
isNaN(x); // 返回 false
数字可以是数字或者对象
var x = 123;
var y = new Number(123);
typeof(x) // 返回 Number
typeof(y) // 返回 Object
JavaScript 字符串(String) 对象
String 对象用于处理已有的字符块。
JavaScript 字符串
var carname="Volvo XC60";
var carname='Volvo XC60';
使用位置(索引)可以访问字符串中任何的字符:
var character=carname[7];
JavaScript Date(日期) 对象
日期对象用于处理日期和时间。
创建日期
有四种方式初始化日期:
new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
//参数大多数都是可选的,在不指定的情况下,默认参数是0。
设置日期
var myDate=new Date();
myDate.setFullYear(2010,0,14);
//在下面的例子中,我们将日期对象设置为 5 天后的日期:
myDate.setDate(myDate.getDate()+5);
JavaScript Array(数组) 对象
数组对象的作用是:使用单独的变量名来存储一系列的值。
创建一个数组
创建一个数组,有三种方法。
- 常规方式:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
- 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
- 字面:
var myCars=["Saab","Volvo","BMW"];
访问数组
通过指定数组名以及索引号码,你可以访问某个特定的元素。
在数组中有不同的变量类型。
数组方法和属性
创建新方法
原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。
Array.prototype.myUcase=function(){
for (i=0;i<this.length;i++){
this[i]=this[i].toUpperCase();
}
}
JavaScript Boolean(布尔) 对象
如果布尔对象无初始值或者其值为:
- 0
- -0
- null
- ""
- false
- undefined
- NaN
那么对象的值为 false。否则,其值为 true!
JavaScript Math(算数) 对象
Math(算数)对象的作用是:执行常见的算数任务。
JavaScript RegExp 对象
RegExp:是正则表达式(regular expression)的简写。
语法:
var patt=new RegExp(pattern,modifiers);
或更简单的方法
var patt=/pattern/modifiers;
//模式描述了一个表达式模型。
//修饰符(modifiers)描述了检索是否是全局,区分大小写等。
RegExp 修饰符
修饰符用于执行不区分大小写和全文的搜索。
- i - 修饰符是用来执行不区分大小写的匹配。
- g - 修饰符是用于执行全文的搜索(而不是在找到第一个就停止查找,而是找到所有的匹配)。
var str = "Visit RUnoob";
var patt1 = /runoob/i;
str.match(patt1)
//RUnoob
var str="Is this all there is?";
var patt1=/is/g;
str.match(patt1)
//is,is
var str="Is this all there is?";
var patt1=/is/gi;
str.match(patt1)
//Is,is,is
test()
test()方法搜索字符串指定的值,根据结果并返回真或假。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
//true
exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
//e