2022.11.01第十四课：js变量和函数的学习

js第一课：变量和函数的学习

一.笔记

js代码主要的成员有两个：一是变量；二是函数
js中表达式后面的分号可选；

1.变量的命名规则

• 不能以数字开头；
• 可以是下划线、字母、$、数字组成；
• 使用时一般用小驼峰法，即首字母小写，后面单词的首字母大写；

2.标识符命名风格和规范：

• 驼峰法
  • 小驼峰法:首单词首字母小写，后面的所有单词的首字母大写，常用于 变量、属性、函数的命名，例:getUserName
  • 大驼峰法:标识符所哟单词的首字母均大写，常用语构造函数、类的命名,例:UserModel
• 蛇形命名法
  • 小蛇:标识符的单词均小写，每个单词之间用一个下划线隔开，用的极少，例:user_name
  • 大蛇:标识符的所有单词的所有字母均大写,主要用于常量的命名,例:APP_PATH等.

二. 变量的声明和使用

js中的变量的标识方式有三个关键字:const\let\var
在ES6以及之后,尽量弃用var;

1.命名方式一const用法

• const一般用于变量和常量的声明;
• 第一次声明时候,就必须赋值
• 不能重复声明,不能更新,以后不能更改
• 方便后续的复用;
• const声明的变量不能提升,也就是不能在声明之前使用它,否则会出现undefined
• 例:

    const username = 'php中文网';
    console.log(username);

2.命名方式二let用法

• let一般用于块作用域变量的声明;
• let声明的变量不能提升,也就是不能在声明之前使用它,否则会出现undefined
• 不能在同一作用域内,重复用let声明同一变量,不能更新,以后不能更改;
• 可以让浏览器运行时强制保持变量不变
• 例:

    {
    let sum1 = 'php';
    let sum2 = '中文网';
    let sum3 = sum1 + sum2;
    console.log(sum3);//结果为`php中文网`
    }
    console.log(sum1);//输出引用错误:ReferenceError: sum1 is not defined

3.命名方式三var用法

• ES5及之前的js只有一种变量声明方式那就是用var,但是var声明方式在实际应用中有很多弊端,主要有以下几个方面:
  • 变量提升,也就是可以在变量声明之前使用它;
  • 可以声明块级和全局变量
  • 可以重复声明,即可以更新;
  • 函数内部不使用var关键字声明的变量默认是全局作用域;

4.变量声明方式三var的三大硬伤

• 声明提升:未声明即可使用;
• 例:

    console.log(v1);//结果不报错,但是undefined
    var v1 = 10;

• 重复声明:声明式更新很奇葩

    var v2 = 10;
    var v2 = 5;
    console.log(v2);//结果为5;

• 变量泄露:不支持代码块

{
    var v3 = 5;
    console.log(v3);
}
console.log(v3);//也输出5,代码块外面同样可以调用v3的变量值,造成代码泄露.

三.函数的声明

函数是可以复用的代码块,是js中代码的重要组成部分,js中常见的函数有四种:命名函数\匿名函数\箭头函数\立即执行函数

1. 命名函数

• 语法:

    function funName(p1,p2,p3...){
    //funbody
    }

• 其中参数p1,p2,p3…可选,例:

    function sum1(a,b){
    return 'a+b='+(a+b);
    }
    //函数调用funName(p1,p2,p3...)
    console.log(sum1(a,b));//输出结果7

• 命名函数的声明提升,函数未声明也可以调佣,例:

    console.log(sum1(1,2));//输出结果3
    function sum1(a,b){
    return 'a+b='+(a+b);
    }

2. 匿名函数

• 匿名函数就是没有名字的函数
• 例:

    const fun1 = function (3,4){
    return a + b;
}
console.log(fun1(3,4));//结果为7

3.箭头函数

• 箭头函数是匿名函数的语法糖和简写形式
  例:上栗可以修改为
• 把function去掉,在大括号和参数小括号中间加上胖箭头即可:

    const fun2 = (a,b) => {return( a + b};
console.log(fun2(5,6));//结果为11

• 箭头函数的变种1:函数体只有一条return语句(表达式)
• 上栗可以修改为:

    const fun3 = (a,b) =>  a + b;
console.log(fun3(7,8));//结果为15

• 箭头函数的变种2:参数只有一个,包括参数的()也可以省略,例:

    const fun4 = a => a + 10;
console.log(fun4(9));//结果为19

—-注意:箭头函数和匿名函数的最大区别是,箭头函数没有自己的this;

4.立即执行函数(IIFE)

• 立即执行函数就是声明之后,立刻要求有结果输出的函数类型
• IIFE: 一次性,常用作模块或封装
• 一个语法,用 (…) 包住 就转为”表达式”,例:

    const fun5 = (function(a,b)
    {return a +b}(10,11)
    );
    console.log(fun5);//结果为21