js常见面试题

最新推荐文章于 2025-07-08 15:35:16 发布

原创最新推荐文章于 2025-07-08 15:35:16 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

前端面试专栏收录该内容

1 篇文章

订阅专栏

本文深入解析JavaScript中的元素选择器、原型链、闭包、this指向调整、箭头函数特性、ES6新特性、事件传播流程、AJAX请求处理、对象与数组操作、正则表达式应用、字符串操作、排序算法、设计模式实践等内容，涵盖前端开发关键知识点。

基础知识

1、元素选择器

getElementById （获取单个标签）
getElementsClassName（获取一个集合）
getElementsByTagName（获取一个标签集合）
querySelector（获取选择器的第一个元素。）
querySelectAll（获取一个标签集合）

注：元素选择可以爱一次的查找结果之后继续操作

2、原型和原型链

		每一个对象都有一个原型（对象的原型显示为__proto__）
		每一个function都有一个显示的原型（prototype）
js中的变量都会有一个__proto__执行他的原型，可以一级一级的查找，知道Object为止。

使用原型链的原理实现继承

3、闭包

在一个方法内部形成一个局部的作用空间，可以在function外边调用内部的值

4、this指向的问题，怎么改变this指向？

默认情况下this指向window
我们可以使用bind方法改变this指向
也可以使用call和apply改变，call和apply的区别是传递的参数形式不一样
bind和call、apply，bind只改变this指向不会调用方法，call和apply在改变this指向的同时调用方法
可以定义一个变量that做临时保存

5、function和箭头函数（this指向的区别）
6、ES6新增的一些东西，怎么实行继承、模块内、promise（const、let、箭头函数、class、扩展、运算符等）
7、事件传播流程

捕获阶段：从window对象传导到目标节点，称为“捕获阶段”（capture phase）。
事件源阶段：在目标节点上触发，称为“目标阶段”（target phase）。
冒泡阶段：从目标节点传导回window对象，称为“冒泡阶段”（bubbling phase）。

注：这种三阶段的传播模型，会使得一个事件在多个节点上触发。比如，假设div节点之中嵌套一个p节点。

8、ajax请求：跨域，cookie和本地存储（localStorage）
9、对象和数组的常用方法，json字符串和js对象之间的转换

for in （遍历对象的属性信息）
Object.keys（获取对象的属性名，返回一个数组）
对象[属性名]
例子：
var  obj={name:'Tom',age:33}
obj['name'] //此方法可以使用变量的形式或者设置属性值，动态定义属性名

数组的常用方法：

push
作用：像数组的末尾添加一项或多项元素
参数：要添加的项
返回值：新数组的长度
是否改变原数组：改变
var ary = [‘a’,‘b’,‘c’];
var res = ary.push(‘d’,‘e’);
console.log(ary); // [“a”, “b”, “c”, “d”, “e”]
console.log(res); // 5
pop
作用：删除数组的最后一项
参数：无
返回值：被删除的项
是否改变原数组：改变
var ary = [‘1’,‘2’,‘3’];
var res = ary.pop();
console.log(ary); // [‘1’,‘2’]
console.log(res); // 3
shift
作用：删除数组的首项
参数：无
返回值：被删除的项
是否改变原数组：改变
var ary = [‘a’,‘b’,‘c’];
var res = ary.shift();
console.log(ary); // [‘b’,‘c’]
console.log(res); // a
unshift
作用：向数组的开头添加一或多项
参数：要添加的项，多项用’,'隔开
返回值：新数组的长度
是否改变原数组：改变
var ary = [‘a’,‘b’,‘c’];
var res = ary.unshift(‘d’,‘e’);
console.log(ary); // [“d”, “e”, “a”, “b”, “c”]
console.log(res); // 5
splice
作用：增删改
参数：ary.splice(index,howmany,item1,…,itemX)
返回值：删除的项
是否改变原数组：改变
增加的功能
ary.splice(n,0,x，…,y);
从数组的索引n开始，删除0项,在索引n的前边增加新的项，第三个参数开始都是用来填补删除的项目位置的

