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.内建对象
    - Math、String、Number、Boolean、Function、Object已由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")
 }