M Wiki

User Tools

Site Tools

Trace: • js-code
interview:js-code

Table of Contents

Event loop

JavaScript 运行机制详解-再谈Event Loop: http://www.ruanyifeng.com/blog/2014/10/event-loop.html 







根据浏览器地址解析参数




var getURLParam = function(name){
        var search = document.location.search;
        var pattern = new RegExp("[?&]"+name+"\=([^&]+)", "g");
        var matcher = pattern.exec(search);
        var items = null;
        if(null != matcher){
          try{
            items = decodeURIComponent(decodeURIComponent(matcher[1]));
          }catch(e){
            try{
              items = decodeURIComponent(matcher[1]);
            }catch(e){
              items = matcher[1];
            }
          }
        }
        return items;
      };






正则表达式






过目不忘JS正则表达式: https://www.cnblogs.com/moqing/archive/2016/07/13/5665126.html



正则表达式函数区别：exec, match, test, search
str.search(regx)  返回的是第一个匹配的位置位置，比如
"https://www.baidu.com?id=24324&id=2888&id=2299".search(/[?&]id=([^&]+)/g); 返回21

"https://www.baidu.com?id=24324&id=2888&id=2299".match(/[?&]id=([^&]+)/g); 
返回一个数组：["?id=24324", "&id=2888", "&id=2299"] 

/[?&]id=([^&]+)/g.test("https://www.baidu.com?id=24324&id=2888&id=2299") 返回true

/[?&]id=([^&]+)/g.exec("https://www.baidu.com?id=24324&id=2888&id=2299");
返回的是类数组： 
{ 0: "?id=24324", 1:"24324", index: 21, length:2, input: "https://www.baidu.com?id=24324&id=2888&id=2299" }


\s:空格, \S:非空格, \d:数字, \D:非数字
\w:字符(字母数字下划线), \W:非字符




JS正则表达式详解： https://www.cnblogs.com/moqiutao/p/6513628.html







判断浏览器类型




function isWechat() {
   var ua = window.navigator.userAgent.toLowerCase();
   return (ua.match(/MicroMessenger/i) == 'micromessenger');






Jquery ajax, Axios, Fetch区别之我见






https://segmentfault.com/a/1190000012836882



//jQuery ajax
 
$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});
 
 
//Axios
axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
 
 
vue axios全攻略： https://www.cnblogs.com/libin-1/p/6607945.html






JS数组极其方法




创建数组的方式：
采用自变量创建
var arr = [];//创建一个空数组
var arr2 = [1,2,3];//创建一个有三个元素的数组
使用Array数组的方式
var arrayObj = new Array();  //创建一个数组
var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度
var arrayObj = new Array([element0, [, element1[,...[, elementN]]]]); //创建一个数组并赋值
 要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，
也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。
 
 
JS数组的主要方法：
arrayObj. push([item1 [item2 [. . . [itemN ]]]]);
// 将一个或多个新元素添加到数组结尾，并返回数组新长度
 
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);
// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
 
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);
//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。
 
 
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add a new element to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction() {
  fruits.push("Kiwi")
  var x=document.getElementById("demo");
  x.innerHTML=fruits;
}
</script>
</body>
</html>
 
数组元素的删除
arrayObj.pop(); 
//移除最后一个元素并返回该元素值（pop和push连在一起记忆，队列形式的操作）
 
arrayObj.shift(); 
//移除最前一个元素并返回该元素值，数组中元素自动前移（shift，unshift针对的都是数组最前面的元素，栈形式的数据操作）
 
arrayObj.splice(deletePos,deleteCount); 
//删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素
 
 
注意：splice方法既可以用于数组的删除也可以用于数组的插入
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
 
  arrayObject.splice(index,howmany,item1,.....,itemX)
   index：必填，数组删除或插入的位置。使用负数可从数组结尾处规定位置。
   howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
   item1, ..., itemX：可选。向数组添加的新项目。  
  返回值：新数组，要是删除的话，也会包括被删除的元素
    要是删除的话,splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个
    或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组
 
