javascript-进阶(1)

if语句

if语句流程图

if 在语句在执行时,会先对条件表达式进行求值判断,如果条件表达式为true,则执行if后的语句;如果表达式的值为false,则不执行if后的语句
if 通常搭配 {} 使用,表示如果条件表达式为true,则执行一个代码块
if 也可以搭配&&(与)、||(或)使用

基础

1
2
3
4
5
6
7
8
语法格式:if(条件表达式) {语句一;语句...}


var a = 20;
if(a > 20 || a == 20 )
{
alert("我出来了!")
}

进阶使用

if 在语句在执行时,会先对条件表达式进行求值判断,如果条件表达式为true,则执行if后的语句;如果表达式的值为false,则执行else后的语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
语法格式:
if{(条件表达式) {语句一;语句...}
else{语句一;语句...}


var age = 16;
if( age > 18 )
{
alert("我成年啦");
}
else
{
alert("我还是个孩子");
}

高级使用

当该语句执行时,会从上到下依次对表达式进行求值判断,如果值为true,执行当前语句;如果值为false,则会继续向下判断

1
2
3
4
5
语法格式:
if{(条件表达式) {语句一;语句...}
else if {语句一;语句...}
else if { 语句一;语句...}

这个懒得放图了,请自行(想象)尝试

练习题

练习题一:

1
2
3
4
5
6
7
8

从键盘输入小明的期末成绩:
当成绩为100时,奖励"3090ti显卡以及1台8848钛金手机";
当成绩为[80-99]时,奖励"一台ipone100pro mate max plus";
当成绩为[60-80]时,奖励"一根棒棒糖"
当成绩为[0-60]时,奖励"父母混合双打"
提示:
prompt()可以弹出一个可输入文本内容的提示框,用户可以在该函数括号内输入一串字符串作为提示框的提示文字

——选自@bilibili尚硅谷

练习题二:

1
2
3
4
大家都知道,男大当婚,女大当嫁。那么女方家长要嫁女儿,当然也提出了3个条件:1.高:身高180cm以上;富:1000万以上;帅:500以上

如果如果三个条件为真的情况,则:'嫁吧,比上不足,比下有余'
如果三个条件都不满足,则:不嫁

——选自@bilibili尚硅谷

后记

因为后面的switch语句、for和while循环等,语法与其他语言类似,我先直接跳过

对象

简介

对象是一种复合的数据类型,在对象中可以保存多个不同的数据类型。说简单点就是:对象是将各个不同的、独立的数据类型组合、关联起来

1
2
3
4
5
6
7
8
对象的分类
1.内建对象
- MathStringNumberBooleanFunctionObject已由ES标准定义好了的对象类型
2.宿主对象
- 由js的运行环境提供的对象,目前主要指浏览器提供的对象
- 比如 BOM DOM
3.自定义对象
- 由开发人员自己定义的对象

对象的基本操作

1
2
3
4
5
6
7
8
9
10
11
12
13

var a = new Object(); //初始化一个对象: var 对象名 = new Object();

a.name = "嘟嘟大魔王"; //新增对象对应属性值: 对象名.属性名 = "属性值";
a.attck = "200"; //新增对象对应属性值: 对象名.属性名 = "属性值";

a.attck = "100"; //修改对象内的值,本质是覆盖 //对象名.属性名 = "新属性值";

console.log(a.name) //将对象内的值表现出来
console.log(a.attck)

delete a.name; //删除对象内的属性值:delete 对象名.属性值;

对象的属性名和属性值

对象的本质是一个字典
对象的属性名不强制要求遵守标识符规范,保留字什么的都可以取,但我们应该遵循其规范
对象可以嵌套(套娃)

  1. JS的属性值可以是任意数据类型,也可以是一个对象
    1
    2
    3
    4
    5
    6
    1.
    var a = new Object();
    var b = new Object();
    a.object = b;
    console.log(a.object);

  2. 如果要使用特殊一点的属性名,比如数字123什么的,不能用”对象.属性名 = 属性值”的方式操作,要用”对象[‘属性名’] = 属性值”的方式操作,取的时候也是这种格式
1
2
3
4
2.
var a = Object();
a[12345] = 314134;
console.log(a[12345])


3. 使用对象”[‘属性名’] = 属性值”取操作属性,更加的灵活,在[]中可以传递一个变量,这样那个变量是多少,就会读取对象的那个属性的值

1
2
3
4
5
3.
var a = Object();
a[12345] = 12346457;
b = 12345;
console.log(a[b])

基本数据类型和引用数据类型

基本数据类型

js中的的变量都是存储在栈里面的,基本数据类型都是的变量和值都是只存储在栈里面,互不相关,修改一个变量值并不会影响到其他变量的值

引用数据类型

对象则是存储在堆内存中的,每当我们New Object创建一个对象的时候,就会在堆内存里开辟一片空间,而变量保存的是对象的内存地址(对象的引用)
如果两个变量保持的是同一个对象的引用,当一个变量修改属性时,另一个也会收到影响

拓展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//基本数据类型间的比较
var a = 123;
var b = 123;
console.log(a == b)

//分割线

//引用数据类型中的比较
var c = new Object();
var d = new Object();
c.name = '孙悟空';
d.name = c.name;
e = c; //将c赋给e,两个变量指向的内存地址一样
console.log("c = " + c.name);
console.log("d = " + d.name);
console.log(c == d)
console.log(e == c)

总结:基本数据类型之间的比较是比较它们的值,值相同则相等;引用数据类型间的比较是比较两边的内存地址,就算两个变量的值相同也不相等

对象字面量

创建对象的另一种姿势

这种创建对象的方式跟new Object的效果是一样的,对象的本质就是键值对

1
2
3
4
5
6
7
a = { 
name:'猪八戒\n', //创建对象的多个属性可以用逗号隔开
sex : '男\n', //如果后面不再设置属性名了就不用加逗号
'锄禾日当午':'汗滴禾下土' //如果属性名是特殊的属性名,则要用引号
};
console.log(typeof a);
console.log(a.name,a.sex,a['锄禾日当午']);

函数

函数是什么

万物皆对象。函数是一组对象,可以这么说,Object是function的爸爸
函数里面也可以嵌套对象

构造函数的三种方式

构造函数有三种方式,但实际开发比较常用的只有一种方式,其他两种稍微了解即可

声明函数法(常用)

1
2
3
//语法
- function 函数名([形参1,形参2]){语句一,语句二,语句N..}

构造函数法(不常用)

1
2
//该方式和创建对象相似
var a = function("语句一,语句二,语句N..")

函数表达式创建函数(不常用)

1
2
//这个方法和声明函数法差不多,只不过是将函数声明赋值给变量
var a = function([形参1,形参2]){语句一,语句二,语句N..}

函数的参数(形参和实参)

定义一个函数,可在函数的()里指定一个或者多个形参,但不赋值,多个形式参数用逗号隔开
在函数的()指定形参称为声明形参,声明形参就相当于在函数内部声明了对应的变量
调用函数时在()内指定的参数叫做实际参数
在调用函数函数时,实参将会赋值给对应的形参,实参可以输入任意数据类型的值,函数解析时,解析器不会检查参数进行类型检查;形参的默认值为’undefined’

1
2
3
4
5
6
7
8
//定义一个求和函数
function sum(a,b){
c = a + b;
console.log("你输入的第一个数为:" + a + '\n'),
console.log("你输入的第二个数为:" + b + '\n'),
console.log("计算结果为:" + c)
}
sum(prompt('请输入第一个数'),prompt('请输入第二个数'))

函数的返回值

在函数中可以用return来设置函数的返回值,return后的值会作为函数结果返回,可以定义一个变量来接受返回的值,return的默认值为undefined

注意:当使用 return 后,后面的语句将失效

1
2
3
4
5
6
7
//语法:
- return
function sum(a , b , c){
var d = a + b + c ;
return d}
var result = sum(4,7,9);
console.log("计算结果为:" + result);

实参可以是任何值

函数的实参可以是任何类型的值,也可以是一个对象,或者是一个函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*写一个嵌套函数可计算其逆袭率,假如人的逆袭率=年龄乘以体重乘以身高除以存款*/
//提示:利用变量的toFixed()方法可以将取其小数后多少位
function person(o){
console.log("这个人今年" + o.age + "岁,","体重为" + o.weight + "kg,","身高为" + o.high + ",存款有" + o.monery )
}; // 定义一个函数,打印出其四项参数
function chuyi(person){
result = (o.age + o.weight + o.high) / o.monery; //按照计算公式
gailv = result.toFixed(2)*100 //利用result的toFixed方法,只取结果小数后两位
console.log("这个人的逆袭率为" + gailv + "%")
};
var o = {
age : 16,
weight : 47.5,
high : 165,
monery : 300
}; //定义对象的各项属性及其属性值
chuyi(person(o)) //使用person函数的返回值

返回值的类型

函数的返回值可以是任何类型的值,也可以是一个对象,或者是一个函数

1
2
3
4
5
6
7
8
9
10
//函数的返回值可以是一个函数
function num1(a,b){
alert("函数1开始执行");
return a + b
}
function num2(){
return num1(12,13)
}
console.log(num2())

立即执行函数

优点:该函数执行完毕之后就会被内存扔掉,之后不会占用内存

1
2
3
4
5
6
7
8
9
//立即执行函数,举个栗子
sq1:(function(){
alert("我是一个莫得名字的函数");
})();

sq2:(function hanshu(a,b){
alert("我是一个有名字的函数");
console.log(a + b)
})(12,56);

拓展-套娃函数

1
2
3
4
5
6
7
8
function fun1(){
function fun2(){
alert("我是fun1里的fun2");
}
return fun2;
}
fun1()();
//解析:当函数fun1执行完了一遍之后返回对象fun2,然后第二执行的时候是执行的时候将上一执行完的返回值

全局作用域

变量、函数声明提前

变量声明提前是什么?

使用var关键字声明的变量,会在所有的代码执行前被声明(但是不会赋值),所以不会报错,会显示”Undefined”;
但是不使用var关键字声明变量时,则变量不会被声明提前,会报错

1
2
3
4
5
6
7
//变量声明提前示例:
console.log(a);
var a = 100;

//不使用var关键字声明变量示例:
console.log(b);
b = 100;

函数声明提前是什么?

使用函数声明形式创建的函数”function 函数名(){}”,他会在所有的代码执行前就被创建,因此我们可以在函数声明前调用函数
但是函数表达式创建的函数,不会被声明提前,所以不能在声明前调用

1
2
3
4
5
6
7
8
9
10
11
//使用函数声明形式创建的函数示例:
fun1();
function fun1(){
console.log("niHao")
}

//使用函数表达式创建的函数示例:
fun2();
var fun2 = function(){
console.log("Hello")
}