总结

总结

1. 什么是原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找。如果没有找到，则会去它的_proto_隐式原型上查找，就是它的构造函数中的prototype。如果还没有找到就会再在构造函数中的prototype的_proto_中查找，这样一层一层向上查找就会形成一个链式结构，简单理解就是原型组成的链，称为原型链。

对于js的原型和原型链的理解 https://blog.csdn.net/weixin_42614080/article/details/93413476

2. rem适配布局

rem 是根据html的font-size大小来变化，是相对长度单位 正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，改变了一个元素在不同设备上占据的css像素的个数，从而实现了自适应布局。

优点:可以使用完美视口
缺点:计算设计图上的px值到rem的转换比例较麻烦

3. flex布局以及里面常用的属性

Flex就是弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为Flex布局。

常用属性：
① justify-content (水平排列的方式)

• center 元素居中排列
• space-between 元素靠两边等距排列
• space-around 元素等距排列，不靠两边

② flex-wrap (flex布局的换行)

• nowrap 不换行
• wrap 换行 第一行在上方

③ align-items (定义元素在交叉轴上如何对齐)

• center 垂直方向 居中排列
• flex-start 垂直方向 靠上排列
• flex-end 垂直方向 靠下排列

4. localStorage与sessionStorage

localStorage 和 sessionStorage 都是用来存储客户端临时信息的对象。

区别就是：

① localStorage的生命周期是永久性，没有失效时间。而sessionStorage的声明周期是浏览器的生命周期。
② 当浏览器关闭时，sessionStorage的数据将清空，而localStorage数据只要不通过代码特意的删除或手动删除，是永久保存的。

5. js内置属性

js内置对象 是指ECMAScript实现提供的、不依赖于宿主环境的对象。是不必显示的实例化内置对象。比如Object、Array、Math等，也就是使用的时候直接用。举例 👉 Math.random();

6. 路由跳转方式

https://blog.csdn.net/weixin_44751462/article/details/94056144
https://blog.csdn.net/a378113472/article/details/106239754

7.es6的新增

ECMAScript6是 JavaScript语言的新标准，新增的属性有 👇

1. let声明变量和const声明常量两个属性都具有块级作用域，var声明变量具有函数作用域
　　ES5中是没有块级作用域的，并且var有变量提升。在let中，使用的变量一定要进行声明

2. 箭头函数
　　ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义

3. 模板字符串
　　模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串

4. 解构赋值
　　ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值

5. for of循环
　　for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象，以及字符串。可以代替数组实例的forEach方法

6. import、export导入导出
　　ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用

7. set数据结构
　　Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数

8. … 展开运算符
　　可以将数组或对象里面的值展开；还可以将多个值收集为一个变量

9. @修饰器
　　decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数

10. class 类的继承
　　ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念

11. async、await
　　使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性
　　async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

12. promise
　　Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大

13. Symbol
　　Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的

14. Proxy代理
　　使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

15. setter和getter
　　getter 是一种获得属性值的"方法"，setter是一种设置属性值的"方法"。针对的都是类的属性，不是方法。

8. let和const和var的区别

① var声明的变量可重复声明，而let，const不能
② var是不受限于跨块级作用域访问，会与window相映射，let与其相反。var也不能跨函数作用域访问
③ const定义常量，创建时必须马上赋值以及只能在作用域里面访问且不能修改

9. 函数提升与变量提升

变量提升：在ES6之前，我们声明一个变量需要用到var关键字，用var来声明的变量就存在变量提升的特性。

找到var关键声明的变量，赋值为undefined，且添加为window的属性。= > 变量提升

函数提升 和变量提升的原理一样，区别就是在于，函数提升已经创建好了函数对象，而变量提升赋值为undefined，可以理解为变量声明提升。

10. 为什么let不存在变量提升

因为一旦某个变量在代码块中用let声明，那么在这个代码块里面，let语句之前，就是这个变量的死区。访问会出错，哪怕是typeof也不安全。必须遵循 “先声明，后使用”，否则会报错。

