• js基础

    Array

    1.专有的push和pop方法
    2.数组添加原型属性
    var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers);    //最大值
var minInNumbers = Math.min.apply(Math, numbers);   //最小值
    numbers .length = 0 //清空数组，删除数组元素请不要用 delete，而是用 splice
    numbers .length = 4; //截取数组 numbers will be equal to [5, 458 , 120 , -215]
    Array.prototype.push.apply(array1, array2);//在一个数组后附加一个数组
    var argArray = Array.prototype.slice.call(arguments);//把伪数组转为数组
    var arr = [1,2,3,4,5];
    arr.push(6);
    arr[arr.length] = 6; //在Chrome 47.0.2526.106 (Mac OS X 10.11.1)上提高了 43% 的速度

    splice() 方法

    splice() 方法向/从数组中添加/删除项目，然后返回被删除后的项目
    arrayObject.splice(index,howmany,item1,.....,itemX)
    参数描述
    index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
    howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
    item1, ..., itemX 可选。向数组添加的新项目。 
    ar arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
    arr.splice(2,0,"William")//George,John,William,Thomas,James,Adrew,Martin
    arr.splice(2,1,"William") //George,John,William,James,Adrew,Martin
    arr.splice(2,3,"William") //George,John,William,Martin

    slice() 方法

    slice() 方法可从已有的数组中返回选定的元素。
    arrayObject.slice(start,end)
    参数 描述
    start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
    end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 
    <script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.slice(2,4) + "<br />")  //Thomas,James
    
document.write(arr) //George,John,Thomas,James,Adrew,Martin
    </script>
    splice() 方法 用于插入、删除或替换数组的元素。
    slice() 方法 可提取字符串或数组的某个部分，并以新的字符串返回被提取的部分。

    NodeList

    通过这种方法获取的这一组dom元素，不是数组（Array），而是NodeList，NodeList不是数组
    var arr = [];              //NodeList转换成数组
    var list = document.getElementsByTagName("li"); 
for (var i = 0; i < list.length; i++) {  
    var li = list[i]; 
    arr.push(li); //arr就是我们要的数组  
}

    闭包

    闭包是一个函数，它在函数内部创建，并且携带了自身创建时的所处环境信息（比如变量信息和其它函数信息）。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
    作用：一个是前面提到的可以读取函数内部的变量；另一个就是让这些变量的值始终保持在内存中。
     
     
    function init() {
    var name = "Jone"; // name 是在 init 函数里面创建的变量 // displayName() 是一个内部函数，即一个闭包。注意，它不是匿名的。
    function displayName() {
        console.log(name);
    }
    //当 displayName 函数返回后，这个函数还能访问 init 函数里面定义的变量。return displayName;
}
var closure = init(); //Jone
    closure(); //undefined

    原型链

    function MyObject(name, message) {
    this.name = name.toString();
    this.message = message.toString();
}
MyObject.prototype.getName = function() {
    return this.name;
};
MyObject.prototype.getMessage = function() {
    return this.message;
};

var myobj = new MyObject();

    链式作用域（chain scope）

    子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。
     

    值类型和引用类型

    在 JS 中，有值类型和引用类型两种区别：
    1、值类型：数值、布尔值、null、undefined。 
    2、引用类型：对象、数组、函数。 
    属性
    attributes：//获取一个属性作为对象 attributes["value"]; 结果为obj类型 value='abc'
    getAttribute：//获取某一个属性的值getAttribute("value"); 结果为 string类型  'abc'
    setAttribute：//建立一个属性，并同时给属性捆绑一个值,setAttribute("good","hello"):多了一个名为good的属性hello

    createAttribute：//仅建立一个属性
    removeAttribute：//删除一个属性removeAttribute("disabled")
    

     getAttributeNode，setAttributeNode，removeAttributeNode三个方法的特点是都直接操作一个node（节点) 
    

    getAttributeNode：获取一个节点作为对象 
    

    1.var d = document.getElementById("sss").getAttributeNode("value");   
    2.document.write(d.name);  
    3.document.write(d.value);      //显示 value aaa 
    

    

    setAttributeNode：建立一个节点
    

    1.var d = document.createAttribute("good");  
    2.document.getElementById("sss").setAttributeNode(d);  

    

     
    

    removeAttributeNode：删除一个节点removeAttribute("value"); 
    

    1.var d = document.getElementById("sss").getAttributeNode("value")  
    2.document.getElementById("sss").removeAttributeNode(d);
    

     
    

     给DOM添加属性：oDiv.index=1; //给oDiv添加了一个index属性 
    

    正则
    

    

    


    字符效果
    
    


    
 .
