javascript常见习题（一）

落日映苍穹つ 2022-12-16 06:41 191阅读 0赞

1、元素选择器

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

2、原型和原型链

每一个对象都有一个原型（对象的原型显示为__proto__）
    	每一个function都有一个显示的原型（prototype）

js中的变量都会有一个\_\_proto\_\_执行他的原型，可以一级一级的查找，知道Object为止。

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

3、闭包

在一个方法内部形成一个局部的作用空间，可以在function外边调用内部的值  
1  
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）  
冒泡排序：

//对比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、常见的按键码  
使用event对象的keyCode属性判断输入的键值  
eg：if(event.keyCode==13)alert(“enter!”);