web前端面试基本问题

一、JS常用数组和字符串函数：

（1）数组

1、Array.map()：此方法是将数组的每个元素调用一个提供的函数，结果作为一个新的数组返回，没有改变原来的数组。

2、Array.forEach()：此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法的区分。

3、Array.filter()：此方法是将所有元素进行判断，将满足条件的原色作为一个新的数组返回。

4、Array.every()：此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false。

5、Array.some()：此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false。

6、Array.reduce()：此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型。

7、Array.push()：此方法是在数组的后面添加新加元素，此方法改变了数组的长度。

8、Array.pop()：此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度。

9、Array.shift()：此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度。

10、Array.isArray()：判断是不是一个数组，返回布尔值。

11、Array.toString()：此方法将数组转化为字符串。

12、Array.join()：此方法也是将数组转化为字符串。

13、Array.splice：开始位置， 删除的个数，元素)：万能方法，可以实现增删改。

14、Array.slice：slice() 方法与 splice() 方法功能相近，但是它仅能够截取数组中指定区段的元素，并返回这个子数组。该方法包含两个参数，分别指定截取子数组的起始和结束位置的下标。

（2）String字符串

属性：

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

函数：

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
repeat()	复制字符串指定次数，并将它们连接在一起返回。
replace()	在字符串中查找匹配的子串， 并替换与正则表达式匹配的子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
startsWith()	查看字符串是否以指定的子字符串开头。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白
toLocaleLowerCase()	根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase()	根据本地主机的语言环境把字符串转换为大写。
valueOf()	返回某个字符串对象的原始值。
toString()	返回一个字符串。

二、数组去重

1、利用ES6 Set去重（ES6中最常用）

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

[...new Set(arr)] 
//代码就是这么少

不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。

2、利用for嵌套for，然后splice去重（ES5中最常用）

function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重，两个null直接消失了

双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。

方法很多，两种思维：唯一key替换、双循环判断。

三、div垂直水平居中

1、绝对定位：利用position和transform。

.curr_div{
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

2、flex布局方法：在当前div的父级添加flex css样式。

.parent_div{
    height:800px;
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    border:1px solid #ccc;
}
.curr_div{
    width:600px;
    height:600px;
    background-color:red;
}

3、table-cell实现水平垂直居中: table-cell middle center组合使用。

.curr_div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border:1px solid #666;
}

四、JS中var和es6的let和const的不同点？

1、let是es6新增的声明变量的方式 ：

（1）作用域是块级作用域
（2）不存在变量提升

（3）不能重复定义，否则会报错

（4）存在暂时性死区（在声明之前引用的话会产生死区）

2、 const：

　　用来声明常量，且声明的常量是不允许改变的（否则会报错），只读属性，因此就要在声明的同时赋值。const与let一样，都是块级作用域，存在暂时性死区，不存在变量声明提前，不允许重复定义

3、 var 是es6之前 js用来声明变量的方法，其特性是：
（1）var的作用域是函数作用域，在一个函数内利用var声明一个变量，则这个变量只在这个函数内有效

（2）存在变量声明提前（虽然变量声明提前，但变量的赋值并没有提前，若是在声明前用到变量的话，值为undefined）

五、Promise是同步还是异步？有什么特点？

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

六、Cookie、localStorage、sessionStorage的区别？

特性	Cookie	localStorage	sessionStorage
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K左右	一般为5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

七、Vue常用的指令？

1、v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

2、v-show：根据表达式之真假值，切换元素的 display CSS 属性。

3、v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。

4、v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。

5、v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。

6、v-model：实现表单输入和应用状态之间的双向绑定

7、v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

8、v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

9、v-html：指定内容会以html标签的方式写入。

八、Vue父子组件如何传递数据？

1、父传子：可以通过子组件中，props中的入参传入。

2、子传父：$emit(name,data)，的方式暴露。

九、请写出vue的生命周期？

1、new Vue()

2、beforeCreate()

3、created()

4、beforeMount()

5、mounted()

5.1、beforeUpdate()

5.2、update()

6、beforeDestroy()

7、destory()

十、路由的生命周期

1、全局守卫

router.beforeEach((to, from, next) => {
  // 全局前置守卫
  // if(to.fullPath === '/shoppingCart'){
  //   //如果没有登录?对不起先去登录一下
  //   next('/login')
  // }
  console.log('1 beforeEach', to, from)
  next()
})
// 时间触发比 全局前置守卫慢些
router.beforeResolve((to, from, next) => {
  // 全局解析守卫
  console.log('3 beforeResolve', to, from)
  next()
})

router.afterEach((to, from) => {
  // 全局后置守卫、钩子
  console.log('4 afterEach', to, from)

})

2、路由独立守卫router.js

 {
    path: '/a',
    name: 'pageA',
    components:{
      default:pageA,
      ppp:Test
    },
    beforeEnter:(to,from,next)=>{
      console.log('2 beforeEnter',to,from)
      next()
    },
  },

3、组件内守卫xxx.vue

export default {
  beforeRouteEnter(to,from,next){
    //这里 拿不到this
    // 路由跳转，使用此组件时触发
    console.log('beforeRouteEnter',to,from)
    next()
  },
  beforeRouteUpdate(to,from,next){
    //可以获取 this
    // /a/123 /a/456  当 组件被复用时，触发此方法
    console.log('beforeRouteUpdate',to,from)
    next()    
  },
  beforeRouteLeave(to,from,next){
    //可以获取this
    //路由跳转，不适用此组件时触发
    console.log('beforeRouteLeave',to,from)
    next()     
  }
}