JavaScript（五）：函数、作用域、对象

JavaScript函数

函数的基本使用

1.函数声明

格式：

function 函数名(){
函数体代码
}

function是声明函数的关键字，必须小写

2.函数调用

函数名();

调用的时候不要忘记加小括号
函数如果不调用，自己是不会执行的
声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码

例如：

       //函数声明
        function hello() {
    
    
            console.log('hello,world');
        }
        //函数调用
        hello();

3.形参和实参
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，从而在调用函数时同样也需要传递相应的参数，这些参数被称为实参。

//函数声明
    function getSum(num1, num2) {
    
    
        console.log(num1 + num2);
    }
    //函数调用
    getSum(1, 2);
    //结果为3

请添加图片描述

return返回语句

函数最终的结果需要返回给函数的调用者，通过return实现

请添加图片描述

实参是一个数组，那么形参接收到的也会是一个数组

请添加图片描述

return只会返回一个值，以最后一个值为准，如果想要返回多个值，可以返回数组

  //不执行return之后的语句
        function getresult() {
    
    
            return 'sy';
            alert('hello');//不会被弹出警示框
        }
        //return只返回一个值，以最后一个值为准
        function returnresult(num1, num2) {
    
    
            return num1, num2;//只返回num2
        }
        //return想要返回多个值，可以使用数组
        function returnmore(num1, num2) {
    
    
            return [num1 + num2, num1 - num2, num1 * num2 , num1 /num2];
        }

        console.log(getresult());
        console.log(returnresult(10,2));
        console.log(returnmore(10,2));

结果：

请添加图片描述

如果函数没有return，则返回undefined

arguments的使用

当我们不确定有多少个参数传递时，可以使用arguments来获取。arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点：

具有length属性
按索引方式存储数据
不具有数组的push、pop等方法

例如：

function fn(){
    
    
for(var i = 0; i <arguments.length; i++){
    
    
	console.log(arguments[i]);
	}
}
fn(1 , 2 , 3);
fn(1, 2, 3, 4, 5);
//数组存储了所有传递过来的实参，不需要在定义形参的个数

函数也可以调用另外一个函数

 function fun1(){
    
    
    console.log(11);
    fun2();
}
 function  fun2(){
    
    
    console.log(22);
 }
 fun1();//结果为11，22

函数的两个案例

1.翻转任意数组

请添加图片描述

尽量多使用arr.length 这种方法继续数组赋值，这样的好处是数组的长度是可以变化的，并且少一层for循环

2.数组的冒泡排序
请添加图片描述

作用域

1.全局作用域

整个script标签或者一个单独的js文件都可以使用

2.局部作用域

在函数内部就是局部作用域，这个代码的名字只能在函数内部起效果或者作用

3.全局变量

在全局作用域下声明的变量称为全局变量（函数体外定义的变量）

全局变量在代码的任何位置都可以使用
在全局作用域下var声明的变量是全局变量
如果定义变量没有加上var，不管是变量定义在函数里面还是函数外面都是全局变量

4.局部变量

局部变量只能在函数内部使用
在函数内部var声明的变量就是局部变量
函数的形参实际上就是局部变量

例如：

var num = 10;//全局变量
function fn(aru){
    
    
var num1 = 20;//局部变量
num2 = 30;
}
fn();
console.log(num);//结果为10
console.log(num2);//结果为30,因为num2未设置var，也是全局变量
console.log(num1);//报错： num1 is not defined，因为num1是局部变量

对象

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数组、数值、函数等。

1.对象由属性和方法组成

属性：事物的特征，在对象中用属性来表示（一般为名词）
方法：事物的行为，在对象中用方法来表示（一般是动词）

对象类似于C语言中的结构体

2.对象的创建

利用对象字面量

使用花括号{}里面包含了表达这个具体事务（对象）的属性和方法，{}里面采用键值对的形式表示。

键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型、函数等）

2. 利用new Object()创建对象

利用等号赋值的方法，添加对象的属性和方法，每个属性和方法之间用分号隔开

3.对象的调用

对象里面的属性调用：对象.属性名
对象里面属性的另一种调用方式：对象[‘属性名’]，引号一定要加
对象里面的方法调用：对象.方法名(),注意一定要加括号

