1跨越,如何解决跨越?
- JSONP
- JSONP 的原理很简单,就是利用script标签没有跨域限制的漏洞。通过script标签访问需要访问的后端的地址,后端返回一个函数调用的方式,将需要发送给前端的数据当成这个函数的参数,前端只需要定义一个同名的函数接受后端返回的数据即可。
- JSONP使用简单且兼容性不错,但是只限于get请求,无法发送post请求
- JSONP使用还需要后端的配合
- 此种记住已经不是ajax请求了,是script请求
- 配置反向代理
- 因为同源策略是限制浏览器访问别人的服务器,我们可以绕过直接请求,先让我们浏览器请求自己的服务器,由自己的服务器请求别人的,拿到数据之后返回给我们的浏览器。这种只需要简单的配置即可(ajax请求)
- 后端配置CORS
- 无需了解,一般也不建议这样配置。
2.怎么理解作用域和作用域链 作用域:一个变量或者函数可以使用的范围 作用域链 当使用一个变量或者函数的时候会先在当前自己的作用域里面查找, 如果自身作用域有就会使用自身的直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链。 作用域的产生 全局作用域:是我们在页面打开的时候自动创建生成的,全局叫做window 局部作用域:定义函数就会生成一个局部的作用域 作用域的访问原则 就近原则 当使用一个变量或者函数的时候会先在当前自己的作用域里面查找,如果自身作用域有就会使用自身的 自身作用域如果没有这个变量会去它的上一级作用域里面查找,上一级作用域有就使用上一级的,上一级没有,就继续往上一级查找,一直找到全局作用域 如果全局有就使用全局的,如果全局没有会报这个变量未定义 作用域的赋值原则 就近原则 当给一个变量赋值的时候 会优先在当前作用域里面查找是否定义过这个变量,如果当前作用域有定义,就给当前作用域里面的变量赋值,不会给上一级赋值。 当前作用域没有定v广场下车方便o义过这个变量,就会往上一级作用域查找,如果上一级有定义过这个变量,就会给上一级作用域变量赋值,不-赋值;如果全局都没有定义,会自动在全局声明一个变量,再给这个变量赋值。
3.引用数据类型和基础数据类型的区别 (值传递和引用传递 区别) 基础数据类型和复杂的数据类型在赋值的时候因为存储方式不一样,导致赋值的内容也不一样。 基础的数据类型之间赋值是直接将一个变量的数据拷贝给另外一个变量,一个变量的变化不会改变另外一个变量的数据,被称为值传递的过程。 复杂数据类型之间的赋值是将一个变量的地址拷贝给另外一个变量,因为地址(引用)指向的数据是同一个位置,所以一个变量变化会导致另一个也发生变化,这种赋值过程被称为引用传递。 ————————————————————————————————————————————————————
值传递(栈内)Ll-地址---push (函数的形参传递)(对象赋值给某个对象的a属性) 两个对象比较的时候,是地址传递。
4.var let const 区别
①var声明的变量会挂载在window上,而let和const不会
②var声明的变量存在变量提升,let和const不会
③同一作用域下var可以声明同名变量,let和const不会
④使用let和const声明的变量存在暂存性死区
⑤const一旦声明必须赋值,不能使用null占位,声明后不能再次修改
如果声明的是复合数据类型,可以修改其属性
var let const
1.是否有块级作用域 × √ √
2.是否存在变量提升 √ × ×
3.是否重复声明变量 √ × ×
4.是否添加全局属性 √ × ×
5.是否存在暂存性死区 × √ √
6.是否必须设置初始值 × × √
7.能否改变指针指向 √ √ ×
(重新赋值)
5.对promise的理解
①对promise的理解
promise对象是一种异步操作,它表示一个尚未完成且预计在未来完成的异步操作。
①概念:Promise对象是一个构造函数,用来生成Promise实例。
②状态:promise有两种状态改变方式:可以由pending变成fulfilled,也可以由pending变成rejected。
当状态改变,会一直保持这个状态,不会变化。当状态改变, promise.then绑定的函数就会被调用。
③使用:(1)类似构建对象,我们使用new来构建一个Promise。Promise接受一个「函数」作为参数,该函数的两个参数分别是resolve和reject。这两个函数就是「回调函数」。
(2) resolve函数的作用:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用:在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去;
(3)promise 实例生成后,可以用then方法,返回resolved状态 和 rejected状态 的回调,一个是成功fullfilled的回调,一个是失败rejected的回调;
④对then的理解:第一次then中返回的结果,无论是成功或失败,都将返回到下一次then中的成功态中,但在第一次then中如果抛出异常错误,则将返回到下一次then中的失败态中
⑤优点:解决了回调地狱的问题。
⑥缺点: a.一旦新建会立即执行,无法中途取消。
b.若不设置回调函数,promise内部抛出错误,不会反射到外部。
c.当处于pending状态时,无法得知目前的进展阶段,是刚开始还是即将完成。
②何为promise
1.它是以面向对象方式封装的,在实例化promise的时候,需要接收一个回调函数,(可以是普通函数,也可以是箭头函数)作为参数
称为resolve
2.resolve有自带的两个形参resole,reject
实例的原型上有三个方法,then,catch,finally
3.promise实例状态成功的时候会自动调用then方法,失败的时候会调用catch方法 finally无论成功或失败都会调用。
4.通过实例状态实现承诺,一个promise实例最终只能有一个状态
pending等待 --->promise无结果之前的状态
fulfilled成功------>在resolve函数里调用resolve函数----成功,成功后会得到一个结果,通过resolve函数传递,这个结果的终值是value
rejected失败------>在resolve函数里调用reject函数-----失败,失败后会得到一个结果,通过reject函数传递,这个结果叫做拒因reason
var p = new promise (function(resolve,reject)
{resolve(结果)---111 value
reject(结果)-----222 reason
}
p.then(function(res){console.log(then)----->终值
p.catch(function(err){console.log(catch)})---->拒因
p.finally(function(){})---->成功或失败都会调用
6.继承 ①借助构造函数实现继承 在子类的构造函数里面调用父类的构造函数,利用call或者apply改变父类构造函数this的指向 优点: 子类实例可以使用父类的属性和方法 缺点: 子类实例无法使用父类原型上的属性和方法 ②原型链继承 将子类构造函数的原型指向父类的某个实例 优点: 子类实例可以使用父类原型上的属性和方法 缺点: 子类实例无法使用父类的属性和方法 子类实例访问constructor属性得到的不是子类的构造函数,而是父类的构造函数 组合继承 ③借助构造函数实现继承 + 原型链继承 这样子类的实例既可以使用父类的属性和方法也可以使用父类原型上的属性和方法 将子类构造函数原型的constructor属性重新指向子类的构造函数 缺点 会调用父类构造函数两次 一次是在子类的构造函数内部 一次是在将子类构造函数原型指向父类实例 虽然会调用两次但是没有太大影响 使用es6的class和extends关键字实现继承
7.数据类型的转换 ①转数值 number parseInt parseFloat ②转字符串 toString String ③转布尔 -->boolean ④转 false -->undefiend null NaN ''
5.类型转换
8.数组API的方法
9.缓存的方式 .cookie的特点 存储大小有限制,一般是4KB左右,数量有限制,一般是 50 条左右 有时效性,也就是有过期时间,默认的过期是session级别 有域名限制,只能在域下面存储,无法在本地存储,当前域只能使用自己域下面的cookie,无法访问其他域的cookie 服务端和客户端公用的空间,一般存放一些前后端公用的数据 cookie和localStorage还有sessionStorage区别 cookie一般存储比较重要的数据,前后端公用的数据,有一定的大小限制(4kb),有过期时间 localStorage和sessionStorage存储的数据只能前端使用,相对于比较大(5M) localStorage存储的数据是永久的,除非用户自己手动清除缓存,否则会一直存在。sessionStorage存储的数据是会话级别的,关闭浏览器就会自动删除
10.数组的es6
11.构造函数 new关键字调用的 new会创建一个空对象 new会将构造函数内部this指向到这个创建出来的对象 new会将创建对象的__proto__指向构造函数的prototype new会返回这个创建出来的对象
①-④
12.标准文档流的概念 从左往右 从上往下
box-sizing content-box bording-box 标准盒 怪异盒 padding 13.解决回调函数异步的问题 promise asyns awit
- 闭包
优缺点 延长局部变量的生命周期
使用场景 15.CSS (*7)自定义属性data的优缺点
16.css3圆角属性 3.CSS3的新特性 ①选择器 ②新样式: 边框 背景 文字 ③translation过渡 ④animation动画 ⑤渐变 linear-gradient radial-gardient ⑥其他:flex弹性布局 grid栅格布局 媒体查询 17.作用域
18.css清除浮动的方法 1,父级div定义 height 2,父级div定义 overflow:hidden 3,结尾处 加空div标签 .clearfloat{clear:both;} 4. 结尾处 伪元素 ::{clear:both display:block; content:""}
19.this的理解 一 普通函数 ①this值只能在作用域内使用,在全局作用域里调用this指向全局window ②this在局部作用域内使用,谁在调用函数,this就指向谁 二 箭头函数 ①无this ②有this,和定义位置作用域的this相同 三 构造函数 this指向当前创建出来的实例 7.谈谈你对js作用域的理解 作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域 我们一般将作用域分成: 全局作用域 任何不在函数中或是大括号中声明的变量,都是在全局作用域下,全局作用域下声明的变量可以在程序的任意位置访问 局部作用域 块级作用域 ES6引入了let和const关键字,和var关键字不同,在大括号中使用let和const声明的变量存在于块级作用域中。在大括号之外不能访问这些变量 函数作用域 函数作用域也叫局部作用域,如果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问,不能在函数以外去访问 1.如何改变this指向 ①call 方法 语法:函数名.call(调用者, 参数1, …) 作用:函数被借用时,会立即执行,并且函数体内的this会指向借用者或调用者 ②apply方法 语法:函数名.apply(调用者, [参数, …]) 作用:函数被借用时,会立即执行,并且函数体内的this会指向借用者或调用者 ③bind方法 总结: 相同点: 三者都可以把一个函数应用到其他对象身上,注意不是自身对象 不同点: ○ call,apply是直接执行函数调用。bind是绑定,执行需要再次调用。 ○ call,bind接收逗号分隔的无限个参数列表;apply接收数组作为参数。
20.BFC BFC是什么? 块级格式化上下文 ①是CSS独立渲染的区域,内部元素的渲染不会影响边界以外的区域 ②通俗来讲,可以理解为一个容器,在这个容器中按照一定的规则进行物品摆放,并且不会影响到其他环境中的物品
触发BFC的条件 ①元素设置浮动float除none以外的值 ②元素设置绝对定位position:absolute fixed ③display值为inline-block,table-cell,table-caption,flex,flex-inline,flow-root(CSS3触发BFC专用) ④overflow值为auto scroll hidden
BFC的特点 ①内部的盒子会在垂直方向一个接一个放置 ②盒子的垂直方向的距离由magin决定的,属于同一个BFC的两个相邻的盒子的margin会发生重叠 ③每个元素的margin box的左边与包含块的border box 的左边相接触 ④BFC是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素 ⑤BFC的区域不会与浮动的盒子重叠 ⑥计算BFC高度时,浮动元素也会参与计算
BFC的应用 ①防止margin的重叠 ②清楚内部的浮动 ③自适应两栏布局 ④防止元素被浮动元素覆盖
21.选择器的权重 !important---无穷大 行内样式---1000 id选择器---100 类选择器、属性选择器、结构伪类选择器---10 标签选择器、伪元素选择器---1 继承或通配符(*)---0
22.如何用CSS实现一个三角形 width:0 height:0
23.一个盒子已知宽高 如何在另一个盒子中水平垂直居中
绝对定位 left top 50% margin-top:盒子高度的一半 margin-left:盒子宽度的一半 固定宽高 margin:0 auto
不知宽高 父相子绝 transform:50% 弹性盒 display:flex grid布局
2.如何实现盒子的水平垂直居中?(最常用的三种方式)
水平居中:
1.行内元素:text-align:center
2.块级元素:margin:0 auto
3.绝对定位50%+自我位移50%
position:absolute
left:50%
transform:translateX(-50%)
4.flex布局
display:flex
justify-content:center
垂直居中:
5.设置行高为本元素的高度
height:100px
line-height:100px
6.绝对定位50%+自我位移50%
position:absolute
top:50%
transform:translateY(-50%)
7.flex布局
display:flex
align-item:center
8.table布局
父元素:display:table
子元素:display:table-cell;vertical-align:middle;
24.谈谈你盒模型的理解? 标准盒模型 怪异盒模型
25.数组去重的思路(es6)
ES6中新增了数据类型Set,Set的一个最大的特点就是数据不重复。Set函数可以接受一个数组(或类数组对象)作为参数来初始化,利用该特性也能做到给数组去重。
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1] // 数组去重: // 方法4: set function newArrFn (arr) { // .new Set方法,返回是一个类数组,需要结合 ...运算符,转成真实数组 return ([...new Set(arr)]) } console.log(newArrFn(arr));
26.es6新特性 1.let const 2、模板字符串 3、解构赋值 4、函数的默认值 5.箭头函数 6.拓展运算符 7. for of遍历的是键值对中的值 for in遍历的是键值对中的键 8.class类,原型链的语法糖表现形式 9.primose 用于更优雅地处理异步请求。 10.async/await 比promise更好的解决了回调地狱 11.Symbol,新的基本类型 12.Set集合 存储任何类型的唯一值,即集合中所保存的元素是不重复的。类数组结构。let arrNew = new Set(待去重的数组) 13JSON 14.Map
27.什么是预解析? 28.get 和 post两种请求方式的区别 ①安全性 ②有无乱码 ③缓存 ④ 28.防抖和节流? 防抖: 概念:用户多次触发事件,在用户一直触发事件中,事件不会执行,只有在用户停止触发一段时间后再执行这个事件一次。 原理:用户每次触发事件都会延迟执行,在设置延时定时器之前都会把上一次延时定时器清除,最终只有用户连续触发这个事件 的间隔时间超出我们设置的参数ms毫秒之后,该事件才会触发一次。
节流 概念:用户多次触发事件,在用户一直触发事件过程中,事件会每间隔一段事件执行一次,会执行多次。 原理:用户每一次触发都会设置一个延时定时器,但如果已经设置了延时定时器会等上一次延时定时器执行之后才会开启下一个定时器 这样用户一直触发,事件会每间隔一段事件执行一次。 29.事件委托 什么是事件委托:在开发中,如果我们想要给一个元素绑定事件,需要获取到这个元素,但是如果元素是动态生成的, 无法获取从而无法绑定,此时我们就需要利用冒泡原理,把这个事件委托给这个元素页面存在的父元素绑定 如何实现? 只需要获取页面已经存在的父元素,给这个父元素绑定同类型的事件,利用冒泡原理,子元素会触发这个事件,再通过event.target缩小事件触发的范围
30.es5和es6继承的区别