console.log(a); // ReferenceError: a is not defined
console.log(typeof(b)); // undefined
console.log(typeof(a)); // ReferenceError: a is not defined
let a = 1;

11. route与router的区别

$route 是路由信息对象，里面主要包含路由的一些基本信息，包括name、path、hash、query、params、matched等

$router 是路由实例对象，包含了一些路由的跳转方法，钩子函数等

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

① 外形不同：箭头函数使用箭头定义，普通函数中没有

// 普通函数
function func(){
  // code
}
// 箭头函数
let func=()=>{
  // code
}

② 普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。

// 具名函数
function func(){
  // code
}
 
// 匿名函数
let func=function(){
  // code
}

// 箭头函数全都是匿名函数
let func=()=>{
  // code
}

③ 箭头函数不能用于构造函数，不能使用new。普通函数可以用于构造函数，来创建对象实例。

function Person(name,age){
   this.name=name;
   this.age=age;
}
let admin=new Person("恩诺小弦",18);
console.log(admin.name);//恩诺小弦
console.log(admin.age);//18

④ 箭头函数的this永远指向其上下文的 this ，任何方法都改变不了其指向。在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。

13. map和filter

map()和filter()都是对调用他们的数组进行遍历。

使用方法: ( 都是将函数写在方法的括号里，参数也一样 )

arr.map(function (item,index,array){……})
arr.filter(function (item,index,array){……})

参数：① item：当前处理的元素；② index:当前处理元素的索引；③ array:调用方法的数组，也就是arr

let arr=[2,4,1,5,3,1];

let res1=arr.map(function (item,index,array) {
  // return array[index]; //用这种方法也可以获取到当前处理的元素
  return item>1; 
});
console.log(res1);// [ true, true, false, true, true, false ]

let res2=arr.filter(function (item,index,array) {
  return item>1;
});
console.log(res2);// [ 2, 4, 5, 3 ]

区别：map返回的只是对当前元素调用函数后（item是否大于1）的结果，而 filter是将结果为true的数值存到新的数组里面。

14. v-model

v-model就是vue的双向绑定指令，主要提供了两个功能：view层输入值会影响data的属性值，data属性值发生改变也会更新view层的数值变化。使用非常方便，极大的提高了前端开发效率。

15. v-if和v-show

v-if和v-show都可以用来动态显示dom的状态。但是，v-if是真正的条件渲染，是根据表达式的值在DOM中生成或者移除一个元素，有较高的切换性能消耗。而v-show只是简单的切换元素的css属性。如果元素需要频繁切换，推荐使用v-show。

16. v-if和v-for

当v-for和v-if同时使用时，v-for具有比v-if更高的优先级，这就意味在v-for每次的循环赋值中都会调用v-if的判断，所以不推荐v-if和v-for在同一个标签中同时使用。

// 解决办法: 父子级搭配使用
<ul v-if = "state">
  <li v-for = "(item,id) in list" :key="id"></li>
</ul>

17. Vue是什么

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

18. vue的生命周期

1. Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。

2. vue生命周期的作用是让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3. 总共分为8个阶段：创建前/后(beforeCreate / created)，载入前/后( beforeMount / mounted )，更新前/后(beforeUpdata / updated)，销毁前/销毁后(beforeDestory / destoryed)

4. 第一次页面加载时会触发 beforeCreate， created，beforeMount，mounted 这几个钩子

5. DOM 渲染在 mounted 中就已经完成了

19. vuex的核心

Vuex是一种状态管理模式，有五种核心属性：
① state是vuex的基本数据，用于存储变量
② getters是从state中派生的数据（相当于vue的computed计算属性）
③ mutations是提交更改数据的方法，同步
④ actios像一个装饰器，包裹mutataions，使之可以异步
⑤ modules是模块化Vuex，用于将store分割成不同的模块

20. vuex工作原理

首先从API中拿数据，就会牵扯到异步操作，所以我们把异步操作定义在action中，在组件中触发一个action，action里面有一个ajax请求，然后请求后端接口，拿到数据我们需要改变state中的状态，改变状态唯一的方式是commit提交一个mutation，提交以后state状态改变了，状态改变后，试图就会改变，因为Vuex是响应式的.

