JavaScript 根底语法
次要内容
JavaScript
简介
JavaScript 是一种具备面向对象能力的、解释型的程序设计语言。更具体一点,它是基于对象和事件驱动并具备绝对安全性的客户端脚本语言。它的次要目标是,验证发往服务器端的数据、减少 Web 互动、增强用户体验度等。
JavaScript 的组成
ECMAScript 定义的只是这门语言的根底,与 Web 浏览器没有依赖关系,而在根底语法上能够构建更欠缺的脚本语言。JavaScript 的运行须要肯定的环境,脱离了环境 JavaScript 代码是不能运行的,JavaScript 只可能寄生在某个具体的环境中才可能工作。JavaScript 运行环境个别都由宿主环境和执行期环境独特形成,其中宿主环境是由外壳程序生成的,如 Web 浏览器就是一个外壳程序,它提供了 一个可管制浏览器窗口的宿主环境。执行期环境则由嵌入到外壳程序中的 JavaScript 引擎(或称为 JavaScript 解释器)生成,在这个环境中 JavaScript 可能生成内置动态对象,初始化执行环境等。
Web 浏览器自定义的 DOM 组件,以面向对象形式形容的文档模型。DOM 定义了示意和批改 文档 所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM 对象,是咱们用传统的办法 (javascript) 取得的对象。DOM 属于浏览器,而不是 JavaScript 语言标准里的规定的核心内容。
后面的 DOM 是为了操作浏览器中的文档,而为了管制浏览器的行为和操作,浏览器还提供了 BOM(浏览器对象模型)。
ECMAScript(根底语法)
JavaScript 的外围语法 ECMAScript 形容了该语言的语法和根本对象
DOM(文档对象模型)
文档对象模型(DOM)—— 形容了解决网页内容的办法和接口
BOM(浏览器对象模型)
浏览器对象模型(BOM)—— 形容了与浏览器进行交互的办法和接口
开发工具
- 浏览器:Chrome
- 开发工具:Hbuilder X
- 进入浏览器控制台 Console:F12
控制台的作用:
console 对象代表浏览器的 JavaScript 控制台,用来运行 JavaScript 命令,经常用来显示网页运行时候的错误信息。Elements 用来调试网页的 html 和 css 代码。
根本用法
JS 须要和 HTML 一起应用才有成果,咱们能够通过间接或间接的形式将 JS 代码嵌入在 HTML 页面中。
行内 JS : 写在标签外部的 js 代码
外部 JS : 定义在 script 标签外部的 js 代码
内部 JS : 独自的 js 文件,在 HTML 中通过 script 标签引入
咱们能够将 JavaScript 代码放在 html 文件中任何地位,然而咱们个别放在网页的 head 或者 body 局部。因为页面的加载形式是从上往下顺次加载的,而这个对咱们搁置的 js 代码运行是有影响的。
放在局部,最罕用的形式是在页面中 head 局部搁置
放在局部,JavaScript 代码在网页读取到该语句的时候就会执行。
行内 JS:
<button onclick="alert('you clicked hered!!!')">click here</button>
外部 JS:
<script type="text/javascript" charset="utf-8"> alert('this is inner js code') </script>
内部 JS 文件:
hello.js
alert('this is a outter js document');
hello.html
<!-- 在须要应用 js 的 html 页面中引入 -->
<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>
JavaScript 根底语法
语句和正文
JavaScript 程序的执行单位为行(line),也就是一行一行地执行。个别状况下,每一行就是一个语句。
语句(statement)是为了实现某种工作而进行的操作,语句以分号结尾,一个分号即示意一个语句完结。多个语句能够写在一行内(不倡议这么写代码),然而一行写多条语句时,语句必须以分号结尾。
表达式不须要分号结尾。一旦在表达式前面增加分号,则 JavaScript 引擎就将表达式视为语句,这样会产生一些没有任何意义的语句。
单行正文:用 // 起头;多行正文:放在 /* 和 */ 之间。兼容 html 正文形式:<!-- -->
标识符和关键字
标识符 就是一个名字,用来给变量和函数进行命名,有特定规定和标准
规定:
由 Unicode 字母、_、$、数字组成、中文组成(1)不能以数字结尾(2)不能是关键字和保留字(3)严格辨别大小写
标准:
(1)见名知意(2)驼峰命名或下划线规定
关键字 也称保留字,是被 JavaScript 征用来有非凡含意的单词
arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield、Infinity、NaN、undefined
变量
变量即一个带名字的用来存储数据的内存空间,数据能够存储到变量中,也能够从变量中取出数据。
变量的申明
JavaScript 是一种弱类型语言,在申明变量时不须要指明数据类型,间接用 var 修饰符进行申明。
变量申明和赋值:
// 先申明再赋值
var a ;
a = 10;
// 申明同时赋值
var b = 20;
变量的留神点
(1)若只申明而没有赋值,则该变量的值为 undefined。
var box;
console.log(box);
(2)变量要有定义能力应用,若变量未声明就应用,JavaScript 会报错,通知你变量未定义。
console.log(box2);
(3)能够在同一条 var 命令中申明多个变量。
var a, b, c = 10;
console.log(a,b,c);
(4)若应用 var 从新申明一个曾经存在的变量,是有效的。
var box = 10
var box;
(5)若应用 var 从新申明一个曾经存在的变量且赋值,则会笼罩掉后面的值
var box = 10;
var box = 25;
(6)JavaScript 是一种动静类型、弱类型语言,也就是说,变量的类型没有限度,能够赋予各种类型的值。
var box = 'hello world';
box = 10;
变量晋升
JavaScript 引擎的工作形式是,先解析代码,获取所有被申明的变量,而后再一行一行地运行。这造成的后果,就是所有的变量的申明语句,都会被晋升到代码的头部,这就叫做变量晋升。
console.log(msg);
var msg = "so easy";
// 变量晋升,相当于上面的代码
var msg;
console.log(msg);
msg = "so easy";
// 阐明:最初的后果是显示 undefined,示意变量 msg 已申明,但还未赋值。
留神:变量晋升只对 var 命令申明的变量无效,如果变量不是用 var 命令申明的,就不会产生变量晋升。
console.log(msg);
msg = "error";
数据类型
虽说 JS 是弱类型语言,变量没有类型,但数据自身是有类型的。针对不同的类型,咱们能够进行不同的操作。
JavaScript 中有 6 种数据类型,其中有五种简略的数据类型:Undefined、Null、布尔 、 数值 和字符串。一种简单数据类型Object。
数 值(Number):整数和小数(比方 1 和 3.14)字符串(String):字符组成的文本(比方 "Hello World")布尔值(Boolean):true(真)和 false(假)两个特定值
Undefined:示意“未定义”或不存在,即此处目前没有任何值
Null:示意空缺,即此处应该有一个值,但目前为空
对象(object)(援用):各种值组成的汇合
1)、对象(object){name:”zhangsan”,age:”18”}
2)、数组(array)[1,2,3]
3)、函数(function)function test() {}
须要更多视频材料可加 vx:lezijie007(备注暗号 17)不备注会拒加噢
undefined
undefined 类型的值是 undefined。
undefined 是一个示意 ” 无 ” 的原始值,示意值不存在。
呈现 undefined 的常见状况:
(1)当申明了一个变量而没有初始化时,这个变量的值就是 undefined
var box;
console.log(box); //undefined
(2)调用函数时,该函数无形参,但未提供实参,则该参数为 undefined。
function noData(str) { // js 函数形参只须要变量名即可
console.log(str); // undefined
}
noData(); // 调用办法时,未传递参数
(3)函数没有返回值时,默认返回 undefined。
// 办法没有返回值
function noData() {console.log("Hello");
}
var re = noData();// 定义变量接管无返回值的办法
console.log(re);
null
null 类型是只有一个值的数据类型,即非凡的值 null。它示意空值,即该处的值当初为空,它示意一个空对象援用。
应用 Null 类型值时留神以下几点:
1)应用 typeof 操作符测试 null 返回 object 字符串。
2)undefined 派生自 null,所以等值比拟返回值是 true。未初始化的变量和赋值为 null 的变量相等。
console.log(undefined == null);
var box = null; // 赋值为 null 的变量
var a; // 未初始化的变量
console.log(a == box); // 两个的值相等
布尔类型
布尔类型有两个值:true、false。罕用来做判断和循环的条件
数值型
数值型蕴含两种数值:整型和浮点型。
1)所有数字(整型和浮点型)都是以 64 位浮点数模式贮存。所以,JS 中 1 与 1.0 相等,而且 1 加上 1.0 失去的还是一个整数。浮点数最高精度是 17 位小数,因为浮点数运算时可能不准确,尽量不要应用浮点数做判断。
2)在存储数值型数据时主动将能够转换为整型的浮点数值转为整型。
console.log(1 == 1.0); // true
console.log(1 + 1.0); // 2
var num = 8.0; // 主动将能够转换为整型的浮点数转为整型
console.log(num); // 8
字符串
应用’’或 ” “ 引起来,如:‘hello’,“good”。
应用加号‘+’进行字符串的拼接,如:console.log(‘hello’+’everybody’);
对象
对象是一组数据和性能的汇合。
阐明:
{}:示意应用对象字面量形式定义的对象。空的大括号示意定义蕴含默认属性和办法的对象。
类型转换
主动类型转换
函数转换(String to Number)
JS 提供了 parseInt()和 parseFloat()两个全局转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对 String 类型调用这些办法,这两个函数能力正确运行;对其余类型返回的都是 NaN(Not a Number)。
parseInt()
在转换之前,首先会剖析该字符串,判断地位为 0 处的字符,判断它是否是个有效数字,如果不是,则间接返回 NaN,不再持续,如果是则持续,直到找到非字符
parseInt("1234blue"); // returns 1234
parseInt("22.5"); // returns 22
parseInt("blue"); // returns NaN
parseFloat()
该办法与 parseInt() 办法的解决形式类似,从地位 0 开始查看每个字符,直到找到第一个非无效的字符为止,而后把该字 符之前的字符串转换成数字。不过,对于这个办法来说,第一个呈现的小数点是无效字符。如果有两个小数点,第二个小数点将被看作有效的,parseFloat()办法会把这个小数点之前的字符串转换成数字。
parseFloat("1234blue"); // returns 1234.0
parseFloat("22.5"); // returns 22.5
parseFloat("22.34.5"); // returns 22.34
parseFloat("blue"); //returns NaN
显示转换
简直每个数对象都提供了 toString() 函数将内容转换为字符串模式,其中 Number 提供的 toString() 函数能够将数字转换为字符串。
Number 还提供了 toFixed() 函数将依据小数点后指定位数将数字转为字符串,四舍五入
// 将内容转换为字符串模式
var data = 10
console.log(data.toString())
// 依据小数点后指定位数将数字转为字符串,四舍五入
data = 1.4;
console.log(data.toFixed(0));
data = 1.49;
console.log(data.toFixed(1));
// 不能对 null 和 undefined 应用
data = null
console.log(data.toString())
data = undefined
console.log(data.toString())
JS 为 Number、Boolean、String 对象提供了构造方法,用于强制转换其余类型的数据。此时操作的是整个数据,而不是局部。
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number("5.5") 5.5
Number("56") 56
Number("5.6.7") NaN
Number(new Object()) NaN
Number(100) 100
Boolean(""); // false – empty string
Boolean("hi"); // true – non-empty string
Boolean(100); // true – non-zero number
Boolean(null); // false - null
Boolean(0); // false - zero
Boolean(new Object()); // true – object
最初一种强制类型转换办法 String() 是最简略的,因为它可把任何值转换成字符串。要执行这种强制类型转换,只须要调用作为参数传递进来的值的 toString() 办法,即把 1 转换成 ”1 “,把 true 转换成 “true “,把 false 转换成 “false “,依此类推。强制转换成字符串和调用 toString() 办法的惟一不同之处在于,对 null 或 undefined 值强制类型转换能够生成字符串而不引发谬误:
var s1 = String(null); // "null"
var oNull = null;
var s2 = oNull.toString(); // won’t work, causes anerror
最为简略的一种转换为字符串的形式,间接在任意数据前面 +“”即可。
运算符
运算符用于执行程序代码运算,会针对一个及其以上操作数来进行运算。
算数运算符
运算符
形容
例子
后果
+
加
x=y+2
x=7
–
减
x=y-2
x=3
*
乘
x=y*2
x=10
/
除
x=y/2
x=2.5
%
求余数
x=y%2
x=1
++
自增(前导加、后导加)
x=++y
x=6
–
自减(前导减、后导减)
x=–y
x=4
赋值和扩大运算符
运算符
例子
等价于
后果
=
x=y
x=5
+=
x+=y
x=x+y
x=15
-=
x-=y
x=x-y
x=5
*=
x*=y
x=x*y
x=50
/=
x/=y
x=x/y
x=2
%=
x%=y
x=x%y
x=0
比拟运算符
运算符
形容
例子
==
等于
x==8 为 false
===
全等(值和类型)
x=5 为 true;x=“5”为 false
!=
不等于
x!=8 为 true
大于
x>8 为 false
<
小于
x<8 为 true
=
大于或等于
x>=8 为 false
<=
小于或等于
x<=8 为 true
逻辑运算符
运算符
形容
例子
&&
and
(x < 10 && y > 1) 为 true
||
or
(x5 || y5) 为 false
!
not
!(x==y) 为 true
三目运算符
运算符
形容
例子
?:
如果…否则…
3>5?3:5
管制语句
咱们写的 JavaScript 代码都是依照从上到下顺次执行,很多时候咱们心愿代码依照咱们的志愿去执行,比方有选择性地执行某些代码,或者反复地执行某些代码,这就须要应用到流程管制语句。
流程管制语句一共有三种:
1. 流程执行: 从上到下,从左到右
2. 抉择执行: 分支抉择
3. 循环执行: 反复执行
抉择
单抉择
if (条件){语句体;}
首先执行条件
如果后果为 true,则执行语句体;
如果后果为 false,则完结 if 语句。
留神:若语句体只有一条语句,能够省略大括号,但不倡议省略
双抉择
if (条件){语句体 1;}else {语句体 2;}
首先执行条件
如果后果为 true,则执行语句体 1;
如果后果为 false,则执行语句体 2。
多抉择
if(比拟表达式 1) {语句体 1;}else if(比拟表达式 2){语句体 2;}else if(比拟表达式 3){语句体 3;}
...
[else {语句体 n +1;}]
switch 构造
多个 if …else 且值为定值时(即 === 在比拟运行后果时,采纳的是严格相等运算符(=),而不是相等运算符(),这意味着比拟时不会产生类型转换。),能够应用 switch 替换:
switch(表达式) {
case 值 1:
语句体 1;
break;
case 值 2:
语句体 2;
break;
...
default:
语句体 n +1;
[break;]
}
break 避免穿透,如果没有 break, 则继续执行前面的代码,直到遇到 break 或全副执行结束,然而有些时候会利用穿透。
循环
循环构造用于反复执行某个操作 简略了解就是反复执行同类型的代码,它有多种形式。
while
先判断后执行
根本格局
while(判断条件语句) {循环体语句;}
扩大格局:初始化语句;
while(判断条件语句){
循环体语句;
管制条件语句; // 少了它很容易造成死循环
}
do…while
先执行后判断,至多执行一次
根本格局
do {循环体语句;}while(判断条件语句);
扩大格局:初始化语句;
do {
循环体语句;
管制条件语句;
} while(判断条件语句);
for
for(初始化语句; 判断条件语句; 管制条件语句){循环体语句;}
死循环
条件永远成立,永远为 true, 则会产生死循环,上面是最简略的死循环
while(true){}
for(;;){}
break 与 continue
break: 进行本层循环
continue: 暂停本次循环,持续下一次
数组
数组是按秩序排列的一组数据,每个值的地位都有编号(从 0 开始),整个数组用方括号示意。
数组定义
JS 中定义数组的三种形式如下(也可先申明再赋值):
var arr = [值 1, 值 2, 值 3]; // 隐式创立
var arr = new Array(值 1, 值 2, 值 3); // 间接实例化
var arr = new Array(size); // 创立数组并指定长度
基本操作
数组的长度能够通过 length 属性来获取,并能够任意更改
数组名.length
数组名.length = 新长度
数组中的每一个元素都能够被拜访和批改,甚至是不存在的元素,无所谓越界
数组名[下标]
数组名[下标] = 新值
数组遍历
数组的遍历即顺次拜访数组的每一个元素,JS 提供三种遍历数组的形式:
一般的 for 循环遍历
for(var i=0; i<= 数组.length-1; i++){ }
如:for(var idx=0;idx<arr.length;idx++){console.log(arr[idx]);
}
for … in
for(var 下标(名称任意) in 数组名){数组名 [下标] 是获取元素
} // 下标(名称任意)
如:for(var idx in arr){console.log(arr[idx]);
}
forEach
数组名.forEach(function(element,index){// element(名称任意):元素,index(名称任意):下标
})
如:arr.forEach(function(elem,idx){console.log(idx + "-->" + elem);
});
理解
数组在应用的时候倡议大家规矩来用。在存放数据时,从下标 0 开始程序的寄存数组元素。如果下标:1. 为非负整数(包含整数字符串):主动从 0 开始, 不存在增加 undefined
2. 为正数、小数、非数字符串:这些内容不计算在长度内,当成 "属性" 解决,相当于自定义属性。数组非常灵活,应用数组元素
1. 下标: 非负整数(包含整数字符串):数组. 下标
数组[下标]
2. 下标:正数、小数、非数字字符串:数组[属性]
* for --> 不遍历属性
* foreach --> 不遍历属性和索引中的 undefined
* for in --> 不遍历索引中的 undefined
数组提供的操作方法
Array 对象为咱们提供了一些办法,能够很不便地操作数组
push 增加元素到最初
unshift 增加元素到最前
pop 删除最初一项
shift 删除第一项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取(切片)数组,原数组不发生变化
splice 剪接数组,原数组变动,能够实现前后删除成果
concat 数组合并
var arr = ['1','a',5,'3'];
console.log(arr);
arr.push(10);
console.log(arr);
arr.unshift('b');
console.log(arr);
arr.pop();
console.log(arr);
arr.shift();
console.log(arr);
arr.reverse();
console.log(arr);
console.log(arr.join('''));
console.log(arr);
console.log(arr.indexOf('a'));
console.log(arr.slice(2,5));
console.log(arr);
arr.splice(1,1,'一','二');
console.log(arr);
var arr1 = [0,'100'];
console.log(arr.concat(arr1));
console.log(arr);
console.log(arr1);
console.log(arr1.(arr));
函数
函数,即办法。就是一段事后设置的性能代码块,能够重复调用,依据输出参数的不同,返回不同的值。函数也是对象。
函数的定义
有三种函数定义的形式:函数申明语句、函数定义表达式、Function 构造函数
函数申明语句
function 函数名([参数列表]){ }
例如:function foo(){console.log(1);
}
foo();
该种形式定义的函数具备申明晋升的成果
foo();
function foo(){console.log(1);
}
// 变量申明晋升
console.log(a);
var a = 2;
函数定义表达式
以表达式形式定义的函数,函数的名称是能够不须要的
var 变量名 = function ([参数列表]) { }
变量名();
例如:var fun = function(){console.log("Hello");
}
fun();
这种写法将一个匿名函数赋值给变量。这时,这个匿名函数又称函数表达式,因为赋值语句的等号右侧只能放表达式。
Function 构造函数
Function 构造函数接管任意数量的参数,但最初一个参数始终都被看成是函数体,而后面的参数则列举出了新函数的参数。
var add = new Function('x','y','return (x + y)');
// 等同于
function add(x, y) {return (x + y);
}
add();
留神:
1. js 中的函数没有重载,同名的函数,会被前面的函数笼罩。2. js 中容许有不定数目的参数,前面介绍 arguments 对象
函数的参数、调用和 return 语句
参数
函数运行的时候,有时须要提供内部数据,不同的内部数据会失去不同的后果,这种内部数据就叫参数,定义时的参数称为形参,调用时的参数称为实参
- 实参能够省略,那么对应形参为 undefined
- 若函数形参同名(个别不会这么干):在应用时以最初一个值为准。
- 能够给参数默认值:当参数为非凡值时,能够赋予默认值。
- 参数为值传递,传递正本;援用传递时传递地址,操作的是同一个对象。
// 调用函数时,实参能够省略,则对应形参为 undefined
function add(a , b) {console.log(a + "+" + b + "=" + (a + b));
}
add(3,4,5)//3+4=7
add(1);//1+undefined=NaN
add();//undefined+undefined=NaN
// 若函数形参同名(个别不会这么干):在应用时以最初一个值为准
function add2(a , a) {console.log(a);
}
add2(1,2);
// 给参数默认值
function defaultValue(a){
a = a || "a";
return a;
}
console.log(defaultValue());
function f(a){
// 若参数 a 不为 undefined 或 null,则取自身的值,否则给一个默认值
(a !== undefined && a !== null) ? a = a : a = 1;
return a;
}
console.log(f());
// 值传递
var num = 12;
function change(n) {n = 30;}
change(num);
console.log(num);
// 援用传递
var obj = {name: "tom"};
function paramter(o) {o.name = 2;}
paramter(obj);
console.log(obj.name);
// 给形参 o 赋予了新的数组
var obj2 = [1, 2, 3];
function paramter2(o){o = [2, 3, 4];
o[1] = 3;
}
paramter2 (obj2);
console.log(obj2)
函数的调用
1. 罕用调用形式
函数名([实参]);
存在返回值能够变量接管,若接管无返回值函数则为 undefined。
2. 函数调用模式
function add(a,b){return a+b;}
var sum = add(1,2)
console.log(sum);
3. 办法调用模式
var o = {m: function(){console.log(1);
}
};
o.m();
return
函数的执行可能会有返回值,须要应用 return 语句将后果返回。return 语句不是必须的,如果没有的话,该函数就不返回任何值,或者说返回 undefined。
作用:
1. 在没有返回值的办法中,用来完结办法。
2. 有返回值的办法中,一个是用来完结办法,一个是将值带给调用者。
函数的作用域
函数作用域:全局 (global variable) 和 部分 (local variable)
1. 全局变量与局部变量同名问题
var box =1; // 全局变量
function display(box){
var box = 3; // 此处 box 与全局变量 box 没有关系,这里的 box 为传递的参数,相当于新申明的局部变量
var b = 2; // 局部变量
console.log("box-->" + box);
}
display();
// b 不能拜访
console.log("b-->" + b);
2. 在函数中定义变量时,若没有加 var 关键字,应用之后主动变为全局变量
function fun(){a = 100;}
fun();
alert(a);
内置对象
Arguments 只在函数外部定义,保留了函数的实参
Array 数组对象
Date 日期对象,用来创立和获取日期
Math 数学对象
String 字符串对象,提供对字符串的一系列操作
String
◦ charAt(idx) 返回指定地位处的字符
◦ indexOf(Chr) 返回指定子字符串的地位,从左到右。找不到返回 -1
◦ substr(m,n) 返回给定字符串中从 m 地位开始,取 n 个字符,如果参数 n 省略,则意味着取到字符串开端。◦ substring(m,n) 返回给定字符串中从 m 地位开始,到 n 地位完结,如果参数 n 省略,则意味着取到字符串开端。◦ toLowerCase() 将字符串中的字符全副转化成小写。◦ toUpperCase() 将字符串中的字符全副转化成大写。◦ length 属性,不是办法,返回字符串的长度。
Math
◦ Math.random() 随机数
◦ Math.ceil() 向上取整,大于最大整数
◦ Math.floor() 向小取整,小于最小整数 String
Date
// 获取日期
◦ getFullYear() 年
◦ getMonth() 月
◦ getDate() 日
◦ getHours() 时
◦ getMinutes() 分
◦ getSeconds() 秒
// 设置日期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString() 转换老本地工夫字符串
阐明:
- getMonth():失去的值:011(1 月 12 月)
- setMonth():设置值时 0~11
- toLocaleString():可依据本地工夫把 Date 对象转换为字符串,并返回后果。
对象
对象(object)是 JavaScript 的外围概念,也是最重要的数据类型。JavaScript 的所有数据都能够被视为对象。JavaScript 提供多个内建对象,比方 String、Date、Array 等等。对象是带有属性和办法的非凡数据类型。
简略说,所谓对象,就是一种无序的数据汇合,由若干个“键值对”(key-value)形成。通过 JavaScript 咱们能够创立本人的对象。JavaScript 对象满足的这种”键值对”的格局咱们称为 JSON 格局,当前会见得十分多,即平凡的 JSON 对象。
{键: 值, 键 2: 值 2,…}
对象的创立
JS 创立自定义对象,次要通过三种形式:字面量模式创建对象、通过 new Object 对象创立、通过 Object 对象的 create 办法创建对象。
字面量模式创立
var 对象名 = {};// 创立一个空的对象
var 对象名 = {键: 值, 键 2: 值 2,...}
var obj = {
'name' : 'hello',
age : 12,
sayHello : function () {console.log("我是对象中的办法");
},
courses : {
javase : 4,
javascript : 3
},
isLike : true,
members : [{name : "小红",age : 20},
{name : "小绿",age : 22},
{name : "小蓝",age : 27},
{name : "小黄"}
]
};
通过 new Object 创立
var 对象名 = new Object(); // 创立一个空的对象
var obj = new Object();
obj.name = 'zs';
obj.age = 18;
console.log(obj);
通过 Object 对象的 create 办法创立
var 对象名 = Object.create(null);
var obj = Object.create(null);
obj.name = 'ls';
obj.gender = true
console.log(obj);
var objn = Object.create(obj);
objn.age = 18;
console.log(objn);
console.log(objn.gender)
对象的序列化和反序列化
序列化行将 JS 对象序列化为字符串,反序列化行将字符串反序列化为 JS 对象。JS 中通过调用 JSON 办法,能够将对象序列化成字符串,也能够将字符串反序列化成对象。
// 序列化对象,将对象转为字符串
JSON.stringify(object);
// 反序列化,将一个 Json 字符串转换为对象。JSON.parse(jsonStr);
this
this 是 JavaScript 语言的一个关键字。
它代表函数运行时,主动生成的一个外部对象,只能在函数外部应用。
随着函数应用场合的不同,this 的值会发生变化。然而有一个总的准则,那就是 this 指的是,调用函数的那个对象。
在函数中应用 this
在函数中应用 this 属于全局性调用,代表全局对象,通过 window 对象来拜访。
function test () {
this.x = 1;
console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性
var x = 10;
console.log(x) // 10
function test (){console.log(this.x) // 10
this.x = 1;
console.log(this.x) // 1
console.log(this)
}
test();
console.log(x); // 1
console.log(this);
在对象中应用 this
在对象中的函数应用 this,代表以后的下级对象。
var obj = {
name : '张三',
age : 20,
sayHello : function () {console.log(this.name)
console.log(this)
}
}
obj.sayHello();
ject.create(null);
obj.name =‘ls’;
obj.gender = true
console.log(obj);
var objn = Object.create(obj);
objn.age = 18;
console.log(objn);
console.log(objn.gender)
#### 对象的序列化和反序列化
序列化行将 JS 对象序列化为字符串,反序列化行将字符串反序列化为 JS 对象。JS 中通过调用 JSON 办法,能够将对象序列化成字符串,也能够将字符串反序列化成对象。
// 序列化对象,将对象转为字符串
JSON.stringify(object);
// 反序列化,将一个 Json 字符串转换为对象。
JSON.parse(jsonStr);
#### this
this 是 JavaScript 语言的一个关键字。 它代表函数运行时,主动生成的一个外部对象,只能在函数外部应用。 随着函数应用场合的不同,this 的值会发生变化。然而有一个总的准则,那就是 this 指的是,调用函数的那个对象。##### 在函数中应用 this
在函数中应用 this 属于全局性调用,代表全局对象,通过 window 对象来拜访。
function test () {
this.x = 1;
console.log(this.x);
}
test();
console.log(x); // 相当于定义在全局对象上的属性
var x = 10;
console.log(x) // 10
function test (){
console.log(this.x) // 10
this.x = 1;
console.log(this.x) // 1
console.log(this)
}
test();
console.log(x); // 1
console.log(this);
##### 在对象中应用 this
在对象中的函数应用 this,代表以后的下级对象。
var obj = {
name : '张三',
age : 20,
sayHello : function () {console.log(this.name)
console.log(this)
}
}
obj.sayHello();