JavaScript变量、常量声明与函数的基础知识
一、JavaScript脚本的引入方式
案例：现有如下标签，可以利用JS来更改h2的背景色和文字颜色：
<h2>Hello World!</h2>
JS有三种引入方式：
1.内联脚本
<button onclick="document.querySelector('h2').classList.toggle('active');">Button1</button>
2.内部脚本
<button onclick="toggleTitle()">Button2</button>
3.外部脚本
<script src="outer.js"></script>
二、变量与常量的声明与赋值
- 变量：使用let声明一个变量：
// 声明let username;
此时，username的默认值是undefined，现在我们对其进行初始化（赋值）：
username = 'Hello World';
可在控制台打印变量username，得到：
Hello World
如果再次对username进行赋值：
username = '你好，世界！';console.log(username);
此时可在控制台查看username值为：你好，世界！。
但是，禁止在再次给username赋值时使用以下格式:
let username = 'Hello World!';
这样的话控制台会报错：
所以，let在声明变量的时候禁止重复声明。
也可以将变量声明与初始化同时进行：
let username = 'Hello World!';console.log(username);
- 常量：使用const声明常量
- 常量特殊的变量，它是只读变量；
- 常量声明后即不能删除，也不能更新；
- 常量的声明与初始化必须同步完成。
const APP_NAME = '用户管理系统';
常量、变量、函数名…都称为JS标识符，他们都有严格的命名规则：
- 只能是字符、数字、下划线、$，且第一个不能是数字；
- 标识符是严格区分大小写的；
- 命名规范。
- 蛇形，下划线
let user_name = 'a';
- 驼峰式
let userName = 'a';
- 大驼峰，帕斯卡
let UserName = 'a';
- 匈牙利式
let oBody = document.body;oBody.style.backgroundColor = 'lightgreen';
三、认识JavaScript函数
JavaScript函数
JavaScript函数是用来执行特定的代码块的，仅仅在调用它的时候才会执行里面的代码。
- 语法：
JavaScript通过function关键字定义一个函数，后面跟上函数名和一对英文状态下的括号()，函数名的命名规则跟变量命名规则相同。括号里面可以放置参数，也可以什么也不放。
(参数1,参数2,参数3,…)
需要执行的代码块放置在{}中，所以一个完整的函数应该是下面这个样子的：
function name(arg1, arg2, arg3) {// 执行的代码块}
其中圆括号里的参数有个名字叫：形参
- 函数的调用:
函数名称 + () 即可调用函数，例如调用上述函数：
// 调用函数name(1, 2, 3);
为什么要使用函数呢？
因为函数可以使我们复用某些代码块，只需定义一次，就能重复使用N次，可以避免了写一些重复代码。
- 实例：
function sum(a, b) {return a + b;}console.log(sum(2, 3)); // 5
如果说在调用函数的时候不加()，是什么情况呢？我把结果打印了一下：
document.body.innerHTML = sum;
- 结果：
上面的结果说明如果在调用函数的时候不加圆括号，返回的结果是函数本身。
ES6箭头函数
箭头函数类似于匿名函数，它简化了函数的定义。
- 匿名函数：
let demo = function () {return ['20200102', '手机', 'MI 11 Pro', '3999'];}
将函数名放入一个变量中，然后再使用这个变量去调用匿名函数：
document.body.innerHTML = demo(); // 20200102,手机,MI 11 Pro,3999
上述匿名函数如果使用箭头函数简化，：
let demo = () => {return ['20200102', '手机', 'MI 11 Pro', '3999'];}
二者结果都是一样的。
上述的箭头函数只有一条返回语句，所以可以省略大括号，简写成下面的格式：
let demo = () => ['20200102', '手机', 'MI 11 Pro', '3999'];
以上是在箭头函数没有参数的情况下的书写方法，如果带有参数的呢该怎么写呢？
- 带一个参数
let demo = x => x * 2;console.log(demo(2)); // 4
- 一个以上的参数
let demo = (x, y) => x * x + y * y;console.log(demo(2, 3)); // 13
以上的案例都是函数体只有一条语句时的场景，如果函数体有多条语句，应该这样写：
let demo = x => {if (x % 2 == 0) {console.log("偶数");} else {console.log("奇数");}}console.log(demo(3)); // 奇数
根据以上案例，我做了一个总结：
可以省略圆括号的场景：
- 只有一个参数。
不能省略圆括号的场景：
没有参数；
参数个数在1个以上。
大括号可以省略的场景：
- 只有一条语句。
大括号不可省略的场景：
- 有多条语句。
这里面有一点需要值得注意的是，如果我们返回的是一个对象，如果这么写就会报错：Uncaught SyntaxError: Unexpected token ':'，例如：
// 这是一个错误方法(x, y) => {x: 1, y: 2};
那么这个错误如何解决呢？需要在对象外面再包裹一层圆括号即可：
// 这是正确方法(x, y) => ({x: 1, y: 2});
使用箭头函数需要注意以下几点：
- 函数体内的this在箭头函数中是固定的；
- 不能用作构造函数，也就是说不能new命令，否则会抛出一条错误；
- 不能使用arguments对象，因为该对象在函数体内不存在；
- 不可以使用yield命令，不能用作Generator函数。
四、闭包原理
闭包：能够访问自由变量的函数，所以，理论上讲任何函数都是闭包。
let num = 100;function add(a, b) {// a,b 为参数变量，t 为私有变量let t = 0;// 此时，num就是自由变量return t + a + b + num;}console.log(add(1, 3)); // 104
从上述案例中可以看出，此时a,b 为参数变量，t 为私有变量，如果在函数内部再使用外部的变量num，那么，num就是自由变量。
function f1 () {let a = 1;return function () {return a++;}}let f2 = f1();console.log(f2()); // 1console.log(f2()); // 2console.log(f2()); // 3
从上述案例代码可以看出，f1函数的内部变量a，相对于函数f1是私有变量，但是相对于返回的匿名函数就是自由变量。一但f1的子函数闭包访问了调用环境中的自由变量，那么这个闭包自由变量f1调用之后它的环境不会消失，因为这个f1的自由变量被它的闭包引用了。
五、高阶函数
使用函数作为参数或者将函数作为返回值的函数
1.回调函数：函数作为实参传入另一函数，并在该外部函数内被调用，用以来完成某些任务的函数，称为回调函数。
document.addEventListener('click', function () {alert('Hello World!');});
2.偏函数：简化了函数变量的声明
let sum = function(a, b) {return function (c, d) {return a + b + c + d;}}let f1 = sum(1, 2);console.log(f1(3, 4)); // 10
3.柯里化：简化了函数的调用
sum = function(a) {return function (b) {return function (c) {return function (d) {return a + b + c + d;}}}}console.log(sum(1)(2)(3)(4)); // 10
4.纯函数：完全独立于上下文，返回值只能受到传入的参数影响
function getDate() {return Date.now();}console.log(getDate());
以上函数就不是纯函数，因为返回值收到Date的影响，并不是收到传入参数的影响，以下代码案例是纯函数：
function add(a, b) {console.log(a + b);}add(1, 2); // 3