21. promise

https://juejin.cn/post/6844904052661174279

Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大。
Promise对象是个构造函数，用来解决异步回调地狱函数。

有三种状态，① pending(等待/初始状态) ② fulfilled(成功状态) ③ rejected(失败状态)，但只有异步操作的结果，可以决定当前是哪一种状态,其他任何操作都无法再改变这个状态。

22. 组件通信

① 父组件通过props方式向子组件传递数据
② 子组件通过$emit方法向父组件通信
③ 兄弟组件通信和跨级通信都是eventBus

23. 什么是技术栈

定义：一般来说是指将N种技术互相组合在一起(N>1)，作为一个有机的整体来实现某种目的或功能。也可以指掌握这些技术以及配合使用的经验。
举个例子：开发一个普通OA系统，您使用了html + css + javascript + vue+ Spring Boot+Spring cloud + hibernate + Spring+rocket Mq+Redis+Es + linux + mysql等等，这些技术加起来就可以称为技术栈。
(大白话：一些东西堆叠在一起。)

24. 说一下防抖和节流的区别

防抖：
1.在任务高频率触发的时候，只有触发间隔超过指定间隔的时间，任务才会执行
2.在每次函数执行之前先清空上一次设置的定时器，原因是：如果执行间隔大于n秒，那么先前的定时任务一定已经执行完毕，当执clearTimeout时，其实并没有定时器可清楚，否则定时器会被清除，然后重新计时

function debounce (fn,wait,immediate){
	  var timer = null;
	  console.log(fn,wait,immediate,'aaa')
	  return ()=>{
	    //判断首次是否需要立即执行
	    if(immediate){
			console.log('立即执行')
	      fn.call(this,arguments)
		  immediate = false;
	    }
		//清除定时器
		clearInterval(timer)
		timer = setTimeout(()=>{
			console.log('再次执行')
			fn.call(this,arguments)
		},wait)
	  }
}

节流：
1.在指定间隔内任务只执行一次
2.在每次函数执行之前，先判断是否存在定时器，存在则跳过本次执行，否则设置新的定时器

function debounce (fn,wait,immediate){
	  var timer = null;
	  console.log(fn,wait,immediate,'aaa')
	  return ()=>{
	    //判断首次是否需要立即执行
	    if(immediate){
			console.log('立即执行')
	      fn.call(this,arguments)
		  immediate = false;
	    }
		
		//如果当前存在定时器，返回；否则设置定时器
		if(timer) return ;
		//清除定时器
		clearInterval(timer)
		timer = setTimeout(()=>{
			console.log('再次执行')
			fn.call(this,arguments)
		},wait)
	  }
}

区别：
① 一定时间内任务执行的次数
②节流 – 被调用n次，只在time间隔时间点运行
③防抖 – 被调用n次，只执行一次

25. 什么是宏任务和微任务？

宏任务（macrotask ）和微任务（microtask ）
macrotask 和 microtask 表示异步任务的两种分类

26. Call apply和bind的区别

相似之处：
1、都是用来改变函数的this对象的指向的。
2、第一个参数都是this要指向的对象。
3、都可以利用后续参数传参。

区别：
1.当我们使用一个函数需要改变this指向的时候才会用到callapplybind
2.如果你要传递的参数不多，则可以使用fn.call(thisObj, arg1, arg2 …)
3.如果你要传递的参数很多，则可以用数组将参数整理好调 fn.apply(thisObj, [arg1, arg2 …])
4.如果你想生成一个新的函数长期绑定某个函数给某个对象使用，则可以使用const newFn = fn.bind(thisObj); newFn(arg1, arg2…)

27. 深拷贝和浅拷贝的区别

区别：
浅拷贝只是增加了一个指针指向已存在的内存地址，仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅复制出来的对象也会相应的改变。深拷贝是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存。

28. 面向对象是什么，面向对象在哪些方面体现

