JavaScript学习资料二

来源:互联网 发布:淘宝情侣装店铺排名 编辑:程序博客网 时间:2024/06/06 01:39
1.类型转换
1) 其他数据类型到Boolean类型转换
通过Boolean() 函数转换
  【Boolean  true    false】
String 非空字符串 ""
Number 任何非0 0和NaN
Object 任何对象 null
Undefined n/a undefined (n/a not applicable 不适用)
例如:
Boolean(""); //false
Boolean(0); //false
Boolean(NaN); //false
Boolean(null) //false
Boolean(undefined)//false
Boolean("briup");//true
Boolean(1); //true


2) 其他数据类型到数值类型转换
1.Number()函数
1) 如果转换的值是null,undefined,boolean,number
Number(true); //1
Number(false);//0
Number(null); //0
Number(undefined);//NaN
Number(10); //10 如果是数字值,原样输出

2) 如果是字符串:
Number("123");  //如果仅包含数值,转换为对应的数值
Number("234.1");//解析为对应的小数
Number("+12.1");//首位为符号位,其余为为数值,转换为对应的数值
Number("1+2.3");//NaN 符号位出现在其他位置,解析为NaN
Number("0xa");  //如果仅包含十六进制格式,转为为对应的十进制的值
Number("010");//【注意!】不会当做八进制被解析,结果为10
Number(""); //空字符串被转换为0
Number("123ac");//包含其他字符: NaN
Number(" 12");//12

2.parseInt()函数
1) 如果转换的值是null,undefined,boolean,number
parseInt(true);//NaN
parseInt(false);//NaN
parseInt(null);//NaN
parseInt(undefined);//NaN
parseInt(10); //10 如果是整数值,原样输出
parseInt(10.3);//10 如果是小数,舍去小数点一级后面的内容
2) 如果是字符串:
parseInt("123");  //123;如果仅包含数值,转换为对应的数值
parseInt("234.1");//234;小数点后面的数值省略
parseInt("+12.1");//12; 首位为符号位,其余为为数值,转换为整数
parseInt("0xa");  //10; 如果仅包含十六进制格式,转为为对应的十进制的值
parseInt("010");  //10; 【注意!】不会当做八进制被解析,结果为10
parseInt("");  //NaN;空字符串被转换为NaN
parseInt("1+2.3");//1;如果首位为数值,依次向后解析,找到连续的数值,直到遇到第一个非数值的,将之前获取的数值转换为Number返回
parseInt("123abc");//123;


        3.parseFloat()函数
与parseInt() 类似,但是也有不同: 
1.字符串中的第一个小数点是有效的,而第二个小数点则无效其后的内容会被省略
2.始终忽略前导0
parseFloat("22.3.4")//22.3
parseFloat("022.34");//22.34
3.不能解析0x


3) 其他数据类型到字符串类型转换
1. toString()函数
默认情况下,toString()是以十进制格式返回【数值】的字符串表示,通过传递参数,可以输入以二进制,八进制,十六进制乃至任意有效进制格式的字符串值
var num = 10;
num.toString();"10"
num.toString(2);"1010"
num.toString(8);"12"
num.toString(16);"a"
但是null ,undefined 没有toString() 方法
      null.toString()//报错 TypeError: null has no properties 
        undefined.toString();//报错 TypeError: undefined has no properties


2.javascript中的三种弹框:
alert  confirm  prompt

alert    提示框/警告框
confirm  确认框
prompt 输入对话框


这三个方法都是window这个对象的方法.window是JS中的一个内置对象,只有window对象的方法,调用的时候才可以省去对象的名字,直接用方法名字来调用.window.alert("hello")和alert("hello")是一样的效果.

这三种弹框都有一个共同的特点,当浏览器运行一个弹框代码的时候,用户如果不点击弹框中的确定或者取消按钮的话,浏览器就会卡这个弹框处,下面的页面代码就不会被执行.

alert弹出一个警告框/提示框,用户点击确定按钮之后就可以继续访问。

confirm弹出一个确认框,用户可以点击确定或者取消,这个confirm方法会相应的返回true或者false.

prompt弹出一个可以让用户输入的框口,用户输入后点击确定,这个方法会把用户输入的内容返回.
prompt("请输入你的性别:");
同时还可以在输入框设置一个默认值.
prompt("请输入你的性别:","男");




3.String、Date、Math对象

     1.字符串对象
length
属性,获取字符串的字符数量

