小强的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>
<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的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（33）—— jqMobi基础
一.什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极快速的查询选择库,支持W3C查询. 版本 jqMobi源码最初在2012年1月 ...
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
随机推荐
- CentOS6重启后DNS被还原的解决办法
CentOS6重启后DNS被还原的解决办法 http://luyx30.blog.51cto.com/1029851/1070765/ centos6.5的64位系统,修改完/etc/sysconfi ...
- WINWORD.EXE-损坏的图像
问题详情: 系统键 + R键,运行 再输入regedit HKEY_CLASSES_ROOT\.docx HKEY_CLASSES_ROOT\Word.Document.12 HKEY_CURREN ...
- VUE错误记录 - 品牌后台练习 search(); 数组 splice forEach push 箭头函数
methods:{ add(){ var car = { id: this.id, name: this.name, ctime: new Date()}; this.list.push(car); ...
- USB串行端口
USB-SERIAL CH341A(COM22)USB串行端口
- Java vs C++：子类覆盖父类函数时缩小可访问性的不同设计
Java 和 C++ 都是面向对象的语言,允许对象之间的继承.两个语言的继承都设置有允许子类覆盖父类的“虚函数”,加引号是因为 Java 中没有虚函数这一术语,但是我们的确可以把 Java 的所有函数 ...
- POJ 2479 Maximum sum POJ 2593 Max Sequence
d(A) = max{sum(a[s1]..a[t1]) + sum(a[s2]..a[t2]) | 1<=s1<=t1<s2<=t2<=n} 即求两个子序列和的和的最大 ...
- UIScrollView（滚动试图）
UIScrollView(滚动试图) 1.简介 为什么有UISCrollView: 在iOS开发中,由于移动设备的屏幕大小有限,所以不能像PC一样显示很多内容,因此当手机屏幕需要展示的内容较多超出一个 ...
- 【习题 5-9 UVA - 1596】Bug Hunt
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] map模拟 map<string,int>记录每个数组的大小 map <pair<string, int&g ...
- Spring Boot 静态资源处理（转）
Spring Boot 静态资源处理 Spring Boot 系列 Spring Boot 入门 Spring Boot 属性配置和使用 Spring Boot 集成MyBatis Spring Bo ...
- [AngularFire 2 ] Hello World - How To Write your First Query using AngularFire 2 List Observables ?
In this lesson we are going to use AngularFire 2 for the first time. We are going to configure the A ...