var ary = [1,2,3,4,5];
var res = ary.splice(1,0,6,7);
console.log(ary); // [1, 6, 7, 2, 3, 4, 5]
console.log(res); // [] 删除0项，返回一个空数组
删除的功能
ary.splice(n,m);
从数组的索引n开始，删除m项

var ary = [1,2,3,4,5];
var res = ary.splice(1,2);
console.log(ary); // [1，4，5]
console.log(res); // [2，3]
修改的功能
ary.splice(n,m,x);
从数组的索引n开始，删除m项，把x添加到索引n前边

var ary = [1,2,3,4,5];
var res = ary.splice(1,2,6,7);
console.log(ary); // [1, 6, 7, 4, 5]
console.log(res); // [2，3]
//模拟 push(尾部添加) 和push二者返回值不同
ary.splice(ary.length,0,新的项) //因为splice是在索引前添加，所以第一个参数为ary.length
//模拟 pop(尾部删除)
ary.splice(arr.length-1,1);
//模拟 shift(首项删除)
ary.splice(0,1)
//模拟 unshift(首项添加) 和unshilft二者返回值不同
ary.splice(0,0,新的项)
此外

ary.splice(n) // 表示从索引n开始删除到末尾
ary.splice(0) // 删除整个数组有克隆数组的效果，利用返回值
6. slice
作用：截取数组(复制数组)
参数：array.slice(start, end)
返回值：返回一个新数组
是否改变原数组：不改变
var ary = [1,2,3,4,5];
var res = ary.slice(1,3);
var res2 = ary.slice(-3,-1)
console.log(ary); // [1,2,3,4,5]
console.log(res); // [2,3]
console.log(res2) //[3,4] slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项

slice(n) //从索引n开始复制到最后一项
slice()、 slice(0) //复制整个数组

