一、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>