charAt(i)
返回给定位置的字符
charCodeAt()
返回给定位置的字符的字符编码
var s = "helloworld";
s.charAt(1);   //e
s.charCodeAt(1); //101
concat()
将一个或多个字符串拼接起来,返回拼接得到的新字符串,但是大多使用"+"拼接
slice()
(参数1:开始位置,参数2:返回字符后一个字符位置)
substr()
(参数1:开始位置,参数2:返回字符个数)
substring()
(参数1:开始位置,参数2:返回字符后一个字符位置)
var s = "helloworld";
s.slice(3,7); //lowo
s.substr(3,7);//loworld
s.substring(3,7);//lowo
s //helloworld 不改变原值大小
indexOf();
从前往后查找指定字符所在位置
lastIndexOf();
从后往前查找字符串所在位置,可以有第二个参数,代表从字符串中哪个位置开始查找。
trim();
删除前置以及后置中的所有空格,返回结果
var s = " hello world ";
console.log("|"+s.trim()+"|");//|hello world|
split()
分割字符串 返回一个数组
var s = "hello world";
console.log(s.split(" "));
console.log(s.split(" ").length);
console.log(s.split(" ")[0]);
console.log(s.split(" ")[1]);
toLowerCase() :转换为小写
toUpperCase() :转换为大写

2.日期对象
var date = new Date();
console.log(date);

//获得当前年份-1900
console.log(date.getYear());
//获得当前年份
console.log(date.getFullYear());
//获得当前月份-1
console.log(date.getMonth());
//获得当前是一个月中的哪一号
console.log(date.getDate());
//获得星期几
console.log(date.getDay());
//获得时间中的 时 (24)
console.log(date.getHours());
//获得时间中的 分 
console.log(date.getMinutes());
//获得时间中的 秒 
console.log(date.getSeconds());
//获得时间中的 毫秒 
console.log(date.getMilliseconds());
//获得时间戳
console.log(date.getTime());

parse()函数
解析一个日期时间字符串,返回1970-01-01 0时0分0秒 到给定日期之间的毫秒数
var date = "2016-12-19";
        console.log(Date.parse(date));

toLocaleDateString()函数
toLocaleString()函数
toLocaleTimeString()函数
toString()函数
toTimeString()函数
例如:
var date = new Date(); 
console.log(date.toLocaleDateString());
console.log(date.toLocaleString());
console.log(date.toLocaleTimeString());
console.log(date.toString());
console.log(date.toTimeString());


3.Math对象
1.比较方法
Math.min() 求一组数中的最小值
Math.max() 求一组数中的最大值
Math.min(1,2,19,8,6);//1
2.将小数值舍入为整数的几个方法:
Math.ceil()  向上舍入
Math.floor() 向下舍入
Math.round() 四舍五入
console.log(Math.ceil(12.41));//13
console.log(Math.floor(12.41));//12
console.log(Math.round(12.3));//12
console.log(Math.round(12.5));//13
3.随机数
Math.random() 返回大于0小于1的一个随机数[0,1)
//获得一个随机数 [23,36]
console.log(parseInt(Math.random()*14+23));

4.常量
//获得常量π
console.log(Math.PI);
//获得常量e
console.log(Math.E);

5.其他方法:(了解即可,即用即查)
abs(num) 返回num绝对值
exp(num) 返回Math.E的num次幂
log(num) 返回num的自然对数
pow(num,power)返回num的power次幂
sqrt(num) 返回num的平方根
scos(x) 返回x的反余弦值
asin(x) 返回x的反正弦值
atan(x) 返回x的反正切值
atan2(y,x) 返回y/x的反正切值
cos(x) 返回x的余弦值
sin(x) 返回x的正弦值
tan(x) 返回x的正切值


4.操作符
1) 一元操作符
++,--,+,-操作,先将任意类型的值转换为Number然后进行运算(通过Number()方法进行转换)
1.递增 ++  
var a = "11";
1+a++;
1+ ++a;
前置:操作该变量之前进行递增或者递减操作
后置:操作该变量之后进行递增或者递减操作
2.递减 --
前置:操作该变量之前进行递增或者递减操作
后置:操作该变量之后进行递增或者递减操作
3.加 +
4.减 -


2) 布尔操作符, 非(NOT)
逻辑非 !
先将任意类型的数值转换为Boolean,然后取反.
!a ==> !Boolean(a)

!0 //true
!"" //true
!NaN //true
!false //true

     3) 逻辑与 &&
可应用于任意数值。如果有一个操作数不是布尔类型,逻辑与就不一定返回boolean类型

对于 x && y 来说
1.如果第一个操作数是 
null,NaN,undefined,false,0,""这些可被转换为false的值的时候则返回第一个值(x)
例如:
var s1 = null;
var s2 = "briup";
console.log(s1 && s2);//返回null
2.如果第一个操作数其他,则返回第二个数(y)
var s1 = 8;
var s2 = "briup";
var s3 = "";
var result = s1 && s2; //briup
var result2 = s3 && s2;//空字符串


     4) 逻辑或 ||


     5) 加减操作符
