第二章 javascript基础
一.基本要素
javascript语法的基本要素是:•区分大小写 •变量不区分类型 •每条语句结尾可以省略分号
•注释与c/c++/java/php相同 •代码段要封闭
二.变量和数据类型
javascript是弱类型脚本语言？声明变量时无需指定变量的数据类型。
将什么类型的赋值给变量,该变量就是什么类型的。javascript是解释时动态决定的,数据保存在内存时也是有数据类型的。
1.变量定义
<script> name="lcl";//隐式定义 var name="lcl";//显示定义 alert(name); </script>注意:变量定义也要遵循一定的规则： 首字母必须是字母(大小都可)、下划线、美元符号；余下的字母可以是任意字母和数字,特殊符号只能是下划线和美元符号；变量名不能使用关键字命名。 注意: var name 和var Name 是两个不同的变量名。
注意:在定义变量名的时,不能使用ECMAScript关键字和保留字。
2.数据类型
类型名 | 描述 |
简单类型 | |
字符串类型String | 用‘’或“”包含 |
数字类型Number | 包含整数和浮点数 |
布尔类型Boolean | true和flase |
未定义类型Undefined | 专门来确定一个已经创建但是没有初值的变量(未定义) |
空类型Null | 空是一种特殊的Object类型 |
复杂类型 | |
数组类型 | array,数组也是对象类型中的一种 |
对象类型Object | javascript中的对象 |
NaN类型 | not a number(主要用于处理转换成number类型的非数字值的情况) |
注意：空类型null与未定义类型undefined的区别？ 未定义会占用内存,而空不会。
这就解释了为什么返回是string而不是String。
注意：
2.除了Math对象,其他内置对象都可以使用new关键字构造；
3.常见的window对象和document对象不是javascript内置对象,而是由浏览器BOM和DOM提供,
4.数字对象接受十进制数,接受以0开头的八进制数（023420）,接收以0x开头的十六进制数（0x2710）,接收科学计数（le4）
5.[]也可以表示创建一个新数组对象Array
6.{}也可以表示创建一个新对象Object
7.对象通过中括号运算符能够创建任意名称的对象成员
用法:
<script> //var a1='123';a2="123",a3=123,a4=true; //alert(a1+a2);//加号表连接 //123123 //alert(a1+'\n'+a2);//123 123 //alert(typeof a1+'\n'+typeof a2+'\n'+typeof a3+'\n'+typeof a4); string string number boolean //var q1; //alert(q1);//undifined //var q2=null; //alert(typeof q2);//object,一种特殊的Object类型 //var arr=[]; //alert(typeof arr);//object,数组也是对象类型之一 var a2='qwe'; a2=Number(a2); alert(a2);//NaN alert(typeof a2);//number </script> <script> //****************javascript常见的语法技巧 alert('<span class="z3s"></span>'==='<span class=\"z3s\"></span>');//返回是true //在javascript中反斜线表转义:\n换行 \t制表符 \'单引号 \"双引号 \\反斜线 \\\\两个反斜线 //a b 交换数值 var a=1,b=3; a=[b,b=a][0]; alert('a='+a+'\n'+'b='+b);//a=3 b=1 //合并数组 array1=[1,true,'hello']; alert(Array.prototype.push.apply(array1,[1,false,'world']));//返回是6 alert(array1);//返回是1,true,hello,1,false,world alert(Array);//function Array() { [native code] } //javascript中每个对象都有prototype属性,其解释为:返回对象类型原型的引用 //push表示在数组后面添加一个或多个元素,并返回新的长度。 //apply()是指函数的调用,跟call很类似 </script>
3.数据类型的转换
方法 | 描述 |
将字符串转换成其他类型 | |
parseInt() | 将字符串转换成整型 |
parseFloat() | 将字符串转换成浮点型 |
Number() | 将字符串转换成数字类型 |
Boolean() | 将字符串转换成布尔值 |
注意:在字符串转换成布尔类型中,除了空字符串,其他均为true | |
将数值转换成其他类型 | |
String() | 将数值转换成字符串类型 |
toString(num) | 将数值转换成字符串类型,设置num值可以转换成指定进制字符串 |
Boolean() | 将数值转换成布尔值 |
注意:在数值转换成布尔类型中,除了数值0,其他均为true | |
a.将字符串转换成整型。
用法：
<script> var a='12red';a=parseInt(a); var b='lcl';b=parseInt(b); not a number var c='12.1';c=parseInt(c); var d='0xF';d=parseInt(d); alert(a+'\n'+b+'\n'+c+'\n'+d); </script>
b.将字符串转换成浮点型。
用法：
<script> var a='red12';a=parseFloat(a); var b='12red';b=parseFloat(b); var c='lcl';c=parseFloat(c); var d='12.1';d=parseFloat(d); var e='12.12.1';e=parseFloat(e); var f='0xf';f=parseFloat(f); alert(a+'\n'+b+'\n'+c+'\n'+d+'\n'+e+'\n'+f); </script>
4.字符串
a.字符串的创建
用法：
<<script> //****************第一种:创建字符串有:字面量形式 var str='lcl'; alert(str+'\n'+typeof str);//lcl string //只要是字面量形式创建的任何类型都是var定义后的类型 //****************第二种:使用new关键字创建 var str1=new String('lcl'); alert(str1+'\n'+typeof str1);//lcl object //只要是new关键字创建的类型都是对象类型 </script>
b.字符串常用的方法和属性
属性名 | 描述 |
length | 返回字符串长度 |
方法名 | 描述 |
charAt() | 返回特定索引处的字符串(从0开始) |
indexOf() | 返回字符串中特定字符串第一次出现的位置,如若没有返回-1 |
lastIndexOf() | 返回字符串中特定字符串最后一次出现的位置,如若没有返回-1 |
replace() | 将字符串中的某个子串以特定的字符串替换 |
slice() | 返回字符串的某个子串,支持负数参数,功能更大 |
substring() | 截取字符串的某个子串 |
trim() | 去除字符串的前后空格 |
toUpperCase() | 将字符串的所有字符转换成大写字母 |
toLowerCase() | 将字符串的所有字符转换成小写字母 |
split() | 将某个字符串分割成多个字符串,可指定分隔符,分割之后返回的是数组 |
concat() | 用来将多个字符串拼成一个字符串 |
match() | 搜索目标子字符串并返回,返回的是字符串 |
search() | 搜索目标子字符串并返回,返回的是索引 |
用法：
<script> //**********************字符串属性:length var str='weqrqdhwufhi美djifdioad'; alert(str.length+'\n'+str[3]);//22 //r //有length就可以有下标,有下标就可以遍历 for(var i=0;i<str.length;i++){ if(str[i]=='美'){ alert(str[i]+'\n'+i);//美 //12 } } </script> <script> var test='lcl_qwe_LCL',test1=' l c l '; document.write( '1:\n'+test.length+ '<b style="font-size:30px">丨</b>' +'2:\n'+test.charAt(3)+'<b style="font-size:30px">丨</b>' +'3:\n'+ test.indexOf('c')+ '<b style="font-size:30px">丨</b>' +'4:\n'+test.indexOf('c',3)+'<b style="font-size:30px">丨</b>' +'5:\n'+ test.lastIndexOf('c')+ '<b style="font-size:30px">丨</b>' +'6:\n'+test.replace('lcl','wsf')+'<b style="font-size:30px">丨</b>' //*************slice()方法中有两个参数(数组中也有该方法,都是一个意思) //第一个参数代表开始截取的下标:下标从0开始 //第二个参数代表截取到的位置:位置从1开始,截取包含该位置 //slice()中的参数如果是负数,那就是从后往前数,-1,-2,-3... +'7:\n'+test.slice(2)+'<b style="font-size:30px">丨</b>' +'8:\n'+ test.slice(3,5)+'<b style="font-size:30px">丨</b>' +'9:\n'+ test.slice(3,-1)+'<b style="font-size:30px">丨</b><br/>' //********************substring()方法中的两个参数和slice()方法一样 //唯一的区别是substring()中的参数如果是负数,则会返回整个字符串 +'10:\n'+ test.substring(2,4)+'<b style="font-size:30px">丨</b>' +'11:\n' + test.substring(-3)+'<b style="font-size:30px">丨</b>' +'12:\n' + test.toUpperCase()+ '<b style="font-size:30px">丨</b>' +'13:\n'+test.toLowerCase()+ '<b style="font-size:30px">丨</b>' +'14:\n'+ test.concat('asd')+'<b style="font-size:30px">丨</b>' +'15:\n'+ test.match('lcl')+'<b style="font-size:30px">丨</b>' +'16:\n'+test.match('qqq')+'<b style="font-size:30px">丨</b>' +'17:\n'+ test.search('LCL')+'<b style="font-size:30px">丨</b>' +'18:\n' + test.search('asd') ); //*********************************split() var split_test=test.split('_'); // for(i=0;i<split_test.length;i++){ // alert(i+'\n'+split_test[i]); // } console.log(split_test); //*********************************trim() console.log(test1); console.log(test1.trim()); </script>
<!--******范例:封装一个函数,实现首字母大写的转换--> <script> //**********************************第一种方法 var str='the_girl_kissed_the_cat';//TheGirlKissedTheCat function toUpper(){ //******首先我的思路是:先通过分割符,将该字符串分割成数组 var arr=str.split('_'); var arr1=[]; console.log(arr);//分割成功 //******接着我再遍历每个数组值,每个数组值的首字母都调用toUpperCase(), // 再把处理后的数组放置在新数组arr1中 for(var i=0;i<arr.length;i++){ for(var j=0;j<arr[i].length;j++){ if(j==0){ arr1.push(arr[i][0].toUpperCase()); }else{ arr1.push(arr[i][j]); } } } //console.log(arr1);//成功 //********最后再遍历该arr1数组,将每一项打印出来 for(var x=0;x<arr1.length;x++){ document.write(arr1[x]); } } toUpper(str); //************该方法的确能成功实现,但是消耗资源,不够简便 //**********************************第二种方法 var str1='the_girl_kissed_the_cat'; function toUpper2() { var arr2=str1.split('_'); var str2=""; for(var i=0;i<arr2.length;i++){ // console.log(arr2[i][0].toUpperCase());//测试成功 str2+=(arr2[i][0].toUpperCase()+arr2[i].slice(1)); } document.write('<br>'+str2); } toUpper2(str1); </script>
5.正则表达式
正则表达式是对字符串操作的一种逻辑公式,就是用一些事先定义好的一些特定的字符、及这些特东字符的组合,组成一个“规则字符串”,这个规则字符串用来表达对字符串的一种过滤逻辑。
a.创建规则的两种方法:
第一种var reg=/pattern/; 第二种 var reg=new RegExp(‘pattern’);
RegExp对象的常用方法: | |
exec(str) | 检索字符串中的指定的值,返回找到的值,并确定其位置 |
test(str) | 检索字符串中是否满足指定条件的值。返回布尔值 |
<script> var test='hello world!'; var reg=/hea/; var exp=new RegExp('world'); alert(reg.exec(test)); alert(reg.test(test)); alert(exp.exec(test)); alert(exp.test(test)); </script>
名称 | 描述 |
. | 可以匹配任何字符 |
\d | 匹配0-9的任意字符:规则中只要有一个是数字就满足 |
\D | 匹配非数字:规则中只要有一个是非数字就满足 |
\s | 匹配空白字符串,包括:空格、制表符、换行符、回车符等等 |
\S | 匹配非空白字符 |
\w | 匹配单词字符,包括数字0-9、26个字母和下划线 |
\W | 匹配非单词字符:规则中只要有一个是非数字就满足 |
\b | 匹配单词边界 |
\B | 匹配非单词边界 |
[abc] | 查找方括号之间的任意字符:一个字符匹配则所有匹配 |
[^abc] | 查找符合没有方括号之间的字符:都要符合 |
[0-9] | 查找任何从0-9的数字:满足一个既满足 |
[a-z] | 查找任何从a-z的字符 |
[A-Z] | 查找任何从A-Z的字符 |
[A-z] | 查找任何从A-z的字符 |
(red|green|blue) | 查找指定的选项 |
用法：
<script> var test='lcl'; var reg=/\s/; alert(reg.test(test)); </script> <script> var test='lclo'; var reg=/\bo/; alert(reg.test(test)); </script> <script> var test='lclo'; var reg=/o\b/; alert(reg.test(test)); </script> <script> var test='lcl'; var reg=/[^lcl]/; alert(reg.test(test)); </script> <script> var test='lcl'; var reg=/[a-z]/; alert(reg.test(test)); </script> <script> var test='lcl'; var reg=/(c|a|q)/; alert(reg.test(test)); </script>
c.常用的量词
量词名称 | 描述 |
n+、n*、n? | (1~n) 、(0~n)、(0~1) |
n{x} | 匹配包含x个n的序列的字符串:注意aaa才叫序列 |
n{x,y} | 匹配包含x个到y个n的序列的字符串 |
n{x, } | 匹配包含至少x个n的序列的字符串 |
n$、^n | 匹配结尾是n的字符串、匹配开头为n的字符串 |
用法：
<script> var test='lco'; //var reg=/c+/; c //var reg=/oc+/; oc //var reg=/lc+/; lc //var reg=/lcc+/; lcc //********** //var reg=/ac*/; ac a //var reg=/lo*/; lo l // var reg=/clo*/; clo cl //********** //var reg=/o?/; o 没有 //var reg=/col?/; col co alert(reg.test(test)); </script> <!--如果正则表达式是ab*,则匹配成功的文本是ab或a,因为这时候的b是匹配优先的,而b又是可0和可n个的。--> <script> var test='aaaabbcc'; //var reg=/a{2}/; true //var reg=/a{2,4}/; true //var reg=/b{3,}/; false //var reg=/a$/; false //var reg=/^a/; true var reg=/$a/; 会怎么样？ alert(reg.test(test)); </script>
修饰符名称 | 描述 |
i | 执行对大小写不敏感 |
g | 执行全局查找 |
m | 执行多行匹配 |
用法：
<script> var test='asdqwe'; //var reg=/A/i; //var reg=/q/;当q没有全局查找时,alert返回的都是第一个q,是匹配成功的结果 var reg=/q/g; // 当q成为全局查找,alert第一个返回的是true,第二个返回的是false alert(reg.test(test)); alert(reg.test(test)); </script> <script> var test='asd\nqwe'; //var reg=/^q/; false var reg=/^q/m; alert(reg.test(test)); </script> <script> var test='1234@qq.cn'; var reg=/^[0-9A-z]+@(qq|163|sina|)\.(com|cn)$/; alert(reg.test(test)); </script>
三.常用的运算符
1.数组定义
javascript中的数组定义有三种方法:
<script> var arr1=[1,'lcl',true];//第1种:定义时直接给数组赋值 document.write(arr1.length+'<br>'); for(var i=0;i<arr1.length;i++){ document.write(arr1[i]+'<br>'); } /*************************************/ var arr3=[];//第2种:定义一个空数组 var arr3=new Array();//第3种:定义一个空数组并通过索引来赋值 arr3[0]=1; arr3[1]='lcl'; arr3[2]=true; document.write(arr3[0]+'\n'); document.write(arr3[1]+'\n'); document.write(arr3[3]+'\n'); </script>
javascript中的数组特点是:数组的总长度是可变的,总长度=数组最大索引+1；同一数组中的数据类型可以互相不同(区别与java)；当访问为赋值的数组数据时,该元素的值是undefined,不会数组越界。
2.常用的运算符
运算符名称 | 描述 |
算术运算符 | +、-、*、/、% |
赋值运算符 | =、+=、-=、*=、/=、%= |
比较运算符 | >、<、>=、<=、==等于、===恒等于、!=不等、!==恒不等于 |
注意:比较运算符返回的是布尔值 | |
一元运算符(一目运算符) | i++(先赋值再+1)、++i、i--(先赋值再-1)、--i |
二元运算符(逻辑运算符) | &&与、||或、!非 |
注意:逻辑运算符返回的是布尔值 | |
位运算符 | &与、|或、^异或、~否定、<<左移运算、>>有符号右移运算、>>>无符号右移运算 |
其他运算符 | 三目运算符(?:)、逗号运算符、void运算符、typeof、instanceof |
| |
<body> <script> //******************************比较运算符 var num1=12,str1='12'; document.write((num1==str1)+'<br>');//true //因为javascript是弱脚本语言,所有在等于==的时候是可以比较的,但是在恒等于===就不能了 //在恒等于===的时候不仅仅要求值相等,还的要求其二者数据类型也相等 document.write((num1===str1)+'<br>');//false document.write((num1!=str1)+'\n'+(num1!==str1));//false true //!=不等 !==恒不等同理 </script> </body> <body> <script> //**************************一元运算符 //**************i++ var num1=2; var num=num1++;//首先num=num1 然后num1+1 alert(num+'\n'+num1);//num=2 num1=3 //num++ 先赋值再+1 所有他先赋值给了num再自加1 //****************++i var num1=2; var num=++num1;//首先num1+1 然后num=num1 alert(num+'\n'+num1);//num=3 num1=3 //++num1 先+1再赋值 所有他先自加1再赋值给了num //但是？为什么在遍历的时候,i++和++i都成立？？ var arr=[1,2,3,4,5]; for(var i=0;i<arr.length;++i){ alert(arr[i]+'\n'); } </script> </body> <body> <script> //**************************位运算符 var num1=25,num2=3; // alert(num1.toString(2)+'\n'+num2.toString(2));//11001 11 // num1=num1.toString(2),num2=num2.toString(2); alert(num1&num2);//1 alert(num1|num2);//27 alert(num1^num2);//26 alert(~num1);//-26//否定的含义:实质上就是取负数再-1 //*****************<<左移动运算符 alert((num1<<1).toString(2));//50 //<<表示左移动运算符,向左移空缺的位置以0补全,则11001向左移=》110010,110010就是50 //*****************>>有符号右移动运算符 alert(num1>>1+'\n'+(num1>>1).toString(2));//25??? 12+1+12 alert(Number('\n'));//0 alert((num1>>1)+'\n'+(num1>>1).toString(2));//12 1100 //正数则11001向右移=》01100,那就是12 var num3=-25;//求一个负数的二进制是原码取反+1 alert((num3>>1)+'\n'+(num3>>1).toString(2));//-13 -1101 //对于有符号的右移动运算符,我们要考虑他的作用数值如果是正数,则正常右移动,空缺用0补全 //但如果是负数,则先将负数转化成二进制数,再对其进行右移动,空缺部分用1补全 //*****************>>>无符号右移动运算符 //无符号右移动运算,对于正数,与有符号右移动运算一样。对于负数,无符号右移动用0填充所有空位, //由于无符号右移动运算的结果是一个32位的正数,所以负数得到的是一个非常大的数字 var num4=-12; document.write((num4>>>1)+'<br>'+(num4>>>1).toString(2)); </script> </body>
逗号运算符:只会返回表达式中最右边的值。
var a,b,c,d; a=(b=2,c=3,d=4); document.write(a);//a=4
void运算符:强行指定表达式不会返回任何值。
var a,b,c,d; a=void(b=2,c=3,d=4); document.write(a);//Undefined
typeof:用于判断某个变量的数据类型。可以当函数使用typeof()、也可以当数据类型来使用。
var a='lcl'; document.write(typeof a+'<br>'); document.write(typeof(a));//string string
instanceof:用于判断某个变量是否是指定的数据类型。
var a=[1,'lcl']; document.write(a instanceof Array); document.write(a instanceof Object); //注意在javascript中所有的对象都是Object的一个实例,由于javascript中没有继承的概念 //所以所有的对象只有一个父类,就是Object。所以对象都是平级的。
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
