小强的HTML5移动开发之路(28)—— JavaScript回顾3

时间:2021-12-10 14:49:24

一、基本数据类型

number:数字类型

string:字符串 (注意s小写:string是基本类型)

boolean:布尔类型   //前三个都有对应的包装类

null:空类型

undefined:未定义类型

测试一:

<html>
<!--基本类型测试-->
<head>
<script>
function f1(){ //number类型
/*有返回值时也不能function void f1(){}*/
alert('hello');
/*alert(); 弹出消息框*/
alert('hehe');
var i=100;
//js当中字符串可用单引号也可用双引号
i='hello';
//typeof是一个运算符,可以返回变量实际存放的数据的类型
alert(typeof i);
/*js是弱类型语言 不能: number i=100; 不能在声明时指明其类型,在运行时才能确定*/
}
function f2(){ //string类型
var str1='hello';
var str2='hello';
if(str1==str2){
alert("str1==str2");
}else{
alert("str1!=str2");
}
var str3='100';
var i=100;
if(str3==i){ //两个=号,进行类型转换
alert("str3==i");
}else{
alert("str3!=i");
}
if(str3===i){ //三个=号,不进行类型转换
alert("str3==i");
}else{
alert("str3!=i");
}
}
function f3(){ //boolean类型
//布尔类型只有两个值:true/false;
var flag=true;
alert(typeof flag);
//var str="abc";
var str=new Object();//创建一个对象,对象会转换为true;
var str=null; //转换为false;
var str; //undefined 转换为false;
//强制转换,非空的字符串转换为true,非零的数字转换为true;
if(str){
alert('结果为真');
}else{
alert('结果为假');
}
}
function f4(){ //null类型
var obj=null;
//null类型只有一个值——null;
//输出的结果是Object
alert(typeof obj);
}
function f5(){ //undefined类型
var obj;
alert(typeof obj);
}
</script>
</head>
<body style="font-size:30px;">
<input type="button" value="演示基本类型的使用"
onclick="f1();"/>
</body>
</html>
测试二:parseInt

<html>
<head>
<script>
/*number--->string
string---->number
*/
function f1(){ //字符串变数字
//var str1='fsfs'; 读出NaN
// var str1="1234fsfs"; 可以读出1234
// var str1="fsfs1234"; 不可以读出
// var str1="22323.08";
var str1='1234';
//window.parseInt(); window可以省略
var n1=parseInt(str1);
//js浮点运算会有误差,先放大x倍,再缩小x倍
//var n2=parseFloat(str1);
//undefined + 数字 = NaN
alert(n1+100);
}
function f2(){
var n1=100;
//number--->Number(对应的包装类型) 再调用toString();
var s1=n1.toString();
// var s1=n1+'';
}
</script>
</head>
<body>
<input type="button" value="演示基本数据类型" onclick="f1();"/>
</body>
</html>
测试三:string的方法

length属性:返回字符串的长度

charAt(index):返回指定位置的字符

substring(from,to):返回子字符串

indexOf(str):返回字符串在原字符串中的位置

lastIndexOf(str):

match(regexp):返回符合正则表达式的一个数组

截取

function f4(){ //string的方法
var str1="abcdef";
var str2=str1.substring(1,4);
alert(str2);
}
正则
function f5(){
var str="asdfas12323adfasf23423";
//在js中用/reg/,在执行时,会将//内的内容转换成一个RegExp对象
var reg=/[0-9]+/g;
//reg中是一个对象,不是字符串,注意加一个g搜索整个字符串,还有i忽略大小写。
var arr=str.match(reg);
alert(arr);
}
查找

function f6(){
var str1="sdf1223asdfasf23423";
var reg=/[0-9]+/;
//alert(typeof reg);
alert(reg instanceof RegExp);
var index = str1.search(reg);
alert(index);
}
替换

function f7(){
var str1="sdf444asdfadf4423";
var reg=/[0-9]+/g;
var str2 = str1.replace(reg,'888');
alert(str2);
}

二、Object类型(数组、函数,其他的在下一篇中)

