JavaScript变量、常量声明与函数的基础知识

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声明常量

1. 常量特殊的变量，它是只读变量；
2. 常量声明后即不能删除，也不能更新；
3. 常量的声明与初始化必须同步完成。

const APP_NAME = '用户管理系统';

常量、变量、函数名…都称为JS标识符，他们都有严格的命名规则：

1. 只能是字符、数字、下划线、$，且第一个不能是数字；
2. 标识符是严格区分大小写的；
3. 命名规范。

• 蛇形，下划线

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});

使用箭头函数需要注意以下几点：

1. 函数体内的this在箭头函数中是固定的；
2. 不能用作构造函数，也就是说不能new命令，否则会抛出一条错误；
3. 不能使用arguments对象，因为该对象在函数体内不存在；
4. 不可以使用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()); // 1
console.log(f2()); // 2
console.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