首页 > 其他分享> 文章详细

复习day2

2022-02-21 21:06:31 阅读：136 来源： 互联网

标签：返回 map arr 复习元素 day2 参数数组

1、localStorage、sessionStorage 和 Cookie 区别

2.如何实现浏览器内多个标签页之间的通信?

3.数组中的forEach 和map 的区别？

4.JS 里垃圾回收机制是什么，常用的是哪种，怎么处理的？

5.数组新增api

6. Get 和Post 的区别以及使用场景

7.事件绑定和普通事件有什么区别？

8.简述一下v-if和v-show指令的区别。什么场景使用v-show比较合适。

9.vue中key的作用？

10.route 和router的区别

11.call，apply，bind区别

12.$(this)和this关键字在jQuery中有何不同？

13.对vue生命周期的理解？

14.v-for 与 v-if 的优先级?

15.js的几种遍历循环方式?

16.请你谈谈 Cookie 的弊端？

17.请说出三种减低页面加载时间的方法？

20.在 JS 中有哪些会被隐式转换为 false？

21.绑定事件方式有几种？

22.怎么判断dom元素节点的类型？

1、localStorage、sessionStorage 和 Cookie 区别
共同点：都是保存在浏览器端，且是同源的。
区别：
cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，
而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。
localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，
即使同一页面；localstorage在所有同源窗口都是共享

2.如何实现浏览器内多个标签页之间的通信?
WebSocket SharedWorker
也可以调用 localstorge、cookies 等本地存储方式。
localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信。

3.数组中的forEach 和map 的区别？
forEach 和 map 的相同点
相同点

1.都是循环遍历数组中的每一项

2.forEach 和 map 方法里每次执行匿名函数都支持 3 个参数，参数分别是 item（当前每一项）
,index（索引值）,arr（原数组）
3.匿名函数中的 this 都是指向 window

4.只能循环数组

区别

1.foreach（）没有返回值，改变原数组

2.map（）有返回值，返回新数组，原数组不变

用途：

foreach（）不改变数据，只是用数据做一些事情

map（）你需要返回一个新数组
map方法
1.map 方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值
2.map 方法不会对空数组进行检测，map 方法不会改变原始数组。
3.浏览器支持：chrome、Safari1.5+、opera 都支持，IE9+, 若 arr 为空数组，
则 map 方法返回的也是一个空数组。

forEach 方法
1.forEach 方法用来调用数组的每个元素，将元素传给回调函数
2.forEach 对于空数组是不会调用回调函数的。无论 arr 是不是空数组，
forEach 返回的都是undefined。这个方法只是将数组中的每一项作为 callback 的参数执行一次

4.JS 里垃圾回收机制是什么，常用的是哪种，怎么处理的？
JS 的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着
垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所占用的内存。

JS 中最常见的垃圾回收方式是
标记清除
工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，
则将其标记为“离开环境”。标记“离开环境”的就回收内存

工作流程：
垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记去掉环境中的变量
以及被环境中的变量引用的变量的标记再被加上标记的会被视为准备删除的变量
垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间

5.数组新增api

arr.map()用回调函数处理数组里面每一项，函数返回值生成一个新的数组.

arr.filter() 遍历当前数组生成一个过滤后的新的数组

arr.copyWithin()方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中; 改变原数组

arr.includes() 判断一个数组是否包含一个指定的值

arr.find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

6. Get 和Post 的区别以及使用场景
区别
1、Get 使用 URL 或 Cookie 传参。而 Post 将数据放在 BODY 中
2、Get 的 URL 会有长度上的限制，（url通常限制2048字符）则 Post 的数据则可以非常大
3、Post 比 Get 安全，因为数据在地址栏上不可见

4.get请求可以刷新，刷新没关系，post请求刷新就会重新提交

5.get可以被浏览器缓存，post不能
最本质的区别
Get 是用来从服务器上获得数据，而 post 是用来向服务器上传递数据