1、数组

js数组的长度可变

js数组元素是任意的(可以混合存放不同类型的数据)

<html>
<head>
<script>
function f1(){ //创建数组的第一种方式
var arr=new Array(); //()可以省略不写
arr[0]=1;
arr[3]=2;
arr[5]='abc';
alert(arr.length);
alert(arr[1]);
alert(arr[3]);
}
function f2(){ //第二种方式
var arr=[];
arr[0]=1;
arr[3]=22;
var arr=[1,2,3,4,5,6];
arr[7]=11;
alert(arr.length);
}
function f3(){ //多维数组的创建
var arr = new Array();
arr[0]=[1,2,3,4,5];
arr[1]=[6,7,8,9,10,11,12,13];
arr[2]=[14,15,16,17,18,19];
for(var i=0;i<arr.length;i++){
for(j=0;j<arr[i].length;j++){
alert(arr[i][j]);
}
}
}
function f4(){ //数组常用的属性和方法
var arr=[11,22,33,44];
arr.length=2; //数组的长度可以写,后面的被砍掉
alert(arr);
alert(typeof abc);
}
</script>
</head>
<body>
<input type="button" value="数组的使用" onclick="f4()"/>
</body>
</html>
数组中的一些函数
<html>
<head>
<script>
function f1(){
var a1 = [1, 2, 3];
var str = a1.join(|);
alert(str);
}
function f2(){
var a1 = [1, 2, 3];
var a2 = [4, 5, 6];
var a3 = a1.concat(a2); //数组连接
alert(a3);
}
function f4(){
var a1 = [1, 2, 3];
var a2 = a1.reverse(); //是对原有数组翻转
alert(a2);
alert(a1); //原数组变了
}
function f5(){
var a1 = [1, 2, 3, 4, 5, 6];
var a2 = a1.slice(2,4); //对数组截取
alert(a2);
alert(a1); //原数组没有变化
}
function f6(){
var a1 = [5, 1, 7, 2, 8];
var a2 = a1.sort(); //从小到大
alert(a2);
}
function f7(){
var a1 = [15, 111, 7, 22, 88];
var a2 = a1.sort(); //默认按照字典顺序排序
alert(a2);
}
function f8(){
var a1 = [15, 111, 7, 22, 88];
var a2 = a1.sort(function(t1, t2){
return t2-t1;
});
alert(a2);
}
function f9(){ //按照字符串长度排序
var a1 = ['abc', 'bb', 'casd', 'a'];
var a2 = a1.sort(function(t3, t4){
return t4.length-t3.length;
});
alert(a2);
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="f9()"/>
</body>
</html>
2、函数

定义一个函数

function 函数名(参数){

函数体

}

要注意的几个问题

a.不能有返回类型的声明,但是可以有返回值。

b.函数其本质是一个对象,是Function类型的实例,函数名是一个变量,存放了这个对象的地址(函数名是一个变量)

c.在函数内部,可以使用arguments对象访问参数

d.函数不能重载

<html>
<!--函数的使用-->
<head>
<script>
function add(a1, a2){
return a1+a2;
}
function test(){
var sum = add(1, 1);
alert(sum);
}
function test2(){
//alert(typeof add);
alert(add instanceof Function); //函数是Function类型的实例
var f2 = add; //存放的是对象的地址
add = null; //add指向空
var sum = f2(1, 1); //等价于 add(1, 1);
alert(sum);
}
function add2(arg1, arg2){
//return arg1 + arg2;
return arguments[0]+arguments[1];
}
function add3(arg1, arg2){ //首先指向一个对象
return arg1+arg2+100;
}
function add3(){//指向了另一个对象
return arguments[0]+arguments[1];
}
function test3(){
//var sum = add2(1); //结果为NaN,因为arg2是undifined
//var sum(1, 1, 1); //结果为2
//var sum=add(1, 1);
//var sum = add2(1, 1, 1);
var sum = add3(1, 1);
alert(sum);
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="test3()"/>
</body>
</html>
其他Object类型请看下一篇