介绍
为了确保不同的浏览器上运行的JavaScript标准一致，所以几个公司共同定制了JavaScript的标准命名为ECMAScript，简称：ES。
ECMAScript是一个标准，而这个标准需要由各个厂商去实现。不同的浏览器厂商对该标准会有不同的实现。
ECMAScript是JavaScript的标准，所以一般情况下这两个词我们认为是一个意思。但是实际上JavaScript的含义要更大。
一个完整的JavaScript实现由三个部分构成：ECMAScript、DOM、BOM。
JavaScript的特点：
1、解释型语言（相对于编译型语言，例如Java。）：不用编译，直接就可以运行。
2、基于原型的面向对象语言。
JavaScript代码的输出。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--JavaScript代码需要编写到script标签中，type属性可以写，也可以不写。-->
<script type="text/javascript">
/*浏览器弹出警告框*/
alert("宋江");
/*向页面中输出内容*/
document.write("宋江");
/*向控制台输出内容*/
console.log("宋江");
</script>
</head>
<body>
</body>
</html>
JavaScript代码的编写位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
可以将JavaScript代码编写到外部的js文件中，然后通过script标签引入。
写到外部文件中可以在不同的页面中同时引用，也可以利用浏览器的缓存机制，是推荐使用的方式。
-->
<!--
script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略。
如果需要则可以在创建一个新的script标签用于编写内部代码。
-->
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
alert("我是内部的JavaScript代码。");
</script>
</head>
<body>
<!--
可以将JavaScript代码写到标签的onclick属性中，当点击按钮时，JavaScript代码才会执行。
虽然可以写在标签的属性中，但是属于结构与行为耦合，不推荐使用。
-->
<button onclick="console.log('宋江');">button按钮</button>
<!--
可以将JavaScript代码写在超链接的href属性中，当点击超链接时，会执行JavaScript代码。
-->
<a href="javascript:console.log('卢俊义');">a标签</a>
<!--点击没有任何反应。-->
<a href="javascript:;">a标签</a>
<img src="image/one.jpg" onclick="javascript:console.log('这是点击图片在控制台输出的内容。');"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="javascript:console.log('宋江');">a标签</a>
<a href="javascript:;">a标签</a> <!--点击页面不会刷新-->
<a href="#">#</a> <!--点击页面不会刷新-->
<a href="">空</a> <!--点击页面会刷新-->
</body>
</html>
JavaScript代码注释。
注释中的内容不会被执行，但是可以在源代码中查看。
//单行注释
/*
多行注释
1、JavaScript中区分大、小写。
2、JavaScript中每一条语句以英文分号（;）结尾。
如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，有些时候，浏览器会加错分号，所以在开发中分号必须写。
*/
基础
变量和数据类型
字面量和变量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
字面量：一些不可改变的值。比如 ：1、2、3、4、5、......
字面量可以直接使用，但一般不会直接使用字面量。
变量：可以用来保存字面量，变量的值可以任意改变。
变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量。
可以通过变量对字面量进行描述。
*/
//声明变量a
var a;
console.log(a); //没有为变量赋值，则输出：undefined
//为变量赋值
a = 1;
//声明和赋值同时进行
var b = 2;
var age = 18;
console.log(age);
</script>
</head>
<body>
</body>
</html>
标识符
标识符
在JavaScript中所有的可以自主命名的都可以称为是标识符，例如：变量名、函数名、属性名都属于标识符。
命名一个标识符时需要遵守如下的规则：
1、标识符中可以含有字母（大写字母、小写字母）、数字、_、$。
2、标识符不能以数字开头。
3、标识符不能是ES中的关键字或保留字。
4、标识符一般都采用驼峰命名法：首字母小写，后面每个单词的开头字母大写，其余字母小写。
JavaScript底层保存标识符时实际上是采用的Unicode编码，所以理论上讲，所有的utf-8中含有的内容都可以作为标识符。
其他不建议使用的标识符：
数据类型
数据类型指的就是字面量的类型。
在JavaScript中一共有六种数据类型：
string 字符串
number 数值
boolean 布尔
null 空值
undefined 未定义
object 对象
基本数据类型：string、number、boolean、null、undefined
引用数据类型：object
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var i = 1;
console.log(i);
console.log(typeof i);
console.log(typeof(i));
var i1 = 1.2;
console.log(typeof i1);
var s = "你好";
console.log(s);
console.log(typeof s);
var b = 5>6;
console.log(b);
console.log(typeof b);
var i2;
console.log(i2); //print:undefined
console.log(typeof i2); //print:undefined
var i3 = null;
console.log(i3); //print:null
console.log(typeof i3); //object
/*
string
在JavaScript中需要使用引号（双引号、单引号）括起来，引号不能嵌套。
*/
var s1 = '你好';
console.log(s1);
var s2 = '鲁迅说"世上本没有路，走的人多了便形成了路"';
console.log(s2);
var i4 =1;
var s3 = "你好";
var s4 = i4 + s3;
console.log(s4);
console.log(typeof s4);
console.log(12 + "你好");
console.log(12 + "你好" + 1);
console.log(12 + " " + 1);
var s5 = 12 + "" + 1
console.log(s5);
console.log(typeof s5);
console.log(1 + 2 + "你好");
/*
转义字符：
\n 换行
\t 制表符
\" 表示"
\' 表示'
\\ 表示 \
*/
var s6 = "鲁迅说\"世上本没有路，走的人多了便形成了路\"";
console.log(s6);
var s7 = "今天\"天气\"不错，适合\'出去\'玩，但是没有\n女朋友，可是我还是想\t出去\\玩。"
console.log(s7);
console.log("\\\\\\");
/*
如果使用Number表示的数字超过了最大值，则
Infinity 正无穷大
-Infinity 负无穷大
使用typeof检查Infinity类型会返回number。
*/
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
console.log(Number.MAX_VALUE + Number.MAX_VALUE);
console.log(-Number.MAX_VALUE * Number.MAX_VALUE);
console.log(typeof Infinity); //print:number
/*
如果JS中进行了小数的运算，不能保证精确度。
* */
var i12 = 0.1 + 0.2;
console.log(i12);
/*
boolean: true fale
* */
var bb = true;
console.log(bb);
console.log(typeof bb);
var bb1 = 5>6;
console.log(bb1);
/*
null(空值)类型的值只有一个，就是null。
null：专门用来表示一个为空的对象。
使用typeof检查一个null值时，会返回object。
undefined（未定义）类型的值只有一个：undefined。
当声明一个变量，但是并不给该变量赋值时，它的值就是undefined。
使用typeof检查一个undefined的值时也会返回undefined。
*/
var aaa = null;
console.log(aaa); //print:null
console.log(typeof aaa); //print:object
var bbb = undefined;
console.log(bbb); //print:undefined
console.log(typeof bbb); //print:undefined
</script>
</head>
<body>
</body>
</html>
string
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
String 字符串
在JS中字符串需要使用引号引起来。
使用双引号或单引号都可以，但是不要混着用。
引号不能嵌套，双引号不能放双引号，单引号不能放单引号。
*/
var str = "hi";
console.log(str);
var str1 = 'hi';
console.log(str1);
str1 = '我说:"今天天气不错！"';
console.log(str1);
/*
在字符串中可以使用\作为转义字符，
当表示一些特殊符号时可以使用\进行转义
\n 表示换行
\t 制表符
\" 表示 "
\' 表示 '
\\ 表示\
*/
str2 = "我说:\"今天\t天气真不错！\"";
console.log(str2);
str3 = "\\\\\\";
console.log(str3); //输出：\\\
//输出字面量字符串str
//alert(str3);
//str4 = "\" //错误写法
str5 = "\\";
//alert(str5); //输出：\
var str6 = "hi";
str7 = "你好";
str7 = 3;
alert(str7);
</script>
</head>
<body>
</body>
</html>
number
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
在JavaScript中所有的数值都是number类型，包括整数和浮点数（小数）。
JavaScript中可以表示的数字的最大值：Number.MAX_VALUE 1.7976931348623157e+308
大于0的最小值：Number.MIN_VALUE 5e-324
如果使用Number表示的数字超过了最大值，则会返回：
Infinity 表示正无穷。
-Infinity 表示负无穷。
使用typeof检查Infinity会返回number，
使用typeof检查一个NaN也会返回number。
*/
//数字123
var a = 123;
//字符串123
var b = "123";
/*
可以使用一个运算符typeof来检查一个变量的类型
语法：typeof 变量
检查字符串时，会返回string
检查数值时，会返回number
*/
console.log(typeof a);
console.log(typeof b);
console.log(Number.MAX_VALUE); //print:1.7976931348623157e+308 //最大值
console.log(Number.MIN_VALUE); //print:5e-324 //大于0的最小值
console.log(Number.MAX_VALUE * Number.MAX_VALUE); //print:Infinity //正无穷
console.log(-Number.MAX_VALUE * Number.MAX_VALUE); //print:-Infinity //负无穷
console.log("abc" * "bcd"); //print:NaN //NaN(not a number)是一个特殊的数字
var c = NaN;
console.log(typeof c); //print:number
var d = "NaN";
console.log(d); //print:NaN //这里表示一个普通的NaN字符串。
/*
在JavaScript中整数的运算基本可以保证精确。
*/
var e = 1865789 + 7654321;
console.log(e); //print:9520110
/*
如果使用JavaScript进行浮点运算，可能得到一个不精确的结果，所以千万不要使用JavaScript进行对精确度要求比较高的运算。
*/
var f = 0.1 + 0.2;
console.log(f); //print:0.30000000000000004
var str = "今天天气不错";
console.log(str); //print:今天天气不错
console.log(typeof(str)); //print:string
//console.log(typeof(str);); 错误写法
console.log(typeof str); //print:string
/*console.log(typeof str;); 错误写法*/
</script>
</head>
<body>
</body>
</html>
boolean
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
boolean：布尔类型
布尔值只有两个，主要用来做逻辑判断。
true 表示真。
false 表示假。
使用typeof检查一个布尔值时，返回boolean。
*/
var b = false;
console.log(typeof b); //print:boolean
console.log(b); //print:false
console.log(!b); //print:true
</script>
</head>
<body>
</body>
</html>
null、undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
null（空值）类型的值只有一个，就是null。
null这个值专门用来表示一个为空的对象。
使用typeof检查一个null值时，会返回object。
undefined（未定义）类型的值只有一个，就是undefind。
当声明一个变量，但是并不给变量赋值时，它的值就是undefined。
使用typeof检查一个undefined时也会返回undefined。
*/
var a = null;
console.log(a); //print:null
console.log(typeof a); //print:object
console.log(typeof(a)); //print:object
var c;
console.log(c); //print:undefined
console.log(typeof c); //print:undefined
var b = undefined;
console.log(b); //print:undefined
console.log(typeof b); //print:undefined
</script>
</head>
<body>
</body>
</html>
强制类型转换
转换为string数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
强制类型转换：指将一个数据类型强制转换为其他的数据类型。
类型转换主要指将其他的数据类型转换为string、number、boolean。
将其他的数据类型转换为string。
方式一：调用被转换数据类型的toString()方法。
该方法不会影响到原变量，会将转换的结果返回。
注意：null和undefined这两个值没有toString()方法，如果调用toString()方法，会报错。
方式二：调用String()函数，并将被转换的数据作为参数传递给函数。
使用String()函数做强制类型转换时：
对于number和boolean实际上就是调用的toString()方法，
但是对于null和undefined，就不会调用toString()方法，会将null直接转换为"null"，将undefined直接转换为"undefined"。
*/
var a = 123;
console.log(a); //print:123
console.log(typeof a); //print:number
//调用变量a的toString()方法
b= a.toString();
console.log(b); //print:123
console.log(typeof b); //print:string
console.log(a); //print:123
console.log(typeof a); //print:number
c = true;
c = c.toString();
console.log(c); //print:true
console.log(typeof c); //print:string
//d = null;
//d = d.toString(); //报错
//e = undefined;
//e = e.toString(); //报错
f = 123;
//调用String()函数，将a转换为字符串
g = String(f);
console.log(g); //print:123
console.log(typeof g); //print:string
console.log(f); //print:123
console.log(typeof f); //print:number
h = null;
i = String(h);
console.log(i); //print:null
console.log(typeof i); //print:string
j = undefined;
k = String(j);
console.log(k); //print:undefined
console.log(typeof k); //print:string
</script>
</head>
<body>
</body>
</html>
转换为number数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
一、将其他的数据类型转换为number。
string数据类型转换为number数据类型：
转换方式一：使用Number()函数。
1、如果是纯数字的字符串，则直接将其转换为数字。
2、如果字符串中有非数字内容，则转换为NaN。
3、如果字符串是一个空串或者是一个全是空格的字符串，则转换为0。
boolean数据类型转换为number数据类型：
true -> 1
false -> 0
null -> 0
undefined -> NaN
转换方式二：这种方式专门用来转换数字类型的字符串。
parseInt() 把一个字符串转换为一个整数。
parseFloat() 把一个字符串转换为一个浮点数。
*/
var a = "123";
//调用Number()函数来将a转换为number类型
a = Number(a);
console.log(a); //print:123
console.log(typeof a); //print:number
var b = "a";
b = Number(b);
console.log(b); //print:NaN
console.log(typeof b); //print:number
var c = true;
c = Number(c);
console.log(c); //print:1
console.log(typeof c); //print:number
var d = false;
d = Number(d);
console.log(d); //print:0
console.log(typeof d); //print:number
var e = null;
e = Number(e);
console.log(e); //print:0
console.log(typeof e); //print:number
var f = undefined;
f = Number(f);
console.log(f); //print:NaN
console.log(typeof f); //print:number
/*
调用parseInt()函数将a转换为number类型。
parseInt()可以将一个字符串中的有效的整数内容取出来，然后转换为number。
*/
var g = "123567a567px";
g = parseInt(g);
console.log(g); //print:123567
console.log(typeof g); //print:number
/*
parseFloat()作用和parseInt()类似，不同的是它可以获得有效的小数。
*/
var h = "123.456.789px";
h = parseFloat(h);
console.log(h); //print:123.456
console.log(typeof h); //print:number
/*
如果对非string使用parseInt()或parseFloat()，它会先将其转换为string然后在操作。
*/
var i = true;
i = parseInt(i);
console.log(i); //print:NaN
console.log(typeof i); //print:number
var j = 198.23;
j = parseInt(j);
console.log(j); //print:198
console.log(typeof j); //print:number
</script>
</head>
<body>
</body>
</html>
转换为boolean数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
将其他的数据类型转换为boolean数据类型。
使用Boolean()函数
number -> boolean
除了0和NaN，其余的都是true。
string -> boolean
除了空串，其余的都是true。
null和undefined都会转换为false。
object -> boolean
对象也会转换为true。
NaN、null、undefined、0、空串会转换成false，其他转换成true。
*/
var a = 1;
a = Boolean(a);
console.log(a); //print:true
var b = -1;
b = Boolean(b);
console.log(b); //print:true
var c = 0;
c = Boolean(c);
console.log(c); //print:false
var d = Infinity;
d = Boolean(d);
console.log(d); //print:true
var e = -Infinity;
e = Boolean(e);
console.log(e); //print:true
var f = NaN;
f = Boolean(f);
console.log(f); //print:false
var g = " ";
g = Boolean(g);
console.log(g); //print:true
var gg = "";
gg = Boolean(gg);
console.log(gg); //print:false
var h = null;
h = Boolean(h);
console.log(h); //print:false
var i = undefined;
i = Boolean(i);
console.log(i); //print:false
console.log(a); //pring:true
console.log(typeof a); //print:boolean
</script>
</head>
<body>
</body>
</html>
运算符
运算符也叫操作符，通过运算符可以对一个或多个值进行运算，并获取运算结果，比如：typeof就是运算符，可以获得一个值的类型。它会将该值的类型以字符串的形式返回。
算术运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
算术运算符
当对非number类型的值进行运算时，会将这些值转换为number，然后在运算。
任何值和NaN做运算都得NaN。
+
可以对两个值进行加法运算，并将结果返回。
如果对两个字符串进行加法运算，则会做拼串；会将两个字符串拼接为一个字符串，并返回。
任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作。
- 可以对两个值进行减法运算，并将结果返回。 *
* 可以对两个值进行乘法运算。
/ 可以对两个值进行除法运算。
% 取模运算（取余数）。
*/
var a = 1;
var result = typeof a;
console.log(result); //print:number
console.log(typeof result); //print:string
result = a + 1;
console.log(result); //print:2
result = true + 1;
console.log(result); //print:2
result = true + false;
console.log(result); //print:1
result = 2 + null;
console.log(result); //print:2
result = 2 + NaN;
console.log(result); //print:NaN
result = "12" + "34";
console.log(result); //print:1234
console.log(typeof result); //print:string
result = "你好" + "哈哈";
console.log(result); //print:你好哈哈
console.log(typeof result); //print:string
var str = "锄禾日当午，" +
"汗滴禾下土，" +
"谁知盘中餐，" +
"粒粒皆辛苦。";
console.log(str); //print:锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦。
result = 123 + "1";
console.log(result); //print:1231
result = true + "hi";
console.log(result); //print:truehi
/*任何值和字符串相加都会转换为字符串，并做拼串操作。
可以利用这一特点，将一个任意的数据类型转换为string。
只需要为任意的数据类型 + 一个 "" 即可将其转换为string，
这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数实现的。
*/
var b = 123;
b = b + "";
console.log(typeof b); //print:string
console.log("b = " + b); //print:b = 123
c = null;
c = c + "";
console.log(c); //print:null
console.log(typeof c); //print:string
result = 1 + 2 + "3";
console.log(result); //print:33
result = "1" + 2 + 3;
console.log(result); //print:123
result = 2 - 1;
console.log(result); //print:1
result = 5 - true;
console.log(result); //print:4
result = 3 - "1";
console.log(result); //print:2
result = 2 * 2;
console.log(result); //print:4
result = 2 * "8";
console.log(result); //print:16
result = 2 * undefined;
console.log(result); //print:NaN
result = 2 * null;
console.log(result); //print:0
result = 4 / 2;
console.log(result); //print:2
result = 3 / 2;
console.log(result); //print:1.5
/*
任何值做-、*、/运算时都会自动转换为number。
可以利用这一特点做隐式的类型转换。
可以通过为一个值 -0 *1 /1来将其转换为number。
原理和Number()函数一样，使用起来更加简单。
*/
var d = "123";
console.log("d = " + d); //print:d = 123
console.log(typeof d); //string
d = d - 0;
console.log(typeof d); //print:number
console.log(d); //print:123
result = 5 % 2;
console.log(result); //print:1
result = 9 % 3;
console.log(result); //print:0
result = 9 % 4;
console.log(result); //print:1
result = 9 % 5;
console.log(result); //print:4
</script>
</head>
<body>
</body>
</html>
一元运算符
+、-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
一元运算符：只需要一个操作数。
+ ：不会对数字产生任何影响。
- ：对数字进行取反。
对于非number类型的值，会先转换为number，然后在运算。
可以对一个其他的数据类型使用+，来将其转换为number，它的原理和Number()函数一样。
*/
var a = 1;
a = -a;
console.log(a); //print:-1
a = true;
a = -a;
console.log(a); //print:-1
console.log(typeof a); //print:number
a = "18";
a = +a;
console.log("a = "+a); //print:a = 18
console.log(typeof a); //print:number
var result = 1 + +"2" + 3;
console.log("result = " + result); //print:result = 6;
</script>
</head>
<body>
</body>
</html>
自增、自减
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
++ 自增
通过自增可以使变量在自身的基础上增加1。
对于一个变量自增后，原变量的值会立即自增1。
自增分成两种：后++(a++)、前++(++a)。
无论是a++，还是++a，都会立即使原变量的值自增1；不同的是a++和++a的值不同。
a++的值等于原变量的值（自增前的值）。
++a的值等于新值（自增后的值）。
-- 自减
通过自减可以使变量在自身的基础上减1。
自减分成两种：后--(a--)和前--(--a)。
无论是a--，还是--a都会立即使原变量的值自减1，不同的是a--和--a的值不同。
a--是变量的原值（自减前的值）。
--a 是变量的新值（自减以后的值）。
*/
var a = 1;
//使a自增1。
var b = a++;
var c = ++a;
console.log(b); //print:1
console.log(c); //print:3
var d = 5;
//第一次d++，是在5的基础上自增。
console.log(d++); //print:5
//第二次d++，是在6的基础上自增。
console.log(d++); //print:6
console.log(d); //print:7
var e = 2;
console.log(++e); //print:3
console.log(++e); //print:4
var f = 2;
//2 + 4 + 4
var result = f++ + ++f + f;
console.log(result); //print:10
var g = 2;
g = g++;
console.log(g); //print:2
var num = 5;
console.log(num--); //print:5
console.log(--num); //print:3
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var n1 = 10;
var n2 = 20;
var n = n1++; //n1 = 11 n1++ = 10
console.log('n = ' + n); //print:n = 10
console.log('n1 = ' + n1); //print:n1 = 11
n = ++n1 //n1 = 12 ++n1 =12
console.log('n = ' + n); //print:n = 12
console.log('n1 = ' + n1); //print:n1 = 12
n = n2--; // n2=19 n2--=20
console.log('n = ' + n); //print:n = 20
console.log('n2 = ' + n2); //print: n2 = 19
n = --n2; //n2=18 --n2 = 18
console.log('n = ' + n); //print:n = 18
console.log('n2 = ' + n2); //print:n2 = 18
</script>
</head>
<body>
</body>
</html>
逻辑运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
JavaScript中提供了三种逻辑运算符：
! 非
!可以用来对一个值进行非运算。
非运算指对一个布尔值进行取反操作，true变false，false变true。
如果对一个值进行两次取反，它不会变化。
如果对非布尔值进行取反，则会将其转换为布尔值，然后再取反，所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值。
可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和boolean()函数一样。
&& 与
&&可以对符号两侧的值进行与运算并返回结果。
运算规则：
两个值中只要有一个值为false就返回false，
只有两个值都为true时，才会返回true。
JavaScript中的“与”属于短路的与，如果第一个值为false，则不会看第二个值。
|| 或
||可以对符号两侧的值进行或运算并返回结果。
运算规则：
两个值中只要有一个为true，就返回true。
如果两个值都为false，才返回false。
JavaScript中的“或”属于短路的或，如果第一个值为true，则不会检查第二个值。
*/
//如果两个值都是true则返回true。
var result = true && true;
console.log(result); //print:true
//只要有一个false，就返回false。
result = true && false;
console.log(result); //print:false
result = false && true;
console.log(result); //print:false
result = false && false;
console.log(result); //print:false
//第一个值为true，会检查第二个值。
true && alert("hi");
//第一个值为false，不会检查第二个值。
false && alert("hello");
//两个都是false，则返回false
result = false || false;
console.log(result); //print:false
//只有有一个true，就返回true。
result = true || false;
console.log(result); //print:true
result = false || true;
console.log(result); //print:true
result = true || true;
console.log(result); //print:true
//第一个值为false，则会检查第二个值。
false || alert("1");
//第一个值为true，则不再检查第二个值。
true || alert("2");
var a = false;
//对a进行非运算
a = !a;
console.log("a = " + a); //print:a = true
var b = 1;
b = !b;
console.log("b = " + b); //print:b = false
console.log(typeof b); //boolean
var c = 1;
c = !!c;
console.log("c = " + c); //print:c = true
console.log(typeof c); //boolean
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
&&、||非布尔值的情况：
对于非布尔值进行与、或运算时，会先将其转换为布尔值，然后再运算，并且返回原值。
与运算：
如果第一个值为true，则必然返回第二个值。
如果第一个值为false，则直接返回第一个值。
或运算
如果第一个值为true，则直接返回第一个值。
如果第一个值为false，则返回第二个值。
*/
//true && true
//与运算：如果两个值都为true，则返回后边的。
var result = 1 && 2;
console.log(result); //print:2
console.log(false && true); //print:false
result = 0 && 2;
console.log(result); //print:0
result = 2 && 0;
console.log(result); //print:0
console.log(false && false); //print:false
result = NaN && 0;
console.log(result); //print:NaN
result = 0 && NaN;
console.log(result); //print:0
//如果第一个值为true，则直接返回第一个值
console.log(true || true); //print:true
result = 2 || 1;
console.log(result); //print:2
result = 2 || NaN;
console.log(result); //print:2
result = 2 || 0;
console.log(result); //print:2
//如果第一个值为false，则直接返回第二个值
result = NaN || 1;
console.log(result); //print:1
result = NaN || 0;
console.log(result); //print:0
result = "" || "hello";
console.log(result); //print:hello
result = " " || "hello";
console.log(result); //print:
result = -1 || "你好";
console.log(result); //print:-1
</script>
</head>
<body>
</body>
</html>
赋值运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
=
可以将符号右侧的值赋值给符号左侧的变量。
+=
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
*/
var a = 10;
a = a + 5;
console.log(a); //print:15
var b = 1;
b += 2;
console.log(b); //print:3
var c = 5;
c -= 2;
console.log(c); //print:3
var d = 2
d *= 3;
console.log(d); //print:6
var e = 6
//e = e % 3;
e %= 3;
console.log(e); //print:0
</script>
</head>
<body>
</body>
</html>
关系运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
通过关系运算符可以比较两个值之间的大小，如果关系成立返回true，如果关系不成立则返回false。
>、>=、<、<=
非数值的情况：
对于非数值进行比较时，会将其转换为数字然后在比较。
如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而会分别比较字符串中字符的Unicode编码。
*/
var result = 5 > 6;
console.log(result); //print:false
result = 5 > 4;
console.log(result); //print:true
result = 5 > 5;
console.log(result); //print:false
result = 5 >= 5;
console.log(result); //print:true
result = 5 >= 4;
console.log(result); //print:true
result = 5 < 4;
console.log(result); //print:false
result = 4 <= 4;
console.log(result); //print:true
console.log("=========================");
console.log(1 > true); //print:false
console.log(1 >= true); //print:true
console.log(1 > "0"); //print:true
console.log(10 > null); //print:true
console.log("=========================");
//任何值和NaN做任何比较都是false。
console.log(10 <= "hello"); //print:false
console.log(true > false); //print:true
console.log("1" < "5"); //print:true
console.log("11" < "5"); //print:true
console.log("=========================");
//比较两个字符串时，比较的是字符串的字符编码。
console.log("a" < "b");//print:true
//比较字符编码时是一位一位进行比较
//如果两位一样，则比较下一位，所以借用它来对英文进行排序。
console.log("abc" < "bcd");//print:true
//比较中文时没有意义。
console.log("戒" > "我"); //print:true
//如果比较的两个字符串型的数字，可能会得到不可预期的结果。
//注意：在比较两个字符串型的数字时，一定要转型。
console.log("11123123123123123123" < +"5"); //print:false
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
相等运算符用来比较两个值是否相等，如果相等返回true，否则返回false。
==：相等
当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较。
!=：不相等
不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false。
不相等也会对变量进行自动的类型转换，如果转换后相等会返回false。
===：全等
用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换。如果两个值的类型不同，直接返回false。
!==：不全等
用来判断两个值是否不全等，和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true。
*/
console.log(1 == 1); //print:true
console.log(1 == "1"); //print:true
console.log("1" == 1); //print:true
var a = 10;
console.log(a == 4); //print:false
console.log(true == "1"); //print:true
console.log("===========")
//null没有自动转换为number类型。
console.log(null == 0); //print:false
/*
undefined衍生自null，所以这两个值做相等判断时，会返回true。
*/
console.log(undefined == null); //print:true
/*
NaN不和任何值相等，包括他本身。
*/
console.log(NaN == NaN); //print:false
var b = NaN;
//判断b的值是否是NaN。
console.log(b == NaN); //print:false
/*
可以通过isNaN()函数来判断一个值是否是NaN。如果该值是NaN则返回true，否则返回false。
*/
console.log(isNaN(b)); //print:true
console.log("------------------------------------")
console.log(10 != 5); //print:true
console.log(10 != 10); //print:false
console.log("abcd" != "abcd"); //print:false
console.log("1" != 1); //print:false
console.log("-------------------------------------")
console.log("123" === 123); //print:false
console.log(null === undefined); //print:false
console.log(1 !== "1"); //print:true
</script>
</head>
<body>
</body>
</html>
三元运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
三元运算符
语法：条件表达式?语句1:语句2;
执行的流程：
条件运算符在执行时，首先对条件表达式进行求值，
如果该值为true，则执行语句1，并返回执行结果，
如果该值为false，则执行语句2，并返回执行结果。
如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后在运算。
*/
false?alert("语句1") : alert("语句2");
var a = 1;
var b = 2;
var c = 3;
a > b ? alert("a大") : alert("b大");
//获取a和b中的最大值。
var max = a > b ? a : b;
console.log(max);
//获取a、b、c中的最大值
max = max > c ? max : c;
console.log(max)
//这种写法不推荐使用，不方便阅读
var max = a > b ? (a > c ? a :c) : (b > c ? b : c);
console.log(max);
"hello" ? alert("语句1") : alert("语句2");
</script>
</head>
<body>
</body>
</html>
运算符的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a, b, c;
var d = 1, e = 2, c = 3;
var result = 1 + 2 * 3;
console.log(result);
/*
如果||的优先级高，或者两个一样高，则应该返回3，
如果与的优先级高，则应该返回1。
通过结果得出结论：&&的优先级高于||的优先级。
*/
result = 1 || 2 && 3;
console.log("result = "+ result);
</script>
</head>
<body>
</body>
</html>
进制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a = 123;
/*
在JavaScript中，如果表示16进制的数字，则需要以0x或0X开头。
如果表示8进制的数字，则需要以0开头。
如果要表示2进制的数字，则需要以0b或0B开头。
但不是所有的浏览器都支持。
*/
//十六进制
var a = 0x10;
console.log(a); //print:16
var b = 0Xff;
console.log(b); //print:255
var c = 0xCafe;
console.log(c); //print:51966
//八进制数字
var d = 070;
console.log(d); //print:56
//二进制数字
var e = 0b10;
console.log(e); //print:2 //HBuild内置浏览器不支持，Google浏览器、FireFox浏览器支持。
var f = 0B10;
console.log(f); //print:2
//像"070"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析。
var g = "070";
console.log(g); //print:070
var h = parseInt(g);
console.log(h); //print:70
//可以在parseInt()中传递第二个参数，来指定数字的进制。
var i = parseInt(g, 10);
console.log(i); //print:70
console.log(typeof i); //print:number
</script>
</head>
<body>
</body>
</html>
编码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size: 200px;
}
</style>
<script type="text/javascript">
/*
在字符串中使用转义字符输出Unicode编码。
格式：\u四位编码
*/
console.log("\u2620");
</script>
</head>
<body>
<!--在网页中使用Unicode编码
格式：&#编码;
这里的编码需要的是10进制
-->
<span>☠</span>
<span>⚀</span>
</body>
</html>
流程控制
语句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
JavaScript中的代码块，只具有分组的作用，没有其他的用途。
代码块中的内容，在外部是完全可见的。
*/
{
var a = 1;
alert("hi");
console.log("你好");
document.write("语句");
}
console.log("a = " + a);
</script>
</head>
<body>
</body>
</html>
分支结构
if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
从键盘输入小明的期末成绩：
当成绩为100时，“奖励一辆车。”
当成绩为[80-100)时，“奖励一台电脑。”
当成绩为[60-80)时，“奖励一部手机。”
其他分数时，什么奖励也没有。
*/
while(true){
var score = prompt("请输入分数：");
if(score>100 || score<0 || isNaN(score)){
alert("请输入有效的分数！");
}else{
if(score == 100) {
console.log("车。");
}else if(score>=80){
console.log("电脑。");
}else if(score>=60){
console.log("手机。");
}else{
console.log("什么也没有。");
}
break;
}
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
身高：180cm以上; 身价：1000万以上; 颜值：500以上;
如果这三个条件同时满足，则：“嫁”，
如果三个条件有为真的情况，则：“考虑”，
如果三个条件都不满足，则：“不嫁”。
*/
var height = prompt("请输入身高：");
var money = prompt("请输入身价：");
var face = prompt("请输入颜值：");
if(height>180 && money>1000 && face>500){
alert("嫁");
}else if(height>180 || money>1000 || face>500){
alert("考虑");
}else{
alert("不嫁");
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
编写程序，由键盘输入三个整数分别存入变量num1、num2、num3，
对他们进行排序，并且从小到大输出。
*/
var number1 = prompt("请输入第一个数：");
var number2 = prompt("请输入第二个数：");
var number3 = prompt("请输入第三个数：");
if(number1<number2 && number1<number3) {
if(number2<number3){
alert(number1 + ", " + number2 + ", " + number3);
}else{
alert(number1 + ", " + number3 + ", " + number2);
}
}else if(number2<number1 && number2<number3){
if(number1<number3){
alert(number2 + ", " + number1 + ", " + number3);
}else{
alert(number2 + ", " + number3 + ", " + number1);
}
}else if(number3 < number1 && number3<number2){
if(number1<number2){
alert(number3 + ", " + number1 + ", " + number2);
}else{
alert(number3 + ", " + number2 + ", " + number1);
}
}else{
alert(number1 + ", " + number2 + ", " + number3);
}
</script>
</head>
<body>
</body>
</html>
switch
条件分支语句也叫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的功能，所以使用时，可以根据自己的习惯选择。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch</title>
<script type="text/javascript">
/*
从键盘接收整数参数，如果该数为1-7，打印对应的星期，否则打印非法参数。
*/
//var num = +prompt("请输入一个整数：");
var num = prompt("请输入一个整数：");
var num1 = parseInt(num);
switch(num1){
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
break;
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
break;
default:
console.log("非法参数");
break;
}
</script>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch</title>
<script type="text/javascript">
/*
对于成绩大于60分的，输出“合格”。低于60分的，输出“不合格”。
*/
var score = 75;
switch(parseInt(score/10)){
case 10:
case 9:
case 8:
case 7:
case 6:
console.log("合格");
break;
default:
console.log("不合格");
break;
}
switch(true){
case score >= 60:
console.log("合格");
break;
default:
console.log("不合格");
break;
}
</script>
<body>
</body>
</html>
循环结构
while
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
假如投资的年利率为5%，求从1000元增长到5000元，需要花费多少年？
1000 1000*1.05
1050 1050*1.05
*/
var money = 1000;
//定义一个计数器
var count = 0;
while(money < 5000){
money *= 1.05;
count++;
}
console.log(money);
console.log("一共需要" + count + "年。");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>if练习1</title>
<script type="text/javascript">
/*
从键盘输入小明的期末成绩：
当成绩为100时，奖励一部电脑。
当成绩为(80-99]时，奖励一台手机。
当成绩为[60-80)时，奖励一本参考书。
其他时，什么奖励也没有。
*/
while(true){
//score就是小明的期末成绩
var score = prompt("请输入小明的期末成绩(0-100)：");
//判断用户输入的值是否合法
if(score >= 0 && score <= 100){
//满足该条件则证明用户的输入合法，退出循环
break;
}
alert("请输入有效的分数！");
}
//判断值是否合法
if(score > 100 || score < 0 || isNaN(score)){
alert("输入的值不合法！");
}else{
//根据score的值来决定给小明什么奖励。
if(score == 100){
alert("电脑");
}else if(score >= 80){
alert("手机");
}else if(score >= 60){
alert("参考书");
}else{
alert("没有奖励");
}
}
</script>
</head>
<body>
</body>
</html>
do while
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var num = 1;
//可以使用break，来终止循环
while(true){
console.log(num++);
//判断n是否是10
if(num == 5){
//退出循环
break;
}
}
//创建一个循环，往往需要三个步骤
//1.创初始化一个变量。
var i = 5;
//2.在循环中设置一个条件表达式。
while(i <= 10){
//3.定义一个更新表达式，每次更新初始化变量。
document.write(i++ +"<br />")
}
var j = 5;
do{
document.write(j++ +"<br />");
}while(j<= 10);
</script>
</head>
<body>
</body>
</html>
for
for语句，也是一个循环语句，也称为for循环。
在for循环中，提供了专门的位置用来放三个表达式：
1.初始化表达式。
2.条件表达式。
3.更新表达式。
for循环的语法：
for(①初始化表达式; ②条件表达式; ④更新表达式){
③语句...
}
for循环的执行流程：
①执行初始化表达式，初始化变量（初始化表达式只会执行一次）。
②执行条件表达式，判断是否执行循环。
如果为true，则执行循环③。
如果为false，终止循环。
④执行更新表达式，更新表达式执行完毕继续重复②。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
打印[1-100]之间所有奇数之和。
*/
//创建一个变量，用来保存奇数之和
var sum = 0;
for(var i=1; i<=100; i++){
if(i%2 != 0){
//console.log(i);
sum += i;
}
}
console.log(sum);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
打印[1-100]之间所有7的倍数的个数及总和。
*/
//定义一个变量，来保存总和。
var sum = 0;
//定义一个计数器，来记录总数
var count = 0;
//打印1-100之间所有的数。
for(var i=1 ; i<=100 ; i++){
//判断i是否是7的倍数
if(i % 7 == 0){
//console.log(i);
sum += i;
//使计数器自增1。
count++;
}
}
//输出总和。
console.log("总和为：" + sum);
//输出总数。
console.log("总数为：" + count);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
请打印所有的水仙花数。
水仙花数是指一个3位数，它的每位上的数字的3 次幂之和等于它本身。
例如：1^3 + 5^3 + 3^3 = 153
*/
for(var i=100; i<=999; i++){
var ge =i%10;
var bai = parseInt(i/100);
var shi = parseInt((i-bai*100)/10);
if(ge*ge*ge + shi*shi*shi + bai*bai*bai == i){
console.log(i + "\n");
}
}
</script>
</head>
<body>
</body>
</html>
for循环的嵌套
输出以下图行：
*****
*****
*****
*****
*****
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
for(var i=1; i<=5; i++){
for(var j=1; j<=5; j++){
console.log("*");
document.write("*");
}
console.log("\n");
document.write("<br/>");
}
</script>
</head>
<body>
</body>
</html>
输出以下图行：
*
**
***
****
*****
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
for(var i=1; i<=5; i++){
for(var j=1; j<=i; j++){
console.log("*");
document.write("*");
}
console.log("\n");
document.write("<br/>");
}
</script>
</head>
<body>
</body>
</html>
输出以下图行：
*****
****
***
**
*
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
for(var i=1; i<=5; i++){
for(var j=1; j<=5-(i-1); j++){
console.log("*");
document.write("*");
}
console.log("\n");
document.write("<br/>");
}
</script>
</head>
<body>
</body>
</html>
在页面显示九九乘法表。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
width: 2000px;
}
span{
display: inline-block; <!--将span设置为块级元素。-->
width: 80px;
}
</style>
<script type="text/javascript">
for(var i=1; i<=9; i++){
for(var j=1; j<=i; j++){
document.write("<span>" + j + "*" + i + "=" + (i*j) + "</span>");
}
//输出一个换行
document.write("<br />");
}
</script>
</head>
<body>
</body>
</html>
break、continue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
break关键字可以用来退出switch或循环语句。
不能在if语句中使用break和continue。
break关键字，会立即终止离他最近的那个循环语句。
*/
for(var i=0; i<5; i++){
console.log(i);
if(i == 2){
break;
}
}
console.log("-------------------");
for(var i=0; i<5; i++){
console.log("=====外层循环：" + i)
for(var j=0;j<5; j++){
break;
console.log("内层循环：" + j);
}
}
console.log("-------------------");
/*
可以为循环语句创建一个label，来标识当前的循环。
label:循环语句
使用break语句时，可以在break后跟着一个label，这样break将会结束指定的循环，而不是最近的。
*/
outer:
for(var i=0; i<5; i++){
console.log("=====外层循环" + i)
for(var j=0; j<5;j++){
break outer;
console.log("内层循环:"+j);
}
}
console.log("-------------------");
/*
continue关键字可以用来跳过当次循环，
同样continue也是默认只会对离它最近的循环起作用。
*/
for(var i=0; i<5; i++){
if(i==2){
continue;
}
console.log(i);
}
console.log("-------------------");
//outer:
for(var i=0; i<5; i++){
for(var j=0; j<5; j++){
continue;
console.log("+++++" + j);
}
console.log("#####" + i);
}
</script>
</head>
<body>
</body>
</html>
计时器：
console.time(“test”);
console.timeEnd(“test”);
案例
质数
判断一个数是否为质数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
在页面中接收一个用户输入的数字，并判断该数是否是质数。
质数：只能被1和它自身整除的自然数，1不是质数也不是合数。
*/
while(true){
var number = prompt("请输入一个大于1的整数：");
if(isNaN(number) || number.trim()==""){
alert("请输入数字！");
}else if(number <=1){
alert("请输入正确的数字！");
}else{
break;
}
}
var flag = true;
//判断number是否是质数。
//获取2-number之间的数。
for(var i=2; i<=Math.sqrt(number); i++){
//判断num是否能被i整除
if(number % i == 0){
//如果num能被i整除，则说明num一定不是质数。
//设置flag为false。
flag = false;
break;
}
}
//如果number是质数则输出。
if(flag){
alert(number + "是质数。");
}else{
alert(number + "不是质数。")
}
</script>
</head>
<body>
</body>
</html>
后台输出[1,100]之间的质数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
for(var i=2; i<=100; i++){
var flag = true;
for(var j=2; j<=Math.sqrt(i); j++){
if(i%j==0){
flag = false;
break;
}
}
if(flag){
console.log(i);
}
}
</script>
</head>
<body>
</body>
</html>
面向对象
对象
对象的基本操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
对象的分类：
1.内建对象。
由ES标准中定义的对象，在任何的ES的实现中都可以使用，
比如：Math、String、Number、Boolean、Function、Object、...
2.宿主对象。
由JavaScript的运行环境提供的对象，目前来讲主要指由浏览器提供的对象，
比如BOM、DOM。
3.自定义对象。
由开发人员自己创建的对象。
*/
/*创建对象
使用new关键字调用的函数，是构造函数（constructor）。
构造函数是专门用来创建对象的函数。
使用typeof检查一个对象时，会返回object。
*/
var obj = new Object();
obj.name = "宋江";
obj.gender = "男";
obj.age = 50;
/*
读取对象中的属性。
如果读取对象中没有的属性，不会报错而是会返回undefined。
*/
console.log(obj.gender); //print:男
console.log(obj.hi); //print:undefined
/*
修改对象的属性值。
语法：对象.属性名 = 新值
*/
obj.name = "卢俊义";
/*
删除对象的属性。
语法：delete 对象.属性名
*/
delete obj.name;
console.log(obj.name); //print:undefined
console.log(obj.age); //print:50
</script>
</head>
<body>
</body>
</html>
属性名称和属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var obj = new Object();
/*
向对象中添加属性
属性名：
对象的属性名不强制要求遵守标识符的规范，什么乱七八糟的名字都可以使用，
但是使用时还是尽量按照标识符的规范去命名。
*/
obj.name = "宋江";
obj.var = "hi";
console.log(obj.name); //print:宋江
console.log(obj.var); //print:hi
/*
如果要使用特殊的属性名，不能采用.的方式来操作，需要使用另一种方式：
语法：对象["属性名"] = 属性值
读取时也需要采用这种方式。
*/
obj["123"] = 7;
obj["hello"] = "你好";
var hi = "hello";
console.log(obj["123"]); //print:7
console.log(hi) //print:hello
/*
属性值。
JavaScipt对象的属性值，可以是任意的数据类型（包括对象）。
*/
obj.test = true;
obj.test = null;
obj.test = undefined;
console.log("-----------------------");
//创建一个对象
var obj1 = new Object();
obj1.name = "吴用";
//将obj1设置为obj的属性
obj.test = obj1;
console.log(obj.test.name); //print:吴用
/*
in运算符。
检查一个对象中是否含有指定的属性。
如果有返回true，没有则返回false。
语法："属性名" in 对象
*/
console.log(obj.test2); //print:undefined
//检查obj中是否含有test2属性
console.log("test2" in obj); //print:false
console.log("test" in obj); //print:true
console.log("name" in obj); //print:true
</script>
</head>
<body>
</body>
</html>
基本数据类型和引用数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
基本数据类型：string、number、boolean、null、undefined。
引用数据类型：object。
JavaScript中的变量都是保存到栈内存中的，
基本数据类型的值直接在栈内存中存储，值与值之间是独立存在，修改一个变量的值不会影响其他的变量的值。
对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，
而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，
当通过一个变量修改属性时，另一个也会受到影响。
*/
var a = 1;
var b = a;
a++;
console.log("a = " + a);
console.log("b = " + b);
var obj = new Object();
obj.name = "宋江";
var obj1 = obj;
//修改obj的name属性。
obj.name = "吴用";
console.log(obj.name);
console.log(obj1.name);
console.log(obj);
console.log(obj1);
//设置obj1为null。
obj1 = null;
console.log(obj);
console.log(obj1);
console.log("------------------------")
var c = 10;
var d = 10;
console.log(c == d);
var obj2 = new Object();
var obj3 = new Object();
obj2.name = "卢俊义";
obj3.name = "卢俊义";
console.log(obj2);
console.log(obj3);
/*
当比较两个基本数据类型的值时，就是比较值。
而比较两个引用数据类型时，它是比较的对象的内存地址，如果两个对象是一摸一样的，但是地址不同，它也会返回false。
*/
console.log(obj2 == obj3);
</script>
</head>
<body>
</body>
</html>
对象的字面量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个对象
var obj = new Object();
/*
使用对象字面量来创建一个对象
*/
var obj = {};
console.log(typeof obj);
obj.name = "宋江";
console.log(obj.name);
/*
使用对象字面量，可以在创建对象时，直接指定对象中的属性。
语法：{属性名:属性值,属性名:属性值...}
对象字面量的属性名可以加引号也可以不加，建议不加，如果要使用一些特殊的名字，则必须加引号。
属性名和属性值是一组一组的名值对结构，
名和值之间使用:连接，多个名值对之间使用,隔开
如果一个属性之后没有其他的属性了，就不要写,
*/
var obj1 = {
name:"宋江",
age:50,
gender:"男",
test:{name:"吴用"}
};
console.log(obj1.test);
</script>
</head>
<body>
</body>
</html>
函数
定义
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
函数（function）。
函数也是一个对象。
使用typeof检查一个函数对象时，会返回function。
*/
//我们在实际开发中很少使用构造函数来创建一个函数对象。
//创建一个函数对象。
//可以将要封装的代码以字符串的形式传递给构造函数。
var fun = new Function("console.log('Hi，这是我的第一个函数。');");
/*
调用函数。
语法：函数对象();
*/
fun();
/*
使用函数声明来创建函数。
语法：
function 函数名([形参1, 形参2, ...]){
语句。
}
*/
function fun1(){
console.log("这是我的第二个函数。");
alert("哈哈");
document.write("哈哈");
}
console.log(fun1);
//调用fun1。
fun1();
/*
使用函数表达式来创建函数。
var 函数名 = function([形参1, 形参2...]){
语句。
}
*/
var fun2 = function(){
console.log("我是匿名函数中封装的代码。");
};
fun2();
</script>
</head>
<body>
</body>
</html>
参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function summation(number1, number2){
console.log("number1 = " + number1);
console.log("number2 = " + number2);
console.log(number1 + number2);
}
summation(1, 2);
summation(3, 4);
/*
调用函数时解析器不会检查实参的类型,
所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查。
函数的实参可以是任意的数据类型。
*/
summation(1, "hi");
summation(true, false);
/*
调用函数时，解析器也不会检查实参的数量。
多余实参不会被赋值。
如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined。
*/
summation(1, 2, "hi", true, null);
summation(1);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
定义函数，判断数字是否是偶数，如果是返回true，否则返回false。
*/
function isEvenNumber(num){
return num % 2 == 0;
}
var result = isEvenNumber(1);
console.log(result); //print:false
/*
定义函数，根据半径计算圆的面积，并返回计算结果。
*/
function area(radius){
return 3.14 * radius * radius;
}
result = area(1.2);
console.log(result);
/*
定义函数，可以在控制台中输出一个人的信息（name、age、gender、address）。
*/
/*实参可以是任意的数据类型（包括对象）。
当参数过多时，可以将参数封装到一个对象中，然后通过对象传递。
*/
function information(obj){
console.log("obj = " + obj); //print:obj = 宋江
console.log("我的名字叫：" + obj.name + "，今年" + obj.age + "岁，我是" + obj.gender + "人，我住在" + obj.address);
}
information("宋江", 50, "梁山", "男"); //print:我的名字叫：undefined，今年undefined岁，我是undefined人，我住在undefined
var obj = {
name: "吴用",
age: 40,
address: "梁山",
gender: "男"
};
information(obj); //print:我的名字叫：吴用，今年40岁，我是男人，我住在梁山
console.log("------------------------------");
/*
实参可以是一个对象，也可以是一个函数。
*/
function fun(parameter){
console.log("parameter = " + parameter);
//parameter(obj);
}
fun(information);
fun(function(){
console.log("hi")
});
console.log("----------------------------------");
fun(area(10));
/*
area()
调用函数，相当于使用的函数的返回值。
area
函数对象，相当于直接使用函数对象。
*/
</script>
</head>
<body>
</body>
</html>
return
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
创建一个函数，用来计算三个数的和。
在函数中return后的语句都不会执行。
如果return语句后不跟任何值就相当于返回一个undefined，
如果函数中不写return，也会返回undefined。
return后可以跟任意数据类型的值。
*/
function summation(number1, number2, number3){
var result = number1 + number2 + number3;
return result;
//return undefined;
}
var result = summation(1, 2, 3);
//var result = alert("hi"); //alert()函数返回undefined
console.log("result = " + result);
</script>
</head>
<body>
</body>
</html>
break、continue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function function1(){
console.log("函数要执行了。");
for(var i=0; i<5; i++){
if(i == 2){
//使用break可以退出当前的循环。
//break;
//continue用于跳过当次循环。
//continue;
//使用return可以结束整个函数。
return;
}
console.log(i);
}
console.log("函数执行完了。");
}
function1();
/*
返回值可以是任意的数据类型：可以是一个对象，也可以是一个函数。
*/
function function2(){
//返回一个对象。
return {
name: "宋江"
};
}
var a = function2();
console.log("a = " + a);
function function3(){
//在函数内部再声明一个函数。
function function4(){
console.log("我是function4函数。");
}
//将function4函数对象作为返回值返回。
return function4;
}
a = function3();
console.log(a);
a(); //print:我是function4函数。
function3()(); //print:我是function4函数。
</script>
</head>
<body>
</body>
</html>
立即执行函数
立即执行函数：函数定义完，立即被调用，这种函数叫做立即执行函数。
立即执行函数只会执行一次。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
(function(){
console.log("宋江");
})();
(function(number1, number2){
console.log(number1 + number2);
})(1, 2);
</script>
</head>
<body>
</body>
</html>
方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var object = new Object();
object.name = "宋江";
object.age = 50;
//对象的属性值可以是任何的数据类型，也可以是个函数。
object.sayName = function(){
console.log(object.name);
};
function function1(){
console.log(object.name);
}
console.log(object.sayName);
//调方法
object.sayName(); //print:宋江
//调函数
function1(); //print:宋江
/*
对象的属性值也可以是一个函数。
如果一个函数作为一个对象的属性值保存，那么称这个函数是这个对象的方法。
调用这个函数就说调用对象的方法（method）。
但它只是名称上的区别没有其他的区别。
*/
var object1 = {
name: "吴用",
age:40,
sayName: function(){
console.log(object1.name);
}
};
object1.sayName(); //print:吴用
</script>
</head>
<body>
</body>
</html>
枚举对象中的属性
语法：
for(var 变量名称 in 对象名称){
}
for…in语句：对象中有几个属性，循环体就会执行几次，
每次执行时，会将对象中的一个属性名字赋值给变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var object = {
name: "宋江",
age: 50,
gender: "男",
address: "梁山泊"
};
for(var attribute in object){
//console.log("属性名：" + attribute);
//console.log("属性值：" + object[attribute]);
console.log("属性名：" + attribute + "，属性值：" + object[attribute]);
}
</script>
</head>
<body>
</body>
</html>
作用域
全局作用域
作用域：指一个变量的作用范围。
在JavaScript中一共有两种作用域：
1.全局作用域：
直接编写在script标签中的JavaScript代码，都是全局作用域。
全局作用域在页面打开时创建，在页面关闭时销毁。
在全局作用域中有一个全局对象window，代表的是一个浏览器窗口，它由浏览器创建，可以直接使用。
在全局作用域中：
创建的变量都会作为window对象的属性保存。
创建的函数都会作为window对象的方法保存。
全局作用域中的变量都是全局变量，在页面的任意位置都可以访问。
2.函数作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a = 1;
var b = 2;
var c = "hi";
console.log(a)
console.log(window.c);
function fun(){
console.log("我是fun函数。");
}
fun();
window.fun();
window.alert("hello");
</script>
</head>
<body>
</body>
</html>
变量的声明提前
变量的声明提前：
使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），如果声明变量时不使用var关键字，则变量不会被声明提前。
函数的声明提前：
使用函数声明形式创建的函数：function 函数名称(){}，会在所有的代码执行之前就被创建，所以可以在函数声明前来调用该函数。
使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
console.log("a = " + a);
var a = 1;
//fun();
//fun1();
//函数声明，会被提前创建。
function fun(){
console.log("我是fun函数。");
}
//函数表达式，不会被提前创建。
var fun1 = function(){
console.log("我是fun1函数。");
};
//fun();
//fun1();
</script>
</head>
<body>
</body>
</html>
函数作用域
函数作用域：
调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁。
每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的。
在函数作用域中可以访问到全局作用域的变量。
在全局作用域中无法访问到函数作用域的变量。
当在函数作用域操作一个变量时，
会先在自身作用域中寻找，如果有就直接使用，
如果没有则向上一级作用域中寻找，直到找到全局作用域，
如果全局作用域中依然没有找到，则会报错ReferenceError。
在函数中要访问全局变量可以使用window对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a = 1; //全局变量
function fun(){
var a = "我是fun函数中的变量a。"; //局部变量
var b = 2; //局部变量
console.log("a = " + a);
function fun1(){
console.log("a = " + window.a);
}
fun1();
}
fun();
//console.log("b = " + b); //报错
console.log("----------------------------");
/*
函数作用域也有声明提前的特性，
使用var关键字声明的变量，会在函数中所有的代码执行之前被声明。
函数声明也会在函数中所有的代码执行之前执行。
*/
function fun2(){
fun3();
console.log(a);
var a = 35;
function fun3(){
console.log("fun3函数。");
}
}
fun2();
var c = 3;
console.log("-----------------------");
/*
在函数中，不使用var声明的变量都会成为全局变量。
*/
function fun4(){
console.log("c = " + c);
c = 10;
//d没有使用var关键字，则是全局变量。
d = 100;
}
fun4();
//在全局输出c
console.log("c = " + c);
console.log("d = " + d);
var e = 1;
/*
定义形参就相当于在函数作用域中声明了该变量。
*/
function fun5(e){
console.log(e);
}
fun5();
</script>
</head>
<body>
</body>
</html>
this
解析器在调用函数时会向函数内部传递一个隐含参数，这个隐含的参数就是this，this指向的是一个对象，这个对象称为函数执行的上下文对象。
根据函数的调用方式不同，this会指向不同的对象。
1.以函数的形式调用时，this永远都是window对象。
2.以方法的形式调用时，this就是调用方法的那个对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function fun(){
console.log("---------" + this);
console.log("---------" + this.name);
}
function fun(a, b){
console.log("a = " + a + "，b = " + b);
console.log(this.name);
}
fun(1, 2);
var obj = {
name:"宋江",
sayName:fun
};
var obj1 = {
name:"吴用",
sayName:fun
};
console.log(obj.sayName == fun);
var name = "全局的name属性。";
//以函数形式调用，this是window。
fun();
//以方法的形式调用，this是调用方法的对象。
obj.sayName();
obj1.sayName();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var name = "全局";
function fun(){
console.log(this.name);
}
var obj = {
name:"宋江",
sayName:fun
};
var obj1 = {
name:"吴用",
sayName:fun
};
//希望调用obj.sayName()时可以输出obj的名字。
obj.sayName();
</script>
</head>
<body>
</body>
</html>
使用工厂方式创建对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var obj = {
name:"宋江",
age:50,
gender:"男",
sayName:function(){
alert(this.name);
}
};
/*
用来创建人的对象。
*/
function createPerson(name, age, gender){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
console.log(this.name);
};
return obj;
}
/*
用来创建狗的对象。
*/
function createDog(name, age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHello = function(){
alert("我是狗。");
};
return obj;
}
var obj1 = createPerson("宋江", 50, "男");
var obj2 = createPerson("吴用", 40, "男");
var obj3 = createPerson("卢俊义", 45, "女");
/*
使用工厂方法创建的对象，使用的构造函数都是Object。
所以创建的对象都是object类型，就导致我们无法区分出多种不同类型的对象。
*/
//创建一个狗的对象
var dog = createDog("旺财", 2);
console.log(dog);
console.log(obj3);
</script>
</head>
<body>
</body>
</html>
构造函数
创建一个构造函数，专门用来创建Person对象。
构造函数就是一个普通的函数，创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写。
构造函数和普通函数的区别就是调用方式的不同。
普通函数是直接调用，而构造函数需要使用new关键字来调用。
构造函数的执行流程：
1.立刻创建一个新的对象。
2.将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象。
3.逐行执行函数中的代码。
4.将新建的对象作为返回值返回。
使用同一个构造函数创建的对象，称为一类对象，也将一个构造函数称为一个类。
将通过构造函数创建的对象，称为该类的实例。
this的情况：
1.当以函数的形式调用时，this是window。
2.当以方法的形式调用时，谁调用方法，this就是谁。
3.当以构造函数的形式调用时，this就是新创建的那个对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
console.log(this.name);
};
}
function Dog(){
}
var person = new Person("宋江", 50, "男");
var person1 = new Person("吴用", 40, "女");
var person2 = new Person("卢俊义", 45, "男");
var dog = new Dog();
console.log(person);
console.log(dog);
/*
使用instanceof可以检查一个对象是否是一个类的实例。
语法：对象 instanceof 构造函数
如果是，则返回true，否则返回false。
*/
console.log(person instanceof Person);
console.log(dog instanceof Person);
/*
所有的对象都是Object的后代，
所以任何对象和Object做instanceof检查时都会返回true。
*/
console.log(dog instanceof Object);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
alert("hi");
function fun(){
a = 10;
}
var obj = {
sayHello:function(){
console.log(this);
function test(){
console.log(this);
}
test();
}
};
obj.sayHello();
var fun = obj.sayHello;
fun();
</script>
</head>
<body>
</body>
</html>
原型
原型（prototype）
创建的每一个函数，解析器都会向函数中添加一个属性：prototype。该属性对应着一个对象，这个对象就是原型对象。
如果函数作为普通函数调用prototype没有任何作用。
当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，可以通过__proto__来访问该属性。
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，可以将对象中共有的内容，统一设置到原型对象中。
当访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。
以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function MyClass(){
}
//向MyClass的原型中添加属性a。
MyClass.prototype.a = 1;
//向MyClass的原型中添加一个方法。
MyClass.prototype.sayHello = function(){
console.log("hi");
};
var myClass = new MyClass();
var myClass1 = new MyClass();
console.log(MyClass.prototype);
console.log(myClass.__proto__);
console.log(myClass1.__proto__);
console.log(myClass1.__proto__ == MyClass.prototype);
//向myClass中添加a属性。
myClass.a = "我是myClass中的a属性。";
console.log(myClass.a);
console.log(myClass1.a);
myClass.sayHello();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
/*
将sayName方法在全局作用域中定义。
将函数定义在全局作用域，污染了全局作用域的命名空间，而且定义在全局作用域中不安全。
*/
/*function fun(){
alert("大家好，我是" + this.name);
};*/
//向原型中添加sayName方法。
Person.prototype.sayName = function(){
console.log("大家好，我是" + this.name);
};
//创建一个Person实例。
var person = new Person("宋江", 50, "男");
var person1 = new Person("吴用", 40, "男");
person.sayName();
person1.sayName();
console.log(person.sayName == person1.sayName);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function MyClass(){
}
//向MyClass的原型中添加name属性。
MyClass.prototype.name = "我是原型中的名字";
var myClass = new MyClass();
console.log(myClass.name);
myClass.age = 18;
//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true。
console.log("name" in myClass); //print:true
/*可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性。
使用该方法只有当对象自身中含有该属性时，才会返回true*/
console.log(myClass.hasOwnProperty("age")); //print:true
console.log(myClass.hasOwnProperty("age1")); //print:false
console.log(myClass.hasOwnProperty("hasOwnProperty")); //print:false
/*
原型对象也是对象，所以它也有原型，
当使用一个对象的属性或方法时，会先在自身中寻找，
自身中如果有，则直接使用，
如果没有则去原型对象中寻找，如果原型对象中有，则使用，
如果没有则去原型的原型中寻找,直到找到Object对象的原型，
Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。
*/
console.log(myClass.__proto__.hasOwnProperty("hasOwnProperty")); //print:false
console.log(myClass.__proto__.__proto__.hasOwnProperty("hasOwnProperty")); //print:true
console.log(myClass.__proto__.__proto__.__proto__); //print:null
console.log(myClass.hello); //print:undefined
</script>
</head>
<body>
</body>
</html>
重写toString()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//构造函数。
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
}
//修改Person原型的toString()。
Person.prototype.toString = function(){
return "Person[name=" + this.name + ",age=" + this.age + ",gender=" + this.gender + "]";
};
//创建一个Person实例。
var person = new Person("宋江", 18, "男");
var person1 = new Person("吴用", 28, "男");
/*person.toString = function(){
return "Person[name=" + this.name + ",age=" + this.age + ",gender=" + this.gender + "]";
};*/
console.log(person);
console.log(person1);
console.log(person.toString());
console.log(person1.toString());
var result = person.toString();
console.log("result = " + result);
console.log(person.hasOwnProperty("toString"));
console.log(person.__proto__.hasOwnProperty("toString"));
console.log(person.__proto__.__proto__.hasOwnProperty("toString"));
</script>
</head>
<body>
</body>
</html>
垃圾回收
垃圾回收（GC）。
当一个对象没有任何的变量或属性对它进行引用，此时将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。
在JavaScript中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，
我们不需要也不能进行垃圾回收的操作。我们需要做的只是将不再使用的对象设置成null即可。
数组
数组的基本操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建数组对象
var arr = new Array();
//使用typeof检查一个数组时，会返回object。
console.log(typeof arr);
console.log(typeof(arr));
/*
向数组中添加元素
语法：数组[索引] = 值
*/
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
arr[3] = 4;
arr[10] = 31;
//arr[100] = 90;
/*
读取数组中的元素
语法：数组[索引]
如果读取不存在的索引，不会报错而是返回undefined。
*/
console.log(arr[30]);
/*
获取数组的长度：
使用length属性来获取数组的长度(元素的个数)。
语法：数组.length
对于连续的数组，使用length可以获取到数组的长度（元素的个数）。
对于非连续的数组，使用length会获取到数组的最大的索引+1。
尽量不要创建非连续的数组。
*/
console.log(arr.length);
console.log("=====" + arr);
/*
修改length。
如果修改的length大于原长度，则多出部分会空出来。
如果修改的length小于原长度，则多出的元素会被删除。
*/
//arr.length = 10;
arr.length = 2;
console.log(arr.length);
console.log(arr);
//向数组的最后一个位置添加元素
//语法：数组[数组.length] = 值;
arr[arr.length] = 11;
arr[arr.length] = 12;
arr[arr.length] = 13;
console.log(arr);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个数组
//var arr = new Array();
//使用字面量来创建数组
//语法:[]
var arr = [];
console.log(typeof arr);
//使用字面量创建数组时，可以在创建时就指定数组中的元素。
var arr = [1, 2, 3, 4, 5, 10];
console.log(arr[3]);
//使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递
//元素之间使用,隔开
var arr1 = new Array(1, 2, 3);
console.log(arr1);
//创建一个数组，数组中只有一个元素10。
arr2 = [10];
console.log(arr2.length);
//创建一个长度为10的数组。
arr3 = new Array(10);
console.log(arr3.length);
//数组中的元素可以是任意的数据类型。
arr4 = ["hi", 1, true, null, undefined];
//也可以是对象。
var obj = {name:"宋江"};
arr4[arr4.length] = obj;
console.log("=====" + arr4);
arr5 = [{name:"宋江"}, {name:"吴用"}, {name:"卢俊义"}];
console.log(arr5);
//也可以是一个函数。
arr6 = [function(){alert(1);},function(){alert(2);}];
console.log(arr6);
arr6[0]();
//数组中也可以放数组，这种数组称为二维数组。
arr = [[1, 2, 3], [3, 4, 5], [5, 6, 7]];
console.log(arr[1]);
</script>
</head>
<body>
</body>
</html>
数组的相关方法
push、pop、unshift、shift
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个数组。
var arr = ["宋江", "吴用", "卢俊义"];
/*
push()：向数组的末尾添加一个或多个元素，并返回数组的新的长度。
可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾。
该方法会将数组新的长度作为返回值返回。
*/
var length1 = arr.push("公孙胜");
console.log(arr);
console.log(arr.length);
var length2 = arr.push("林冲", "李逵");
console.log(arr);
console.log(length2);
/*
pop()：删除数组的最后一个元素，并将被删除的元素作为返回值返回。
*/
result = arr.pop();
console.log(arr);
console.log(result);
/*
unshift()：向数组开头添加一个或多个元素，并返回新的数组长度。
向前边插入元素以后，其他的元素索引会依次调整。
*/
console.log(arr);
arr.unshift("潘金莲", "潘巧云");
console.log(arr);
/*
shift()：删除数组的第一个元素，并将被删除的元素作为返回值返回。
*/
result = arr.shift();
result = arr.shift();
console.log(arr);
console.log(result);
</script>
</head>
<body>
</body>
</html>
slice
slice(arrayStartIndex, [arrayEndIndex])
用来从数组提取指定元素。
该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回。
参数：
1.截取开始的位置的索引，包含开始索引。
2.截取结束的位置的索引，不包含结束索引。
第二个参数可以省略不写，此时会截取从开始索引往后的所有元素。
索引可以传递一个负值，如果传递一个负值，则从后往前计算。
-1：倒数第一个
-2：倒数第二个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
arr = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
result = arr.slice(0);
console.log(arr);
console.log(result);
arr = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
result = arr.slice(3);
console.log(arr);
console.log(result);
arr = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
result = arr.slice(-1);
console.log(arr);
console.log(result);
arr = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
result = arr.slice(-2);
console.log(arr);
console.log(result);
arr = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
result = arr.slice(-100);
console.log(arr);
console.log(result);
console.log("-----------------------------------");
arr = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
var result = arr.slice(1, 4);
console.log(arr);
console.log(result);
var result = arr.slice(1, 5);
console.log(arr);
console.log(result);
arr = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
result = arr.slice(1, -2);
console.log(arr);
console.log(result);
</script>
</head>
<body>
</body>
</html>
splice
splice(arrayStartIndex[, countElement][, arrayElement[...]])
用于删除数组中的指定元素。
使用splice()会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回。
参数：
第一个：开始位置的索引。
第二个：删除的元素个数。
第三个及以后：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var array = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
var newArray = array.splice(0);
console.log(array);
console.log(newArray);
array = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
newArray = array.splice(2);
console.log(array);
console.log(newArray);
array = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
newArray = array.splice(-1);
console.log(array);
console.log(newArray);
array = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
newArray = array.splice(-6);
console.log(array);
console.log(newArray);
array = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
newArray = array.splice(1, 4);
console.log(array);
console.log(newArray);
array = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
newArray = array.splice(1, 5);
console.log(array);
console.log(newArray);
array = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
newArray = array.splice(1, 4, "潘金莲", "潘巧云");
console.log(array);
console.log(newArray);
</script>
</head>
<body>
</body>
</html>
concat
newArray concat(array[,array …][arrayElement …])
连接两个或多个数组，并将新的数组返回。
该方法不会对原数组产生影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var arr = ["宋江","吴用","卢俊义"];
var arr1 = ["公孙胜","林冲","李逵"];
var arr2 = ["潘金莲","潘巧云","阎婆惜"];
var newArray = arr.concat(arr1);
console.log(newArray);
console.log(arr);
console.log(arr1);
newArray = arr.concat(arr1, arr2);
console.log(newArray);
console.log(arr);
console.log(arr1);
console.log(arr2);
newArray = arr.concat(arr1, arr2, "宋徽宗", "方腊");
console.log(newArray);
console.log(arr);
console.log(arr1);
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
join
join()
将数组转换为一个字符串。
该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回。
在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用,作为连接符。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
arr = ["宋江","吴用","卢俊义","公孙胜"];
stringArray = arr.join();
console.log(arr);
console.log(typeof arr);
console.log(stringArray);
console.log(typeof stringArray);
stringArray = arr.join("@-#");
console.log(arr);
console.log(typeof arr);
console.log(stringArray);
console.log(typeof stringArray);
</script>
</head>
<body>
</body>
</html>
reverse
reverse()
反转数组。
该方法会直接修改原数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var arr = ["宋江","吴用","卢俊义","公孙胜"];
arr.reverse();
console.log(arr);
</script>
</head>
<body>
</body>
</html>
sort
sort()
对数组中的元素进行排序。
会影响原数组，默认会按照Unicode编码进行排序。
即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，所以对数字进排序时，可能会得到错误的结果。
指定排序的规则：
在sort()添加一个回调函数，来指定排序规则，
回调函数中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
浏览器会根据回调函数的返回值来决定元素的顺序，
如果返回一个大于0的值，则元素会交换位置。
如果返回一个小于0的值，则元素位置不变。
如果返回一个0，则认为两个元素相等，也不交换位置。
如果需要升序排列，则返回a-b。
如果需要降序排列，则返回b-a。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
arr = ["b","d","e","a","c"];
arr.sort();
console.log(arr);
arr = [5,4,2,1,3,6,8,7];
arr.sort(function(a,b){
//前边的大
/*if(a > b){
return -1;
}else if(a < b){
return 1;
}else{
return 0;
}*/
//升序排列
//return a - b;
//降序排列
return b - a;
});
console.log(arr);
</script>
</head>
<body>
</body>
</html>
遍历数组
for循环遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个数组
var arr = ["宋江", "吴用", "卢俊义"];
for(var i=0; i<arr.length; i++){
console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
forEach方法遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr = ["宋江", "吴用", "卢俊义", "公孙胜", "林冲"];
/*
forEach()方法需要一个函数作为参数。
像这种函数，由我们创建但是不由我们调用的，称为回调函数。
数组中有几个元素，函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，以此可以来定义形参，来读取这些内容。
浏览器会在回调函数中传递三个参数：
第一个参数，当前正在遍历的元素。
第二个参数，当前正在遍历的元素的索引。
第三个参数，正在遍历的数组。
*/
arr.forEach(function(value, index, obj){
console.log(value);
});
</script>
</head>
<body>
</body>
</html>
数组练习之对象数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//构造函数
function Person(name , age, gender){
this.name = name;
this.age = age;
}
//修改Person原型的toString
Person.prototype.toString = function(){
return "Person[name="+this.name+",age="+this.age+"]";
};
var person = new Person("宋江", 18);
var person1 = new Person("吴用", 28);
var person2 = new Person("卢俊义", 8);
var person3 = new Person("公孙胜", 16);
var person4 = new Person("林冲", 38);
var personArray = [person, person1, person2, person3, person4];
/*
创建一个函数，可以将personArray中的满18岁的Person提取出来，然后封装到一个新的数组中并返回。
arr：形参，要提取信息的数组。
*/
function getAdult(arr){
//创建一个新的数组。
var newArray = [];
//遍历arr，获取arr中的Person对象。
for(var i=0; i<arr.length; i++){
var person = arr[i];
//判断Person对象的age是否大于等于18。
if(person.age >= 18){
//如果大于等于18，则将这个对象添加到newArray中。
//将对象放入到新数组中。
newArray.push(person);
}
}
//将新的数组返回。
return newArray;
}
var resultArray = getAdult(personArray);
console.log(resultArray);
</script>
</head>
<body>
</body>
</html>
案例：数组去重
去除数组中重复的数字。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var array = [1,2,3,2,2,1,3,4,2,5];
//获取数组中的每一个元素。
for(var i=0; i<array.length; i++){
//console.log(i)
/*获取当前元素后的所有元素*/
for(var j=i+1; j<array.length; j++){
//console.log("---->"+arr[j]);
//判断两个元素的值是否相等
if(array[i] == array[j]){
//如果相等则证明出现了重复的元素，则删除j对应的元素。
array.splice(j, 1);
//当删除了当前j所在的元素以后，后边的元素会自动补位,
//此时将不会在比较这个元素，需要在比较一次j所在位置的元素。
//解决：使j自减。
j--;
}
}
}
console.log(array);
</script>
</head>
<body>
</body>
</html>
函数的方法：call()和apply()
arguments
内置对象
Date
getDate() 返回月中的第几天（从 1 到 31）。
getDay() 返回星期几（0-6）。
getFullYear() 返回年份。
getHours() 返回小时（从 0-23）。
getMilliseconds() 返回毫秒（0-999）。
getMinutes() 返回分钟（从 0-59）。
getMonth() 返回月份（从 0-11）。
getSeconds() 返回秒数（从 0-59）。
getTime() 返回自1970年1月1日午夜以来与指定日期的毫秒数。
获取当前日期对象的时间戳。
时间戳：是从格林威治标准时间的1970年1月1日0时0分0秒到当前日期所花费的毫秒数（1秒=1000毫秒）。
计算机底层在保存时间时使用的都是时间戳。
Date.now() 获取当前时间的时间戳。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建Date对象。
//如果直接使用构造函数创建Date对象，则会封装为当前代码执行的时间。
var d = new Date();
console.log(d);
//创建一个指定的时间对象。
//需要在构造函数中传递一个表示时间的字符串作为参数。
//日期格式 ：月/日/年 时:分:秒
var d1 = new Date("2/18/2011 11:10:30");
console.log(d1);
/*
getDay()：获取当前日期对象是周几。
返回一个0-6的值，0 表示周日，1表示周一。。。。。。
*/
var day = d1.getDate();
console.log(day);
var week = d1.getDay();
console.log(week);
/*
getMonth()：获取当前时间对象的月份。
会返回一个0-11的值，0 表示1月，1 表示2月，。。。。。。11 表示12月。
*/
d2 = new Date("12/18/2011 11:10:30");
var month = d2.getMonth();
console.log(month);
/*
getFullYear()：获取当前日期对象的年份。
*/
var year = d2.getFullYear();
console.log(year);
var time = d2.getTime();
//console.log(time/1000/60/60/24/365);
var d3 = new Date("1/1/1970 0:0:0");
time = d3.getTime();
console.log(time);
//利用时间戳来测试代码的执行性能。
var start = Date.now();
for(var i=0; i<100; i++){
console.log(i);
}
var end = Date.now();
console.log("执行了：" + (end - start) + "毫秒。");
</script>
</head>
<body>
</body>
</html>
Math
Math 不是构造函数。Math 的所有属性/方法都可以通过使用 Math 作为对象来调用，而无需创建它。
属性：
PI
SQRT2 返回 2 的平方根。
SQRT1_2 返回 1/2 的平方根。
方法：
sqrt(number) 方法返回数的平方根。
如果参数为负数，则返回NaN。
abs(number) 方法返回数的绝对值。
如果参数传入undefined，返回NaN。
如果传入不能自动转换为number数据类型的值时，则报错。
ceil(number) 将数字向上舍入为最接近的整数，并返回结果。如果传递的参数是整数，则不会舍入该值。大于参数的最小整数。
floor(number) 将数字向下舍入为最接近的整数，并返回结果。如果传递的参数是整数，则不会舍入该值。小于参数的最大整数。
max(number,number1,…) 方法返回具有最高值的数字。
min(number,number1,…) 方法返回具有最小值的数字。
fround(number) 方法返回数的最接近的（32 位单精度）浮点表示。
round(number) 方法将数字四舍五入到最接近的整数。
trunc(number) 方法返回数字的整数部分。
pow(number,number1) 方法可返回 x 的 y 次幂 (xy) 的值。
说明：如果结果是虚数或负数，则该方法将返回 NaN。如果由于指数过大而引起浮点溢出，则该方法将返回 Infinity。
random() 方法返回从 0（含）到 1（不含）的随机数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
Math.random()：用来生成一个0-1之间的随机数。
生成一个0-10的随机数
生成一个0-x之间的随机数：Math.round(Math.random()*x)
生成一个1-10：Math.round(Math.random()*(10-1)+ 1)
生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+ x)
*/
console.log(Math.round(Math.random()*10)); //[0,10)
console.log(Math.round(Math.random()*20)); //[0,20)
console.log(Math.round(Math.random()*9)+1); //[1,10)
console.log(Math.round(Math.random()*8)+2); //[2,10)
//生成1-6之间的随机数
console.log(Math.round(Math.random()*5 + 1)); //[1,6)
</script>
</head>
<body>
</body>
</html>
包装类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
基本数据类型：String、Number、Boolean、Null、Undefined
引用数据类型：Object
在JavaScript中提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象。
String()：将基本数据类型字符串转换为String对象。
Number()：将基本数据类型的数字转换为Number对象。
Boolean()：将基本数据类型的布尔值转换为Boolean对象。
*/
//创建一个Number类型的对象。
var num = new Number(1);
var num1 = 1;
console.log(num); //print:Number{1}
console.log(num1); //print:1
console.log(typeof num); //print:object
console.log(typeof num1); //print:number
console.log(num==num1); //true
console.log(num===num1); //false
var str = new String("hi");
var str1 = new String("hi");
console.log(str==str1); //print:false
console.log(str === str1); //print:false
var bool = new Boolean(true);
var bool1 = true;
console.log(bool==bool1); //print:true
console.log(bool===bool1); //print:false
//向num中添加一个属性
num.hello = "one";
var b = new Boolean(false);
if(b){ //此处b的值为对象，值为false，该对象会自动转换为ture。
alert("我运行了。");
}
/*
方法和属性能添加给对象，不能添加给基本数据类型。
当对一些基本数据类型的值去调用属性和方法时，
浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法。
调用完以后，在将其转换为基本数据类型。
*/
var s = 1;
s = s.toString();
s.hello = "你好";
console.log(s); //print:1
console.log(typeof s); //print:string
console.log(s.hello); //print:undefined
</script>
</head>
<body>
</body>
</html>
String
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str = "Hello Jack.";
/*
在底层字符串是以字符数组的形式保存的：["H","e","l"]
*/
/*
length属性：
返回字符串的长度。
空字符串的长度为0。
*/
console.log(str.length);
console.log(str[4]);
/*
charAt()
方法返回字符串中指定索引（下标）处的字符。
根据索引获取指定的字符。
*/
str = "中Hello Jack.";
console.log(str.charAt(5))
/*
charCodeAt()
方法返回字符串中规定索引（下标）处字符的Unicode。
*/
console.log(str.charCodeAt(0));
/*
formCharCode()
String.fromCharCode() 方法将 Unicode 值转换为字符。
String.fromCharCode() 是 String 对象的静态方法。
*/
result = String.fromCharCode(0x2692);
console.log(result);
/*
concat()
连接两个或多个字符串。
concat() 方法不会更改现有字符串。
concat() 方法返回新字符串
*/
result = str.concat("你好","再见");
console.log(result);
/*
indexof()
方法返回值在字符串中第一次出现的位置。，
如果未找到该值，则indexOf()方法返回-1。
可以指定第二个参数，指定开始查找的位置。
lastIndexOf()
lastIndexOf()方法返回字符串中指定值最后一次出现的索引（下标）。
lastIndexOf()方法从尾到头搜索字符串。
lastIndexOf()方法从开头（位置 0）返回索引。
如果未找到该值，则lastIndexOf()方法返回-1。
lastIndexOf() 方法区分大小写。
也可以指定开始查找的位置。
*/
str = "hello Jack.";
console.log(str.indexOf("e"));
result = str.indexOf("o",1);
console.log(result);
result = str.lastIndexOf("o",5);
console.log(result);
/*
slice()
从字符串中截取指定的内容，不会影响原字符串，而是将截取到的内容返回。
参数：
第一个，开始位置的索引（包括开始位置）。
第二个，结束位置的索引（不包括结束位置）。
如果省略第二个参数，则会截取到后边所有的字符。
也可以传递一个负数作为参数，负数的话将会从后边计算。
*/
str = "My name is Jack.";
result = str.slice(1,4);
console.log(result);
result = str.slice(1,-1);
console.log(result);
console.log(str);
/*
substring()
substring()方法从字符串中提取两个索引（位置）之间的字符，并返回子字符串。
substring()方法从头到尾（不包括）提取字符。
substring()方法不会更改原始字符串。
如果start大于end，则交换参数：(4, 1) = (1, 4)。
小于0的开始或结束值被视为0。
参数：
第一个：开始截取位置的索引（包括开始位置）。
第二个：结束位置的索引（不包括结束位置）。
*/
str = "My name is Jack.";
result = str.substring(0,1);
console.log(result);
/*
substr()
substr()方法提取字符串的一部分。
substr()方法从指定位置开始，并返回指定数量的字符。
substr()方法不会更改原始字符串。
如需从字符串末尾提取字符，请使用负数的起始位置。
提示：substr()方法指定的是子串的开始位置和长度，它是substring()方法和slice()方法的一种有用的替代方法，后两者指定的都是起始字符的位置。
参数：
1.截取开始位置的索引。
2.截取的长度。
*/
str = "My name is Jack.";
result = str.substr(3,2);
console.log(result);
/*
split()
将一个字符串拆分为一个数组。
参数：需要一个字符串作为参数，将会根据该字符串去拆分数组。
*/
str = "My name is Jack.";
result = str.split("a");
console.log(result);
/*
如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素。
*/
result = str.split("");
console.log(Array.isArray(result));
console.log(result[0]);
console.log(result);
/*
toUpperCase()
将一个字符串转换为大写并返回。
*/
str = "My name is Jack.";
result = str.toUpperCase();
console.log(result);
/*
toLowerCase()
将一个字符串转换为小写并返回。
*/
str = "My name is Jack.";
result = str.toLowerCase();
console.log(result);
</script>
</head>
<body>
</body>
</html>
正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建正则表达式的对象。
/*
语法：
var 变量 = new RegExp("正则表达式","匹配模式");
使用typeof检查正则表达式对象，会返回object。
var reg = new RegExp("a"); 这个正则表达式可以检查一个字符串中是否含有a。
在构造函数中可以传递一个匹配模式作为第二个参数，
参数：
i：忽略大小写。
g：全局匹配模式。
*/
var reg = new RegExp("a");
console.log(reg); //print:/a/
console.log(typeof(reg)); //print:object
var reg = new RegExp("a","i");
console.log(reg);
console.log(typeof(reg));
/*
正则表达式的方法：
test()
检查一个字符串是否符合正则表达式的规则，如果符合则返回true，否则返回false。
*/
var str = "a";
var result = reg.test(str);
console.log(result); //print:true
console.log(reg.test("Ac")); //print:true
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
使用字面量创建正则表达式。
语法：var 变量 = /正则表达式/匹配模式
使用字面量的方式创建更加简单，使用构造函数创建更加灵活。
*/
//var reg = new RegExp("a","i");
var reg = /a/i;
console.log(reg); //print:/a/i
console.log(typeof reg); //print:object
console.log(reg.test("abc")); //print:true
//创建一个正则表达式，检查一个字符串中是否含有a或b或c。
/*
使用|表示或者的意思。
*/
reg = /a|b|c/;
console.log(reg.test("one")); //print:false
/*
创建一个正则表达式检查一个字符串中是否有字母。
*/
reg = /a|b|c|d|e|f|g/;
/*
[]里的内容也是或的关系。
[ab] == a|b
[a-z] 任意小写字母。
[A-Z] 任意大写字母。
[A-z] 任意字母。
[0-9] 任意数字。
*/
reg = /[A-z]/;
//检查一个字符串中是否含有abc或adc或aec。
reg = /a[bde]c/;
/*
[^] 除了
*/
reg = /[^ab]/;
reg = /[^0-9]/;
console.log(reg.test("12a3456")); //true
</script>
</head>
<body>
</body>
</html>
和正则表达式有关的字符串方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str = "1a2b3c4d5e6f7";
/*
split()
将一个字符串拆分为一个数组。
方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串。
这个方法即使不指定全局匹配，也会全都插分。
*/
/*
根据任意字母将字符串拆分。
*/
var result = str.split(/[A-z]/);
console.log(result);
/*
search()
搜索字符串中是否含有指定内容。
如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1。
它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串。
serach()只会查找第一个，即使设置全局匹配也没用。
*/
str = "hello abc hello aec afc";
/*
搜索字符串中是否含有abc或aec或afc。
*/
result = str.search(/a[bef]c/);
console.log(result); //print:6
/*
match()
根据正则表达式，从一个字符串中将符合条件的内容提取出来。
默认情况下match只会找到第一个符合要求的内容，找到以后就停止检索。
可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容。
可以为一个正则表达式设置多个匹配模式，且顺序无所谓。
match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果。
*/
str = "1a2a3a4a5e6f7A8B9C";
console.log("----" + str.match(/[A-z]/)); //print:----a
result = str.match(/[a-z]/ig);
console.log(Array.isArray(result)); //print:true
console.log(result);
console.log(result[2]);
/*
replace()
将字符串中指定内容替换为新的内容。
参数：
1.被替换的内容，可以接受一个正则表达式作为参数。
2.新的内容。
默认只会替换第一个
*/
result = str.replace(/[a-z]/gi , "@");
console.log(result);
result = str.replace(/[a-z]/gi , "");
console.log(result);
</script>
</head>
<body>
</body>
</html>
正则表达式的语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
创建一个正则表达式检查一个字符串中是否含有aaa。
*/
/*
量词：通过量词可以设置一个内容出现的次数。
量词只对它前边的一个内容起作用。
{n} 正好出现n次
{m,n} 出现m~n次
{m,} m次以上
+ 至少一个，相当于{1,}
* 0个或多个，相当于{0,}
? 0个或1个，相当于{0,1}
*/
var reg = /a{3}/;
//ababab
reg = /ab{3}/;
reg = /(ab){3}/;
reg = /b{3}/;
reg = /ab{1,3}c/;
reg = /ab{3,}c/;
reg = /ab+c/;
reg = /ab*c/;
reg = /ab?c/;
console.log(reg.test("abbc"));
/*
检查一个字符串中是否以a开头
^ 表示开头
$ 表示结尾
*/
reg = /^a/; //匹配开头的a。
reg = /a$/; //匹配结尾的a。
console.log(reg.test("abcabca"));
/*
如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
*/
reg = /^a$/;
console.log(reg.test("bbca"));
/*
创建一个正则表达式，用来检查一个字符串是否是一个合法手机号。
手机号的规则：
1 3 567890123 （11位）
1. 以1开头。
2. 第二位3-9任意数字。
3. 三位以后任意数字9个。
^1 [3-9] [0-9]{9}$
*/
var phoneStr = "13067890123";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
检查一个字符串中是否含有.。
.：表示任意字符。
在正则表达式中使用\作为转义字符。
\. 表示.
\\ 表示\
注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\\来代替。
*/
var reg = /\./;
reg = /\\/;
reg = new RegExp("\\.");
reg = new RegExp("\\\\");
/*
\w
任意字母、数字、_ [A-z0-9_]
\W
除了字母、数字、_ [^A-z0-9_]
\d
任意的数字 [0-9]
\D
除了数字 [^0-9]
\s
空格
\S
除了空格
\b
单词边界
\B
除了单词边界
*/
reg = /\w/;
reg = /\W/;
reg = /\d/;
reg = /\D/;
reg = /\s/;
reg = /\S/;
/*
创建一个正则表达式检查一个字符串中是否含有单词child。
*/
reg = /\bchild\b/;
console.log(reg.test("hello child "));
//接收用户的输入。
var str = prompt("请输入你的用户名:");
var str = " he llo ";
//去除掉字符串中的前后的空格。
//去除空格就是使用""来替换空格。
console.log(str);
//去除字符串中的空格（前、后、中间的空格都会去除。）
str = str.replace(/\s/g , "");
//去除开头的空格
str = str.replace(/^\s*/, "");
//去除结尾的空格
str = str.replace(/\s*$/, "");
// /^\s*|\s*$/g 匹配开头和结尾的空格。
str = str.replace(/^\s*|\s*$/g,"");
console.log(str);
</script>
</head>
<body>
</body>
</html>
邮件地址的正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
电子邮件
hello .nihao @ abc .com.cn
任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）
\w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
*/
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "abc.hello@163.com";
console.log(emailReg.test(email));
</script>
</head>
<body>
</body>
</html>
818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
