2021-05-07

js面试题

字符串方法

1、join()

定义： 将数组中所有的元素都转化为字符串拼接在一起，返回最后生成的字符串。
注意： 不改变原数组

var a = [1,2,3];
console.log(a.join());    //1,2,3 默认使用逗号分隔
console.log(a.join(""));  //123   转化为字符串的常用方法
console.log(a.join("-")); //1-2-3 自定义分隔符
console.log(a);           //[1,2,3]  不修改原素组
var b = new Array(5);
console.log(b.join('*')); //****  4个连字号组成字符串

2、reverse()

定义： 将数组中的元素颠倒顺序，返回逆序的字符串。
注意： 原数组被改变

var a=[1,2,3];
console.log(a.reverse());        //[3,2,1]
console.log(a);                  //[3,2,1]原数组被修改
console.log(a.reverse().join()); //1,2,3 因为原数组又被修改了

3、sort()

定义： 将数组中的元素排序后返回排序后的数组、
注意： 数组以字母表顺序排，原数组被改变

var a=['c','b',undefined,'a','z'];
console.log(a.sort());    //["a", "b", "c", "z", undefined],undefined被排到最后
console.log(a);           //["a", "b", "c", "z", undefined]修改原数组 
 
//自定义排序规则
var a1 = [33,4,1111,2222];
//console.log(a1.sort());  //[1111, 2222, 33, 4] 默认排序
a1.sort(function(a,b){
    return a-b;           
});
console.log(a1);           //[4, 33, 1111, 2222]

4、concat()

定义： 创建并返回一个新数组。新数组由原数组和concat()里面的参数组成
注意： 不改变原数组

var a = [1,2,3];
console.log(a.concat(4));            //[1,2,3,4]
console.log(a);                      //[1,2,3]  //原数组不改变
console.log(a.concat([4,5]));        //[1, 2, 3, 4, 5]
console.log(a.concat([4,5,[6,7]]));  //[1, 2, 3, 4, 5,[6,7]] //只能扁平化一维

5、slice()

定义： 返回指定数组的片段或者子数组，两个参数分别指是片段的开始和结束位置（不包含结束的位置）。
注意：
1）不改变原数组
2）如果没有参数，相当于生成一原数组的副本
3）生成的新数组不包含结束位置的元素

var a = [1,2,3,4,5];
console.log(a.slice(1,3));   //[2,3]  //索引从1到3但包括3的子数组
console.log(a);              //[1,2,3,4,5]  //原数组不改变
console.log(a.slice(1));     //[2,3,4,5] 只有一个参数，则从该参数位置到末尾
console.log(a.slice(1,-1));  //[2,3,4] 参数为-1只向最后一个元素，但不包括它
console.log(a.slice(-2,-1))  //[4] 从倒数第2个数到倒数第一个数，但不包括倒数第一个数

6、splice()

定义： 在数组中输入和删除元素的通用方法。返回的是由删除元素组成的新数组，没有删就返回空数组[]
前两个参数是指定需要删除的元素，后面的任意个数的参数是需要插入到原数组的元素
注意： 原数组被改变

var a = [1,2,3,4,5];
b = a.splice(2);
console.log(b);      //[3,4,5]   返回原数组从索引为2的元素到结尾被删除的部分
console.log(a);      //[1,2]     原数组是被修改之后的数组
 
b = a.splice(1,2);
b = a.splice(1,1);  // 从索引为1的元素开始删除1个元素  
console.log(b);      //[2,3]   从索引为1的元素开始删除2个元素，也就是2和3
console.log(a);      //[1,4,5] 原数组是被删除之后剩余的数组
 
var b = a.splice(1,0,100);
console.log(b);      //[] 因为没有删除元素，所有返回的是一个空数组
console.log(a);      //[1, 100, 2, 3, 4, 5] 从索引为1的元素开始，删除0个元素，之后原索引为1的位置插入新元素

7、push()和pop()

定义： push在数组的末尾添加一个或者多个元素，返回新数组的长度。所以不能链式操作
pop删除数组的最后一个元素，返回它删除的值元素

var a = [1,2,3];
var b = a.push(4,5);
console.log(b);   //5  返回的是新数组的长度。
console.log(a);   //[1,2,3,4,5] 直接原数组尾部添加4
    
var a = [1,2,3];
var b = a.pop();
console.log(b);   //3  返回的删除的元素。
console.log(a);   //[1,2] 直接在原数组上删除元素3

8、unshift()和shift()

定义： unshift是在数组头部添加一个或多个元素。如果一次性传入多个参数，多个参数按照按照原先的位置直接加到数
组中。返回新数组的新数组的长度。
shift:删除数组的第一个元素，并返回删除的元素

a.push(1,2,3);
console.log(a);  //[1,2,3]
a.shift();
console.log(a);  //[2,3]
a.push(100)   
console.log(a);  //[2, 3, 100]
a.shift();
console.log(a);  //[3,100]
a.shift();
console.log(a);  //[100]

9、toString()

定义： 将数组中的每个元素转化为字符串
注意： 与不使用任何参数调用的jion()方法返回的字符串一样

var a = [1,2,3];
var a = [1,2,[3,4,[5,6]]];
console.log(a.toString());  //1,2,3
console.log(a);             //原数组        
console.log(a.toString());  //1,2,3,4,6
console.log(a);             //原数组

数组方法

1、forEach() //遍历

定义： 该方法从头到尾遍历数组，为某个元素调用指定的函数。传递函数包括三个参数（数组元素、元素索引、数组本身），如果只关心数组元素的值，可以只传一个参数。
注意： 无法在所有元素的都传递给调用函数之前提前结束。也就是没有像for中一样的break语句。如果要提交终止，可以把forEach（）方法放到try块中。如果forEach()调用的函数抛出forEach.break异常，循环提前结束