例如：

        //创建对象
        var obj = {
    
    
            name: 'sy',
            age: 21,
            sex: '男',//前三个为属性
            sayHi:function(){
    
      //函数是匿名的
                console.log('hello,world!');
            }
        }
        //使用对象
        console.log(obj.name);//调用对象的属性方法一，对象名.属性名
        console.log(obj['age']);//调用对象的属性方法二，对象名['属性名']，其中属性名必须+引号
        obj.sayHi();//调用对象的方法，对象名。方法名（），括号必须加

注意：方法一多个属性/方法之间用逗号隔开，方法冒号后面是匿名函数

请添加图片描述

方法二之间使用逗号隔开

4.遍历对象属性
for…in语句用于对数组或者对象的属性进行循环操作。

     var obj = {
    
    
            uname : 'sy',
            age : 18,
            sex : '男',
            hello :function(){
    
    
                console.log('hello,world');
            }
        }
        for (var key in obj ){
    
    
            console.log(key);//得到的是变量名
            console.log(obj[key]);//得到的是属性值
            obj.hello();
        }

结果：
请添加图片描述

一般使用key作为变量,输出key得到的是变量名字，obj[key]得到的是属性值

5.变量、属性、函数、方法的区别

变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
函数：单独存在，通过’函数名()'的方式调用
方法：对象里面的函数称为方法，方法不需要声明，使用’对象.方法名()'的方式调用

构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它与new运算符一起使用。
1.构造函数的语法格式

function 构造函数名(){
this.属性 = 值;
this.方法 = function(){}
}

2.使用构造函数

var 变量名 = new 构造函数名();

例如:

        //构造函数
        function Star(name,age,sex,sing){
    
    
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
    
    
                console.log(sang);
            }
        }
        //调用构造函数
        var a = new Star('sy',20,'男');//必须使用new 
        var b = new Star('syy',21,'男')
        console.log(a);
        a.sing('hello');//调用构造函数中的函数
        console.log(b);
        console.log(typeof a);//调用函数返回的是一个对象(Object)

结果：
请添加图片描述

理解：构造函数一定要加上this 。调用构造函数时，需要使用new关键字。构造函数没有return返回语句。
函数一般是针对于某一个算法，构造函数更倾向于很多个不同的对象，但是数值类型都相同。构造函数是一个抽象的，可以进行不同赋值的。对象是一个具体的，不可改变的。
一般都是先构造函数，然后在创建对象（new 构造函数()）

字符串对象

1.根据字符返回位置
字符串所有的方法，都不会修改字符串本身，操作完成是返回一个新的字符串请添加图片描述

 
      var str = 'hello,world';
      console.log(str.indexOf('l'));//返回值为2，查询的是第一个l的位置
      console.log(str.indexOf('l',3));//返回值为3，后面数字3表示从位置3开始查找

字符串查找 indexOf(‘要查找的字符’,[开始查找的位置])，其中第二个可以省略

2.根据位置返回字符
请添加图片描述

   var arr = 'hello,world';
   console.log(arr.charAt(3));//返回位置为3的字符l
   console.log(arr.charCodeAt(3));//返回位置为3的字符的ASCII码，l的ASCII码为108

3.字符串的操作方法
请添加图片描述

var arr1 = 'hello,world';
var arr2 = 'javascript'
console.log(arr1.concat(arr2));//结果为hello,worldjavascript
console.log(arr1.substr(2,3));//从第二个位置开始取三个字符，结果为llo； 第一个数字是起始位置，第二个数字是取几个字符

4.字符替换、字符串转为数组

   var str = 'hello,world';
        console.log(str.replace('l','h'));//replace(被替换字符，替换字符),只能替换一个字符，结果为：hehlo,world
        //使用循环，可以替换所有的字符
        var str1 = 'abcacbacbacb'
        while(str1.indexOf('b')!== -1){
    
    
            str1 = str1.replace('b','a');
        }
        console.log(str1);//结果为aacacaacaaca
        //字符串转换为数组 使用split('分隔符')   前面学习的join是将数组转换为字符串
        var str2 = 'hello,wolrd,javascript';
        console.log(str2.split(','));//结果为['hello', 'wolrd', 'javascript']