2019-09-09 JS面试题（持续更新中）
1、JS 中的 MUL 函数
function mul(x){
return function(y){
return function(z){
return x*y*z
}
}
}
var result = mul(2)(3)(4);
console.log(result,'result');//24
2、JS 中 slice 和 splice 的区别？
var arr = [0,1,2,3,4,5,6,7,8,9]; console.log(arr.slice(2,9));//[2,3,4,5,6,7,8],如果此时打印arr,显示的数据结构并未发生改变，和之前的值是一样的。 console.log(arr.splice(2,9));//[2,3,4,5,6,7,8,9]; 如果此时打印arr，的数据，显示的结果是 [0,1]。数据结构已经发生改变了。
总结一下：
slice(start,end) 方法，返回一个新数组，包含从 start 到end（不包含该元素） 的数组元素。（索引从0开始且 不会改变原数组，而是返回一个子数组）。
start 参数：必须，规定从哪个位置开始选取，如果为负数，规定从数组的尾部开始选取，-1是指最后一个元素。
end 参数：可选。如果没有这个参数的话，那么指的是从start开始到数组结束的所有元素，如果这个参数为负数，那么规定是从数组尾部开始算起的元素。
splice()：该方法向或者从数组中添加或者删除，返回被删除的数据。（该方法会改变原数组）
splice(index,howmany,item1,...itemx)：
index 参数：必须，整数，规定添加或删除的位置，使用负数的话，则表示从数组的尾部开始。
howmany 参数：必须，要删除的数量，如果为0，则不删除数据。
item1...itemx 参数：可选，向数组添加的新数据。
例如：
var testArray = [0,1,2,3,4,5]; console.log(testArray.splice(2,2,'hello','world'));//[2,3] console.log(testArray);//[0,1,'hello','world',4,5]
3、JS 中的展开运算符操作？
var mids = ['hello','world']; var newMids = [1,2,3,..mids,4,5]; console.log(newMids);//[1,2,3,'hello','world',4,5]
4、JS 中的函数提升？
JS 中创建函数有2中方法, 函数声明 和 函数表达式。
函数声明：
fn();//这个是函数声明 function fn(){ console.log('这个是函数声明') }
函数表达式：
fns();// 报错， fns is not a function var fns = function(){ console.log('这个是函数表达式') }
由此说明：函数声明的优先级要高于函数表达式。
5、JS 中的 typeof 返回哪些数据类型？
string , boolean , number, undefined , null, object ,symbol (es6)。
6、强制类型转换 和 隐式类型转换？
parseInt parseFloat number 和 == ===
7、添加，删除，替换，插入 到某个节点的方法
1）创建新节点 createElement()//创建一个具体的元素 createTextNode()//创建一个文本节点 例如： 元素获取body: var body = document.getElementsByTagName("body")[0]; (或者 var body = document.body;) var div = document.createElement('div'); div.className='create_div'; body.appendChild(div); //创建完毕。 var texts = document.createTextNode('hello world'); div.appendChild(texts); //创建完毕。 2）添加，移出，替换，插入 appendChild()//添加 removeChild()//移除 replaceChild()//替换 insertBefore()//插入 3）查找 getElementsByTagName()//标签名称 getElementsByName()//元素的Name 属性的值 getElementById()//元素id ,唯一性。
8、看下面代码输出结果？
for(var i =0;i<5;i++){ setTimeout(function(){ console.log(i) },1000) } //5,5,5,5,5
解决办法：（8.1）将 var 变为 let 即可。
(8.2)使用闭包
for(var i=0;i<=5;i++){ setTimeout(function(){ console.log(i) }(i),1000) } //0,1,2,3,4,5
(8.3)
9、数组去重方法：
双层for循环，Array.sort()加一行遍历冒泡，Array.filter() 加indexOf,ES6中的set去重，object键值对去重。
function duplicateRemoval(arr){ //双层for循环 for(let i=0;i<arr.length;i++){ for(let j=i+1;j<arr.length;j++){ if(arr[i]==arr[j]){ arr.splice(j,1); j--; } } } return arr; } // es6 中的 set去重 function unique(arr){ return Array.from(new Set(arr)) //或者 return [...new Set(arr)] } //Array.from()方法：就是一个类数组对象或者可遍历对象转换成一个真正的数组。（最基本要求是具有length属性的对象。） //利用indexOf 去重 以及 includes (异曲同工之妙)，如果有的话，则返回true，反之为false表示没有。 function unique(arr){ if(!Array.isArray(arr)){ //用来判断是否是数组 return } let array = []; for(let i=0;i<arr.length;i++){ if(array.indexOf(arr[i]===-1)){ //这里表示没有==> 也可以换成 这样子表示： if(!array.includes(arr[i])){//表示没有} arrar.push(arr[i]) } } return array; } //Array.filter() 过滤数组，方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，且不会改变原始数组。 function unique(arr){ return arr.filter(function(item,index,arr){ return arr.indexOf(item,0)===index; //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素。 }) }
10、数组的方法
push() 向数组的末尾添加一个或多个元素，并返回新的长度。
pop() 删除向数组末尾的一个元素，并把他作为返回值返回。
unshift() 向数组的头添加一个元素或多个元素，并返回新的长度，向前边插入元素后，其他元素依次调整。
shift() 删除数组头的一个元素，并把他作为返回值返回。
slice(截取开始的索引,截取结束的索引) 向数组中提取指定元素。截取结束的索引可以不写，如果索引为负值的话，代表从后边开始计算。
splice(开始的索引，删除的数量) 删除数组中的指定元素，会影响原数组，并把删除的元素作为返回值返回。
concat() 可以连接两个或多个数组，并返回新数组，不会影响原数组。
join() 可以将数组转换为字符串。
reverse() 用来反转数组，会影响原数组。
sort() 用来对数组中的元素进行排序，影响原数组。
11、测试 numbers 数组的内容是什么？
const length = 4;
const numbers = [];
for(var i=0;i<length;i++);{ //注意看这里哦，多了一个分号
numbers.push(i+1);
}
numbers;//
for() 在空语句上进行4次迭代(不执行任何操作)，而忽略实际将项目推入数组的块:{numbers.push(i+1);}
//上面代码等同于：
var i;
for(i=0;i<length;i++){
// do nothing;
}{
numbers.push(i+1);
}
numbers;//[5]
12、意外的全局变量
function foo(){
let a = b = 0;
a++;
return a;
}
foo();
typeof a;//'undefined'
typeof b;//'number'
//上面代码等效于:
function foo(){
let a;
window.b = 0;
a++;
return a;
}
foo();
typeof a;//undefined
typeof b;//number
13、http 协议与 https协议的区别：
超文本传输协议HTTP协议被用于在web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了web浏览器和网站服务器之间的传输报文，
就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号，密码等支付信息。
为了解决HTTP协议这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和
服务器之间的通信加密。
HTTP和HTTPS的基本概念：
HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准TCP，用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。
HTTP和HTTPS区别：
HTTP协议传输的数据都是未加密的，也就是明文的，因此使用HTTP协议传输隐私信息非常不安全，为了保证这些隐私数据能加密传输，于是网景公司设计了SSL(secure sockets layer)协议用于对HTTP
协议传输的数据进行加密，从而就有了HTTPS。简单来说，HTTPS协议是SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议，要比HTTP协议安全。
两者之间的主要区别是：
HTTPS协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
HTTP是超文本传输协议，信息是明文传输，HTTPS则是具有安全性的SSL加密传输协议。
HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80,后者是443.
HTTP的连接很简单，是无状态的，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输，身份认证的网络协议，比HTTP协议安全。
链接：https://www.cnblogs.com/sueyyyy/p/12012570.html
14、如何产生闭包？ 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时，就产生了闭包。【函数嵌套，内部函数引用了外部函数的数据(变量/函数)】
闭包是什么？
闭包是嵌套的内部函数。包含被引用变量(函数)的对象。【闭包存在于嵌套的内部函数中】
例子:
<---html代码 -->
<body onload="init()">
<p>one</p>
<p>two</p>
<p>three</p>
<p>four</p>
<p>five</p>
</body>
//js 代码
function init(){ //将变量i保存在每个段落对象上
var ps = document.getElementsByTagName('p');
for(var i=0;i<ps.length;i++){
ps[i].i = i;
ps[i].onclick = function(){
console.log(this.i)
}
}
}
function init(){ //加一层闭包，i已函数参数形式传递给内层函数
var ps = document.getElementsByTagName('p');
for(var i=0;i<ps.length;i++){
(function(arg){
ps[i].onclick = function(){
console.log(arg);
}
})(i)
}
}
function init(){ //加一层闭包，i以局部变量形式传递给内层函数
var ps = document.getElementsByTagName('p');
for(var i=0;i<ps.length;i++){
(function(){
var temp = i; //调用局部变量
ps[i].onclick = function(){
console.log(temp);
}
})()
}
}
function init(){ //加一层闭包，返回一个函数作为响应事件
var ps = document.getElementsByTagName('p');
for(var i=0;i<ps.length;i++){
ps[i].onclick = function(arg){
return function(){
console.log(arg)
}
}(i)
}
}
function init(){
var ps = document.getElementsByTagName('p');
for(var i=0;i<ps.length;i++){
ps[i].onclick = new Function("console.log("+i+")")
}
}
//错误的写法：
function init(){
var ps = document.getElementsByTagName('p');
for(var i=0;i<ps.length;i++){
ps[i].onclick = function(){
console.log(i);//这里会输出5，不管点击那个都会输出5.
}
}
}
15、js 基本数据类型和引用数据类型
基本数据类型 和 引用数据类型：
ECMAScript 包括两个不同类型的值：基本数据类型和引用数据类型。
常见的基本数据类型：
number ,string ,boolean ,undefined,null。基本数据类型是按值访问的，因为可可以直接操作保存在变量中的实际值。
引用数据类型：存放在堆内存中的对象，变量实际保存的是一个指针，这个指针指向另一个位置，如对象，数组，函数等。
传值与传址：基本类型与引用类型最大的区别实际就是传值与传址的区别。
例如：var a = [1,2,3,4];
var b = a;//这个是传址，对象中传给变量的数据是引用类型，会存储在堆中。
var c = a[0];//这个是传值，把对象中的属性/数组中的数组项赋值给变量，这时变量c是基本数据类型，存储在栈内存中，改变栈中的数据不会影响堆中的数据。
浅拷贝：在定义一个对象或数组时，变量存放的往往只是一个地址。当我们使用对象拷贝时，如果属性是对象或数组时，这时候我们传递的也只是一个地址。因此子对象在访问属性时，会根据地址回溯到父对象
指向的堆内存中，即父子对象发生了关联，两者的属性值会指向同一内存空间。
深拷贝：不希望父子对象之间产生关联，那么可以使用深拷贝。
16、JS原型链
创建对象的方法：
1. var obj1 = {name:'one'}; 字面量
var obj11 = new Object({name:'one11'});
2. var M = function(name){ this.name = 'two';} 构造函数
var obj22 = new M('obj22');
3. var P = {name:'three'}; Object.create
var obj33 = Object.create(P);
原型与原型链
什么原型对象？实例？构造函数？
var M = function(name){ this.name = name;}
var o3 = new M('o3');
实例就是对象，在上面这例子中，o3就是实例，M就是构造函数。实例通过new一个构造函数生成的。从上图中可以知道，实例的__protpo__指向的是原型对象。实例的构造函数的prototype也是指向的原型对象。原型对象的constructor指向的是构造函数。
原型链：就是原型组成的链，对象的__proto__它的是原型，而原型也是一个对象，也有__proto__属性，原型的__proto__又是原型的原型，这样可以一直通过__proto__向上找，这就是原型链，找到最大的object，就终止。
原型对象和实例之间有什么作用？
var M = function(name){ this.name = name;}
var o3 = new M('0s');
var o5 = new M();
o3.__proto__.say = function(){
console.log('hello world')
}
o3.say();//hello world
o5.say();//hello world
只有函数有prototype，对象是没有的。但是函数也是有__proto__的，因为函数也是对象。函数的__proto__指向的是Function.prototype。
instanceof 是判断实例对象的__proto__和生成该实例的构造函数的prototype是不是引用的同一个地址。是返回true，否则返回false。实例额原型构造函数，obj.__proto__.constructor
new 运算符原理： 一个新对象被创建，他继承自foo.prototype.构造函数返回一个对象。在执行的时候，相应的传参会被传入，同时上下文this会被指定为这个新的实例。
new foo 等同于new foo(),只能用在不传递任何参数的情况。
17、js冒泡排序
function sort (temp){
for(var i=0;i<temp.length;i++){
for(var j=0;j<temp.length-i-1;j++){
if(temp[j]>temp[i]){
var result = temp[j];
temp[j] = temp[j+1];
temp[j+1] = result;
}
}
console.log(temp)
}
}
var tempArray = [1,6,2,65,9,4,3,8,6];
sort(tempArray); // 比较相邻的元素，如果后一个比前一个大，则交换位置。
//快速排序：
function quickSort(temp){
if(temp.length<=1){
return temp;
}
var index = Math.floor(temp.length/2);
var pivot = temp.splice(index,1)[0];//获取删除的数字
var arrleft = [];
var arrright = [];
for(var i=0;i<temp.length;i++){
if(temp[i]<privot){
arrleft.push(temp[i]);
}else{
arrright.push(temp[i]);
}
}
return quickSort(arrleft).concat([pivot],quickSort(arrright));
}
18、es6函数新增
函数形参的默认值：
function foo(x,y='tom'){
console.log(x,y)
}
foo('hello');//hello tom
foo('hello','');//hello
默认值与结垢赋值结合：
function foo({x,y=3}){
console.log(x,y);
}
foo({});//undefined 3;
foo({x:1,y=2});//1,2
foo();//报错
参数默认值的位置：
函数的length属性和作用域：
length：指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。
作用域：一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域。
rest参数： rest参数(形式为...变量名)，用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
function foo(...values){
var sum = 0;
for(var val of values){
sum+=val;
}
}
foo(1,2,3);//6
箭头函数： =>定义函数 (函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。不可以当作构造函数，也就是说不可以使用new命令。不可以使用arguments对象。不可以使用yield命令。)
var f = () =>5;
var sum = (nums,num2)=>num1+num2;
19、同步异步
同步异步定义：
同步和异步关注的是消息通信机制。同步，就是调用某个东西时，调用方得等待这个调用返回结果才能继续往后执行。异步，和同步相反，调用方不会立即得到结果，而是在调用发出后调用者可以继续执行后续操作，被
调用者通过状态来通知调用者，或者通过回调函数来处理这个调用。
同步操作好比排队。
20、发送http请求发生了什么？
当我们在浏览器的地址输入 www.baidu.com 然后回车，回车这一瞬间发生了什么呢？
域名解析---发起TCP 3次握手--建立TCP连接后发起http请求--服务器端响应http请求，浏览器得到html代码--浏览器解析html代码，并请求html代码中的资源--浏览器对页面进行渲染呈现给用户。
21、JS 小题
1、 console.log( [] == ![] );
//打印为 true。
关系运算符，把其他数据类型转换成 number，然后比较
逻辑运算符，把数据转换成 Boolean
复杂数据类型在隐式转换时会先转成string
[].valueOf().toString() =>''
![] => false
Number('') === Number(false)
2、 console.log( 'b'+'a'++'a'+'a');
//打印为 baNaNa
字符串连接符，把其他数据类型转换成 string，然后拼接
算符运算符，把其他数据类型转换成 number，然后做加法计算
'b'+'a'+'NaN'+'a' => baNaNa
3、 console.log( NaN === NaN );
//打印为 false
NaN 不等于任何值。
4、 console.log([1,2,3] + [4,5,6]);
// 1,2,34,5,6
字符串连接符，把其他数据类型转换成string，然后拼接
[1,2,3].valueOf().toString() => 1,2,3
[4,5,6].valueOf().toString() => 4,5,6
所以结果就是： '1,2,3'+'4,5,6' => 1,2,34,5,6
5、 console.log(Math.min() > Math.max());
//true
Math.min() => Infinity
Math.max() => -Infinity
22、文本超出部分显示省略号
/*css 单行*/ .类名 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /*多行*/ .类名 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;/*这里显示几行文字*/ overflow:hidden }
