web前端笔记和面试题整理

web组成	内容
html	布局
css	style样式
js	JavaScript

由于开始整理笔记已经开始从vue的部分记录了，所以每天从vue开始等到后期会把前面html，css，js的相关重要笔记进行补充。（这里我省事了，所以名称都写了小写，具体规范按照标准来写，因为面试有笔试的部分，所以基本的代码规范还是要注意的）。

vue的需要提前知道的知识点：

1 作用域和块级作用域

2 let，const，关键字

3 解构赋值

1. 作用域：能够储存变量当中的值，并且能在之后对这个值进行访问或修改。可以理解为变量的范围。作用域分为词法作用域与动态作用域。js一般是词法作用域：就是代码在编写过程中体现出来的作用范围，代码一旦写好，不用执行，作用范围就已经确定好了。词法作用域：全局作用域与函数作用域。
2. 作用域链：只有函数才能制造作用域结构，那么只要是代码，至少有一个作用域，即全局作用域。各个作用域的嵌套关系组成一条作用域链。
3. 块级作用域：可以简单理解为：有{}的就是块级。是局部的。常用来解决闭包问题。

2 let关键字 

 <script>
        /*let关键字
        特性：
        let关键字用来声明变量，使用let声明的变量有几个特点：
        1不允许重复声明：
        2块级作用域（局部变量）
        3不存在变量提升：
        4不影响作用域链；
        应用场景：以后声明变量使用let 就对了
        */
       // console.log(a);undefine
       //var a=10;
     //  console.log(a)10
     let a;
     let b,c,d;//批量声明
     let e=100;
     let f=521,g='love',h=[];//批量声明并赋值
     //1 不允许重复声明：
    //  let dog="gou";
    //  let dog="gou";报错，已经声明过；
    //2 块级作用域
    // {
    //     let cat ="mao";
    //     console.log(cat);
    // }
    // console.log(cat);报错 cat isnot defined
    //3 不存在变量提升
        //变量提升：就是在创建之前使用，let不存在，var存在
        console.log(peo1);//可输出默认值
        console.log(peo2);//报错
        // var peo1="11";
        // let peo2="22";
        //4不影响作用域链
        //作用域链就是代码块内有代码块，跟常规编程语言一样，上级代码块中的局部变量下级可用
        {
            let p="ge";
            function fn(){
                console.log(p);//这里是可以使用

            }
            fn();
        }
    </script>

 const关键字：

 <script>
        /*const 关键字用来声明常量
        1 声明必须赋值初值
        2标识符一般为大写
        3不允许重复声明
        4值不允许修改
        5块级作用域（局部变量）
        对象属性修改和数组元素变化，不会触发const错误
        应用场景：声明对象类型使用const，非对象类型使用let；

        */
       //1 const声明常量
       const DOG="旺财";
       console.log(DOG);
       //2 声明必须赋初值；
       //3 不允许重复声明
       //4 值不允许修改
       // const CAT="miao";
    //    CAT="wang"报错
    //5 块级作用域
    {
        const CAT="miao";
        console.log(CAT);
    }
    console.log(CAT);//报错
    </script>

 

 3 解构赋值。这部分比较重要。

 <script>
        /*解构赋值：es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这杯称为解构赋值：
        应用场景：频繁使用对象方法，数组元素，就可以使用解构赋值形式
        */
       //1数组的解构赋值：
       const F4=["大哥","二哥","三哥","四哥"];

       //let [a,b,c,d]=F4;完全按位置匹配;
       //let [a,b,c,d,e]=F4;e默认不赋值undefined;
       let [a,b,c]=F4;//按位置赋值
       //2 字符串解构赋值
    const str="hello";
    let [s1,s2,s3,s4,s5] =str;
    console.log(s1+s2+s3+s4+s5);//hello
    // 3 对象的解构赋值
    const F3={
        name:"旺财",
        age:22,
        sex:"男",
        play:function(){
            console.log("会做饭");
        }

    }
    //console.log(F3.name);
    let{name,age,sex,play,s}=F3;//这里用的{}。
    //play();此方法可以正常调用；
    const obj= {
        uname:'onin',
        say:function(){

        },
        saybye(){

        }
    }
    let {uname,say}=obj;
    let{saybye}=obj;//错误写法
    saybye()//错误
    console.log(uname+"--"+say)
    </script>

 后续更新完vue笔记会更新一些列面试题。可以持续关注更新。谢谢大家