join
作用：用指定的分隔符将数组每一项拼接为字符串
参数：指定的分隔符,如果省略该参数，则使用逗号作为分隔符
返回值：拼接好的字符串
是否改变原数组：不改变
var ary = [1,2,3,4,5];
var res = ary.join(’-’);
console.log(ary); // [1, 2, 3, 4, 5]
console.log(res); // 1-2-3-4-5
concat
作用：用于连接两个或多个数组
参数：参数可以是具体的值，也可以是数组对象。可以是任意多个
返回值：返回连接后的新数组
是否改变原数组：不改变
var ary = [1,2,3,4,5];
var res = ary.concat(6,7);
var res2 = ary.concat(6,[7,8]);
var res3 = ary.concat(6,[7,[8,9]]);
var res4 = ary.concat();
console.log(ary); // [1, 2, 3, 4, 5]
console.log(res); // [1, 2, 3, 4, 5, 6, 7]
console.log(res2); //[1, 2, 3, 4, 5, 6, 7, 8]
console.log(res3) // [1, 2, 3, 4, 5, 6, 7, [8,9]] concat() 如果操作的参数是数组，那么添加的是数组中的元素，而不是数组。如果是二维(或以上)数组，concat只能’拆开’一层数组
console.log(res4) // [1, 2, 3, 4, 5] 如果concat()没有参数或者参数是空数组也可以达到克隆数组的目的
sort
作用：对数组的元素进行排序
参数：可选(函数) 规定排序规则默认排序顺序为按字母升序
返回值：排好序的原数组
是否改变原数组：改变
var ary = [1,5,7,9,12,24,56,87,92];
var ary2 = [1,5,7,9,12,24,56,87,92];
var ary3 = [1,5,7,9,12,24,56,87,92];
var res = ary.sort();
var res2 = ary2.sort(function(a,b){
return a-b;
})
var res3 = ary3.sort(function(a,b){
return b-a;
})
// sort的参数函数总的形参a,b就是数组排序时候的相邻比较的两项
console.log(res); // [1, 12, 24, 5, 56, 7, 87, 9, 92]
console.log(res2); // [1, 5, 7, 9, 12, 24, 56, 87, 92]
console.log(res3); // [92, 87, 56, 24, 12, 9, 7, 5, 1]
reverse
作用：倒序数组
参数：无
返回值：倒序后的原数组
是否改变原数组：改变
var ary = [1,2,3,4,5];
var res = ary.reverse();
console.log(ary); // [5, 4, 3, 2, 1]
console.log(res); // [5, 4, 3, 2, 1]
indexOf
作用：查找指定元素的位置
参数：array.indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
返回值：返回第一次查到的索引，未找到返回-1
是否改变原数组：不改变
var ary = [1,2,3,4,5]
var res = ary.indexOf(3);
console.log(ary); // [1,2,3,4,5]
console.log(res); // 2
var ary = [‘a’,‘b’,‘c’,‘d’,‘c’];
var res = ary.indexOf(‘c’,3);
console.log(res) // 4
lastIndexOf
作用：查找指定元素最后出现的位置
参数：array.indexOf(item,start) item:查找的元素 start:字符串中开始检索的位置
返回值：返回查到的元素的索引，未找到返回-1
是否改变原数组：不改变
var ary = [‘a’,‘b’,‘c’,‘d’,‘c’];
var res = ary.lastIndexOf(‘c’,3);
var res2 = ary.lastIndexOf(‘c’,1);
console.log(res); // 2
console.log(res2); // -1
forEach
作用：循环遍历数组每一项
参数：函数 ary.forEach(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值：无
是否改变原数组：不改变
var ary = [‘a’,‘b’,‘c’]
var res = ary.forEach(function(item,index,ary){
console.log(item,index,ary);
/* a 0 [“a”, “b”, “c”]
b 1 [“a”, “b”, “c”]
c 2 [“a”, “b”, “c”]
*/
return item;
})
console.log(res) // undefined 无返回值
map
作用：数组中的元素为原始数组元素调用函数处理后的值
参数：函数 ary.map(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值：新数组
是否改变原数组：不改变
var ary = [‘a’,‘b’,‘c’]
var res = ary.map(function(item,index,ary){
return item+1;
})
console.log(res) // [“a1”, “b1”, “c1”]
filter
作用：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
参数：函数 ary.filter(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值：新数组
是否改变原数组：不改变
var ary = [1,2,3,4,5,6]
var res = ary.filter(function(item){
return item<3;
})
console.log(res) // [1,2]
every
作用：检测数组所有元素是否都符合指定条件
参数：函数 ary.every(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值：布尔值
是否改变原数组：不改变
var ary = [1,2,3,4,5,6]
var res = ary.every(function(item){
return item<3;
})
var res2 = ary.every(function(item){
return item<7;
})
console.log(res) // false;
console.log(res2) // true;
1 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
2 如果所有元素都满足条件，则返回 true。
some
作用：检测数组中的元素是否满足指定条件
参数：函数 ary.some(function(item,index,ary){}) item:每一项 index:索引 ary:当前数组
返回值：布尔值
是否改变原数组：不改变
var ary = [1,2,3,4,5,6]
var res = ary.some(function(item){
return item<3;
})
console.log(res) // true;
1 如果有一个元素满足条件，则表达式返回 true , 剩余的元素不会再执行检测。
2 如果没有满足条件的元素，则返回 false。

10、正则表达式
11、字符串的操作
（1）截取：slice(n,m) 从索引n开始，截取到索引m,不包括m.将截取的字符返回,对原字符串没有任何改变.
（2）替换：.replace(‘a’,1); 替换指定字符，返回替换后新的字符串，对原有字符串有改变。(第一个参数可以是正则表达式) 只能替换一次，配合正则模式修饰符g使用
（3）分割：split 用指定字符分割字符串，返回一个数组.对原字符串没有任何改变。
（4）拼接：.concat拼接2个字符串，返回一个新字符串，对原有字符串没有任何改变。（也可以用“+”和模板字符串拼接）

12、排序，常见的排序算法
（也可以用数组中的.sort方法来排序或者用插件：Lodash）
冒泡排序：

function bubbleSort(arr){
    var flag = false;  // 定义一个变量为false，未交换位置
    for(var i=0;i<arr.length-1;i++){
        for(var j=0;j<arr.length-1;j++){
            if(arr[j+1]<arr[j]){
                temp = arr[j+1];
                arr[j+1] = arr[j];
                arr[j] = temp;
                flag = true; //true，已交换位置
            }
        }
        if(flag){
            flag = false; //如果交换了位置，将flag重新设为false
        }else{
             break;       //如果未交换，则跳出循环
        }
    }
    return arr;
}

//对比arr中的第j+1项和第j项，如果第j+1项小于第j项，就把第j+1项和第j项调换位置。如果没达到最终的顺序（从小到大），就继续找，继续换，直到达到最终效果

选择排序：

var arr=[5,3,2,4,1,0];
function findMin(arr,first){
        var minindex = first;  //定义最小下标
        var minNum = arr[first]; //定义数组中的最小值
        for(var i=first+1;i<arr.length;i++){ //循环找到最小值和最小下标
            if(arr[i]<minNum){ 
                minNum = arr[i];
                minindex = i;
            }
        }

        return minindex;//返回最小值下标  一共查找了六次，最小值下标分别为 ：5,4,2,4,4,5
    }

    function selectionSort(arr){
        for(var i=0;i<arr.length;i++){
            var min =var temp = arr[min];      
            arr[min] = arr[i];         //eg.第一次循环 ：将最小值5和arr[0]进行交换 
            arr[i] = temp;             // 剩下几次同第一次
        }
        return arr;
    }

    document.write(selectionSort(arr));  //0,1,2,3,4,5,

13、设计模式（工厂模式、单例模式、观察者模式）

实际操作

1、数组去重
2、对象的拷贝和比较（JSON.stringify）
3、对象的扩展运算符
4、对象的绑定和自定义事件
5、常见的按键码
keyCode 8 = BackSpace BackSpace
keyCode 9 = Tab Tab
keyCode 12 = Clear
keyCode 13 = Enter
keyCode 16 = Shift_L
keyCode 17 = Control_L
keyCode 18 = Alt_L
keyCode 19 = Pause
keyCode 20 = Caps_Lock
keyCode 27 = Escape Escape
keyCode 32 = space
keyCode 33 = Prior
keyCode 34 = Next
keyCode 35 = End
keyCode 36 = Home
keyCode 37 = Left
keyCode 38 = Up
keyCode 39 = Right
keyCode 40 = Down
keyCode 41 = Select
keyCode 42 = Print
keyCode 43 = Execute
keyCode 45 = Insert
keyCode 46 = Delete
keyCode 47 = Help
keyCode 48 = 0 equal braceright
keyCode 49 = 1 exclam onesuperior
keyCode 50 = 2 quotedbl twosuperior
keyCode 51 = 3 section threesuperior
keyCode 52 = 4 dollar
keyCode 53 = 5 percent
keyCode 54 = 6 ampersand
keyCode 55 = 7 slash braceleft
keyCode 56 = 8 parenleft bracketleft
keyCode 57 = 9 parenright bracketright
keyCode 65 = a A
keyCode 66 = b B
keyCode 67 = c C
keyCode 68 = d D
keyCode 69 = e E EuroSign
keyCode 70 = f F
keyCode 71 = g G
keyCode 72 = h H
keyCode 73 = i I
keyCode 74 = j J
keyCode 75 = k K
keyCode 76 = l L
keyCode 77 = m M mu
keyCode 78 = n N
keyCode 79 = o O
keyCode 80 = p P
keyCode 81 = q Q at
keyCode 82 = r R
keyCode 83 = s S
keyCode 84 = t T
keyCode 85 = u U
keyCode 86 = v V
keyCode 87 = w W
keyCode 88 = x X
keyCode 89 = y Y
keyCode 90 = z Z
keyCode 96 = KP_0 KP_0
keyCode 97 = KP_1 KP_1
keyCode 98 = KP_2 KP_2
keyCode 99 = KP_3 KP_3
keyCode 100 = KP_4 KP_4
keyCode 101 = KP_5 KP_5
keyCode 102 = KP_6 KP_6
keyCode 103 = KP_7 KP_7
keyCode 104 = KP_8 KP_8
keyCode 105 = KP_9 KP_9
keyCode 106 = KP_Multiply KP_Multiply
keyCode 107 = KP_Add KP_Add
keyCode 108 = KP_Separator KP_Separator
keyCode 109 = KP_Subtract KP_Subtract
keyCode 110 = KP_Decimal KP_Decimal
keyCode 111 = KP_Divide KP_Divide
keyCode 112 = F1
keyCode 113 = F2
keyCode 114 = F3
keyCode 115 = F4
keyCode 116 = F5
keyCode 117 = F6
keyCode 118 = F7
keyCode 119 = F8
keyCode 120 = F9
keyCode 121 = F10
keyCode 122 = F11
keyCode 123 = F12
keyCode 124 = F13
keyCode 125 = F14
keyCode 126 = F15
keyCode 127 = F16
keyCode 128 = F17
keyCode 129 = F18
keyCode 130 = F19
keyCode 131 = F20
keyCode 132 = F21
keyCode 133 = F22
keyCode 134 = F23
keyCode 135 = F24
keyCode 136 = Num_Lock
keyCode 137 = Scroll_Lock
keyCode 187 = acute grave
keyCode 188 = comma semicolon
keyCode 189 = minus underscore
keyCode 190 = period colon
keyCode 192 = numbersign apostrophe
keyCode 210 = plusminus hyphen macron
keyCode 211 =
keyCode 212 = copyright registered
keyCode 213 = guillemotleft guillemotright
keyCode 214 = masculine ordfeminine
keyCode 215 = ae AE
keyCode 216 = cent yen
keyCode 217 = questiondown exclamdown
keyCode 218 = onequarter onehalf threequarters
keyCode 220 = less greater bar
keyCode 221 = plus asterisk asciitilde
keyCode 227 = multiply division
keyCode 228 = acircumflex Acircumflex
keyCode 229 = ecircumflex Ecircumflex
keyCode 230 = icircumflex Icircumflex
keyCode 231 = ocircumflex Ocircumflex
keyCode 232 = ucircumflex Ucircumflex
keyCode 233 = ntilde Ntilde
keyCode 234 = yacute Yacute
keyCode 235 = oslash Ooblique
keyCode 236 = aring Aring
keyCode 237 = ccedilla Ccedilla
keyCode 238 = thorn THORN
keyCode 239 = eth ETH
keyCode 240 = diaeresis cedilla currency
keyCode 241 = agrave Agrave atilde Atilde
keyCode 242 = egrave Egrave
keyCode 243 = igrave Igrave
keyCode 244 = ograve Ograve otilde Otilde
keyCode 245 = ugrave Ugrave
keyCode 246 = adiaeresis Adiaeresis
keyCode 247 = ediaeresis Ediaeresis
keyCode 248 = idiaeresis Idiaeresis
keyCode 249 = odiaeresis Odiaeresis
keyCode 250 = udiaeresis Udiaeresis
keyCode 251 = ssharp question backslash
keyCode 252 = asciicircum degree
keyCode 253 = 3 sterling
keyCode 254 = Mode_switch
使用event对象的keyCode属性判断输入的键值
eg：if(event.keyCode==13)alert(“enter!”);