js基础知识：变量与常量，函数及参数

一、js引入方式

js的引入方式有3种，分别是行内脚本、内部脚本、外部脚本。

1、行内脚本：

在实现简单操作时可以把脚本直接写在html标签行内实现。

 <button onclick="alert('大家晚上好!');">Click</button>

2、内部脚本：

使用script标签直接把js脚本写在html文档内，供本文档直接调用。

    <button onclick="lookme()">Click</button>
    <script>
      function lookme() {
        alert("HI 大家晚上好!");
      }
    </script>

3、外部脚本：

把js脚本单独写进一个.js文件，在需要使用它的html文档中引用即可，同时也实现了多文档共享js脚本。

    <button onclick="lookme()">Click</button>
    <script src="lookme.js"></script>

二、变量与常量

1、变量：

变量在js内实现数据的传递与共享。使用let关键字声明，变量的值可以修改更新。变量名字通常使用驼峰式命名方式（组合词语的第二个单词首字母大写）。

      // 声明
      let userName;
      console.log(userName); // undefined
      // 第一次赋值: 初始化
      userName = "刘一手";
      console.log(userName);
      // 第二次赋值: 更新,修改
      userName = "王二丫";
      console.log(userName);
      // 删除变量：赋值null
      userName = null;
      console.log(userName);
      //   推荐声明时直接初始化
      let price = 99;
      price = 199;

2、常量：

常量的数据是保持不变的。使用const关键字声明，因为不能更改，须声明时直接赋值。名字通常全大写，多个单词之间使用下划线。

      //   因为常量不能被更新,所以声明时必须赋值(初始化)
      const GENDER = "female";
      console.log(GENDER);

3、标识符：

可由字母、数字、下划线、$组成，并且禁止数字开头, (违规写法如123abc, abc@123)，严格区分大小写。

三、函数

函数是一个可重用的代码块，用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复书写相同代码。

1、命名函数：

使用function关键字来声明函数，为函数命名一个名字，便于反复调用。

//每个函数都要有返回结果，函数都是单值返回
         // 声明 
          function getName(name) {
              return "welcome to: " + name;
          }
          // 调用,按名
          console.log(getName('大牛')); 
        //   函数允许重写
          function getName(name) {
              return "欢迎: " + name;
          }
// 返回多个值,使用数组或对象
      function getUser() {
        return [10, "admin", "admin@qq.com"];
      }
      function getUser() {
        return { id: 10, username: "admin", email: "admin@qq.com" };
      }
      console.table(getUser());

2、匿名函数：

匿名函数就是将一个函数的声明做为值赋值给一个变量或常量，没有命名，通常用这个变量或常量来引用这个函数。先声明再引用。

        let sum =function (a,b) {
              return a + b;
          };
        //通过变量来引用
          console.log(sum(1,6));

3、高阶函数:

使用函数做为参数或者将函数做为返回的函数,为高阶函数。

//例1
     function demo(f) {
          return function () {
            return "abc";
          };
        }
//例2 
     let sum = function (a, b) {
        return function (c, d) {
          return a + b + c + d;
        };
      };
      let f1 = sum(1, 2);
      //   f1是一个函数
      console.log(typeof f1);
      console.log(f1(3, 4));

柯里化函数，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数（把接受参数打散，一个函数接受一个）。 在有些参数需要复用或者需要延迟运行时会用到。

      // 柯里化
      sum = function (a) {
        return function (b) {
          return function (c) {
            return function (d) {
              return a + b + c + d;
            };
          };
        };
      };
      let res = sum(1)(2)(3)(4);  //这种方法可以直接输入多个参数
      console.log("res =", res);

四、函数的参数

函数的参数分为：必选参数，默认参数，归并参数。

1、必选参数：

在调用函数时必须要输入的参数。

      // 必选参数
      let sum = function (a, b) {
        return a + b;
      };
        console.log(sum(1, 2));

2、默认参数：

函数声明时为其中参数设置了默认值，在调用时可以不输入该参数。

      sum = function (a, b = 10) {
        return a + b;  //参数b声明时已经赋值，为默认值
      };
      console.log(sum(1));
      console.log(sum(1, 15));

3、归并参数：

rest语法,将所有参数压到一个数组中来简化参数的获取过程。

//例1
      let sum = function (...arr) {
        let t = 0;
        for (let i = 0; i < arr.length; i++) {
          t += arr[i];
        }
        return t;
      };
      console.log(sum(1, 2, 3, 4, 5, 6, 7));
//例2 ，简化例1写法
      let sum = function (...arr) {
        // 使用reduce()简化
        return arr.reduce((p, c) => p + c);
      };
      console.log(sum(1, 2, 3, 4, 5, 6, 7));

五、箭头函数的语法

匿名函数,可以使用箭头函数来简化它。

      let sum = function (a, b) {
        return a + b;
      };
      //   匿名函数,可以使用箭头函数来简化它
      sum = (a, b) => {
        return a + b;
      };
      console.log(sum(10, 20));
      //   如果箭头函数的代码体只有一行语句,可以删除大括号,自带return 功能
      sum = (a, b) => a + b;
      //   如果只有一个参数,连参数列表的圆括号 都可以删除
      let tips = (name) => console.log("欢迎: " + name);
      tips("小马");
      //   如果函数中要使用到this,就不要用箭头函数,不能当构造函数用

六、立即执行函数的语法

立即执行函数: 声明调用二合一, 声明后直接执行。语法格式为(函数)(参数)。

      (function (a, b) {
        console.log(a + b);
      })(100, 600);