一、JavaScript 运算符
1.算术运算符 + 、-、*、/、%、++、--。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>算数运算符</title>
<script type="text/javascript">
window.onload= function(){
//1算术运算符+、-、*、/、%、++、--。
var num1,num2;
num1=10;
num2=3;
document.write("<h1>"+num1+"+"+num2+"="+(num1+num2)+"</h1>");
document.write("<h1>"+num1+"-"+num2+"="+(num1-num2)+"</h1>");
document.write("<h1>"+num1+"*"+num2+"="+(num1*num2)+"</h1>");
document.write("<h1>"+num1+"/"+num2+"="+(num1/num2)+"</h1>");
document.write("<h1>"+num1+"%"+num2+"="+(num1%num2)+"</h1>");
//++自动加一
//变量++【先用后加】
document.write("<h1>num1++ ="+(num1++)+"</h1>");
document.write("<h1>num1="+num1+"</h1>");
//++变量先加后用
document.write("<h1>++num1 ="+(++num1)+"</h1>");
document.write("<h1>num1="+num1+"</h1>");
//--自动加一
//变量--【先用后减】
document.write("<h1>num1-- ="+(num1--)+"</h1>");
document.write("<h1>num1="+num1+"</h1>");
//--变量先减后用
document.write("<h1>--num1 ="+(--num1)+"</h1>");
document.write("<h1>num1="+num1+"</h1>");
}
</script>
</head>
<body>
</body>
</html>
2.比较运算符 == === != > < >= <=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>比较运算符</title>
<script type="text/javascript">
window.onload=function(){
//比较运算符 == != > < >= <= ===
var num1=10,num2=3;
document.write("<h1>"+num1+"=="+num2+"="+(num1==num2)+"</h1>");
document.write("<h1>"+num1+"!="+num2+"="+(num1!=num2)+"</h1>");
document.write("<h1>"+num1+">"+num2+"="+(num1>num2)+"</h1>");
document.write("<h1>"+num1+"<"+num2+"="+(num1<num2)+"</h1>");
document.write("<h1>"+num1+">="+num2+"="+(num1>=num2)+"</h1>");
document.write("<h1>"+num1+"<="+num2+"="+(num1<=num2)+"</h1>");
//===[比较数值的同时也比较数据类型]
var a=10;
var b="10";
document.write("<h1>"+a+"==="+b+"="+(a===b)+"</h1>");
}
</script>
</head>
<body>
</body>
</html>
3.逻辑运算符 || && ！
运算数据和运算结果都是布尔boolean
3 || 5---？？？
(3>5) || (3<5)------true
真值表
a=true b=false
| || |
&& |
! |
| a || b---true |
a && b---false |
!a ---false |
| b || a---true |
b && a---false |
!b ---true |
| a || a---true |
a && a---true |
|
| b || b---false |
b && b---false |
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>逻辑运算符</title>
<script>
var n1=10;
var n2=3;
document.write("<h1>"+((n1>n2) || (n1<n2))+"</h1>");
document.write("<h1>"+((n1>n2) && (n1<n2))+"</h1>");
document.write("<h1>"+!((n1>n2) || (n1<n2))+"</h1>");
document.write("<h1>"+!((1>2) || (3<4))+"</h1>");
document.write("<h1>"+((2>1) && (4>3))+"</h1>");
</script>
</head>
<body>
</body>
</html>
4.条件运算符 【(判断表达式) ? 数值1 : 数值2】 ()? :
var iablename=()?value1:value2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>条件运算符</title>
<script>
function test1 (){
var a=document.getElementById("text1").value;
var pd=(a>=18)?"成年":"未成年";
document.getElementById("text1").value=pd;
}
</script>
</head>
<body>
<input type="text" name="" id="text1" value="" />
<input type="button" name="" id=""onclick="test1()" value="测试条件运算符" />
</body>
</html>
5.typeof 操作符--检测变量的数据类型
1.虽然JS中的变量在声明的时候不需要指定数据类型,但是在赋值,每一个数据还是有类型的所以，也需要学习一下
JS包括那些数据类型?
JS中数据类型有 : 原始类型,引用类型
原始类型: Undefined,Number,String,Boolean,Null
引用类型: Object以及Object的子类
2.ES规范(ECMAScript规范),在ES6之后,又基于以上的六种类型之外添加了一种新类型: Symbol(符号)
3,JS中有一个运算符叫做typeof,这个运算符可以在程序运行阶段动态的获取变量的数据类型
typeof运算符的语法格式:
typeof 变量名
typeof运算符的运算结果是一下六个字符串之一:注意字符串都是全部小写:
"undefined"
"number"
"string"
"boolean"
"object"
"function"
4.在Js中比较字符串是否相等使用"=="完成,没有equals
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>typeof</title>
<script type="text/javascript">
window.onload=function(){
//typeof 操作符--检测变量的数据类型
//格式:typeof 变量
var str="hello ";//string;
var num=123.33 ;//number;
var boo=false; //boolean;
var arr=new Array(12,12.2,2);//object;对象
var obj={id:1001,name:"张三"};//boject;
var testnull=null; //object
var un;//undefined;
document.write("<h1>str的数据类型为："+typeof str+" </h1>");
document.write("<h1>num的数据类型为："+typeof num+" </h1>");
document.write("<h1>boo的数据类型为："+typeof boo+" </h1>");
document.write("<h1>arr的数据类型为："+typeof arr+" </h1>");
document.write("<h1>obj的数据类型为："+typeof obj+" </h1>");
document.write("<h1>testnull的数据类型为："+typeof testnull+" </h1>");
document.write("<h1>un的数据类型为："+typeof un+" </h1>");
}
</script>
</head>
<body>
</body>
</html>
2.JavaScript 流程控制语句
1.顺序结构 自上往下一行一行逐行执行
2.选择结构 有选择的执行某一部分程序
2.1 if语句结构
1.if(){}
2.if(){}else{}
3.if(){}else if(){}else if(){}...else{}
4.if语句的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>if语句结构</title>
<script type="text/javascript">
window.onload=function(){
//if（）{}--当（）中结果为true时执行{}中的程序
var num1=-10;
if(num1>11){
alert("当（）中的结果为true时执行{}中的程序");
}
//if（）{} else{}--2选一
//当()中的结果为true是执行第一个{}中的程序
//当()中的结果为false是执行第二个{}中的程序
var num2=1;
if(num2>2){
alert("当()中的结果为true是执行第一个{}中的程序");
}else{
alert("当()中的结果为false是执行第二个{}中的程序");
}
//3.if(){}else if(){}else if(){}...else{}--【多选1】
//当第一个()中的结果为true执行第一个{}中的程序
//当第一个()中的结果为false执行第二个()中的程序
//当第二个()中的结果为true执行第二个{}中的程序
//当第二个()中的结果为false执行第s三个()中的程序
//.....以此类推
//当所有()中的结果为false的时候，执行最后一个{}中的程序
var num3=4;
alert("当第一个()中的结果为true执行第一个{}中的程序");
if(num3>5){
}else if(num3<1) {
alert("当第二个()中的结果为true执行第二个{}中的程序");
}else if(num3<2){
alert("当第三个()中的结果为true执行第三个{}中的程序");
}else{
alert("num3当所有()中的结果为false的时候，执行最后一个{}中的程序");
}
//4.if语句的嵌套 【4选1】
var num4=10;
if(num4<9){
if(num4<8){
alert("1");
}else{
alert("2");
}
}else{
if(num4=10){
alert("3");
}else{
alert("5")
}
}
}
</script>
</head>
<body>
</body>
</html>
2.2Switch语句结构
switch 语句用于基于不同的条件来执行不同的动作。
语法
switch(表达式 n){
case 常量值1:
执行代码块 1 break;
case 常量值1:
执行代码块 2 break;
.......
case 常量值n:
执行代码块 n
break;
default:
表达式的结果与case后面常量值都不匹配；
}
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>switch</title>
<script type="text/javascript">
function jisuan(){
var num1=document.getElementById("text1").value;
var num2=document.getElementById("text2").value;
var fh=document.getElementById("text3").value;
var span=document.getElementById("span");
switch(fh){
case"+":span.innerHTML=num1+"+"+num2+"="+(num1*1+num2*1);break;
case"-":span.innerHTML=num1+"-"+num2+"="+(num1*1-num2*1);break;
case"*":span.innerHTML=num1+"*"+num2+"="+(num1*1*num2*1);break;
case"/":span.innerHTML=num1+"/"+num2+"="+(num1*1/num2*1);break;
default:sapn.innerHTML="运算符号有错";
}
}
</script>
</head>
<body>
<input type="text" name="" id="text1" value="请输入数字" /><br>
<input type="text" name="" id="text3" value="请输入符号" /><br>
<input type="text" name="" id="text2" value="请输入数字" /><br>
<input onclick="jisuan()" type="button" name="" id="" value="计算结果" /><br>
<span id="span">
</span>
</body>
</html>
3.循环结构
3.1for循环
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}
语句 1 （代码块）开始前执行 starts.[初始条件]
语句 2 定义运行循环（代码块）的条件[判断条件]
语句 3 在循环（代码块）已被执行之后执行[循环增量/减量]
3.2for/in
JavaScript for/in 语句循环遍历对象的属性
for (保存属性变量 in 对象){
对象名称[保存属性值的变量] ;//属性值
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript">
window.onload=function(){
var a=new Array(1,2,3,4);
for(var i=0;i<a.length;i++){
document.write(i+"<br />");
}
var index="";
for(index in a){
document.write("<h1>"+index+":"+a[index]+"</h1>");
}
var user={id:1001,name:"张三"};
var att="";
for(att in user){
document.write(att+":"+user[att]);
}
}
</script>
</head>
<body>
</body>
</html>
3.3 while循环
语法:
while (判断条件){
需要执行的代码
}
- 初始值需要定义在while语法以外
- 控制循环增量/减量的代码，需要写在” 需要执行的代码”后面，如果没有就是死循环。
3.4 do{}while循环
语法
do{
需要执行的代码
}while (判断条件);
1.初始值需要定义在while语法以外
2.控制循环增量/减量的代码，需要写在” 需要执行的代码”后面，如果没有就是死循环。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>while</title>
<script type="text/javascript">
window.onload=function(){
var arr1=new Array(1,2,3,4,5);
var i=0;
while(i<arr1.length){
document.write(i+"<br>");
i++;
}
//do while循环
var arr2=new Array(1,2,3,4,5);
var i=0;
do{
document.write(i+"<br>");
i++;
}while(i<arr2.length);
}
</script>
</head>
<body>
</body>
</html>
1.while与do{}while()的区别？
while是先判断后执行，
do{}while()先执行后判断，
do{}while()与while同等条件下多执行一次。
2.while/do{}while()与for的区别
for--在执行的时候需要明确的知道循环的次数
While()/do{}while()----不需要明确的知道循环的次数。
4. break 和 continue 语句
break---中断[循环/switch]
continue--继续【循环-结束当前循环，进入下一次循环】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>break</title>
<script>
for(var i=1;i<=6;i++){
document.write("<h"+i+">测试break</h"+i+">");
if(i==3){
break;
}
}
</script>
</head>
<body>
</body>
</html>
continue--继续【循环-结束当前循环，进入下一次循环】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>continue</title>
</head>
<body>
<script>
for(var i=1;i<=6;i++){
if(i==3){
continue;
}
document.write("<h"+i+">测试continue"+i+"</h"+i+">");
}
</script>
</body>
</html> 
2.Javascript中的对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Object类</title>
</head>
<body>
<script type="text/javascript">
/*
Object类型
1.Object类型是所有类型的超类，自定义的任何类型，默认继承Object
2.Object类包括那些属性？
prototype属性(常用的，主要是这个)：作用是给类动态的扩展属性和函数
constructor属性
3.Object类包括那些函数？
toString()
valueOf()
toLocaleString()
4.在JS当中定义的类默认继承Object,会继承Object中所有的属性以及函数
换句话说，自己定义的类中也有prototype属性
5.在JS当中怎么定义类？怎么new对象？
定义类的语法：
第一种方式：
function 类名(形参){
}
第二种方式：
类名 = function(形参){
}
创建对象的语法
new 构造方法名(实参);//构造方法名和类名一致
*/
function sayHello(){
}
//把sayHello当做一个普通的函数来调用
sayHello();
//这种方式就表示把sayHello当作一个类来创建对象
var obj = new sayHello();//obj是一个引用，保存内存地址指向堆种的对象
//定义一个学生类
function Student(){
alert("Student。。。");
}
//当做普通函数调用
Student();
//当做类来创建对象
var stu = new Student();
alert(stu);//【object Object】
//JS种的类的定义，同时又是一个构造函数的定义
//在JS中类的定义和构造函数的定义是放在一起来完成的
function User(a,b,c){//a b c是形参，属于局部变量
//声明属性(this表示当前对象)
//User类中有三个属性：sno/sname/sage
this.sno = a;
this.sname = b;
this.sage = c;
}
//创建对象
var u1 = new User(111,"zhangsan",23);
//访问对象的属性
alert(u1.sno);
alert(u1.sname);
alert(u1.sage);
var u2 = new User(222,"lisi",24);
alert(u2.sno);
alert(u2.sname);
alert(u2.sage);
//访问一个对象的属性还可以用这种语法
alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);
//定义类的另一种语法
/*
Emp = function(a,b){
this.ename = a;
this.sal = b;
}*/
Emp = function(ename,sal){
// 属性
this.ename=ename;
this.sal=sal;
}
var e1 = new Emp("SMITH",800);
alert(e1["ename"] + "," + e1.sal);
Product = function(pno,pname,price){
//属性
this.pno=pno;
this.pname=pname;
this.price=price;
//函数
this.getPrice = function(){
return this.price;
}
}
var xigua = new Product(111,"西瓜",4.0);
var pri = xigua.getPrice();
alert(pri);//4.0
//可以通过prototype这个属性来给类动态扩展属性以及函数
Product.prototype.getPname = function(){
return this.pname;
}
//调用后其扩展的getPname函数
var pname = xigua.getPname();
alert(pname);
//给String扩展一个函数
String.prototype.suiyi = function(){
alert("这是给String扩展的一个函数 ，叫做suiyi");
}
"abc".suiyi();
</script>
</body>
</html>
<!--
java语言怎么定义类，怎么创建对象？（强类型）
public class User{
private String username;
private String password;
public User(){
}
public User(String username,String password){
this.username = username;
this.password = password;
}
}
User user = new User();
User user = new User("lisi","123");
JS语言怎么定义类，怎么创建对象？（弱类型）
User = function(username,password){
this.username = username;
this.password = password;
}
var u = new User();
var u = new User("zhangsan");
var u = new User("zhangsan","123");
-->- 内置的对象
1.1高级对象 String Number Date Array......
1.2Dom对象
1.3Bom对象 window
window.onload=function(){
var textInput=document.getElementById("text1");
alert(textInput);
}2.自定义的对象
JavaScript 对象是变量和方法的容器.
创建对象
var 对象名称={属性名称:属性值,....,方法名称:function(){},....};
对象的定义形式
1定义一行
例如:var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
2JavaScript 对象可以跨越多行。
属性名称不需要引号，属性值中【字符串,时间日期】需要引号，其他的值不需要引号。
对象中属性和方法的访问
1.对象中属性访问
格式: 对象名称.属性名称;
对象名称[“属性名称”] / 对象名称[‘属性名称’]
2.对象中方法访问
格式: 对象名称.方法名称;
例如:
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义对象</title>
<script>
window.onload=function(){
//定义对象
//{}--对象的标志
//对象中定义的内容【1变量，2函数】
//怎么定义变量？变量名称:变量值，如果有多个","分割。
//怎么定义函数？函数名称:function(){},如果有多个","分割。
var obj={userid:1001,
method1:function(){alert("这是一个函数=="+obj.userid);}
};
//对象调用变量？对象名称.变量名称/对象名称['变量名称'] ....
//alert(obj.userid);
//对象调用函数？对象名称.函数名称(); 有参数传参数，有返回值定义变量收
obj.method1();
}
</script>
</head>
<body>
</body>
</html>
Javascript中的对象
1.1自定义对象
1.2 内置对象
1.高级对象
2.dom对象
3.bom对象
2.javascript高级对象
1.创建
2.调用对象的属性和方法
3.注意事项
2.1字符串对象（String）
String类型：
1.在JS中字符串可以使用单引号，也可以使用双引号
var s1 = 'abcef';
var s2 = "test";
2.在JS中。怎么创建字符串对象呢？
两种方式：
第一种方式：var s = "abc";
第二种方式：(使用JS内置的支持类String) ：var s2 = new String("abc");
需要注意的是：String是一个内置类，可以直接使用，String的父类是Object
3.无论是小String 还是大String 他们的属性和函数都是通用的
4.关于String类型的常用属性和函数？
常用属性：
length 获取字符串长度
常用函数：
indexOf 获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引
replace 替换
substr 截取子字符串
subString 截取子字符串
toLowerCase 转换小写
toUpperCase 转换大写
split 拆分字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>String类型</title>
</head>
<body>
<script type="text/javascript">
/*
String类型：
1.在JS中字符串可以使用单引号，也可以使用双引号
var s1 = 'abcef';
var s2 = "test";
2.在JS中。怎么创建字符串对象呢？
两种方式：
第一种方式：var s = "abc";
第二种方式：(使用JS内置的支持类String) ：var s2 = new String("abc");
需要注意的是：String是一个内置类，可以直接使用，String的父类是Object
3.无论是小String 还是大String 他们的属性和函数都是通用的
4.关于String类型的常用属性和函数？
常用属性：
length 获取字符串长度
常用函数：
indexOf 获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引
replace 替换
substr 截取子字符串
subString 截取子字符串
toLowerCase 转换小写
toUpperCase 转换大写
split 拆分字符串
*/
//小String(属于原始类型String)
var x = "king";
alert(typeof x);//"string"
// 大String(属于Object类型)
var y = new String("abc");
alert(typeof y);//"object"
//获取字符串长度
alert(x.length);//4
alert(y.length);//3
//获取索引
alert("http://www.baidu.com".indexOf("http"));//0
alert("http://www.baidu.com".indexOf("https"))//-1
//判断一个字符串中是否包含某个子字符串？
alert("http://www.baidu.com".indexOf("https") >=0 ? "包含" : "不包含");//不包含
//replace （注意：只替换了第一个）
alert("name=value%name=value%name=value".replace("%","&"));
//name=value&name=value&name=value
//继续调用replace方法，就会替换第二个
//想全部替换需要使用正则表达式
alert("name=value%name=value%name=value".replace("%","&").replace("%","&"));
//name=value&name=value&name=value
//考点：经常问 substr和substring的区别？
//substr(startIndex,length)（截取开始索引，截取个数）
alert("abcdefxyz".substr(2,4));//cdef
//substring(startindexA,endindexB) (截取开始的位置，截取结束的位置) 注意不包含 endindexB
alert("abcdefxyz".substring(2,4));//cd
//第一个位置得出从2号位置开始截取
//0--a 1--b 2--c 3--d 4--e不包含四号位
//cd
//第二个位置得出截取到4号位
//cd
//alert("abcdefxyz".substring(9,3));
//这样写的结果是defxyz
//分析由第一个位置得出要截取的子集abcdefxyz
//由第二个位置得出从哪里截取defxyz
alert("abcdefxyz".substring(3,7));//defx
//感觉像是在去重？
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>string类型对象</title>
<script type="text/javascript">
//1,String对象的创建
//通过直接赋值的方式
var a="helloword";
//通过String的构造器
var a1="hello,word";
document.write(a1+"<br />");
//得到字符串中指定位置的字符
//1.通过索引访问指定位置的字符
var b=a1[3];
document.write(b+"<br />")
//2.--得到字符串中指定位置的字符
var b1=a1.charAt(3);
document.write(b1+"<br />");
// --得到指定字符/字符串在原始字符串中第一次出现位置
var c=a1.indexOf("r");
document.write(c+"<br />");
//得到指定字符/字符串在原始字符串中最后一次出现位置,如果没有就得到-1
var c1=a1.lastIndexOf("o");
document.write(c1+"<br />");
//--截取字符串
var d=a1.substring(0,4);
document.write(d+"<br />");
// 方法在字符串中用某些字符替换另一些字符。
var d1=a1.replace("hell","你好");
document.write(d1+"<br />");
//(分隔符)将字符串通过指定分隔符转为String数组
var e=a1.split("o");
for(var i=0;i<e.length;i++){
document.write(e[i]+"<br />");
}
var e1=[""];
e1=a1;
for(var i=0;i<e1.length;i++){
document.write(e1[i]+"<br />");
}
var f1="zahngsansay:\"hello\"";
document.write(f1+"<br />");
</script>
</head>
<body>
</body>
</html> 
特殊字符
下表列出其他特殊字符，可以使用反斜线转义特殊字符：
| 代码 |
输出 |
| \' |
单引号 |
| \" |
双引号 |
| \\ |
斜杆 |
| \n |
换行 |
| \r |
回车 |
| \t |
tab |
| \b |
空格 |
2.2Number 对象
JavaScript 只有一种数字类型。
JavaScript 数字可以使用也可以不使用小数点来书写：
实例
var pi=3.14; // 使用小数点
var x=34; // 不使用小数点
极大或极小的数字可通过科学（指数）计数法来写：
实例
var y=123e5; // 12300000
var z=123e-5; // 0.00123
精度
整数（不使用小数点或指数计数法）最多为 15 位。
小数的最大位数是 17，但是浮点运算并不总是 100% 准确：
var num1=10/3; //3.3333333333335
八进制和十六进制
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。
var y = 0377; //8进制 255
var z = 0xFF; //16进制 255
注意:我们在定数字变量赋值是不要随便去开头使用”0”/”0x”。
无穷大（Infinity）和 无穷小（-Infinity）
在javascript中所有 JavaScript 数字均为 64 位，当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。
var myNumber=2;
while (myNumber!=Infinity){
myNumber=myNumber*myNumber;
document.write(myNumber +'<br>');
}
除以0也产生了无限: var num2=10/0;
NaN - 非数字值【not a Number】
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。
你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
//var x = 1000 / "Apple";
//alert(isNaN(x)); //true 【不是一个数字】
var x2 = 1000 * "1000"; //1000000
alert(isNaN(x2)); //false 【是一个数字】
数字对象的创建
1.变量直接赋值
2.通过构造器
//变量直接赋值
var testnum1=10.558;
//通过构造器
var testnum2=new Number(10.558);
数字对象的常用属性和方法
MAX_VALUE-- JavaScript 中可表示的最大的数
Number.MAX_VALUE
MIN_VALUE-- JavaScript 中可表示的最小的数
Number.MIN_VALUE
toFixed();四舍五入保留指定的小数位数
var testnum2=new Number(10.558);
//toFixed();四舍五入保留指定的小数位数
var res1=testnum2.toFixed(2); //10.56
当 num 太小或太大时抛出异常 RangeError。0 ~ 20 之间的值不会引发该异常。有些实现支持更大范围或更小范围内的值。
当调用该方法的对象不是 Number 时抛出 TypeError 异常。
var test1="1000";
var res2=test1.toFixed(2);
toString()方法可把一个 Number 对象转换为一个字符串，并返回结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Number类型</title>
</head>
<body>
<script type="text/javascript">
/*
1.Number类型包括哪些值？
-1 0 1 2 2.3 3.14.. 100 .... NaN Infinity(无穷大)
整数 小数 正数 负数 不是数字 无穷大都属于Number类型
2. isNaN() : 结果true--表示不是一个数字，结果是false表示是一个数字
3.parseInt()函数
4.parseFloat()函数
5.Math.ceil()函数 （Math是一个数学类，数学类当中有一个函数叫做ceil(),作用是向上取整）
*/
var v1 = 1;
var v2 = 3.14;
var v3 = -100;
var v4 = NaN;
var v5 = Infinity;
//"number"
// alert(typeof v1);
// alert(typeof v2);
// alert(typeof v3);
// alert(typeof v4);
// alert(typeof v5);
//关于NaN（表示 Not a Number，不是一个数字，但属于Number类型）
//什么情况下结果是一个NaN呢？
//运算结果本来应该是一个数字，最后算完不是一个数字的时候，结果是NaN，
var a = 100;
var b = "test";
alert(a/b);//除号显然最后的1结果应该是一个数字，但是运算的过程中导致最后不是一个数字，那么最后的结果是NaN
var e = "abc";
var f = 10;
alert(e+f);//"abc10" 当有一方是字符串时加号会进行字符串拼接
// Infinity (当除数为0时，结果为无穷大)
alert(10/0);
//思考 ： 在JS中 10/3=？
alert(10/3);//3.333333333335
//关于isNaN函数
//用法 isNaN(数据) ， 结果是true表示不是一个数字
// 结果是false表示是一个数字
//isNaN ： is Not a Number
function sum(a,b){
if(isNaN(a) || isNaN(b)){
alert("参与运算的必须是数字！");
return;
}
return a+b;
}
sum(100,"abc");
alert(sum(100,200));
//parseInt():可以将字符串自动转换成数字，并且取整数位
alert(parseInt("3.1111"));
alert(parseInt(3.99999));
//parseFloat():可以将字符串自动转换为数字
alert(parseFloat("3.14")+1);//4.14
alert(parseFloat("3.2")+1);//4.2
// Math.ceil()
alert(Math.ceil("2.1"));//3
alert(Math.ceil(2.1));//3
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Number数字对象</title>
<script type="text/javascript">
//整数（不使用小数点或指数计数法）最多为 15 位。
//小数的最大位数是 17，但是浮点运算并不总是 100% 准确：
var a= 10/3;
document.write(a+"<br />");
//八进制和十六进制
//如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，
//如果前缀为 0 和 "x"，则解释为十六进制数。
var b1=0377;
var b2=0xFF;
document.write(b1,b2+"<br />");
//NaN
var c=1000/"adwd";
var c1=1000*"1000";
document.write(isNaN(c)+"<br />");
document.write(isNaN(c1)+"<br />");
//变量直接赋值
var d=10;
//通过构造器
var d1=new Number(10.333)
document.write(d," "+ d1+"<br />")
//toFixed()四舍五入保留指定小数位；
document.write(d1.toFixed(2)+"<br />");
//MAX_VALUE--javascript中表示的最大的数；
//MIN_VALUE--javascript中表示的最小的数；
document.write(Number.MAX_VALUE+"<br />");
document.write(Number.MIN_VALUE+"<br />");
//当调用该方法的对象不是Number对象时抛出TypeErro异常
// var e1="100";
// var e2=e1.toFixed(2);
//toString()方法可把一个Number对象转化位一个字符串，并反回结果
var f1=100;
var f2=200;
document.write(f1+f2+"<br />");
var f3=f1.toString();
var f4=f2.toString();
document.write(f3+f4+"<br />");
//toString（）方法输出16进制，8进制2进制；
var g1=17;
document.write(g1+"十进制"+"<br />");
document.write(g1.toString(16)+"十六进制"+"<br />");
document.write(g1.toString(8)+"八进制"+"<br />");
document.write(g1.toString(2)+"二进制"+"<br />");
</script>
</head>
<body>
</body>
</html>
2.3JavaScript Array（数组）
数组对象的作用是：使用单独的变量名来存储一系列的值。
数组的创建
1.先定义后赋值
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
2.定义+赋值
var myCars=new Array("Saab","Volvo","BMW");
3.字面量赋值
var myCars=["Saab","Volvo","BMW"]; //[]=数组
数组取值---格式: 数组名称[下标]
var myCars=["Saab","Volvo","BMW"];
myCars[2]; //BMW
在一个数组中你可以有不同的对象
var stu={stuid:1001,
stuname:"zhangsan",
testfunc:function(){
alert("自定义对象");
}};
var myarr = new Array();
myarr[0]=100;
myarr[1]="hello";
myarr[2]=true;
myarr[3]=stu;
alert(myarr[3].stuid);
数组方法和属性
length---得到数组元素的个数。
concat()合并两个数组
var myCars=["Saab","Volvo","BMW"]; //[]=数组
var myarr = new Array();
myarr[0]=100;
myarr[1]="hello";
myarr[2]=true;
myarr[3]=stu;
var res1=myarr.concat(myCars);
alert(res1.length);
join()用数组的元素组成字符串
var str=myCars.join();
pop()删除数组的最后一个元素
myCars.pop();
shift()删除数组的第一个元素
myCars.shift();
push()数组的末尾添加新的元素
myCars.push("hello");
unshift()在数组的开头添加新元素
myCars.unshift("hello");
reverse()将一个数组中的元素的顺序反转排序
myCars.reverse();
sort()数组排序（按字母顺序升序)
myCars.sort();
数字排序（按数字顺序升序/降序）
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});升序
points.sort(function(a,b){return b-a});降序
toString()转换数组到字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>数组对象的用法</title>
<script>
//1.先定义后赋值
var a=new Array()
a[0]="id";
a[1]="user";
a[2]=999;
alert(a);
//2.定义+赋值
var a1=new Array("id","name",999);
alert(a1);
//3.字面量赋值
var a2=["id","user",111];
alert(a2[2]);
//在一个数组中你可以有不同的对象
var dx={dxid:1001,dxname:"lll",dxfun:function(){alert("自定义对象");}};
var a3=new Array(1,dx,3,4,5);
alert(a3[1].dxname);
//concat()合并两个数组
var a4=new Array(1,2,3,4);
var a5=new Array("h","e","l","l","o");
var a6=a5.concat(a4);
alert(a6);
alert(a6.length);
//join()用数组的元素组成字符串
var a7=a6.join();
alert(a7);
alert(a7.length);
//pop()删除数组的最后一个元素
var a8=new Array(1,2,3,4);
a8.pop();
alert(a8);
//push()数组的末尾添加新的元素
var ab1=new Array(1,2,3,4,5)
ab1.push("新添加的元素");
alert(ab1);
//reverse()将一个数组中的元素的顺序反转排序
var ab2=new Array(1,2,3,4,"h","e","l","l","o");
ab2.reverse();
alert(ab2);
// splice(index,howmany[,item1,...,itemx]) ：向数组添加或删除元素并返回被删除的元素。
// 其中，index是需添加或删除的元素的位置。可以为负数，负数从末尾开始倒计数。
// howmany是要删除的元素个数，当其值为0时，将不删除任何元素。
var ab3=new Array(1,2,3,4,5,6,7);
ab3.splice(2,3,["从数组第三个元素开始计算删除三个元素，并在第三个元素处添加新的元素"]);
alert(ab3);
// slice(start,end)从一个数组中选择元素
var ab4=new Array(1,2,3,4,5);
ab4.slice(0,2);
alert(ab4);
// sort()数组排序（按字母顺序升序)
var ab5=new Array("hello","aword",1,3,5,1,3,5,6);
alert(ab5.sort());
var lll=ab5.sort()
alert(lll.reverse());
ab5.sort(function(a,z){return a-z});
alert(ab5);
ab5.sort(function(a,z){return z-a});
alert(ab5);
</script>
</head>
<body>
</body>
</html>