面向对象的三大特征：1.继承 2.封装 3.多态性
① 继承：就是保留父类的属性，开扩新的东西。通过子类可以实现继承，子类继承父类的所有状态和行为，同时添加自身的状态和行为。
② 封装：就是类的私有化。将代码及处理数据绑定在一起的一种编程机制，该机制保证程序和数据不受外部干扰。
③ 多态：是允许将父对象设置成为和一个和多个它的子对象相等的技术。包括重载和重写。重载为编译时多态，重写是运行时多态。

29. http和https区别

① HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)
② HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
③ HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
④ HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息）

30. git仓库拉取代码和上传代码

配置信息

git config --global user.name “linlianhuao”
git config --global user.email “linlianhuao@qq.com”

创建仓库并提交代码

git init
git remote add origin git@gitlab.*.com:linlianhuao/.git
git add -A
git commit -m 建立项目
git push -u origin master

拉取远程代码

git clone git@gitlab.*.com:linlianhuao/.git
cd **
git add -A
git commit -m 提交信息
git push -u origin master

31. hash和history的区别

hash原理：hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则

history原理： 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化

32. await和async

async 是一个修饰符，async 定义的函数会默认的返回一个Promise对象resolve的值，因此对async函数可以直接进行then操作，返回的值即为then方法的传入函数

await 关键字也是一个修饰符，只能放在 async 函数内部，await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值

33. webpack

Webpack是一个前端构建工具，可以将所有资源（包括Javascript，图像，字体和CSS等）打包后置于依赖关系中，使你可以按照需求引用依赖来使用资源。

webpack的好处：
① 清晰简明的模块：一个稍微有点规模的应用往往有着一个复杂的资源关系网，在需要做优化的时候就会使一件非常的头疼的事情。webpack可以代替你做这个麻烦事，将复杂的多个文件打包成你希望的代码模块，引入会非常清晰，想对引入文件做点什么操作也会更容易。
② 代码拆分来做资源异步加载：webpack打包成一个模块之后也带来一个问题，如果加载模块过于庞大，加载的速度就没法保证，所以webpack也提供了拆分代码后异步加载的方式，即先加载某个主要模块，当用到某个需要资源异步加载的模块时在对其发送请求加载，这样做在大型项目中很常见。
③ 消除对未引用资源的依赖：在复杂应用又多静态资源的情况下会减少很多无效的浪费，这会对应用的有很大提升。
④ 可以控制资源的处理方式：通过loader或者插件，我们可以对不同类型的文件引入做我们希望的操作。比如对代码压缩，uglify，图片压缩，文件处理，css预处理等等。
⑤ 稳定的生产部署：开发环境到生产环境的自定义配置到打包方式，通过同一套流程稳定的导出，这些都会给项目带来很大的效率提升，这对于一个大型项目来说，是至关重要的。
⑥ 一系列开发辅助工具：Dev-Server，HMR，这些都不用再一点点去配置，即开即用，大大提升了开发效率。

34. rem和em

em（相对长度单位），rem（相对长度单位）

特点：
① rem单位可谓集相对大小和绝对大小的优点于一身
② 和em不同的是，rem总是相对于根元素(如:root{})，而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。
③ rem支持IE9及以上，意思是相对于根元素html（网页），不会像em那样，依赖于父元素的字体大小，而造成混乱。使用起来安全了很多。

35. import和link的区别

① link引入的css在加载页面时同时加载，而@import中的css要在页面加载完毕后加载
② link是HTML提供的标签，@import是css的语法规则，只能加载在style标签内和css文件中
③ @import是css2.1时提出的，只能用于IE5+，而link不受兼容影响
④ link支持js控制DOM改变样式，而@import不支持

36. vue中如何创建自定义组件并引入组件

https://blog.csdn.net/weixin_43970743/article/details/89517581

37. keep-alive作用，之前有清除过它的缓存吗

详细链接：https://www.jianshu.com/p/9523bb439950

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

作用：是在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少了加载时间及性能消耗，也提高了用户的可体验性

在动态组件中的应用

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
     <component :is="currentComponent"></component>
</keep-alive>