1. 加法 +
m + n
1) 当m,n不为String类型的时候,先将m,n转换为Number类型,然后再进行计算
true + false;  //1;Number(true)+Number(false);
true + 1;  //2;Number(true) + 1
null + undefined; //NaN;Number(undefined) -> NaN
2) 当m,n有一个为String,无论另一个操作数为何(但不为对象)都要转换为String,然后再进行拼接
"1" + true; // 1true
"1" + undefined;// 1undefined
"1" + 1; // 11

2. 减法 -
m - n
无论操作数为任何类型,先将其使用Number()转换器转换为Number类型,然后再计算。
true - 1; //0; 1-1
null - true; //-1 ; 0-1
1 - undefined //NaN

 
6) 乘除操作符
当操作数为非数值的时候执行自动的类型转化Number()
1. 乘法 *
如果两个数都是数值,执行常规的乘法计算
如果一个操作数是NaN,结果为NaN
超过数值范围返回Infinity
如果有一个操作数不是数值,则先调用Number()将其转换为数值。
2. 除法 /
如果一个操作数是NaN,结果为NaN (0/0 ; NaN)
一个非0值除0 结果为Infinity   
如果有一个操作数不是数值,则先调用Number()将其转换为数值。
var s1 = 5;
var s2 = 2;
var result = s1/s2;  //2.5
3. 取余 %
如果两个数都是数值,执行常规的取余计算
如果一个操作数是NaN,结果为NaN(任意数%0 ; NaN)
如果有一个操作数不是数值,则先调用Number()将其转换为数值。


7) 关系操作符
< > <= >=  ,返回一个【Boolean】值
1.如果两个操作数是字符串,比较字符串中对应位置的每个字符的字符编码值
"a">"b" //false
"1">"a" //false
2.如果一个操作数是数值,将另外一个操作数也转换为数值进行比较
"3">1; //true
3>true; //true 3>Number(true)
3>undefined; //false Number(undefined)=NaN ;任何数和NaN比较结果都为false

     8) 相等操作符,返回【Boolean】
1.相等和不相等 ==, != (先转换在比较)
1.如果两个操作数都为字符串,比较字符序列
2.如果两个操作数都为数值类型,比较值的是否相等
3.如果两个操作数都是对象,比较的对象的引用
4)null == undefined//true
5)NaN与任何值(包括NaN)使用相等 比较结果为false,使用不等 比较结果为true.
6)如果一个操作数为number类型,另外一个操作数为undefined,null,boolean,string之一,先将这些数据类型转换为数值,再进行比较


2.全等比较(恒等于)
仅比较不转换,先比较两个数所属的数据类型,如果类型不同则不同,如果类型相同,再继续比较两个数的值
console.log("55" == 55); true
console.log("55" === 55);false
null == undifined;//true null派生自undifined
null === undifined;//false


     9) 三目运算符 ? : 
variable = boolean_expression ? true_value : false_value;
如果boolean_expression为true,将true_value赋给variable,否则将false_value赋给variable
   
例如:求任意两个数之间最大值
      function max(m,n){
return m>n?m:n;//如果m>n为true返回m,如果m>n为false,返回n
      }


    10) 赋值运算符 = 
        将右侧的值赋给左侧的变量
        可以和其他算术运算符连用 *= /= %= += -= 


    11) 逗号操作符
       可以在一条语句中执行多个操作
       var num1 = 1, num2 = 2, num3 = 3;


5.流程控制语句
     1) if语句
if(condition){
statement1
}else{
statement2
}
condition表示任意表达式,该表达式求值的结果不一定是布尔类型,如果不是布尔类型,ECMAScript会调用Boolean() 转换函数将这个表达式结果转换为一个布尔类型,如果condition求值结果为true,执行statement1。如果求值结果为false,执行statement2

var a = "hello";
if(a!=null){
//...
}
或者直接写
if(a){
//  
}


     2) switch语句
switch(expression){
case val:


break;
case val2:


break;
default:
}

等价于

switch(expression){
case val:{


break;
}
case val2:{
break;
}
default:
}


      可以在switch语句中使用任何数据类型。


 例如:
var day = new Date().getDay();
var x = "";
switch (day){
case 0:
 x="Today it's Sunday";
 break;
case 1:
 x="Today it's Monday";
 break;
case 2:
 x="Today it's Tuesday";
 break;
case 3:
 x="Today it's Wednesday";
 break;
case 4:
 x="Today it's Thursday";
 break;
case 5:
 x="Today it's Friday";
 break;
case 6:
 x="Today it's Saturday";
 break;
default:
 x="error!!!";



     3) 循环语句
   for语句