匹配换行符以外的任意字符

    

    
d
匹配所有数字

    

    
D
匹配非数字

    

    
s
匹配一个空格符

    

    
S
匹配非空格

    

    
w
匹配字母数字下划线=>其实就是匹配单词word(简单易懂)

    

    
W
匹配!字母数字下划线=>就是不匹配单词

    
    

    

    d => [0-9]
w => [0-9a-zA-Z_]
S => [^	
x0Bf
]  //(f标识分页符)
    

    /D+/.test("  ")// true
    

    


     锚字符 
    
    


    
^
匹配字符串的开头，在多行检索中，匹配一行的开头   

    

    
$
匹配字符串的结尾，在多行检索中，匹配一行的结尾

    

    

匹配一个单词的边界

    

    
B
匹配非单词边界

    
    

    

    var reg = /^d+$/;  //匹配整个字符串为数字
    

    


    量词字符说 
    
    


    
*
重复零次或更多次

    

    
+
重复一次或更多次                         

    

    
?
重复零次或一次

    

    
{n}
重复n次

    

    
{n,}
重复n次或更多次

    

    
{n, m}
重复n到m次

    
    

    

    贪婪量词：*,+,?     全文匹配，如果不成功，则，将末尾的最后一个字符减去，再匹配，如果还不成功，则，再减一次，至到为0。
    

    惰性量词：  ?    惰性量词一开始只会匹配一个字符，如果不成功，则在进行匹配。
    var str = "blablablabla";
    console.log(str.match(/(b.*a)/g));  //["blablablabla"]贪婪
    console.log(str.match(/(b.*?a)/g));  //["bla", "bla", "bla", "bla"] 惰性匹配
     ""转义字符
    不想匹配a,b,c中的任意一个，只需要在"[]"里面加上"^"即可。
    





    

     /[^abc]/.test("c")  // false
    


    /i  (忽略大小写,ignore)
/g  (全文查找出现的所有匹配字符,global)
/m  (多行查找,multiLine)
/ig (全文查找、忽略大小写,ignore+global)
    

    反向引用：就是给匹配到的小括号加上数字，来表明他是第几个匹配到的。
    

    ?: 是 不想被捕获的时候使用 可以提高程序执行速度
    

    var reg = /(100) (99)/;
var str = "100 99";
console.log(str.replace(reg,"$2 $1")); //99 100
    

    


    正则名称作用
    
    


    
