03_JavaScript_day2
2021-11-15 本文已影响0人
Du1in9
![](https://img.haomeiwen.com/i21107801/93d326ac407996de.png)
五、数据类型转换
5.1 转换成字符型
使用字符串方法 toString() 转换,但是null和undefined无法转换。
使用顶层函数 String() 可以将任何数据类型转换成字符串,包括null和undefined。
隐式转换:在其他数据类型和字符串类型进行连接操作时,会自动对其他数据类型使用String()强制转换成字符串,然后再相加。
<script>
var a=123, b=3.14, c,d=null, e=true;
var f=['手机','电脑'], g={name:'刘备',job:'卖草鞋'};
console.log(a.toString()) //123
console.log(b.toString()) //3.14
// console.log(c.toString()) //报错
// console.log(d.toString()) //报错
console.log(e.toString()) //true
console.log(f.toString()) //手机,电脑
console.log(g.toString()) //[object Object]
console.log(String(a)) //123
console.log(String(b)) //3.14
console.log(String(c)) //undefined
console.log(String(d)) //null
console.log(String(e)) //true
console.log(String(f)) //手机,电脑
console.log(String(g)) //[object Object]
console.log(a+' hello') //123 hello
console.log(b+' hello') //3.14 hello
console.log(c+' hello') //undefined hello
console.log(d+' hello') //null hello
console.log(e+' hello') //true hello
console.log(f+' hello') //手机,电脑 hello
console.log(g+' hello') //[object Object] hello
// 第一个object 表示是哪种数据类型,第二个Object表示是哪种类型的对象
console.log(String(Math)) //[object Math]
console.log(String(document)) //[object HTMLDocument]
</script>
![](https://img.haomeiwen.com/i21107801/9b67c00d3bd3b395.png)
5.2 转换成数值型
① parselnt() --转换成整型
parselnt() 方法首先查看位置0处的字符,判断它是否是个有效数字:如果不是,将返回 NaN,不再继续执行其他操作。如果是,将查看位置1处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时 parselnt() 将把该字符之前的字符串转换成数字。
② parseFloat() --转换成浮点型
道理和转换成整型一样,只不过浮点型允许有一个小数点出现。
③ Number() --强制转换
强制类型转换与前两种方法的处理方式相似,只是它转换的是整个值,而不是部分值。
![](https://img.haomeiwen.com/i21107801/6b9448a942b82970.png)
<script>
var a=123;
console.log(parseInt('35')); //35
console.log(parseInt('abc123')); //NaN
console.log(parseInt('12345abc')); //12345
console.log(parseInt('123abc456')); //123
console.log(parseInt(a+'456')); //123456
console.log(parseInt('12.54')); //12
console.log(parseFloat('35')); //35
console.log(parseFloat('abc123')); //NaN
console.log(parseFloat('12345abc')); //12345
console.log(parseFloat('123abc456')); //123
console.log(parseFloat(a+'456')); //123456
console.log(parseFloat('12.54')); //12.54
console.log(parseFloat('12.53.153')); //12.53
console.log(Number('35')); //35
console.log(Number('abc123')); //NaN
console.log(Number('12345abc')); //NaN
console.log(Number('123abc456')); //NaN
console.log(Number(a+'456')); //123456
console.log(Number('12.54')); //12.54
console.log(Number('12.53.153')); //NaN
</script>
![](https://img.haomeiwen.com/i21107801/42874ffa99f4af88.png)
5.3 转换成布尔型
显示的转换是使用 Boolean() 函数,对需要转换的内容进行转换。
以下内容在转换成布尔值时会被转换成false:
数值型的 0,布尔型的 false,空字符串 "",非数字 NaN,undefined,null。
除此以外,其他所有值都会转换成true,包括“0”、空数组 []、空对象 {}。
六、流程控制
6.1 顺序结构
顺序结构体现了代码从上到下依次执行。但是在JS中,要注意有两点能够打破顺序结构:一点是变量提升,另一点是函数预加载。
<script>
console.log(a); //undefined
var a=1;
// 变量提升,上面的两行代码和下面三行代码执行结果和道理一样
// var a;
// console.log(a);
// var a=1;
b(); //123
function b(){
console.log(123);
}
//函数可以先调用,再声明,这就是函数预加载,预加载是有条件的:
//条件1:函数声明方式必须是常规的方式,条件2:函数的声明和调用在同一个script段中
</script>
6.2 分支结构
if...else if... else
if...else...
switch...case...
<script>
var week=new Date().getDay(); //获取一个数据类型的星期
console.log(week); //6
var week_zn_cn; //中文格式的星期
switch(week){
case 1:
week_zn_cn='星期一';
break;
case 2:
week_zn_cn='星期二';
break;
case 3:
week_zn_cn='星期三';
break;
case 4:
week_zn_cn='星期四';
break;
case 5:
week_zn_cn='星期五';
break;
case 6:
week_zn_cn='星期六';
break;
case 7:
week_zn_cn='星期日';
break;
default:
console.log('格式错误');
break;
}
console.log('今天是'+week_zn_cn); //今天是星期六
</script>
6.3 循环结构
<script>
var a=1;
while(a<=6){
console.log('hello '+a);
a++;
}
var b=1;
do{
console.log('hello '+b);
b++;
}while(b<=6)
var i=0;
for( ;i<=6; ){
console.log('hi '+i);
i++;
}
var arr=['张飞','关羽','刘备','杨玉环','马超','黄忠'];
for(var c in arr){
console.log('halo '+c+' '+arr[c]);
}
var obj={name:'林冲',age:40,nickname:'豹子头'};
for(var d in obj){
console.log('halo '+d+' '+obj[d]);
}
</script>
![](https://img.haomeiwen.com/i21107801/469e71b5519fa0cf.png)
6.4 continue 和 break
<script>
test: for(var i=0;i<=8;i++){
if(i%2==0)
continue test;
test2: for(var j=0;j<=30;j++){
if(j-i==1)
break test2;
console.log('i:'+i+' j:'+j);
}
}
</script>
![](https://img.haomeiwen.com/i21107801/5915614c001cf066.png)
七、函数
<script>
// 定义与调用
function sum(x){
var s=0;
for(var i=0;i<=x;i++)
s+=i;
return s;
}
console.log(sum(100)); //5050
// 函数表达式
var a=sum;
console.log(a(100)); //5050
var b=function(x){
console.log('今天是周'+x);
}
b('三'); //今天是周三
// 函数预加载
c();
function c(){
console.log(12345); //12345
}
// 立即调用模式
~function (){
console.log(12345); //12345
}();
!function (){
console.log(12345); //12345
}();
-function (){
console.log(12345); //12345
}();
+function (){
console.log(12345); //12345
}();
(function (x,y){
console.log(x*y); //150
})(3,50)
// 形参:定义函数时,约定的参数。
// 实参:调用函数时,传递给函数的实际值。
// JS函数参数传递非常灵活,形参和实参个数可以不一样。
function t(x,y){
console.log(123+x+y);
}
t(); //NaN
t(1,2,3,5,7); //126
function m(x,y){
if(y==undefined)
y=15;
console.log(x+y);
}
m(1,10); //11
m(3); //18
</script>
![](https://img.haomeiwen.com/i21107801/1d81e90491eac5bd.png)
八、作用域
<script>
var a=10;
function m(){
//函数内部可以使用外部定义的变量
console.log('hello '+a);
}
m(); //hello 10
function m2(){
var a=20;
//函数内部优先使用内部定义的变量
console.log('hello '+a);
}
m2(); //hello 20
function m3(){
console.log('hello '+a);
var a=20;
}
m3(); //hello undefined
//函数内部没有用var声明的变量是全局变量
function m4(){
// var a=15; //局部变量
a=30; //全局变量
}
m4();
console.log('hello '+a) //hello 30
//小练习:
var b=10;
function f1(){
b=20;
function f2(){
var b=30;
console.log('hello '+b);
}
f2();
}
f1(); //hello 30
</script>
![](https://img.haomeiwen.com/i21107801/1866bd36152f4c81.png)
九、标准库(内置对象)
这里强烈安利一下 W3school 的语法手册:
![](https://img.haomeiwen.com/i21107801/e562cd3f6f50342d.png)
9.1 Math 对象:数学对象
![](https://img.haomeiwen.com/i21107801/847d1c4e27f2b6de.png)
<script>
console.log(Math.PI);
console.log(Math.ceil(3.14));
console.log(Math.floor(6.7));
console.log(Math.round(4.3));
console.log(Math.random());
//随机整数公式:Math.floor(i+Math.random()*(j-i+1)),范围[i,j]
console.log(Math.floor(2+Math.random()*9)); //随机生成2~10
</script>
9.2 Date 对象:时间日期对象
![](https://img.haomeiwen.com/i21107801/e524b8ff2c1165d6.png)
![](https://img.haomeiwen.com/i21107801/102ee2622feeec67.png)
<script>
var d=new Date(); //实例化Date对象
var year=d.getFullYear(); //获取四位数的年份
var month=d.getMonth()+1; //获取月份(0~11)
var day=d.getDate(); //获取日期
var hour=d.getHours(); //获取小时
var minute=d.getMinutes(); //获取分钟
var second=d.getSeconds(); //获取秒数
console.log(year+'年 '+month+'月 '+day+'日 '+hour+'时 '+minute+'分 '+second+'秒');
//2021年 11月 15日 20时 39分 51秒
</script>
9.3 String对象:字符串对象
![](https://img.haomeiwen.com/i21107801/e80aac2c96cbe1a4.png)
<script>
//用法一
var s=new String('hello world');
console.log(s.length); //11
console.log(s.indexOf('l')); //2
console.log(s.indexOf('a')); //-1
//用法二
console.log('hello_world!'.indexOf('r')); //8
console.log('abcdefg'.substr(4,2)); //ef
</script>
![](https://img.haomeiwen.com/i21107801/9b08ed3adfa3879b.png)
9.4 Array对象:数组对象
![](https://img.haomeiwen.com/i21107801/84516c1cdcde442a.png)
<script>
var arr=new Array('apple','pear');
arr.push('banana');
console.log(arr);
var length=arr.push('potato','peach');
console.log(length,arr);
var fruit=arr.pop();
console.log(fruit,arr);
</script>
![](https://img.haomeiwen.com/i21107801/f7f6b9d318bf4270.png)