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);