(?=exp)
正向前瞻
匹配exp前面的位置

    

    
(?!exp)
反向前瞻
匹配后面不是exp的位置

    

    
(?<=exp)
正向后瞻
匹配exp后面的位置          

    

    
(?< !exp)
反向后瞻
匹配后面不是exp的位置

    		





    




    





    

    phone: /^1(3d|5[0-35-9]|8[025-9]|47)d{8}$/
    

     email: /^[w-]+(.[w-]+)*@([w-]+.)+[a-zA-Z]+$/
    

     company: /^[u4E00-u9FA5a-zA-Z][u4E00-u9FA5a-zA-Z0-9s-,-.]*$/
    

    uname: /^[u4E00-u9FA5a-zA-Z][u4E00-u9FA5a-zA-Z0-9_]*$/
    

     zh: /^[u4e00-u9fa5]+$/  //纯中文
    

    card: /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)d{4}(((((19|20)((d{2}(0[13-9]|1[012])(0[1-9]|[12]d|30))|(d{2}(0[13578]|1[02])31)|(d{2}02(0[1-9]|1d|2[0-8]))|(([13579][26]|[2468][048]|0[48])0229)))|20000229)d{3}(d|X|x))|(((d{2}(0[13-9]|1[012])(0[1-9]|[12]d|30))|(d{2}(0[13578]|1[02])31)|(d{2}02(0[1-9]|1d|2[0-8]))|(([13579][26]|[2468][048]|0[48])0229))d{3}))$/ //身份证号    
    

     int: /^[0-9]*$/
    

    

    function
    

    

    1.caller 属性：caller 属性是函数对象本身的一个成员属性。
    





    

    

      

    • 

      caller 属性是帮助我们在当前函数里获取调用当前函数的某个未知函数，之所以称 未知函数 ，是因为我们在写一个函数时，很可能根本不知道哪个函数会调用到我们的这个函数。
      





      • 

    • 

      全局环境中调用函数是不会生成此 caller 属性
      

       
      

      function callerDemo() { 
        if (callerDemo.caller){ 
                 var a = callerDemo.caller.toString(); 
                  console.log(a);  
                } else {
      console.log("this is a top function"); } } 
      function handleCaller() { callerDemo();} 
      handleCaller();    //"function handleCaller() { callerDemo(); }" 
      callerDemo();    //"this is a top function"
      

      

      2.callee ：属性 对当前函数对象的一个引用
      

      

      function calleeDemo() { console.log(arguments.callee); }
      

        

      • 

        callee 属性隶属于Function的一个隐藏对象—— arguments 中，这个 arguments 对象大家应该不陌生，表示的就是当前函数传入的参数，一般用于函数不限制参数数量的传参。
        

        • 

      • 

        与 caller 属性一样，也是要在当前函数的内部（上下文环境）才有效。
        

        • 

      • 

        可配合 caller 属性一起使用： arguments.callee.caller ，这样就可以完全忽略到具体的函数名了。
        

        • 

      • 

        函数递归时用起来比用函数名调用函数更带感！
        

         
        

        3.apply / call 方法：这俩方法性质一样，只是用法稍有不同
        

        function type(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1);    //换成用apply方法亦可
}
        

          

        • 

          apply / call 方法的意义在于 借用 其它对象的成员方法来对目标对象执行操作。
          

          语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
          

          语法：apply([thisObj[,argArray]]) 
          在 借用 的过程中， apply / call 方法会改变被借用的成员方法的上下文环境：把 this 这一与上下文环境高度相关的变量指向目标对象，而非原来的对象。看下面的这段代码：
          





          • 





        

        function Point(x, y){
    this.x = x;
    this.y = y;
}
Point.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
}
var p = new Point(0,0);
var circle = {x:1, y:1, r:1};    //只是一个普通的Object对象
p.move.call(circle, 2, 1);    // 这个例子中的意思就是用 p.move来替换 circle，p.move.call(circle, 2, 1)== p.move(2,1)  ，p.move.apply(circle, [2, 1]); 等价于p.move.call(circle, 2, 1);  运得后的circle = {x:3, y:2, r:1};
        

        

        这里的circle只是一个普通的Object对象，不含任何自定义的成员方法，但通过 apply / call 方法，可以借用Point类对象定义的move方法来帮助circle达到目的（本例其实是圆心在坐标轴上的移动）。在 借用 Point类对象的move方法时，move方法中的this就不再指向p，而是指向circle了，达到了上下文环境改变的效果。
        

        另外，从代码里也可以看出， call 方法与 apply 方法的区别仅在于： call 方法直接把需要传入的参数列在目标对象其后，而 apply 方法则以数组的形式整体传入。
        

        

        bind 方法
        

        bind 方法与 apply / call 方法也非常类似，相当于稍微再封装了一下，仍以上述DEMO作为案例：
        

        function Point(x, y){
    this.x = x;
    this.y = y;
}
Point.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
}
var p = new Point(0,0);
var circle = {x:1, y:1, r:1};
// p.move.call(circle, 2, 1);
// p.move.apply(circle, [2, 1]);
var circleMove = p.move.bind(circle, 2, 1);    //此时并不执行move方法
circleMove();    //此时才执行
        

        从上面这段DEMO可以看出， bind 方法其实是给 apply / call 方法缓了一下，也可以说是封装了一下方便后续调用，其实质上相当于下面的这段代码：
        

        function circleMove() {
    p.move.call(circle, 2, 1);
}
circleMove();
        

        bind 方法兼容性适应
        

        bind 方法，即 Function.prototype.bind ，属于 ECMAScript 5 ，从 IE 10 版本才开始支持，那怎么做兼容性适应呢？
        

        if(typeof Function.prototype.bind !== 'function') {
  Function.prototype.bind = function() {
    var thatFunc = this;
    var args = [];
    for(var i = 0; i < arguments.length; i++) {
      args[i] = arguments[i];
    }

    return function() {
      var context = args.shift();
      thatFunc.apply(context, args);
    }
  }
}
        

        easing,localScroll,lightbox,preload
        

         javascript的方法可以分为三类：a 类方法、b 对象方法、c 原型方法 
        

        function People(name)
{
  this.name=name;
  //对象方法
  this.Introduce=function(){
    alert("My name is "+this.name);
  }
}
//类方法
People.Run=function(){
  alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
  alert("我的名字是"+this.name);
}
//测试
var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese(); 
        

         
        

        

        prototype
        

        每一个函数对象都有一个显示的prototype属性，它代表了对象的原型，更明确的说是代表了同函数对象（构造函数）所创建出来的对象的原型。
        

        函数 （对象）
        

        函数传遵递的参数：数字、字符串、布尔、函数、对象、未定义。函数以参数的形式传给函数时，函数不用加（），加（）就直接执行了，函数就会有返回值，如果函数里面没有返回值就会返回undifine。
        

        fun( fun1)        // function  fun1(){...}
        

        1.函数的定义
        

        函数挂载在一个对象上，作为对象的一个属性，就称它为对象的方法。
        

        用于初始化一个新创建的对象的函数称为构造函数。
        

         
        

        var tensquared=(function(x){return x*x}(10));    //函数表达式在定义后产立即调用
        

         
        

        函数定义包括函数语句和表达式两种方式，表达式方式定义的函数无法在定义之前使用，函数表达式也可以作为参数传给其它 函数
        

        var square = function(x){return x*x}  //函数表达式定义时可以包涵名称也可以不包涵
        

        var f = function fact(x) {if(x<=1) return 1;else return x*fact(x-1);}
        

         
        

        2.函数的调用
        

        函数调用有4种方法：
        

        1.作为函数；
        

        2.作为方法；
        

        3.作为构造函数：方法调用之前带关键字new,凡是没有形参的构造函数定义都是可以省略圆括号的，如：var o=new Object(); var o =new Object;
        

                               构造函数调用创建一个新的空对象，这个对象继承自构造函数的prototype属性。
        

        4通过call()和apply()方法间接调用
        

        3.作用域
        

        只要遇到域都会发生域解析，域包括： <script></script>、函数
        

        onclick事件以参数的形式传进去：oDom.onclikc等价于 oDom[evt]  
        

        

        window.onload=function(){
        var el=document.getElementById("btn-add");
        function fun(oBtn,evt) //evt是传进来的参数如：onclick onmouseover
        {
        oBtn[evt]=        function(){alert("success");}
        }
        fun(        el,"onclick")
        }
        

        表达式：=、 + 、-、*、%、++、--、Number()、参数
        

        js预解析：预解析var 、function、参数。变量返回undifine,遇到重名的只留下一个， 变量和函数重名的时候，留下函数；js逐行读取时：表达式可以修改预解析的值
        

        alert(a); //function a(){alert(4)}
        var a=1; alert(a); //1
        function a(){alert(2)}alert(a)//1
        var a=3;alert(a);//3
        function a(){alert(4)}
        

         
        

        函数内部不能读取到函数外部的变量，参数a相当于一个 var a
        

        

        


        


        var a =2;
        

        function fun(){
        

        alert (a);
        

        var a=3;
        

        }
        

        fun();    //undifine
        

        alert(a); //2
        




        		


        var a =2;
        

        function fun(){
        

        alert (a);
        

         a=3;
        

        }
        

        fun();    //2
        

        alert(a) //3
        




        		


        var a =2;
        

        function fun(a){ //a==var a 预解析undifine
        

        alert (a);
        

        a=3;
        

        }
        

        fun(a);     //2
        

        alert(a) //2
        




        		





        




        





        





        

         
        

        if、for不是作用域，所以定义在里面和定义在外面的变量都是一样的. Firfox浏览器不能预解析{ }里面的代码；
        

         
        

        “use strict" //在严格模式下
        

        object
        

        

        1.1 new构造函数法
        

        var person =new object();
        person.name="wang";
        

        person.sex="男";
        






        

        1.2 对象字面量
        

        var person={
        

        name:"wang",
        

        sex:"男"
        

        }
        

         
        

        函数调用时的括号
        

        简单点说，带括号的是函数调用，直接执行函数；不带括号的是绑定事件，事件触发再执行。
        

        复杂点说，带括号的是把返回值赋值给事件，不带括号的是把函数体所在地址位置赋值给事件。
        

        function cc(ele){
        var a=document.getElementById("a");
        a.style.color="red";
        alert(ele);
        }
        function change(){
        var ip=document.getElementById("ip");
        // ip.onclick=cc("hello"); //正常绑定事件，onclick触发执行
        // ip.onclick=cc; //调用cc时,才执行
        ip.onclick=function(){cc("hello")}(); //调用cc,直接执行，有参数的情况
        }
        change(); //调用change,直接执行
        

        

        checkbox
        

        $('[name="msgOrderCheckbox"]').is(":checked")是否选中返回true/false

        

        ~~作用
        

        其实是一种利用符号进行的类型转换,转换成数字类型

        ~~true == 1
        ~~false == 0
        ~~"" == 0
        ~~[] == 0
        ~~undefined ==0
        ~~!undefined == 1
        ~~null == 0
        ~~!null == 1
        

        

        window.location.hash属性介绍
        

         
        

        

        

        location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。
        

        对于Ajax页面想将它收藏起来，可是地址只有一个呀。浏览器上的“前进”“后退”按钮也会失效，这于很多习惯了传统页面的用户来说，是一个很大的使用障碍。
        

        用location.hash来解决这两个问题呢。
        

        比如，我的作者管理系统，主要功能有三个：普通搜索、高级搜索、后台管理，我分别给它们分配一个hash值：#search、#advsearch、#admin，在页面初始化的时候，通过window.location.hash来判断用户需要访问的页面，然后通过javascript来调整显示页面。比如：
        

        var hash; 
        hash=(!window.location.hash)?"#search":window.location.hash; 
        window.location.hash=hash; 
          //调整地址栏地址，使前进、后退按钮能使用 
        switch(hash){   
        case "#search":  
            selectPanel("pnlSearch");   //显示普通搜索面板  
            break;    
        case "#advsearch":    
              
        case "#admin":  
             
        }
        


        


        

        通过window.location.hash=hash这个语句来调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用（实质上欺骗了浏览器）。然后再根据hash值的不同来显示不同的面板（用户可以收藏对应的面板了），这就使得Ajax页面的浏览趋于传统化了。
        


        

         
        


        


         
        

        

        

        • 

      

      

      

      • 

    

    

    

    

    

    

    

    

    
    
          
    • 

          
  • 

            相关阅读:
    
            
              [Violet]天使玩偶/SJY摆棋子
                
    语音识别终极教程
                
    语音识别
                
    转：awesome-lane-detection
                
    转：awesome-object-detection
                
    转：Awesome
                
    转：Awesome Image/Video segmentation
                
    转：目标检测算法总结
                
    转：10行代码实现物体检测
                
    转：词向量word2vector那些事儿
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/guanguan-/p/7017582.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知