小强的HTML5移动开发之路（28）—— JavaScript回顾3
一、基本数据类型
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><span style="white-space:pre"> </span>
<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类型请看下一篇
以上就是 小强的HTML5移动开发之路（28）—— JavaScript回顾3的内容，更多相关内容请关注PHP中文网（www.php.cn）！
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