var data = [1,2,3];
var sum = 0;
data.forEach(function(value){
  sum+=value;
});
console.log(sum);  //6
 
var data = [10,20,30];
data.forEach(function(v,i,a){
  a[i] = v*2;
});
console.log(data) //[20, 40, 60]

2、map() //映射

定义： 将调用的数组的每个元素传递给指定的函数，并返回一个新数组，它包含该该函数的返回值
注意： 传递给map的函数应该有返回值，返回的是新数组，不修改调用的数组。

var data = [1,2,3];
var b = data.map(function(val){
   return   val*10;
});
console.log(data);  //[1,2,3]     不改变原数组
console.log(b);      //[10,20,30]  新数组

3、filter() //过滤

定义： 返回的数组元素是调用的数组的一个子集，就传递的函数是用来做逻辑判定的，返回true，传给给判定函数的元素就是这个子集的成员。

var data = [1,2,3,4,5];
var b = data.filter(function(val){
  return val<3;
});
console.log(b);     //[1,2]
console.log(data);  //[1,2,3,4,5] 不改变原数组  
 
var b = data.filter(function(val,i){
  return i%2;
});
console.log(b);     //[2,4] 返回索引为奇数的元素组成的数组

4、isArray()

定义： 判断对象是不是数组

jQuery面试题

1.为什么要使用jQuery？jquery有哪些好处？

1、因为jQuery是轻量级的框架，大小不到30kb
2、它有强大的选择器，出色的DOM操作的封装
3、有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)
4、完善的ajax(它的ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。)
5、出色的浏览器的兼容性
6、支持链式操作，隐式迭代
7、行为层和结构层的分离，还支持丰富的插件，jquery的文档也非常的丰富

2.$(document).ready() $(functiion({}))方法和window.onload有什么区别？

两个方法的功能相似，但在实行时机方面是有区别的
1、window.onload方法是在网页中所有的元素完全加载到浏览器后才执行
2、$(document).ready() 可以在DOM载入就绪是就对其进行操纵，并调用执行绑定的函数

3.jQuery中有哪些选择器

1. 大致分为：基本选择器，层次选择器，表单选择器
2. 基本选择器：id选择器，标签选择器，类选择器等
3. 层次选择器：如：$(“form input”) 选择所有的form元素中的input元素 $("#main > *")选择id为main的所有子元素
4. 过滤选择器：如：$(“tr:first”)选择所有tr元素的第一个 $(“tr:last”)选择所有tr元素的最后一个
5. 表单选择器：如：$(":input")选择所有的表单输入元素 $(":text")选择所有的text的input元素

4.jQuery的美元符号$有什么作用？

回答：其实美元符号$只是”jQuery”的别名，它是jQuery的选择器，如下代码：
$(document).ready(function(){  
 
});
当然你也可以用jQuery来代替$，如下代码：
jQuery(document).ready(function(){  
 
}); 

5.jQuery对象和DOM对象是怎样转换的

jQuery对象是一个包含了dom对象的数组 可以通过jQuery对象[下标]获取dom对象
将dom对象放入$("")中转为jQuery对象

6.jQuery中 $.get()提交和 $.post()提交的区别

1、$.get()使用GET方法来进行异步提交 $.post()使用POST方法来进行异步提交
2、get请求方式将参数跟在url后进行传递用户可见 post请求则是作为http消息的实体内容发送给服务器，用户不可见
3、post传输数据比get大
4、get请求的数据会被浏览器缓存 不安全

7.jQuery中使用过哪些插入节点的方法，他们的区别是什么

在元素内部添加
append：向每个匹配的元素内部追加内容 
        <p>我想说：</p>
        $("p").append("<b>你好</b>") 
        <p>我想说：<b>你好</b></p>
 
appendTo：将所有匹配的元素追加到指定的元素中 
        <p>我想说：</p> 
        $("<b>你好</b>").appendTo("p") 
        <p>我想说：<b>你好</b></p>
 
prepend：向每个匹配的元素内部前置添加内容 
        <p>我想说：</p> 
        $("p").prepend("<b>你好</b>") 
        <p><b>你好</b>我想说：</p>
 
prependTo：将所有匹配的元素前置到指定的元素中 
        <p>我想说：</p> 
        $("<b>你好</b>").prependTo("p") 
        <p><b>你好</b>我想说：</p>
 
在元素外部添加
after：在每个匹配元素之后插入内容 
        <p>我想说：</p> 
        $("p").after("<b>你好</b>") 
        <p>我想说：</p><b>你好</b>
 
insertAfter：将所有配的元素插入到指定元素的后面 
        <p>我想说：</p> 
        $("<b>你好</b>").insertAfter("p") 
        <p>我想说：</p><b>你好</b>
 
before：在每个匹配的元素之前插入内容 
        <p>我想说：</p> 
        $("p").before("<b>你好</b>") 
        <b>你好</b><p>我想说：</p>
 
insertBefore：将所有匹配的元素插入到指定的元素的前面 
        <p>我想说：</p> 
        $("<b>你好</b>").insertBefore("p") 
        <b>你好</b><p>我想说：</p> 

8.jQuery中有哪些方法可以遍历节点？

children():获取匹配元素的子元素集合，不考虑后代元素 $(function(){$("div").children()})
next()获取匹配元素后面紧邻的同级元素
prev()获取匹配元素前紧邻的同级元素
siblings()获取匹配元素前后的所有同辈元素

9.AJAX都有哪些优点和缺点？

1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。