javascript实例

数组排序

①冒泡排序

思路：

1. 比较相邻的元素。如果第一个比第二个大，就交换他们两个。
2. 对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
3. 针对所有的元素重复以上的步骤，除了最后一个。
4. 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较

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;

};

②快速排序

思路：

1. 在数据集之中，选择一个元素作为”基准”（pivot）。
2. 所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。 
3. 对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

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

 

下面这段代码输出什么？如何让它正常输出？

for(var i = 0;i < 10;i++) {

　　setTimeout(function(){

　　　　console.log(i);

　　},100);

}

输出：10个10

for(var i = 0;i < 10;i++){

　　(function(e){

　　　　setTimeout(function(){

　　　　　　console.log(e)

　　　　},100);

　　})(i);

}

输出：0-9

 

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