在vue-router中的应用

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
    <router-view></router-view>
</keep-alive>

include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；max定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。

38. watch和computed的区别

computed 适合处理的场景是，一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性，computed是带缓存的，只有其引用的响应式属性（属性绑定）发生改变时才会重新计算(如果引用的属性没有改变，则调用上一次缓存值)

watch 适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化（该数据影响别的多个数据）==当数据发生变化时，执行异步操作或较大开销操作的情况。

39. 组件中data会是对象吗，为什么

组件中data是函数 因为每一个vue组件都是一个 vue 实例，通过 new Vue() 实例化，引用同一个对象，如果data直接是一个对象，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而data是函数的话，每个 vue 组件的 data 都因为函数有了自己的作用域，互不干扰

40. 什么是闭包

闭包就是能够读取其他函数内部变量的函数。
在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

41. this指向

① 普通函数调用，此时 this 指向 window
② 构造函数调用，此时 this 指向 实例对象
③ 对象方法调用，此时 this 指向 该方法所属的对象
④ 箭头函数中，此时 this 指向外层作用域的 this
⑤ 通过事件绑定的方法， 此时 this 指向 绑定事件的对象
⑥ 定时器函数， 此时 this 指向 window

附： 更改this指向的三个方法：
eval、apply、call方法的说明： eval() 函数可计算某个字符串，并执行其中的的JavaScript 代码。 call 、apply 这个两个函数的第一个参数都是 this 的指向对象，第二个参数的区别如下：
① call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘params1’,… ,‘paramsn’ )；
② apply的所有参数都必须放在一个数组里面传进去
obj.myFun.apply(db,[‘params1’, …, ‘paramsn’ ]);

42. 所了解的盒模型

W3C盒模型（标准盒模型）
给一个标签添加：box-sizing:content-box；(元素默认)
这个标签就转换为了w3c盒模型
标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度

怪异盒模型 (又称ie盒模型)
给一个标签添加：box-sizing:border-box；
这个标签就转换为了怪异盒模型
标签得实际宽度 = 设置的宽度
如果设置了padding和border就是从设置的实际宽高中减去，减去后才是内容的宽高。

区别 主要区别：
① 对于宽高的定义不同 w3c盒模型：设置的宽度就等于内容的宽度
② 怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度

43. 常用的UI库有哪些

① VUX（移动端）② element UI(饿了么后台) ③ Mint UI ④ iview ⑤ vue-mui

44. 双向数据绑定

双向数据绑定就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；

介绍一下Object.defineProperty()方法
（1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
（2）简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

45. Vue常用指令

① v-text 设置标签文本值（纯文本）
② v-html 设置标签文本值（用于data中有html结构，比如跳转）
③ v-on 事件绑定 https://www.cnblogs.com/torchstar/p/11799394.html
④ v-if 和 v-show 都是由表达值的真假来切换元素的显示和隐藏；
⑤ v-bind 用于属性绑定 （简写：：属性名）
⑥ v-for 根据数据生成列表结构，一般是和数组联用
⑦ v-model 双向数据标定

46. 你所了解的数组的方法

① 将数组合并成字符串（返回字符串）[ Array.join() ]

var a = [1,2,3];
var b = a.join("");
console.log(a); //[1, 2, 3],原数组不改变
console.log(b); //"123",变成字符串

② 倒序排列数组 [ Array…reverse() ]

var a = [1,2,3];
a.reverse();
console.log(a); //直接改变a数组的值 返回的是[3,2,1]

③ Array.sort()方法，返回排序后的数组。如果数组包含undefined，会被排到数组的尾部。如果不带参数的调用sort()，数组元素以字母表顺序排序

//从大到小排列
var a = [2,33,1111,444]; 
a.sort() 
console.log(a); //返回的结果是[1111, 2, 33, 444]
//从小到大排列
var a = [2,33,1111,444]; 
a.sort(function (a,b) {
return a-b
}) 
console.log(a); //[2, 33, 444, 1111]

详细链接： https://blog.csdn.net/qq_35652217/article/details/78470118