Get/Post 使用场景
若符合下列任一情况，则 Post 方法：
1、请求的结果有持续性的作用，例如：数据库内添加新的数据行
2、若使用 Get 方法，则表单上收集的数据可能让 URL 过长
3、要传送的数据不是采用 ASCII 编码

若符合下列任一情况，则用 Get 方法：
1、请求是为了查找资源，html 表单数据仅用来搜索
2、请求结果无持续性的副作用
3、收集的数据及 html 表单内的输入字段名称的总长不超过 1024 个字符

7.事件绑定和普通事件有什么区别？

事件绑定相当于在一个元素上进行监听，监听事件是否触发。

普通事件就是直接触发事件，下面的事件会覆盖上面的事件

两者的区别就在于是否可重复使用。

区别就是普通事件只支持单个事件，而事件绑定可以添加多个事件

8.简述一下v-if和v-show指令的区别。什么场景使用v-show比较合适。

答：v-if是通过控制dom节点的存在与否来控制元素的显隐；
v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
因为v-if是整个元素的渲染与清除，所以用v-if的显示隐藏切换会带来更高的性能消耗，
而v-show只是设置css，更适用与显示隐藏切换场景的使用。
而v-if如果初始条件不成立则不会渲染节点，所以v-show会带来更高的初始渲染消耗。

9.vue中key的作用？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，
而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
key的作用主要是为了高效的更新虚拟DOM

key可以提高虚拟dom的更新效率

vue中默认“就地复用”策略，在dom操作中，没有可以会造成选项错乱

管理可复用的元素
10.route 和router的区别
答：一个是用来获取路由信息的，一个是用来操作路由的。route 是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
而router是“路由实例”对象包括了路由的跳转方法，钩子函数等

11.call，apply，bind区别
答：call(this指向的对象, 参数1, 参数2, 参数3, ...)
apply(this指向的对象, [参数1, 参数2, 参数3, ...])
bind(this指向的对象, 参数1, 参数2, 参数3, ...)
相同点：
call，apply，bind都是函数原型的方法，
都是改变函数调用时内部this的指向，
第一个参数都是函数内部this指向的对象
不同点：
   call从第二个参数开始为函数的参数，而且参数是单一传递，不能以参数数组传递;
   apply从第二个参数开始为函数的参数，而且第二个参数为数组，
该数组包含函数的所有参数
   bind从第二个参数开始为函数的参数，而且参数是单一传递，不能以参数数组传递，
并且返回一个绑定函数内部this指向的函数

12.$(this)和this关键字在jQuery中有何不同？
答：$(this)返回一个jQuery对象，可以调用jQuery方法，比如用text()获取文本
而this代表当前元素，是JavaScript关键词中的一个，表示上下文中的当前DOM元素，不能调用jQuery 方法，直到被$()函数包裹，例如$(this)

13.对vue生命周期的理解？

答：vue的每个组件都是独立的，每个组件都有一个属于它的生命周期，一个组件创建，数据初始化，挂载，更新，销毁，就是一个组件所谓的生命周期。

14.v-for 与 v-if 的优先级?
v-for 和 v-if 同时使用，有一个先后运行的优先级，v-for 比 v-if 优先级更高，这就说明在
v-for 每次的循环赋值中每一次调用 v-if 的判断，所以不推荐 v-if 和 v-for 在同一个标签中
同时使用。

15.js的几种遍历循环方式
答：forEach()：参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self；forEach没有返回值
map()：同forEach，同时回调函数返回数据，组成新数组由map返回
every()：同forEach，同时回调函数返回布尔值，全部为true，由every返回true
some()：同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true

16.请你谈谈 Cookie 的弊端？

缺点： 1.`Cookie`数量和长度的限制。每个 domain 最多只能有 20 条 cookie，每个 cookie 长度不能超过 4KB，否则会被截掉。

2.安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。即使加密也与事无补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

