JS常见面试题（二），阿里大神最佳总结Flutter进阶学习笔记箭头函数普通函数匿名函数可以是匿名函数也可以是具名

箭头函数	普通函数
匿名函数	可以是匿名函数也可以是具名函数
不能作为构造函数使用，不能使用new关键字
没有yuan原型，即没有proprototype属性
call、apply和bind无法改变箭头函数的this指向	call、apply和bind可以改变普通函数的this指向
没有arguments对象，如果有外层函数，则集成外层函数的argument，没有外层函数则会报错，箭头函数用的是rest参数。
没有generator，不能用yyield关键字。
没有自己的this,它的this永远指向其定义环境，任何方法都不能改变指向	普通函数的this永远指向调用它的对象（谁调用就指向谁）

四、this关键字

出现在全局函数中（普通函数，定时器函数，立即执行函数）this的指向永远是window，比如fun();相当于window.fun()
出现在严格模式中永远不会指向window，函数中使用es5的严格模式‘use strict’，this为undefined
以方法的形式调用时，this指向调用调用该方法的那个对象。
以构造函数的形式调用时，this指向构造函数创建的实例对象。
以事件绑定函数的形式调用时，this指向绑定事件的对象。
使用call和apply调用时，this指向指定的那个对象使用中。
this出现在箭头函数中时，this和父级作用域的this指向相同。
若单独使用，this表示全局对象。

五、call和apply

call和apply的作用都是改变this作用域，都是在特定作用域中调用函数。当一个对象没有某个方法，而其他对象有，我们就可以使用call或apply实现某个方法的复用。
call和apply使用方法基本相同，唯一不同之处就是它们的参数规则： call方法接受一个参数列表，而apply方法接受一个包含多个参数的数组。

call（apply的功能和它一样）
“外卖员炒菜”：厨师.炒菜.call(外卖员)
“外卖员弹钢琴”：演奏家.弹钢琴.call(外卖员)、
“外卖员换轮胎”：修理工.换轮胎.call(外卖员)……

programmer.programming.call(delivery) // 打印结果：外卖员编程
programmer.programming.apply(delivery) // 打印结果：外卖员编程

programmer.programming.call(delivery, '炒菜', '弹钢琴', '换轮胎')
programmer.programming.apply(delivery, ['炒菜', '弹钢琴', '换轮胎'])

第五条来自www.jianshu.com/p/5024cfcc7…

六、undefined和null的区别

	null	undefined
逻辑角度	表示一个空对象指针，表示没有对象，即该处不该有值。	表示未定义域或者缺少值
使用场景	可以作为函数的参数，调用函数时，某个参数未设置成任何值这时可以传入null，表示该参数为空。	无无论在什么情况下，都没有必要把一个变量的值显式地设置成undefinded
数据类型	Object型	Undefined型

七、变量提升

需要注意的是，仅声明会被提升，而初始化不会


变量提升	（1）变量提升，很简单，就是把变量提升提到函数的top的地方。需要说明的是，变量提升只是提升变量的声明，并不会把赋值也提升上来。（2）函数提升是把整个函数都提到前面去。（3）函数提升优先于变量提升。
原因	（1）提高性能（2）容错性好
优先级	（1）函数提升的优先级高于变量（2）由于函数声明和变量都会提升，如果函数与变量同名，如果只要在变量赋值前打印的都会是函数，在变量赋值后打印的都是变量的值。（3）只有函数声明才会提升，函数表达式不会提升。（4）先声明的会被后声明的覆盖。

八、阻止默认行为和事件冒泡

1. 阻止默认行为

默认事件：浏览器的默认事件就是浏览器自己的行为，比如我们在点击<a href="#">的时候，浏览器跳转到指定页面。还有，当我们滚动鼠标时页面会向下滚动，但我们按空格键和按方向键时页面也会向下滚动，为了更好的用户体验，这时我们就需要阻止这种行为的发生。

阻止默认行为的三种方法：

event.preventDefault();
低版本浏览器returnValue属性
return false;