for循环是一种前测试循环语句,但它具有在执行循环之前初始化变量和定义循环后要执行的代码的能力。以下是for循环的语法:
        初始化表达式,控制表达式,循环后表达式
for(initialization;expression;post-loop-expression){
//loop option
}
例如:
var sum = 0;
for(var i=0;i<10;i++){
sum +=i;
}
console.log(i); //10  


ECMAScript不存在块级作用域,在循环内部定义的变量也可以在外部访问到,但是在函数内部定义的局部变量,在函数外部是不能访问的


----------
死循环
for(;;){
//当for中的表达式省略的时候,会创建一个死循环
}
while(true){

}



----------
   do-while语句  
do{

}while(condition); 
后测试循环语句,即只有在循环体中的代码执行之后,才会测试出口条件。循环体内的代码最少被执行一次。

----------
   while语句
while(condition){

}
前测试循环语句,即在循环体内的代码被执行之前,就会对出口条件求值。因此,循环体内的代码有可能永远不会被执行。
while(false){
//
}



----------
        for-in 语句
是一种精准的迭代语句,可以用来枚举对象的属性

for(property in expression){
statement
}
例如:
打印出window对象中所有的属性
for(var propName in window){
console.log(propName+":"+window[propName]);
}

var person = new Object();
person.name = "tom";
person.age = 20;
person.sayHello=function(){....}
或者简写为:
var person = {
name:"tom",
age:20,
sayHello:function(){
alert("hello world");
}
};
console.log(person.name);
console.log(person.age);
person.sayHello();
for(var key in person){
console.log(key+" - "+person[key]);
}


----------
label 语句
使用label可以在代码中添加标签,以便将来使用
label : for(int i=0;i<10;i++){
if(i == 5){
break label;
}
}
循环关键字
  break 跳出循环体
  continue 结束本次循环,进行下一次循环


4) 特殊语句
with语句
主要作用是将代码的作用域设置在一个特定的对象中,定义with语句的主要目的是为了简化多次访问同一个对象的工作,但是大量使用with语句会导致性能下降,并且难以维护,所以不建议使用。
例如:
var person = {
name:'briup',
age:12,
gender:'男'
}
要想访问person对象中的属性需要:
console.log(person.name);
console.log(person.age);
console.log(person.gender);
但是还可以通过with语句来实现
with(person){
console.log(name);
console.log(age);
console.log(gender);
}




6.javascript中的函数
函数实际上是对象,每个函数都是Function类型的实例,函数名实际上是指向函数对象的指针。
    1) 表示方法:
1.函数声明
function sum(a,b){
return a+b;
        }
2.函数表达式
var sum = function(a,b){
return a+b;
        }
解析器在向执行环境中加载数据时,会率先读取函数声明,并使其在执行任何代码之前可用;当执行器执行到函数表达式的代码的时候才会真正的解释执行
2) 函数的参数
ECMAScript函数的参数与大多数其他语言中的函数的参数有所不同,ECMAScript函数不介意传递参数的个数以及参数类型,这是因为函数的参数在函数内部是使用一个数组对象来表示的。这个数组对象就是arguments
例如:
function test(){
for (i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
test(15,"hello");


3) 函数的调用
在JS中,函数没有重载的概念,两个函数的函数名相同即是同样一个函数,但是Java中不是,java中判断方法是否是同一个是看方法名和参数列表

js中函数可以先调用后定义
例如:
<script type="text/javascript">
test();
function test(){
alert("hello world");
}
test();
</script>

4) 函数对象
javascript中的函数也是对象,它是Function类型的对象,用java中的概念理解就是,javascript中的每个函数都是Function类型的实例,就像java中的每个方法都是Method类的实例一样。


5) 匿名函数
//定义一个函数test,其参数需要接收另一个函数,注意js中的函数也是对象,就是这个Function类型的对象,函数对象也有自己的方法和属性,其中call就是Function类型中的一个方法,所有的函数对象就可以调用这个call方法来让自己本身执行(类似java中的反射)
function test(f){
//表示f这个函数要执行,执行f函数的对象是null,参数是"briup"
//执行f函数的对象设置为null的话会默认变成window对象
f.call(null,"briup");


//同时,javascript中还支持如下直接调用
//f("briup");
}

//调用test函数,并把一个匿名函数对象作为参数传给test
test(function(name){
console.log("hello! "+name);
});



原创粉丝点击