17.请说出三种减低页面加载时间的方法

1、压缩 css、js 文件 2、合并 js、css 文件，减少 http 请求 3、外部 js、css 文件放在最底下 4、减少 dom 操作，尽可能用变量替代不必要的 dom 操作

18.js 延迟加载的方式有哪些？

19.split(),slice(),splice(),join()的区别？

join()用于把数组中的所有元素拼接起来放入一个字符串。所带的参数为分割字符串的分隔符，默认是以逗号分开。归属于 Array

split()即把字符串分离开，以数组方式存储。归属于 Stringstring

slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。返回的是含有被删除的元素的数组

20.在 JS 中有哪些会被隐式转换为 false？

Undefined、null、布尔值 false、NaN、零、空字符串

21.绑定事件方式有几种？

三种常用，（1）是在dom元素中直接绑定----- 内联

<input type='button' onclick='fn()'>
    <script>
        function fn(){
            console.log('hello');
    }           
    </script>

（2）在js代码中绑定。onclick

    document.getElementById('btn').onclick = function(){
    console.log('hello');
}

（3）绑定事件监听函数 addEventlListener

element.attachEvent('onclick',aaa);
function aaa(){
    console.log('aaaa');
}

22.怎么判断dom元素节点的类型？

Node对象中的nodeName获取指定节点的节点名称
Node对象中的nodeType获取指定节点的节点类型
nodeType 属性返回以数字值返回指定节点的节点类型
如果节点是元素节点，则 nodeType 属性将返回 1
如果节点是属性节点，则 nodeType 属性将返回 2
如果节点是文本节点，则 nodeType 属性将返回 3

23.js继承方式有哪些？

es6继承：

class parent{

constructor（）{
this.age=18}

}
class son  extends parent{

constructor（）{
super（）
this.name=“张三”}

}

1.原型链继承

function f(){
this.age=20
}
function z(){
this.name="nn"
}

z.prototype=new f()
let h=new z();
console.log(h)

2.构造函数继承

function f(){
this.age=20
}
function z(){
this.name="nn"
f.call(this)
}

let h=new z();
console.log(h)

3.组合继承（原型链+构造函数）

function f(){
this.age=20
}
function z(){
this.name="nn"
f.call(this)
}
z.prototype=new f()

let h=new z();
console.log(h)

24.原型链？

1.原型可以解决什么问题？

对象共享属性和方法

2.函数拥有：prototype（坡罗totype）

对象拥有：_proto_（坡罗to）

3.对象查找属性或方法的顺序

先在对象本身查找-->构造函数中查找对象的原型构造函数的原型当前原型

4原型链

1.是什么？：就是把原型串联起来

2.原型链的最顶端是null

25.js判断变量是不是数组？

方式一：isArray

  var arr=[1,2,3]
        console.log(Array.isArray(arr))

方式二：instaceof（可写可不写）

        var arr=[1,2,3]
   console.log( arr instanceof Array)

方法三：原型prototype

 console.log(Object.prototype.toString.call(arr).indexOf('Array')!=-1)

方式四：constructor

console.log(arr.constructor.toString().indexOf("Array")>-1)

26.slice是干嘛的、splice是否会改变原数组

1.slice是用来截取的

参数可以写slice（3）、slice（1,3）、slice（-3）返回一个新的数组

2.splice是用来删除替换插入

返回：删除的元素改方法会改变原数组

27.数组去重？

方式一：new set（最简单）


        var arr1=[1,2,3,4,1,2]
        console.log(Array.from(new Set(arr1)))//es6 Array.from()变成数组
        console.log([...new Set(arr1)])//展开符

        function unique(arr){
            return([...new Set(arr)])
        }
        console.log(unique(arr1))

方式二：indexOf

方式三：

标签：返回,map,arr,复习,元素,day2,参数,数组
来源： https://blog.csdn.net/H_hl2021/article/details/123030533

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

复习day2