Js的基础语法

实例演示变量与常量的区别; 2. 函数与匿名函数的区别 3. 箭头函数的参数特征 4. 闭包原理与实现并演示它 5. 四种高阶函数，全部实例演示，并理解回调和纯函数是什么，写出你的答案

js 的引用

• js 内联脚本，事件属性

<h1>你好世界</h1>
<button onclick="document.querySelector('h1)".classList.toggle('active');">点击</button>

• 内部脚本，只适合在当前文档中使用script标签

<h1>世界你好</h1>
<button onclick="activeTitle()">点击</button>
<script>
function activeTitle(){
document.querySelector('h1').classList.toggle('active');
}
</script>

• 外部脚本，使用script标签 src属性，可以共享

---

变量与常量

• 变量，使用 let 声明
  1.let 第一次赋值就是初始化
  2.再次赋值是更新操作，覆盖上一次的值

<script>
// 声明
let userName;
console.log(userName);
//声明时并初始化（第一次赋值）；
let itemName = "手机";
console.log(itemName);
// 更新
userName = '世界';
console.log(userName);
</script>

• 常量
  1.声明时必须初始化 const
  2.标识符: 字母，数字，下划线,$ 不能数字开头
  3.严格区分大小写，pass 和 Pass 不是同一个
  4.不能使用关键字可保留字

• 命名方案
  1.驼峰式： userNmae，小驼峰
  2.帕斯卡：UserName ,大驼峰
  3.匈牙利：oBth,_sex,_salray
  4.js中推荐使用驼峰式，小驼峰，常量推荐 大写

<script>
//声明 const 必须给值
const pass = '123';
</script>

---

变量类型与类型转换

• 原始类型，字符串，数值，布尔(真或假)，undefined(没有赋值就是undefined),null
  1.使用 typeof 来查看数值类型

<script>
// 字符串
let emali = "ade@qq.com";
console.log(emali,typeof emali);
// 数值
let price = 123;
console.log(price,typeof price);
// 布尔
let isEmpty = false;
console.log(isEmpty,typeof isEmpty);
// undefined
let num;
console.log(num,typeof num);
//null
let o = null;
consoll.log(o,typeof null);
if(o=== null) console.log("null");
</script>

• 引用类型：数组（Array.isArray()），对象(instanceof Object)，函数(typof)

<script>
//数组
let arr = [100,"手机",300];
console,log(Array.isArray(arr));
// 对象 变量赋值多个值的时候使用大括号就是对象
let items = {
    id:100;
    name:'张三'；
    price:'300';
};
console.table(items);
console.log(items instanceof Object)
//函数
function show(){
console.log(show,typeof show);
}
</script>

• 相同类型的数据在一起运算，它的结果才有意义
  -“+” 字符串运算中表示链接，此时会自动的触发类型转换
  -“==”:非严格匹配，只检查值，而不检查类型
  -“===”:严格匹配，必须值和类型全部相同菜才返回true

<script>
// 会运算 结果
console.log(100+100);
// 字符 拼接
console.log(100+"100");
// "==" 返回 true
console.log(100 == "100");
// "===" 返回false
console.log(100 === "100");
</script>

---

函数提升与重写

• 声明function,
  1.不管函数声明在什么地方，函数提升到顶部
  2.函数可以重写
  3.使用匿名函数,可以不被重写和提升

<script>
    // 声明
    function getNmae(name){
        return "Welcome to" + name:
    }
    // 调用
    console.log(getName("shijie"));
    // 函数重写
    function getName(name){
        return "拥抱"+name;
    }
    //匿名函数
    let num = function (a,b){
        return a + b;
    }
    console.log(num(1,2));
</script>

---

函数参数与返回值

• 必选参数，必须都要赋值
  -…扩展参数，简化函数的调用参数
• arguments 类数组：类数组其实就是对象
• 属性为从0递增的正整数，且有length属性

