javascript实例
数组排序
①冒泡排序
思路：
-
比较相邻的元素。如果第一个比第二个大，就交换他们两个。
-
对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
-
针对所有的元素重复以上的步骤，除了最后一个。
-
持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较
function bubble(arr){
let flag = true;//判断数组是否排序完毕
for(let i=0;i < arr.length-1;i++){
// 为什么要arr.length-1。假如是n个数，每一轮确定一个最大的，n-1轮就确定了n-1个大的数，那么第n个数就不用比了
for(let j=0;j < arr.length-1-i;j++){
// 为什么要arr.length-1-i。每一轮确定了最大的数，那么最大的数就不需要再进行比较了
if(arr[i] > arr[i+1]){
let temp = arr[i+1];
arr[i+1] = arr[i];
arr[i] = temp;
flag = false;//如果flag为false，代表数组还在进行排序
}
}
if(flag){
break;
}
}
return arr;
};
②快速排序
思路：
-
在数据集之中，选择一个元素作为”基准”（pivot）。
-
所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。
-
对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
function quickSort(arr){
if(arr.length < 2){return arr;};
let pointIndex = Math.floor(arr.length/2);
let pivot = arr.splice(pivotIndex,1)[0];
var left = [];
var right = [];
for(var i=0;i<arr.length;i++){
if(arr[i]<=pivot){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot],quickSort(right));
}
DocumentFragment文档碎片(高效批量更新多个节点)
原始方法：
var parentNode = document.getElementsByTageName('ul')[0];
function appendDataToElement (appendToElement, num) {
let node;
for (let i = 0; i < num.length; i++) {
node = document.createElement('li');
node.innerHTML = i;
appendToElement.appendChild(node);
}
}
appendDataToElement (parentNode, num);
优化后：
var parentNode = document.getElementsByTagName('ul')[0],
fragment = document.createDocumentFragment();
function appendDataToElement(appendToElement, num) {
let node;
for (let i = 0; i < num.length; i++) {
node = document.createElement('li');
node.innerHTML = i;
fragment.appendChild(node);
}
appendToElement.appendChild(fragment);
}
appendDataToElement(parentNode, num);
将url后面的参数变成obj？
此题目要求获取url的参数、字符串分割成数组、对象的赋值
var str = window.location.search;
str = url.substring(1);
var arr = url.split('&'); //[name=xx,age=2];
var obj = {};
for (var i = 0; i < arr.length; i++) {
var key = arr[i].split('=')[0];
var value = arr[i].split('=')[1];
obj[key] = value;
}
console.log(obj) //{name: "xx", age: "2"}
你如何获取浏览器URL中查询字符串中的参数？
实例如下：
function showWindowHref(){
var sHref = window.location.href;
var args = sHref.split('?');
if(args[0] == sHref){
return "";
}
var arr = args[1].split('&');
var obj = {};
for(var i = 0;i< arr.length;i++){
var arg = arr[i].split('=');
obj[arg[0]] = arg[1];
}
return obj;
}
var href = showWindowHref(); // obj
console.log(href['name']); // xiaoming
扁平化多维数组
1、老方法
var result = []
function unfold(arr){
for(var i=0;i< arr.length;i++){
if(typeof arr[i]=="object" && arr[i].length>1) {
unfold(arr[i]);
} else {
result.push(arr[i]);
}
}
}
var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
unfold(arr)
2、使用tostring
var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
var b = c.toString().split(',')
3、使用es6的reduce函数
var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
var result = flatten(arr)
一个顶级对象里面嵌套子对象，子对象里面嵌套孙对象，怎么获取一个对象的深度？
obi1 = {
name: 'xx',
children: {
name: 'x2',
children: {
name: 'x3'
}
}
}
var num = 1;
function getDeepLength(o) {
for (var i in o) {
if (typeof o[i] == 'object') {
console.log(o[i]);
num++;
getDeepLength(o[i])
}
}
return num;
}
console.log(getDeepLength(obi1))//3
图片预览
function showPreview(source) {
var file = source.files[0];
if(window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
document.getElementById("portrait").src = e.target.result;
};
fr.readAsDataURL(file);
}
}
怎么判断一个数组里面是否包含一个值？
方法1：循环===或者循环indexof
var arr = ['a', 's', 'd', 'f'];
console.info(isInArray(arr, 'a'));//循环的方式
function isInArray(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (value === arr[i]) {
return true;
}
}
return false;
}
方法2：jQuery的inArray方法
var array = ['a','ab','abc'];
$.inArray('abc',array);//2
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
console.log(object.getNameFunc()()); //The Window
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
that = this;
return function(){
return that.name;
};
}
};
console.log(object.getNameFunc()()); //My Object
经典闭包面试题？
https://cloud.tencent.com/developer/article/1436216
function fun(n,o){
console.log(o);
return {
fun:function(m){
return fun(m,n);
}
};
}
var a = fun(0);a.fun(1);a.fun(2);a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);c.fun(2);c.fun(3);
//问:三行a,b,c的输出分别是什么？
找到匹配字符串所在的各个位置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符串匹配</title> </head> <body> <script type="text/javascript"> /*找到匹配字符串所在的各个位置*/ var str="asadajhjkadaaasdasdasdasd"; var position=[]; var pos=str.indexOf("d"); while(pos>-1){ position.push(pos); pos=str.indexOf("d",pos+1); } console.log(position);//[3, 10, 15, 18, 21, 24] </script> </body> </html> |
字符串去重
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符串去重</title> </head> <body> <script type="text/javascript"> //String.split() 执行的操作与 Array.join 执行的操作是相反的 //split() 方法用于把一个字符串分割成字符串数组。 //join方法用于将字符串数组连接成一个字符串 //如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。 var str="aahhgggsssjjj";//这里字符串没有可以分隔的字符，所以需要使用空字符串作为分隔符 function unique(msg){ var res=[]; var arr=msg.split(""); //console.log(arr); for(var i=0;i<arr.length;i++){ if(res.indexOf(arr[i])==-1){ res.push(arr[i]); } } return res.join(""); } console.log(unique(str));//ahgsj </script> </body> </html> |
判断字符串中字符出现的次数
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符串操作</title> </head> <body> <script type="text/javascript"> /* 1.先实现字符串去重 2.然后对去重后的数组用for循环操作，分别与原始数组中各个值进行比较，如果相等则count++,循环结束将count保存在sum数组中，然后将count重置为0 3.这样一来去重后的数组中的元素在原数组中出现的次数与sum数组中的元素是一一对应的 */ var str="aacccbbeeeddd"; var sum=[]; var res=[]; var count=0; var arr=str.split(""); for(var i=0;i<arr.length;i++){ if(res.indexOf(arr[i])==-1){ res.push(arr[i]); } } for(var i=0;i<res.length;i++){ for(var j=0;j<arr.length;j++){ if(arr[j]==res[i]){ count++; } } sum.push(count); count=0; } console.log(res);//["a", "c", "b", "e", "d"] for(var i=0;i<res.length;i++){ var str=(sum[i]%2==0)?"偶数":"奇数"; console.log(res[i]+"出现了"+sum[i]+"次"); console.log(res[i]+"出现了"+str+"次"); } </script> </body> </html> |
阿里面试-字符串操作
|
1
2
3
4
5
|
<script type="text/javascript"> var str = "www.taobao.com"; var res = str.split("").reverse().join("").replace('oat',''); console.log(res);//moc.oab.www </script>
|
数组求和
https://www.cnblogs.com/faithZZZ/p/7063952.html
var arr1=[1,2,3,4,5,6,7,8,9];
① for循环遍历
function addAry(arr){
var sum=0; //定义变量
for (var i=0;i<arr.length;i++) { //for循环
if (typeof arr[i]=="number") { //判断数组元素是否是number类型
sum += arr[i]; //逐个相加
}
}
return sum;
}
275ms
② forEach循环遍历
function addAry(arr){
var sum = 0;
arr.forEach(function(val,index,arr){
sum += val;
})
return sum;
}
383ms
③ 函数式编程法 reduce 数组中的每个值（从左到右）开始合并，最终为一个值
function addAry(arr){
return arr.reduce(function(prev,cur){
return prev + cur;
},0)
}
149ms
④ some 用于检测数组中的元素是否满足指定条件（函数提供）。
function addAry(arr){
var sum = 0;
arr.some(function(val,index,arr){
sum += val;
})
return sum;
}
324ms
⑤ filter 检测数值元素，并返回符合条件所有元素的数组。
function addAry(arr){
var sum = 0;
arr.filter(function(val,index,arr){
sum += val;
})
return sum;
}
341ms
⑥ every 检测数值元素的每个元素是否都符合条件。
function addAry(arr){
var sum = 0;
arr. every (function(val,index,arr){
sum += val;
})
return sum;
}
360ms
⑦ map 通过指定函数处理数组的每个元素，并返回处理后的数组。
function addAry(arr){
var sum = 0;
arr.map(function(val,index,arr){
sum += val;
})
return sum;
}
2577ms
⑧ 用‘+’分割后，eval直接相加
function addAry(arr){
return eval(arr.join(“+”));
}
9750ms
给定任意非负整数，反复累加各位数字直到结果为个位数为止。例如给定非负整数912，第一次累加9+1+2 = 12, 第二次累加1+2 = 3, 3为个位数，循 环终止返回3。
function add(num){
if(isNaN(num)) return; //判断元素是否不是一个数字
if(num < 10) return num;
const res = num.toString().split(‘’).reduce((sum,value)=>{
return sum + Number(value);
},0)
return add(res); //递归调用
}
数组的去重有哪几种方式？
https://www.jb51.net/article/118657.htm
重点：用es6的方法,这是个面试的套路，同时检测你有没有用过es6
var set = new Set(array1);
var newArray = Array.from(set);
怎么判断一个数组里面是否包含一个值？
方法1：循环===或者循环indexof
var arr = ['a', 's', 'd', 'f'];
console.info(isInArray(arr, 'a'));//循环的方式
function isInArray(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (value === arr[i]) {
return true;
}
}
return false;
}
方法2：jQuery的inArray方法
var array = ['a','ab','abc'];
$.inArray('abc',array);
30.给你一个数据，怎么判断这个数据的数据类型？
方法1：Object.prototype.toString.call(str)
方法2：jquery.type()
方法3：根据对象的constructor判断： constructor
求数组的最值？
方法一：
求数组最大值：Math.max.apply(null,arr);
var arr = [3,43,23,45,65,90];
var max = Math.max.apply(null,arr);
console.log(max);
// 90
求数组最小值：Math.min.apply(null,arr);
var arr = [3,43,23,45,65,90];
var min = Math.min.apply(null,arr);
console.log(min);
// 3
方法二：Array.max = function(arr){} / Array.min = function(arr){}
var array = [3,43,23,45,65,90];
Array.max = function( array ){
return Math.max.apply( Math, array );
};
Array.min = function( array ){
return Math.min.apply( Math, array );
};
var max = Array.max(array);
console.log(max); // 90
var min = Array.min(array);
console.log(min); // 3
方法三：Array.prototype.max = function(){};Array.prototype.min = function(){};
求数组最大值(基本思路：将数组中的第一个值赋值给变量max ,将数组进行循环与max进行比较，将数组中的大值赋给max,最后返回max;)
var arr = [3,43,23,45,65,90];
Array.prototype.max = function() {
var max = this[0];
var len = this.length;
for (var i = 0; i < len; i++){
if (this[i] > max) {
max = this[i];
}
}
return max;
}
var max = arr.max();
console.log(max); // 90
求数组最小值：
var arr = [3,43,23,45,65,90];
Array.prototype.min = function() {
var min = this[0];
var len = this.length;
for(var i = 0;i< len;i++){
if(this[i] < min){
min = this[i];
}
}
return min;
}
var min = arr.min();
console.log(min); // 3
数组去重
https://blog.csdn.net/fe_dev/article/details/72843989
https://blog.csdn.net/xinyiyukenan/article/details/81197612
https://blog.csdn.net/weixin_42412046/article/details/81459294
https://www.cnblogs.com/baiyangyuanzi/p/6726258.html
①：for循环
var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
if( !obj[arr[i]] ){
obj[arr[i]] = 1;
tmp.push(arr[i]);
}
}
②：for循环
var arr = [2,3,4,4,5,2,3,6],
arr2 = [];
for(var i = 0;i< arr.length;i++){
if(arr2.indexOf(arr[i]) < 0){
arr2.push(arr[i]);
}
}
③：filter()
var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
return self.indexOf(element) === index;
});
3840ms
④：数组方法forEach + indexOf
function uniqueArr(arr){
const newArr = [];
arr.forEach(item => {
if(nwArr.indexOf(item) === -1){
newArr.push(item);
}
})
return newArr;
}
2956ms
⑤ ：数组方法sort()
function uniqueArr(arr){
const newArr = [];
arr.sort();
for(let I = 0;I < arr.length;i++){
if(arr[i] !== arr[i+1]){
newArr.push(arr[i]);
}
}
return newArr;
}
131ms
⑥ ：数组方法includes()
function uniqueArray(arr){
const newArr = [];
arr.forEach(item => {
if(!newArr.includes(item)){
newArr.push(item)
}
})
return newArr;
}
⑦ ：数组方法reduce()
function uniqueArr(arr){
return arr.sort().reduce((prev,cur) => {
if(prev.length === 0 || prev[prev.length - 1] !== prev){
prev.push(cur);
}
return prev;
},[])
}
⑧ ：ES6的Map
function uniqueArr(arr){
const newArr = [];
const tmp = new Map();
for(let I = 0;I < arr.length;i++){
if(!tmp.get(arr[i])){
tmp.set(arr[i],1);
newArr.push(arr[i]);
}
}
return newArr;
}
17ms
⑨：ES6的Set
function uniqueArr(arr){
return Array.from(new Set(arr));
}
14ms
判断一个字符串中出现次数最多的字符，统计这个次数
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
} console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
JavaScript中如何检测一个变量是一个String类型？请写出函数实现
方法1、
function isString(obj){
return typeof(obj) === "string"? true: false;
// returntypeof obj === "string"? true: false;
}
方法2、
function isString(obj){
return obj.constructor === String? true: false;
}
方法3.
function isString(obj){
return Object.prototype.toString.call(obj) === "[object String]"?true:false;
}
如：
var isstring = isString('xiaoming');
console.log(isstring); // true
请用js去除字符串空格？
方法一：使用replace正则匹配的方法
去除所有空格: str = str.replace(/\s*/g,"");
去除两头空格: str = str.replace(/^\s*|\s*$/g,"");
去除左空格： str = str.replace( /^\s*/, “”);
去除右空格： str = str.replace(/(\s*$)/g, "");
str为要去除空格的字符串，实例如下：
var str = " 23 23 ";
var str2 = str.replace(/\s*/g,"");
console.log(str2); // 2323
方法二：使用str.trim()方法
str.trim()局限性：无法去除中间的空格，实例如下：
var str = " xiao ming ";
var str2 = str.trim();
console.log(str2); //xiao ming
同理，str.trimLeft()，str.trimRight()分别用于去除字符串左右空格。
方法三：使用jquery,$.trim(str)方法
$.trim(str)局限性：无法去除中间的空格，实例如下：
var str = " xiao ming ";
var str2 = $.trim(str)
console.log(str2); // xiao ming
以下代码有否正确？如不正确，请改正
f = function(){return true;}
g = function(){return false;}
(function(){
if(g()&&[]==![]){
f = function f(){return false;}
function g(){return true;} }
})();
console.log(f());//true or false?
检测一个对象是否有prop属性，没有就抛出异常，有的话返回true，并删掉该属性
var o = {
age:10,
prop:"prop"
}
function hasProperty(pro,obj){
if(obj.hasOwnProperty(pro)){
delete obj.prop;
}else{
throw new Error("没有该属性");
}
}
hasProperty("prop",o)
console.log(o)
浅拷贝和深拷贝的区别？es6中的...扩展运算符是浅拷贝还是深拷贝？一个对象，你有几种方法实现它的深拷贝？
浅拷贝:只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
深拷贝:会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
//深拷贝方法一
var $ = require('jquery');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f);// false
//深拷贝方法二
使用Object.create()方法
//深拷贝方法三
手动复制属性
写过ajax封装吗？ajax里面的error你是怎么封装判断的？
写过，需要熟悉ajax和后台返回的状态码，error封装如下
error: function (xhr, status, error) {
switch (xhr.status) {
case 400:
msg = '服务异常';
break;
case 401:
msg = '身份认证异常';
callback = function () {
window.location.reload();
}
break;
case 403:
msg = "权限受限";
break;
case 404:
msg = "资源不存在";
break;
case 500:
msg = "运行异常";
break;
default:
msg = "未知服务异常";
}
}
数组的翻转（非reverse()）
方法一：
var arr = [1,2,3,4];
var arr2 = [];
while(arr.length) {
var num = arr.pop(); //删除数组最后一个元素并返回被删除的元素
arr2.push(num);
}
console.log(arr2);
// [4, 3, 2, 1]
方法二：
var arr = [1,2,3,4];
var arr2 = [];
while(arr.length){
var num = arr.shift(); //删除数组第一个元素并返回被删除的元素
arr2.unshift(num);
}
console.log(arr2);