function preventDefa(e){ 
  if(window.event){ 
    //IE中阻止函数器默认动作的方式 
    window.event.returnValue = false;  
  } 
  else{ 
    //阻止默认浏览器动作(W3C) 
    e.preventDefault(); 
  }  
}

这种是兼容性写法，但是如果你只需要支持高版本浏览器的话，那么如上文一样，一句话即可。

obj.onclick = function (){ 
  return false; 
}

这个方法比较暴力，它会同时阻止事件冒泡和默认事件，写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；
可以理解为return false;就等于同时调用了event.stopPropagation()和event.preventDefault()

2.阻止事件冒泡

我们都知道冒泡就像水底气泡浮到水面这一过程。冒泡事件即是事件从最底层逐个经过上面一级级事件的过程，就是冒泡事件。开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点。

常见事件对象的属性和方法:

event.stopPropagation();
event.cancelBubble = true;

阻止事件冒泡的兼容性解决方案:

 if (e && e.stopPropagatio "){
 e.stopPropagation();
 }
 else {
 window.event.cancelBubble = true;
 }

3.&tips:vue 阻止向上和向下冒泡

<!--阻止向下冒泡-->
<div @click.self="cancelFunc"></div> 
<!--阻止向上冒泡-->
<div @click.stop="cancelFunc"></div>

九、操作符之间的优先级

1.JS中常用的运算符分为以下几类


算术运算符	+ - * / % ++ –
赋值运算符	= += -= *= /= %=
逻辑运算符	&&	！
关系运算符	< > <= >= == === != !==
三目运算符	n=n>m?a:b; （解释：n是否大于m，如果是，输出a，如果不是，输出b）

2. 优先级（高到低:）

算数操作符 → 比较操作符 → 布尔（逻辑）操作符 → “=”赋值符号。逻辑操作符中，逻辑与（&&）优先级高于逻辑或（||）

3. 实例：

var a = 4 >= 6 || true && 1 || false;
console.log(a);
答案：1

解析：
① 4 >= 6，结果是false（比较操作符返回布尔值）
② true && 1，结果是1（逻辑与的规则：第一个操作数是真值，则返回第二个操作数）
原式变为 false || 1 || false（按正常顺序执行）
③ false || 1，结果是1（逻辑或的规则：第一个操作数是假值，则返回第二个操作数）
④ 1 || false，结果是1（逻辑或的规则：第一个操作数是真值，则直接返回第一个操作数）

十、数据存储

1. cookie和session：

cookie	session
数据存放在客户的浏览器上	数据放在服务器上
安全性较低，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session	会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie
cookie大小受限, 单个cookie保存的数据不能超过4KB，很多浏览器都限制一个站点最多保存20个cookie	建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中

2. localStorag和sessionStorag：

localStorage	sessionStorage
localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。	sessionStorage的生命周期是在仅在当前会话下有效 sessionStorage引入了一个“浏览器窗口”的概念， sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
因此sessionStorage 和 localStorage 的主要区别在于他们存储数据的生命周期， sessionStorage 存储的数据的生命周期是一个会话，而 localStorage存储的数据的生命周期是永久，除非主动删除数据，否则永远不会过期	存储大小为5MB，都保存在客户端，不与服务器进行交互通信，

localStorage

sessionStorage

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效 sessionStorage引入了一个“浏览器窗口”的概念， sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

因此sessionStorage 和 localStorage 的主要区别在于他们存储数据的生命周期， sessionStorage 存储的数据的生命周期是一个会话，而 localStorage存储的数据的生命周期是永久，除非主动删除数据，否则永远不会过期

存储大小为5MB，都保存在客户端，不与服务器进行交互通信，

localStorage和sessionStorage有相同的Web API:

保存数据到本地

const info = {name: 'Lee',age: 20,id: '001' };
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));

从本地存储获取数据

var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));

本地存储中删除某个保存的数据

sessionStorage.removeItem('key');
localStorage.removeItem('key');



### 最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。



![名不虚传！字节技术官甩出的"保姆级"数据结构与算法笔记太香了](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f07b8b488a004b3f94417dd5a68a68b1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771411075&x-signature=LsqUHVvuJZKXMym7SOoG1B8c2Gw%3D)




**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**