47. 实现双飞翼布局（两端固定，中间自适应）

方式一：通过flex弹性布局来实现

//HTML结构，div2是中间的自适应区域
<body>
    <div class="wrap">
        <div class="div1"></div>  
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>

*{  //先简单粗暴的解决一下浏览器的默认样式  
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing:border-box;   //使用border-box，盒模型好计算，妈妈再也不用担心我算不清块宽高了
}
.wrap{
    width: 100%;
    height: 100%;
    display: flex;     //使用弹性布局
    flex-flow:row nowrap;  //以沿主轴方向行显示，不换行，从而来显示3个块
    justify-content:space-around;  //这一个加和不叫其实也没事，加上去的意思就是两端对齐
}

[class^='div']{  // 给所有的div都加上高和边框样式，方便观看，不然都缩成一条线了
    height: 400px;
    border: 1px solid #f00;
}

.div1,.div3{  //给两端的div固定的宽
    width: 200px;
    background-color: #ccc;
    flex-shrink: 1; //默认是1，所以不用写也没事，写出来自是表达这个意思
}
.div2{
    background-color: #0f0;
    flex-grow:1;  //这个比较重要，作用是让第二个块的宽度撑满剩余的空间
}

方式二：通过定位来实现 (HTML结构不变，看样式)

.wrap{
    width: 100%;  //同样实现宽高100%铺开
    height: 100%;
    position: relative;  //父层添加相对定位，让子元素相对父层来定位
}
[class^='div']{
    height: 400px;
    border: 1px solid #f00;
}
.div1,.div3{
    position: absolute;
    width: 200px;
    background-color: #ccc;
}
.div1{
    left: 0;  //固定在父层的左侧
    top: 0;
}
.div3{
    right: 0;  //固定在父层的右侧
    top: 0;
}
.div2{
    background-color: #0f0;
    /*这个是关键，我们没有给中间的div2添加过宽属性，所以默认占用父层宽的100%，
     由于两侧块宽是固定的，所以中间的自适应块左右分别200px的外边距中间的content区域就会实现自适应*/
    margin: 0 200px;  
}

48. slice和splice的区别

slice(start，end)
从start开始截取到end但是不包括end
返回值为截取出来的元素的集合
原始的数组不会发生变化

//例子
        var arr1 = [1,23,44,55,66,77,888,"fff"];
        var arr2 = arr1.slice(2,4) //从index为2截取到index为4之前不包括4
        console.log(arr2); //[44,55]
        console.log(arr1); // [1,23,44,55,66,77,888,"fff"]原始数组没有被改变

splice(start,deleteCount,item1,item2…..);
start参数 开始的位置
deleteCount 要截取的个数
后面的items为要添加的元素
如果deleteCount为0，则表示不删除元素，从start位置开始添加后面的几个元素到原始的数组
里面
返回值为由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组
如果没有删除元素，则返回空数组
这个方法会改变原始数组，数组的长度会发生变化

//例子
        var arr3 = [1,2,3,4,5,6,7,"f1","f2"];
        var arr4 = arr3.splice(2,3) //删除第三个元素以后的三个数组元素(包含第三个元素)
        console.log(arr4); //[3,4,5];
        console.log(arr3); //[1,2,6,7,"f1","f2"]; 原始数组被改变

        var arr5 = arr3.splice(2,0,"wu","leon"); 
        //从第2位开始删除0个元素，插入"wu","leon"
        console.log(arr5); //[] 返回空数组
        console.log(arr3); // [1, 2, "wu", "leon", 6, 7, "f1", "f2"]; 
        //原始数组被改变

        var arr6 = arr3.splice(2,3,"xiao","long");
        //从第2位开始删除3个元素，插入"xiao","long"
        console.log(arr6); //["wu", "leon", 6]
        console.log(arr3); //[1, 2, "xiao", "long", 7, "f1", "f2"]

        var arr7 = arr3.splice(2);//从第三个元素开始删除所有的元素
        console.log(arr7);//["xiao", "long", 7, "f1", "f2"]
        console.log(arr3); //[1, 2]