js第一课 引入方式 参数 函数

js引入方式，实例演示;

1. 行内脚本

   <button onclick="alert(1)">Click</button>

   
2. 内部脚本 将js写在一对script标签中

   <style>
   .active{
    color: red;
    background: yellow;
   }
   </style>
   <script>
    function toggleColor() {
        document.querySelector("h1").classList.toggle("active");
      }
   </script>
   <button onclick('toggleColor')></button>

   
3. 外部引入 将js代码写入到外部的js中，在html中进行引用
   toggle.js:

   function toggleColor() {
   document.querySelector("h1").classList.toggle("active");
   }

   html中的代码：

   <script src="toggle.js"></script>

   

   变量与常量的声明与使用方式，变量的类型和转换;

   在es6之前是没有常量。

   <script>
      //传统方式：在es6之前 没有常量
      //   变量：数据共享
      let email = "admin@qq.com";
      console.log(email);
      console.log(email);
      console.log(email);
   </script>

   
   如果变量没有初始化，那么就是undenfined

   let user;
   console.log(user);

   

   userName=null;
      console.log(userName);

   赋值null，相当于把这个变量删除
   常量：

   //常量
      const GENDER = "male";

   常量通常使用大写，多个单词之间使用下划线 这个是不允许被更新的
   因为不允许被更新，所以声明的时候必须赋值。
   js是严格区分大小写。
   命名方式：

   驼峰式：userName, unitPrice
   帕斯卡式：UserName  UnitPrice
   蛇形式：user_name unit_price
   匈牙利式：将数据类型放在变量的最前面
   object类型的：oBtn
   推荐使用驼峰式

   数据类型

   <script>
      // 一旦将数据类型确定，那么基于这个数据的允许的操作也就确定了
      console.log(100 * "abc"); // NaN
    </script>

   1、原始类型：数值 字符串 布尔型 undenfined null
   undefined类型就是undefined
   null一定是一个对象
   2、复合类型：将原始值以某种规则进行组合，就构成了复合类型
   也叫引用类型：对象object，数组，函数
   既然函数是对象，那么对象就允许添加属性或方法

   function getName(){}
   getName.userName="perper";
   console.log(getName.userName);

   输出的就是perper

通常只有相同类型的数据才在一起参与计算，这样的运算才有意义 比如100+100
+ 除了表示加法，也是字符串的拼接运算符
== 也会触发自动类型转换,它是非严格判断，它只检查值，不检查类型。建议使用”===”，它是要求值相等 且类型也相等，它不会触发自动类型转换。
console.log(100 == “100”);

函数与高阶函数，实例演示;

一般函数分两步：
声明：

function test(){}

调用：

test();

函数允许重写，或者说是函数声明提升

<script>
function getName(name){
    console.log("welcom to :", name)
}
console.log(getName("xxxxx"));
function getName(name){
    console.log("欢迎：", name);
}
</script>

上述代码输出的是欢迎xxxxx

如果不希望函数提升，必需先声明在使用 用匿名函数

let getName = function(name){
    console.log(name);
}

匿名函数就是将一个函数的声明作为值赋值给一个变量或常量,然后通过这个变量或常量来引用这个函数的声明

函数的参数

函数都是单值返回

let sum = function(a,b){
    return a+b;
}
console.log(sum(1,2));

如果只给一个值 那么返回的就是NaN

console.log(sum(1));

我们也可以给函数一个默认参数

sum = function(a, b=1){
    return a+b;
}
console.log(sum(1));

归并参数

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

let sum = function(...arr){
    console.log(arr);
}
console.log(sum(1,2,3,4,5,6,7));

这样得到的参数怎么相加？可以使用for进行遍历，也可以使用reduce()

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

高阶函数 偏函数 纯函数 箭头函数 立即执行函数

高阶函数

使用函数作为参数，或者将函数作为返回值。

fucntion demo(f){
    reuturn f;
    }
}
console.log(demo(function(){}));

function demo() {
        return function () {
          return "abc";
        };
      }
      let a = demo();
      console.log(a);
      console.log(a());

函数作为参数 也叫回调函数。

偏函数

function sum(a,b,c,d){
    return a+b+c+d;
}
console.log(sum(1,2,3,4));

我们可以将此函数进行柯里化 内层函数可以访问外层函数

let sum = function(a,b){
    return function(c,d){
        return a+b+c+d;};
};
let f1 = sum(1,2);
console.log(f1(3,4));

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

结果都是一样的

纯函数

纯函数就是不调用自身之外的参数

//这个就不是纯函数 他调用了自身之外的参数c
let c= 199;
function sum(a,b){
    return a+b+c;
}
//这个是纯函数
function sum(a,b){
    return a+b;
}

箭头函数

匿名函数，可以使用箭头函数来简化

let sum = function(a,b){
    return a+b;
}
let sum = (a,b) => {return a+b};
//如果函数体只有一句参数 可以删除{} 并且自带return
let sum = (a,b) => a+b;
//如果只有一个参数，连参数列表的圆括号 都可以删除  推荐括号加上，带上去可以容易看出来不是个变量 而是参数
let tips = name => console.log(name);

注意：如果函数中要使用到this的时候，就不要用箭头函数了 箭头函数不支持this，所以箭头函数不能当构造函数用。

立即执行函数

就是声明调用二合一。
模板 ()()

//一个普通函数
function sum(a,b){
    return a+b;
}
//转换成立即执行函数
(function sum(a,b){
    return a+b;
})(1,2);