JavaScript基础2

Posted 2023-03-31 李桥桉

函数

其实数组的API就是函数

1.函数基础

• 概念：函数本身是一段代码的容器，一个函数里包含了一大段代码，可以在页面中多次调用来执行相同的操作。
• 作用：重复使用的代码，我们封装到函数中，直接调用函数即可，减少了代码量。
• 语法：

//声明函数
function 函数名()
//执行的代码

//调用函数
函数名()

//函数声明式
function show()
console.log('你好')

//函数表达式
var show = function()

• 注意：

  • 每调用一次函数，函数里的代码就会执行一次

  • var num = 0
    function show()
    num ++
    console.log(num)
    
    show() //1
    show() //2
    show() //3

• 定义函数时，函数声明式会整体提升，函数表达式是变量提升（在声明之前可以调用，函数表达式在定义函数之前不能调用，只能定义后调用）

函数的参数

每次函数定义好以后，里面的代码在执行的时候，如果我们需要根据情况不同，得到不同的结果，那么我们就会传入不同的参数。

实际参数

在某个函数调用时，通过（）传入的具体数据，我们称为实参。

1. 函数名（实际的参数）
2. show('你好')

形式参数

本质上就是一个变量，在函数定义时写在括号中（），该变量会在函数中自动创建，用于代替实际传入的数据。

function show(形式参数变量名)
//代码体

形参与实参的关系

在函数调用时，我们会把实际的参数通过实参传递给函数，函数中以形参接受，在函数中就可以通过形参来处理传入的数据。

function show(name)
var hello = '你好我叫'+ name
var mon = '早上好'+name
console.log(hello);
console.log(mon);


show('李四')
show('张三')

函数的返回值

• 通过函数传递不同的参数，我们可以在函数内部得到不同的结果，但是这个结果无法在函数外部使用，就必须将结果返回到函数调用的地方。

• 语法

• function fn(salary)
  salary *= 0.8
  salary = (salary-5000)*0.9 + 5000
  return salary
  
  
  var wang = fn(10000)
  var zansan = fn(20000)
  console.log(wang); //7700
  console.log(zansan); //14900

arguments

• 背景：当一个函数传入的实际参数不确定时，可以使用arguments来解决
• 概念：arguments是javascript在函数调用时创建的一个 类数组对象,里面包含了函数在调用时传入的所有实际参数，也有 length表示个数

• function push() 
  console.log(arguments);
  
  push('a','b','c')

                

 案例：模仿数组api push

var arr = [1, 2, 3]
    function push() 
        console.log(arguments);

        for(var i=0;i<arguments.length;i++)
        console.log(arguments[i]);
        arr[arr.length] = arguments[i]
        

        return arr.length
    


    var length = push('a', 'b', 'c')
    console.log(arr);
    console.log(length);

初识作用域

• 概念：指的就是某个变量或函数生效范围。
• 分类
  • 全局作用域：
    • 在所有函数以外声明的函数或者变量。
  • 函数作用域：
    • 在函数内部声明的变量或者函数。

    //全局变量
    var a = 10

    //全局函数
    function add()
    //局部变量 只能作用在函数add中使用
        var b = 1
        console.log('a:',a);
        console.log('b:',b);
        console.log('b + a:',b + a);
        //局部函数
        function fn()
            console.log('fn打印b:',b); //fn函数在 add函数内 b的作用范围也是在add以内 所以可以使用
            console.log('fn打印a:',a); //a是全局变量 所有地方都可以使用
        
        fn() //fn是 add函数的 所以可以在 add函数中调用 fn
    

    add()
    fn() //报错 fn函数属于 add函数中 外面不能使用
    console.log(b); //报错 变量b属于函数add 外面不能使用

 ..............................................................................................................................................

箭头函数

• 概念：是ES6 新增用于快速定义函数的语法，用于辅助函数定义，比普通函数更加简洁
• 语法

1.普通函数
    function 函数名()

    
    var 变量名 = function()

    

2.箭头函数

    var 变量名 = (形参) =>
    函数代码
    

函数调用与普通函数一样。

箭头函数简写

var show2 = str =>
    console.log(str);
    
show2('一个参数可以省略括号')
show2('没有参数必须有括号')

 

函数表达式定义的函数 需要先定义 后面才能使用

当箭头函数主体代码只有一句return 语句时，可以省略｛ return ｝

1. var add = num => num + 1
2. // var add = (num) => return num + 1
4. console.log(add(1));
5. console.log(add(5));

预告：箭头函数没有this

原生对象

对象的概念

• 原生对象是JavaScript中专门用于描述符合型数据的数据类型（就是对象）
• 符合型数据本身是一个整体，该数据可以包含很多基本数据类型。（万物皆对象）

1. 1.电脑
2. ｛
3. nam:'华为'，
4. price：5000，
5. cpu:'i7'
6. ｝
8. 2.女朋友
10. name:'晓红',
11. sex:'女'，
12. age:18,
13. height:170,
14. weight:100

对象的创建

• 语法

1. 1.创建实例的方式
2. var 变量名 = new Object()
4. 2.字面量形式（最常用）
5. var 变量名 = ｛｝
7. 创建带数据的对象
8. var student =
9. name:'张三',
10. age:20,
11. sex:'男'

注意：

• 属性名，与属性值：又称为键值对，属性名就是键，属性值就是值
• 对象的属性名是字符串类型或者symbol 类型。
• 对象的属性值可以是任意类型。

1. var obj =
2. 0:1,
3. show:function(name)
4. console.log('hello,'+name);
8. console.log(obj[0]);
9. obj.show('张三')

如果说你访问的属性不存在时，返回值为 undefined

修改添加一个属性

1. 对象变量名 . 属性名 = 属性值 //修改属性
2. 对象变量名 . 新的属性名 = 属性值 //添加属性

对象的遍历

• for。。。in。。。循环遍历对象
• 语法

1. var obj =
2. name:'张萨姆',
3. age:19,
4. sex:'男',
5. hello:function()
6. console.log('hello');
10. for(var key in obj)
11. console.log(key);
12. console.log(obj[key]);

对象中的this

1. var obj =
2. name:'张三',
3. age:19,
4. sex:'男',
5. hello:function()
6. console.log('hello ，'+ this.name);
9. obj.name = '李四'
10. obj.hello()

对象嵌套

1. var obj =
2. name:'张三',
3. age:19,
4. sex:'男',
5. hello:function()
6. console.log('hello ，'+ this.name);
7. ,
8. arr:['打游戏','看书','写字'],
9. teacher:
10. name:'王继东',
11. sex:'男'
15. console.log(obj["teacher"].name);
16. console.log(obj.arr[1]);