2021-6面试

2021-08-04  本文已影响0人  焚心123

vue

es6的语法总结

   function test(a,b){
      console.log(a);//function a(){}
      var a=10;
      function a(){}
      console.log(a);//10
      function c(){}
      console.log(b);//undefined
      var b=function b(){}
      console.log(b)//function b(){}
   }
   test(1);
   var a=121;
   console.log(a);//121
   /**
    * 函数的变量提升：
    *     1、函数的变量提升比变量的提升优先级高，在变量的前面
    *     2、找形参和变量，相同的只需要一个就可以了，值为undefined
    *         a:undefined   b:undefined
    *     3、将实参和形参统一
    *         a:1  b:没有传递实参，值为undefined
    *     4、在函数中找函数，将值赋值给函数体
    *         a:function a(){}  b:由于函数中的b是字面量函数，所以值还是undefined
    *     5、在函数的内部开始运行
    *         a:function a(){}----10
    *         b:undefined-----function b(){}
   */

      var a = 10 ;
      function a(){
          console.log(a);//function a(){}
          a=20;
          function a(){}
          console.log(a)//20
      }
      a();
      console.log(a)//10

      a = 20;
      var a = 10;
      console.log(a);//10  本来a是全局变量20，然后下面有声明了一下，a=10；所以最终输出为10

 // todo 字符串模板的使用
    const a = 1;

    const b = 2;

    const c = `${a+b}`

    console.log(c);//3

    const d = 18;

    const e = `小明今年${d}岁`

    const f = '小明今年'+d+'岁'

    console.log(e);//小明今年18岁

    console.log(f);//小明今年18岁

 // 判断当前是否有这个字符串

    const str = '我现在正在练习es6';

    const str1 = '现在'

    const str2 = '我'

    const str3 = 'es6'

    if(str.indexOf(str1)>-1) console.log('indexOf有返回当前下标，没有返回-1---',str.indexOf(str1));//indexOf有返回当前下标，没有返回-1

    if(str.includes(str1)) console.log('includes有返回true，没有返回false---',str.includes(str1));//includes有返回true，没有返回false

    if(str.startsWith(str2)) console.log('startsWith头部有返回true，没有返回false---',str.startsWith(str2));//startsWith头部有返回true，没有返回false

    if(str.endsWith(str3)) console.log('endsWith尾部有返回true，没有返回false---',str.endsWith(str3));//endsWith尾部有返回true，没有返回false

// 字符串重复多次
        const str = '重复我10次'
        console.log(str.repeat(10));//重复我10次重复我10次重复我10次重复我10次重复我10次重复我10次重复我10次重复我10次重复我10次重复我10次
        let str1 = ''
        for (let i = 0; i < 10; i++) {
           str1+=str;
        }
        console.log(str1);

// 使用Array.from()，将对象转化为数组
    const obj = {
        0:'key要是用数字',
        1:'必须有length这个属性，否则转化不了',
        length:2
    }

2、可以将伪数组转化为数组
3、可以将set,map，string等数据结构转化为数组
4、第二个参数是一个回调函数，相当于数组的map方法，返回一个新的数组，将第一个参数中的数据进行处理

    const arr = new Array(10);

    console.log(arr);//[empty × 10]

    arr.push(20);

    console.log(arr);//[empty × 10, 20]

3、此时代码中的数组长度就是11了，在添加的时候，前面都是10个空的
4、而我们使用Aarray.of就可以解决上面的问题了

   const arr = Array.of(10);

    console.log(arr);//[10]

    arr.push(20);

    console.log(arr);//[10, 20]

 let arr =[1,2,4,5,6,7];

     arr.fill(10);//一个参数默认将数组中的数据全部改变为10

    //第一个参数是填充的参数，第二个参数是填充的位置，第三个下标是填充的个数，从下标0开始算起
    //  只能是数组内的长度，不能超过数组内的下标或者是长度，
     arr.fill('3',0,1);//["3", 2, 4, 5, 6, 7]

     arr.fill('3',1,2);//----[1, "3", 4, 5, 6, 7]

     arr.fill('3',1,4);//---- [1, "3", "3", "3", 6, 7]，第三个参数是4个但是从下标1开始填充，又是从0开始计算

    console.log(arr);

 let obj = {
        id:1,
        title:'1111'
    }

    console.log('id' in obj);

    console.log(obj.hasOwnProperty('id'));

    let arr =[1,2,4,5,6,7];

    console.log( 1 in arr);

    console.log(arr.indexOf(1)>-1);

    console.log(arr.includes(1));

    const index = arr.findIndex(item=>item===1)
    console.log(index!==-1)

    ....

 let obj = {id:1,title:'1111'};

    let obj2 = {id:1,title:'2222'};

    console.log(obj.id === obj2.id);//true

    console.log(Object.is(obj.id,obj2.id));//true

