JS入门之变量和函数

发表于 2022-07-19 分类于专题突破，大前端阅读次数：本文字数： 841 阅读时长 ≈ 2 分钟

在html中, 任何内容,都必须使用"标签"进行包装

js代码使用一对script标签.有两种方式,一种内部脚本,一种外部脚本

外部脚本引入方式<script src="xxx.js"></script>

数据和操作

js是一种脚本语言,运行在浏览器环境或者node环境.
控制台对象console.log('Hello world');,就是调试器中的控制台,可以输出显示信息
和所有其他程序一样,js包括数据和操作
操作写到哪里? 一对大括号中
为了让操作重复执行, 可以参考刚才变量的方式,给操作起个名称,也就是函数

'Hello world': 字面量, 字符串
"123": 引号(双引号或单引号)是字符串的定界符
123 : 数值

{
// 在js中, 字符串的拼装: "+",二边至少有一个字符串
let s = 'Hello ' + 'World';
console.log(s);
console.log('a=', a, ', b=', b);
console.log(a + b);
console.log(a + '10');
console.log(typeof (a + '10'));
}

//   匿名代码段
{
// ....
}

//   命名函数段
function y() {}

变量的使用

js语句中,结束的分号可选的
let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

let a = 10;
a = 20;
// 变量禁止重复声明
var x;var x;//var 除外

var 可以重复声明,不支持块作用域,为兼容老版本而存在,现在已经淘汰

作用域的类型

块作用域

let声明的变量支持"块作用域",传统的var不支持"块作用域"

{
// 代码块
let a = 100;
// var a = 100;
console.log(a);
}

函数作用域

function sum(a, b) {
// 函数内声明的变量: 私有变量/局部变量
let res = a + b;
return res;
}

全局作用域

代码块/函数的外部声明的

let email = '498668472@qq.com';
{
    {
        {
            let email = '123456@qq.com';
            console.log(email);
        }
    }
    }
}

作用域链: 变量查询时,优先从内部作用域开始

合法标识符

不允许使用关键字 let, const,function, class ...
不允许用数字开始
禁止特殊符号, $, _ 可以用

命名规则

常量遵守标识符的规则,但是为了更快的识别它

全部使用大写字母
多个单词之间用下划线: USER_EMAIL

变量的命名规则

小驼峰: 变量,函数(动词+名词: getUserInfo())
大驼峰: 类,构造函数, 还有一个别名: 帕斯卡命名法:GetUserInfo()
蛇形命名法: username -> user_name

常用函数类型

命名函数

function getName(username) {
    return 'Hello, ' + username;
}
console.log(getName('猪老师'));

匿名函数

let getUserName = function (username) {
return 'Hello, ' + username;
};
console.log(getUserName('马老师'));
console.log(getUserName('牛老师'));
cons

IIFE（立即调用函数表达式）:这是一个被称为 自执行匿名函数 的设计模式，主要包含两部分。

第一部分是包围在圆括号运算符 () 里的一个匿名函数，这个匿名函数拥有独立的词法作用域。这不仅避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域。

第二部分再一次使用 () 创建了一个立即执行函数表达式，JavaScript 引擎到此将直接执行函数。

```js
// 阅后即焚
console.log(
(function (username) {
    return 'Hello, ' + username;
})('灭绝老师')
);

箭头函数

功能: 用来简化匿名函数

去掉 "function"
在参数列表与后面的代码块(左大括号)之间用胖箭头=>连接
当函数只有一个参数的时候,参数外部的圆括号可以不写
如果只有一条语句,可以不写大括号,并可以省去return
如果没有参数, 或者一个以上的参数, 参数列表的括号必须要写
箭头函数,内部 this 是固定的,总是它的上下文绑定,没有自己的this

// 当函数只有一个参数的时候,参数外部的圆括号可以不写
getUserName = (username) => {
    return 'Hello, ' + username;
};
console.log(getUserName('狗老师'));

//   如果只有一条语句,可以不写大括号,并可以省去return
getUserName = username => 'Hello, ' + username;
console.log(getUserName('猫老师'));