2022最新前端开发常见基础面试题（篇二）

1.Array数组常用的方法

1. 检测数组 Array.isArray()
2. push() 添加到数组末尾
3. pop() 移除数组的最后一项
4. unshift() 插入到数组头部
5. shift() 移除数组第一项
6. join() 将数组的每一项拼接成一个字符串，数组的每一项默认以逗号隔开，也可以传入特定的分隔符

var arr1 = ["a","b","c"];
console.log(arr1.join('|')) //a|b|c

7.reverse() 反转数组的顺序
8.concat() 连接
9. slice() 截取数组，[开始下标，结束下标)，返回截取的新数组，不影响原数组，不指定结束下标的话默认截取到最后一个
10. splice()
(删除和替换，对原数组进行操作)
删除指定元素: splice(开始的索引，删除的个数)
替换指定元素: splice(开始的索引，删除的个数，替换的元素), 即删除被替换的元素后再插入替换的元素
插入指定元素: splice(开始的索引，0，插入的元素) , 即删除的个数为0
11.indexOf(要查找的项，查找的起点位置的索引) 返回相应元素的索引，从数组的开头开始向后寻找，第二个参数可选，没找到返回-1
var arr = [1,2,3];
console.log(arr.indexOf(2)) //1
var arr1 = [1,2,3,2];
console.log(arr1.indexOf(2,2)) //3
12.lastIndexOf() 与indexOf()基本一样，只是是从数组的末尾开始向前寻找

13.迭代方法：
every() 对数组的每一项都运行指定的函数，如果函数对每一项返回的结果都为true,则返回true

  var arr = [1,2,3,5,4,3];
var result = arr.every(function(item,index,array){
    return (item>1)
})
console.log(result) //false

some() 对数组的每一项都运行指定的函数，如果函数对任一项返回的结果都为true,则返回true
filter() 对数组的每一项都运行指定的函数，返回结果为true的每一项组成的数组
forEach() 遍历，没有返回值
map() 返回数组，数组的每一项都是在原来数组中的对应项运行指定函数后的结果
14.转换方法
valueOf() 返回的是数组本身
toString() 返回的是数组中每个值的字符串形式拼接成的一个以逗号分隔的字符串，即会先调用数组中每一项的toString()方法，然后拼接成一个字符串
toLocaleString() 返回的是数组中每个值的字符串形式拼接成的一个以逗号分隔的字符串，即调用的是数组的每一项的toLocaleString()方法，而不是toString()方法

15.find & findIndex
find() 返回第一个符合条件的数组元素，若没有符合条件的，返回undefined

//1.
 let arr = [22,33,44]
 let res = arr.find((item,index)=>{
     return item>22
 })
 alert(res) //33

//2.
let arr = [22,33,44]
let res = arr.find((item,index)=>{
   return item>44
})
alert(res) //undefined

findIndex() 和find()用法类似，返回第一个符合条件的元素下标，若没有符合条件的，返回-1
会改变数组的方法：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
forEach()

不会改变数组的方法：

filter()
concat()
slice()
map()

2.类(伪)数组和数组的区别及相互转化

概念：伪数组是一个 Object，而真实的数组是一个 Array，具体的来说：伪数组是一个对象、具有length属性、按照索引方式存储数据、不具有数组的push，pop等方法…
区别：
相同点：都可用下标访问每个元素，都有length属性。
不同点：数组对象的类型是Array,类数组对象的类型是object，也就是说类数组原型是Object;类数组不具有数组所具有的方法，数组遍历可以用 for in和for循环,类数组只能用for循环遍历。
常见的类数组有:
1.函数的arguments对象
2. DOM 对象列表(比如通过 document.querySelectorAll 得到的列表),
3.jQuery 对象 (比如 $(“div”)).
类数组转换数组：
1.Array.prototype.slice.call(arrayLike)的结果是将arrayLike对象转换成Array对象，Array.prototype.slice表示数组的原型中的slice方法。slice方法返回的是一个Array类型的对象。
2.使用JavaScript的扩展运算符，三个点"…"，作用是将数组转换为一个用逗号分隔的参数列表，利用拓展运算符可以轻松合并两个数组；同时也可以实现类数组转换为数组。
3.使用ES6里面的Array.from()方法转为数组
数组转变成类数组:
var arr = [1, 2, 3, 4];
var obj = { };
[ ].push.apply(obj, arr);
console.log(obj);
输出为原型为Object 的一个对象

3.数组去重的方法

方法1、双重for循环
方法2、for循环 +findIndex
主要利用findIndex 的特性，查找元素找不到就返回-1， 接下来就需要判断，如果是-1，说明没找到，就往新数组里面添加元素。
方法3、sort 排序
首先利用 sort 方法进行排序。进行循环，如果原数组的第 i 项和新数组的 i - 1 项不一致，就push进去。
方法4、Set
ES6中新增了数据类型Set，Set的一个最大的特点就是数据不重复。Set函数可以接受一个数组（或类数组对象）作为参数来初始化，利用该特性也能做到给数组去重。
方法5、set + Array.from
利用 set数据不重复的特点，结合 Array.from
方法6、filter + indexOf
indexOf，可以检测某一个元素在数组中出现的位置，找到返回该元素的下标，没找到返回 -1
方法7、includes
利用 includes 检查新数组是否包含原数组的每一项。 如果不包含，就push进去
方法 8、 for + object
利用对象属性名不能重复这一特点。如果对象中不存在，就可以给 push 进去
方法9、for + splice
利用 splice 进行切割