console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

    //reduce 简单的计算，第一个参数是我们传递的初始值，莫有的话，默认是数组的第一个数
    //reduce 第二个参数是数组中的每一项
    //reduce 第三个参数是数组本身

 let arr = [1,1,1,1,2,2,3,4,5,5,6,7,8,9];
    // 计算出现的次数
    let arr1 = arr.reduce((pre,next)=>{
        if(next in pre){//可以将in替换为hasOwnProperty()
            pre[next]+=1;
        }else{
            pre[next] = 1;
        }
        return pre
    },{})
    console.log(arr1);//返回的是对象
    arr1.length = 10;//给当前的对象添加一个length属性，可以转化为数组
    console.log(Array.from(arr1));

    // 数组去重
    let arr = [1,1,1,1,2,2,3,4,5,5,6,7,8,9];

    // 使用双循环进行判断，当前的数值跟下一个数值进行比较，是否相同，相同的话进行去重
    for (let i = 0; i < arr.length; i++) {
       
        for (let j = i+1; j < arr.length; j++) {
           
            if(arr[i]===arr[j]){
                arr.splice(i,1);
                i--;
                j--;
            }
            
        }
        
    }
    console.log(arr);

    const arr1 = [...new Set(arr)];//使用new Set 进行去重

    console.log(arr1);

    let arr2 = arr.reduce((pre,next)=>{
        // if(!pre.includes(next)){//当数组中没有这个值的时候进行添加就好
        //     pre.push(next);
        // }
        // indexOf()有的话返回下标，没有的话返回-1，所以没有的时候进行添加
        if(pre.indexOf(next)===-1){
            pre.push(next);
        }
        return pre;
    },[])

    console.log(arr2);

    // 简单的计算数组中的和
    let arr = [1,2,3,4,5,6,7];
    let s = arr.reduce((pre,next)=>{
        return pre + next
    },0)

    console.log(s);


 let obj = {
        id:1,
        title:'练习proxy代理'
    }

    let obj2 = new Proxy(obj,{

        get(target,key){
            console.log(`你正在读取obj中的${key}属性`);
            // return target[key];//必须要有返回值
            return Reflect.get(target,key);//一般我们推荐使用这种映射的方式进行返回
        },

        set(target,key,val){
            console.log(`你正在对obj的${key}进行设置`);
            // target[key] = val;
            // return target[key];
            return Reflect.set(target,key,val);
        },

        has(target,key){
            console.log(`obj中是否有这个${key}属性`);
            return Reflect.has(target,key);
        },
        ownKeys(target){

            return Reflect.ownKeys(target);
        },
    })

    console.log(obj2.id);
    obj2.name = '张三';
    obj2.id = 333;//设置属性
    console.log(obj2.name);
    console.log(obj2.id);//获取属性

    console.log('id' in obj2);//这种方法进行调用has方法

   console.log(Object.keys(obj2))//返回所有属性

template 和 JSX的区别

SPA单页面的优缺点

Vue中的data中某一个属性值发生改变，视图会立即更新渲染吗？

vue中的watch，computed和methods的区别

如何减少重绘和回流

url输入到渲染的过程？

rsa加密是非对称加密

文件的大小

Vue组件模板会在某些情况下受到HTML的限制，如在table表格中使用组件是无效的，常见的还有在ul,ol,select中使用组件也是会被限制的

<table><thead is="组件名"></thead></table>

插槽

vue3.0的语法的一些总结

vue2.0 ======================= vue3.0

beforeCreatec ================ setup

created ====================== setup

beforeMount ================== onBeforeMount

mounted ====================== onMounted

beforeUpdate ================= onBeforeUpdate

updated ====================== onUpdated

beoreDestory ================= onBeforeUnmount

destory ====================== onUmmounted

flex弹性盒模型布局

箭头函数和普通函数的区别

1、写法不同，箭头函数使用()=>{} ，普通函数使用function(){}
2、箭头函数都是匿名函数，普通函数可以是匿名函数也可以是命名函数
3、箭头函数不能使用构造函数，使用new进行声明
4、箭头函数本身是没有this的，声明时可以捕获上下文的this供自己使用，普通函数的this总是指向调用它的对象
5、箭头函数没有arguments对象，普通函数有
6、箭头函数的this永远指向其上下文的this，任何方法都改变不了它的指向，如call,apply,bind都不行

vue和react的相同点和不同点

原生的上拉加载和下拉刷新

let clientHeight  = document.documentElement.clientHeight; //浏览器高度
let scrollHeight = document.body.scrollHeight;
let scrollTop = document.documentElement.scrollTop;
 
let distance = 50;  //距离视窗还用50的时候，开始触发；

if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
    console.log("开始加载数据");
}

<main>
    <p class="refreshText"></p>
    <ul id="refreshContainer">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        ...
    </ul>
</main>

var _element = document.getElementById('refreshContainer'),
    _refreshText = document.querySelector('.refreshText'),
    _startPos = 0,  // 初始的值
    _transitionHeight = 0; // 移动的距离

_element.addEventListener('touchstart', function(e) {
    _startPos = e.touches[0].pageY; // 记录初始位置
    _element.style.position = 'relative';
    _element.style.transition = 'transform 0s';
}, false);

_element.addEventListener('touchmove', function(e) {
    // e.touches[0].pageY 当前位置
    _transitionHeight = e.touches[0].pageY - _startPos; // 记录差值

    if (_transitionHeight > 0 && _transitionHeight < 60) { 
        _refreshText.innerText = '下拉刷新'; 
        _element.style.transform = 'translateY('+_transitionHeight+'px)';

        if (_transitionHeight > 55) {
            _refreshText.innerText = '释放更新';
        }
    }                
}, false);

_element.addEventListener('touchend', function(e) {
    _element.style.transition = 'transform 0.5s ease 1s';
    _element.style.transform = 'translateY(0px)';
    _refreshText.innerText = '更新中...';
    // todo...

}, false);

// Parent.vue
<Child @mounted="doSomething"/>
// Child.vue
mounted() {
  this.$emit("mounted");
}


//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>
doSomething() {
   console.log('父组件监听到 mounted 钩子函数 ...');
},
//  Child.vue
mounted(){
   console.log('子组件触发 mounted 钩子函数 ...');
},     
// 以上输出顺序为：
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...
上一篇 下一篇

猜你喜欢

热点阅读