一些问题记录

        ES5 中作用域有：全局作用域、函数作用域。没有块作用域的概念。

         ES6 中新增了块级作用域。块作用域由 { } 包括，if语句和 for语句里面的{ }也属于块作用域。

1. var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2. let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3. const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
4. const 定义的对象属性可以被改变，const仅保证指针不发生改变，修改对象的属性不会改变对象的指针，所以是被允许的。

const person={
    name:'abc',
    sex:'男'
}

person.name='aaa'//此种修改不会报错

const person={
    name:'abc',
    sex:'男'
}

 person={
    name:'abc',
    sex:'男'
}//会报错

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

箭头函数是匿名函数，不能作为构造函数，不能使用new

没有原型属性，不能当作Generator函数，不能使用yield关键字

不绑定this，会捕获其上下文的this；普通函数的this指向调用它的对象

数组的方法

array.length

array.isArray();    //判断是否是数组

array.concat();//合并数组

array.fill()

• 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

arr.fill(value, start, end)
ar numbers = [1, 2, 3]
numbers.fill(1);
// results in [1, 1, 1]

array.forEach();

array.includes();//判断数组是否包含指定值 ,返回true、false

a.indexOf()；//判断数组是否包含指定值 ,返回0，-1

a.join();  //将数组的所有元素转为字符串

let a=['a','b','c'];
a.join();
=> 'a','b','c'

a.map();

a.pop();//删除数组最后一个元素

a.push();//添加元素到数组末尾

数组方法汇总 数组常用方法汇总_Gkuankuan的博客-CSDN博客_数组方法

浅拷贝和深拷贝

a和b两个对象，a有值b为空，b=a； 修改a，b一起改变==》浅拷贝

a改变，b不改变 ==》深拷贝

原理

前端【JS】，深拷贝与浅拷贝的区别及详解！ - bug开发施 - 博客园

vue生命周期-创建，数据初始化，挂载，更新，销毁

beforeCreate

created

beforeMount

mounted（写方法）

beforeUpdate

updated（更新）

beforeDestroy

destroyed

如果使用keep-alive，会增加activated,deactivated生命周期

父传子  props
子传父  emit

兄弟组件传值

1、子传父，父传子

2、vuex

3、eventBus

在兄弟组件A,B中引入eventBus.js文件，A组件

methods:{
    changesize(){
        eventBus.$emit('add',this.arg)
    }
}

B组件

created(){
    eventBus.$on('add',(message)=>{
        //一些操作，message就是从top组件传过来的值
        console.log(message)
    })
},

axios 拦截器

1 请求拦截器

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断vuex中是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    const token = window.localStorage.getItem("token");
    token && (config.headers.Authorization = token);
    return config;
  },
  error => {
    return Promise.error(error);
  }
);

2 响应拦截器

axios.interceptors.response.use(
  response => {
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    // 否则的话抛出错误
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是2开头的的情况
  // 这里可以跟你们的后台开发人员协商好统一的错误状态码
  // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  // 下面列举几个常见的操作，其他需求可自行扩展
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
          vant.Toast.fail("身份验证失败，请关闭重新进入。");
          break;

        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          vant.Toast.fail("登录过期，请关闭重新进入。");
          // 清除token
          break;

        // 404请求不存在
        case 404:
          vant.Toast.fail("您访问的网页不存在。");
          break;
        // 其他错误，直接抛出错误提示
        default:
          vant.Toast.fail(error.response.data.message);
      }
      return Promise.reject(error.response);
    }
  }
);

v-if  动态显示隐藏 多次
v-show  通过css显示隐藏 一次

v-model其实是个语法糖，它实际上是做了两步动作：
1、绑定数据value
2、触发输入事件input

  <input type="text" v-model="username">

  <input type="text" :value="username" @input="username=$event.target.value">

JsonP跨域请求 

ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

关于闭包

「每日一题」JS 中的闭包是什么？ - 知乎

「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。

function foo(){
  var local = 1
  function bar(){
    local++
    return local
  }
  return bar
}

var func = foo()
func()

回调函数

回调函数是把函数当做参数进行传递，并执行,一般都是作为最后一个参数进行传递的，这样可以需要的时候就传递进去，不需要的时候不传递，回调函数内部也可以传参数，回调函数的命名一般都为callback，也可以命名其他名字

function request(a,b,cb){
console.log(a)
cb()
console.log(b)
}
request(1,2,()=>{
console.log('hahha')
})

 

前端安全漏洞及处理
xss跨站脚本攻击
1 对数据进行HTML编码，使脚本代码变成普通字符串
2 此外还有URL，json编码
3 设置http头

iframe攻击
1 设置安全属性sandbox
    如设置sandbox为空，将严格限制iframe的权限，会跨域

点击劫持：将iframe页面设置透明置于正常页面上方

错误的内容响应
攻击者将js脚本当做图片上传，而后被浏览器误读
可以设置X-Content-Type-Options这个HTTP Header明确禁止浏览器去推断响应类型。

第三方依赖包漏洞

使用工具扫描

使用SSL Stripping是https降级成http

在http header预加载，强制使用https

Strict-Transport-Security: max-age=<seconds>; includeSubDomains; preload

本地存储数据泄露

1 加密储存

缺乏静态资源完整性校验

为提高访问速度，将静态资源放在CDN上，因此产生被劫持污染文件的风险

使用SRI功能，在资源文件中加入SRI值，浏览器处理时校验intefrity属性是否一致

	cookie	session
状态	浏览器端	服务器端
存储	以文本方式保存字符串类型	支持任何类型的对象
大小	单个cookie不能超过4kb	无限制
安全性	cookie欺骗，截获	更高，存在加密的sessionID校验，存在cookie中
应用	判断是否登录，存token	保存登录信息，userid等

	sessionStorage	localStorage
生命周期	临时保存，关闭窗口即消失	永久保存
大小	5M	5M
位置	客户端	客户端
类型	字符串	字符串