请注意，splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。
splice例子：我们将删除从 index 2 ("Thomas") 开始的三个元素，并添加一个新元素 ("William") 来替代被删除的元素：
 
 
 
====== 数组元素的截取 ======
1，slice方法：
 
arrayObject.slice(start,end)可以从数组中返回start下标开始取值，直到end下标结束（不包括）。
 
start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。
也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，
那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。若end为
 
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
注意：请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
 
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)
</script>
 
 
 
 
 
 
 
https://www.cnblogs.com/happyfish321/p/6724004.html






排序算法




function quickSort(arr){
  //如果数组<=1,则直接返回
  if(arr.length<=1){return arr;}
    var pivotIndex=Math.floor(arr.length/2);
    //找基准，并把基准从原数组删除
    var pivot=arr.splice(pivotIndex,1)[0];
    //定义左右数组
    var left=[];
    var right=[];
 
    //比基准小的放在left，比基准大的放在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));
}  
 
 
 
//冒泡排序
var examplearr=[8,94,15,88,55,76,21,39];
function sortarr(arr){
    for(i=0;i<arr.length-1;i++){
        for(j=0;j<arr.length-1-i;j++){
            if(arr[j]>arr[j+1]){
                var temp=arr[j];
                arr[j]=arr[j+1];
                arr[j+1]=temp;
            }
        }
    }
    return arr;
}
sortarr(examplearr);
console.log(examplearr);






求1000以内的质数




 var count = 0;
 for(var i = 2; i<1000; i++) {
   for(var j = 1; j<= Math.sqrt(i); j++) {
     if(i%j == 0) {
       count ++ ;
     }
   }
   if(count == 1) {
     document.write(i + " ");
   }
   count = 0;
 }






js实现单例模式




 //单例模式抽象，分离创建对象的函数和判断对象是否已经创建
    var getSingle = function (fn) {
        var result;
        return function () {
            return result || ( result = fn.apply(this, arguments) );
        }
    };
 
    //用法
    var createLoginLayer = function(){
  var frag = document.createDocumentFragment();
  var div = document.createElement('div');
  div.style.display = 'none';
  //以下给div添加其它登录元素
  ...
  document.body.appendChild(frag.appendChild(div));
  return div;
}
var createSingleLoginLayer = getSingle(createLoginLayer);
//当用户第一次点击按钮(id = 'lgBtn')时，来创建并显示登录窗口，之后重复点击按钮不会重复创建；
document.getElementById('lgBtn').onclick = function(){
  var lg = createSingleLoginLayer();
  lg.style.display = 'block';
} 
 






考核闭包




function test() {
  var num = 100; 
  function a () {
    num++;
    console.log(num);
  }
  function b () {
      num --;
     console.log(num);
  }
 return [a,b]
}
var myArr = test();
myArr[0]();
myArr[1]();
 
结果：
101
100






考核闭包2




function test() {
  var arr = [];
  for(var i=0; i<10; i++) {
    arr[i] = function() {
      document.write(i + " ");
     }
  }
  return arr;
}
 
var myArr = test();
for(var j=0; j<10; j++) {
  myArr[j]();
}




如果用立即执行函数改造就可以输出 0，1，2。。。。9



function test() {
  var arr = [];
  for(var i=0; i<10; i++) {
    (function(j) {
        arr[j] = function() {
          document.write(j + " ");
          }
        }(i));
  }
  return arr;
}
 
var myArr = test();
for(var j=0; j<10; j++) {
  myArr[j]();
}





                    
                                    


                
interview/js-code.txt · Last modified: 2018/07/24 08:13 by 127.0.0.1


                
                

            


            
            
        


        



    
Except where otherwise noted, content on this wiki is licensed under the following license: 沪ICP备12046235号-2

    

                Donate
        Powered by PHP
        Valid HTML5
        Valid CSS
        Driven by DokuWiki