<script>
    //必选参数
    let sum = function(a,b){
        return a + b;
    };
    console.log(sum(1,2));
    //默认参数就是赋值
    let sum = function(a,b=2){
        return a + b;
    };
    console.log(sum(1));
    //多个参数
    let sum = function(a,b,c,d){
        return a + b + c + d;
    };
    console.log(sum(1,2,3,4));
    //...归内参数，简化函数的参数声明
    sum = function(...arr){
        return arr.reduce(function(p,c){
            return p + c;
        });
    }
    console.log(sum(1,2,3,4));
    // 简化数组
    let par = [1,2,3,4];
    console.log(par);
    //...扩展参数，简化函数的调用参数
    console.log(sum(...par));
    sum = function (q,b,c,d){
        return a+b+c+d;
    }
    console.log(sum(...par));
</script>

• 返回值
  -函数都是单值返回，如果想返回多个值,将结果封装到数组或对象中

//返回数组
let getItmes = function () {
    return [100,'你好',222];
}
console.log(getItmes());
//返回对象
let getItmes = function () {
    return {Id:100,name:'你好',price:222};
}
console.table(getItmes());

---

高阶函数

• 高阶函数：使用函数为参数或者将函数作为返回值的函数
  -回调函数:把函数当作参数
  -偏函数:先把个别参数固定下来.简化声明
  -柯里化：一个一个传值。简化调用
  -纯函数：完全独立于调用调用上下文，返回值只能收到传入的参数影响

<script>
//回调函数:把函数当作参数
document.addEventListener('click',function(){
    alert('hello');
})
// 偏函数
let sum = function(a,b){
    return function(c,d){
        return a + b + C + d;
    }
}
let f1 = sum(1,2);
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();
function getDate(){
    return Date.now();
}
console.log(getDate);
// 纯函数
function add(a,b)
    console.log(a+b);
</script>

---

箭头函数

• 箭头函数
  -箭头函数用来简化“匿名函数”的声明，function 可以省略 使用 + 来代替
  -如果只有一个参数，小括号都不要了 = 代替 function ()
  -如果没有参数，小括号不能省（）
  -箭头函数没有原型属性prototype,不能当构造函数用
  -箭头函数中的this,始终与它的上下文绑定

<script>
    let sum = function(a,b){
    return a+b;
    };
    console.log(sum);、
    // 简化匿名函数，两个值，可以省略 function 使用 = 来代替 调用时 （函数名（））
    let sum = (a,b) => {
        return a+b;
    };
    console.log(sum);
    // 只有一个参数的时候，小括号都不要了，使用= 代替function ();
    let tips = str =>console.log(str);
    // 没有参数的时候 要使用（）
    let tips = () => console.log(Success);
    console.log(tips());
</script>

---

作用域和闭包

• 作用域
  -全局 在函数外定义的函数
  -函数 可以使用全局，也有自己的额私用变量
  -块

<script>
// 全局作用域
let site = "baidu";
console.log(site);
// 函数作用域
function getSite(){
    let domain = "www.baidu.com";
    return site + domain;
}
console.log(getSite);
// 块的作用域
{
let a = 1;
const B = "Hello";
}
console.log(a,b);
</script>

• 闭包
  -自由变量：既不是函数参数变量，也不是私有变量，存在与函数调用上下文中
  -闭包：能够访问自由变量的函数，理论上讲，任何函数都是闭包

<script>
    // 自由变量： num 就是自由变量
    let num = 100;
    function add(a,b){
        let t = 0;
        return t + a + b + num;
    }
    function a(){
    // 私有变量
        let n = 100;
        //返回的子函数就是闭包
        return function(){
            return n;
        }
    }
    //调用里面有子函数 (a()());
    console.log(a()()));
    function f1(){
        let a = 1;
        // a 相对于f1 是私有白变量，但是相对与返回的匿名函数就是一个自由变量
        return function (){
            return a++;
        };
    }
    let f2  = f1();
    // 调用f2()
    console.log(f2());
</script>

---

立即执行函数

• 立即执行函数：IIFE
  -声明完直接调用
• 远古时代，js不支持块作用域

<script>
    //立即执行函数
    function sum (a,b){
        console.log(a+b);
    }
    sum(10,20);
    //声明完 直接调用
    （function (a,b){
        console.log(a+b);
    })(10,20);
</script>