4.Js数组循环(遍历)的方法

包括 for循环、forEach循环、map 循环、forIn循环和forOf循环，some,every等方法。
1.forEach()
forEach会遍历数组, 没有返回值, 不允许在循环体内写return, 不会改变原来数组的内容.forEach()也可以循环对象。
2.map()
map 遍历数组, 会返回一个新数组, 不会改变原来数组里的内容
3.for 循环：基础、简单
4.for…in 循环：遍历对象和数组,推荐用于循环对象,也可以用来遍历json。
5.for…of 循环：遍历对象和数组
for…of提供了三个新方法：
key()是对键名的遍历；
value()是对键值的遍历；
entries()是对键值对的遍历；
6.every()
every遍历数组, 每一项都是true, 则返回true, 只要有一个是false, 就返回false
7.some()
遍历数组的每一项, 有一个返回true, 就停止循环
用于遍历数组元素使用：for()，forEach()，map()，for…of 。
用于循环对象属性使用：for…in
在 forEach、map、filter、reduce、every、some 函数中 break 和 continue 关键词都会不生效，因为是在function中，但function解决了闭包陷阱的问题。
要想使用 break、continue 可以使用 for、for…in、for…of、while

5.常用的字符串方法有哪些

⼀、拼接或截取字符串
1.str.concat()
⽤于将⼀个或多个字符串拼接起来，返回拼接后的新字符串
参数：可以有多个，⽤来拼接到str上的字符串
2.str.slice()
此⽅法⽤来提取⼀个字符串，并返回⼀个新的字符串
参数：
1)beginIndex，表⽰从该索引处开始提取字符串的字符(包括)，如果为负数则从后开始计算
2)endIndex，表⽰从该索引处结束提取字符串(不包括)，如果省略则⼀直提取到字符串末尾，如果为负数从后开始计算
let str =‘hello world’;
console.log(str.slice(6))//‘world’
console.log(str.slice(-5,-3)) //‘wo’
3.str.substring()
此⽅法和slice⽅法功能相同都是提取⼀个字符串，并返回提取到的字符串
参数：
1)startIndex，表⽰从该索引处开始提取字符串的字符(包括)
2)endIndex,表⽰从该索引处结束提取字符串(不包括)
3)上述两个参数：如果为负数或者NaN则都会被当做0，如果⼤于字符串的长度则会被当做字符串的长度来计算，如果 startIndex ⼤于
endIndex，则 substring 的执⾏效果就像两个参数调换了⼀样
let str =‘hello world’;
console.log(str.substring(-1,5))//‘hello’
console.log(str.substring(5,-1))//‘hello’
⼆、删除字符串
str.trim()：删除⼀个字符串两端的空⽩字符，并返回删除后的新字符串，不会改变原有字符串
三、改变字符串
1.str.toLowerCase()
此⽅法没有参数，会将调⽤该⽅法的字符串值转为⼩写形式，并返回
2.str.toUpperCase()：此⽅法没有参数，会将调⽤该⽅法的字符串值转为⼤写形式，并返回
3.str.replace()：可以将⼀个替换值替换字符串的⼀部分，返回替换后的新字符串
参数：1)⼀个字符串中要被替换的⼦字符串或者正则表达式，默认值替换第⼀个，可以在正则表达式中设置全局模式，来替换所有匹配的⼦
字符串2)⼀个替换值
4.str.split()
可以使⽤⼀个指定的分隔符来将字符串拆分成数组，返回⼀个数组
参数：
1)分隔符，可以为⼀个字符串也可以为正则表达式，为空的话则将每个字符都拆分。默认全局拆分
2)拆分的长度（可选），为⼀个整数⽤来限制拆分的个数，如果超过了这个数量则新数组中不返回剩下的⽂本
四、查询字符串
1.str.charAt()
从⼀个字符串中返回指定的字符
参数：index，介于0~length-1之间的整数，默认为0
2.str.includes()
判断字符串中是否包含指定字符，包含则返回true，不包含则返回false
参数：subStr，指定的字符串
3.str.indexOf()
判断字符串中是否包含指定字符，如果包含则返回该字符索引的位置(查找到了⽴即返回)，如果不包含则返回-1
参数：subStr，指定的字符串
4.str.lastIndexOf()
⽤法和indexOf基本相同，区别是lastIndexOf()是从后往前查找
5.str.search()
使⽤正则表达式查找指定字符串，如果找到则返回⾸次匹配成功的索引，没有找到则返回-1
参数：⼀个正则表达式，如果传⼊⼀个⾮正则表达式则会隐式的将其转换为正则表达式对象
6.str.match()
返回⼀个字符串匹配正则表达式的结果,如果未设置全局匹配，则会返回第⼀个完整匹配及其相关的捕获组，捕获组中包含
有groups、index、input等属性。
参数：⼀个正则表达式，如果传⼊⼀个⾮正则表达式则会隐式的将其转换为正则表达式对象

6.Foreach和map区别

1、相同点
(1)都是循环遍历数组中的每一项。
(2)每次执行匿名函数都支持三个参数，参数分别为item(当前每一项)，index(索引值)，arr(原数组)。
(3)匿名函数中的this都是指向window。
(4)只能遍历数组。
2、不同点
(1)map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
(2)forEach()允许callback更改原始数组的元素。map()返回新的数组。

7.跳出循环的方法

break 用来跳出循环.
continue 跳过当次循环，继续下一次的循环
return 跳出循环，并返回调用函数，之后的代码不在执行。
thorw Error() 用来跳出循环,之后的代码不在执行,需要配合try catch使用

在 forEach中，无法使用break，continue来跳出遍历。因为foreach是异步执行，可能在break之前代码就已经执行完了
在forEach中，无法用break等函数在遍历结束之前结束遍历，如果要提前终止，必须把forEach（）方法放在一个try块中，并能抛出一个异常。如果forEach（）调用的函数抛出foreach.break异常，循环会提前终止。
map和forEach一样无法通过break跳出循环。

8.js中的运算符

JS中的运算符包括算术运算符，赋值运算符，关系运算符，逻辑运算符，三目运算符
1.算术运算符：+ ，- ， ，/ ，% ，++ ，–*
字符串和其他数据类型，进行非+运算的时候，那么会把字符串转换为number类型，在进行运算。如果字符串不能转换成number的类型，会返回NaN（表示非number，是number的一个特殊值）
2.赋值运算符：= ， += ， -= ， = ， /= ，%=*

<script>
    // 他们两个是相等的
    // a += b;
    // a = a + b;

3.关系运算符：> ，< ，>= , <= , != , == , ===

<!-- 关系运算符 -->
    <script>
        var a = 10;
        var b = "10";
        console.log(a == b);//true ==只比较数值是否相等
        console.log(a === b);//false ===不仅比较数值是否相等，还要比较数据类型是否相等
        console.log("==========");
</script>

4.逻辑运算符：&&，||，！、

  <script>
        // && 和 || 都有短路的作用
        // &&：两边都为true会返回true, 当左边为false的时候就不再执行右边的表达式了
        var a = 3;
        console.log(0 > a && ++a);//false
        console.log(a);
 
        // ||：两边都为false的时候会返回false，当左边为true就不再执行右边的表达式了
        var b = 5;
        console.log(0 < b || ++b);//true
        console.log(b);
        // 注意：js中逻辑运算符两边可以不是boolean
        // 0，null，undefinded 都被认为是false；其他的都被认为是true
        var c = 7;
        console.log(0 && ++c);// 0 
        console.log(null && ++c);// null 
        console.log(undefined && ++c);// undefined
        console.log(c);
</script>

5.三目运算符：

<!-- 三目运算符 -->
    <script>
        // 控制台输出最大值
        var a = 8;
        var b = 10;
        console.log(a > b ? a : b);
</script>

9.函数调用的方式

1、作为一个函数调用：直接调用函数

function abc(x,y) {
        return x * y;
    };
    // console.log(abc(5,6));
    console.log(window.abc(6,8));

2、作为方法来调用函数：将函数定义为对象的方法

var obj = {
        name:"yoe",
        age:22,
        last:function () {
            return this.name + " " + this.age;
        },
    };
    console.log(obj.last());

3、使用构造函数调用函数：(函数调用前使用new关键字)
//构造器调用会创建新对象。新对象会从构造器中继承属性即方法

  //函数构造器
        function dee(a,b) {
            //构造器中的this没有值
            this.one = a;
            this.two = b;
        }
        //创建新的对象
        //this的值在调用对象时创建
        var obj = new dee("ele","vent");
        console.log(obj.two);

4、作为函数方法调用函数：（call和apply是预定义的函数）
call() 方法可以接收多个参数列表。
apply() 方法只能接收数组形式的参数，数组元素将作为参数列表传递给被调用的函数。
两个方法的第一个参数必须是对象本身（也可以是null）
当第一个参数为null时，得到的是当前运行环境的全局变量（window）

//call()方法 函数名.call()
    function def(x,y) {
        return x + y;
    };
var obj = console.log(def.call(obj,3,4));

 //apply()方法 函数名.apply()
   	  function def(x,y) {
          return x + y;
       };
       //var arr = [14,5];
       //var obj = console.log(def.apply(obj,arr));
       var obj = console.log(def.apply(obj,[14,6]));

apply、call、bind三者的区别:
相同：
1.都是用来改变函数的this对象的指向
2.第一个参数都是this要指向的对象
3.都可以利用后续参数传参
区别：
apply、call、bind的第一个参数都是this要指向的对象，但apply只有两个参数，第二个参数为一个数组，需要传输的参数值全部放到数组中；call和bind的参数是用逗号隔开。
apply和call返回的是一个值，bind返回的是一个函数
bind是返回绑定this之后的函数，便于稍后调用，apply和call是立即调用

10.什么是构造函数

构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象。