• Javascript 基础知识


    1.如何在一个对象上添加属性? 

    方法一:var b = {};
    b["name"] = "test";
    delete b.name 删除对象的属性

    delete 运算符可以用来删除对象的属性,如歌对象包含该属性,那么该属性就会被移除。

    方法二:b.name ="test";

    2.如何判断一个变量是否声明?

      typeof(a) =="undefined"

      typeof(d) =="function" 是否为函数 也可以不用括号   typeof a 没加括号,必须要空格

     3.怎么表示为字符串? 通过双引号(""),单行号(''),反斜杠(//)

       1+"1"=="11"
       1+'1'==11

     4.Javascript 只有一个数字类型。

    5.Javascript的基本数据类型?

     number(数字),string(字符串),Boolean(布尔),undefined(未定义),Null(空)

     另外:Object(对象)

    6.类和对象的区别?如何用javascript实现?

    function myClass()
    { }

    myClass.prototype.ID 
    = 1;
    myClass.prototype.Name 
    = "johnson";
    myClass.prototype.showMessage 
    = function()
    {
        alert(
    "ID: " + this.ID + "Name: " + this.Name);
    }


    var obj1 = new myClass();
    obj1.showMessage();

    7. JavaScript 中,有多少种不同类型的循环?

    两种。for 循环和 while 循环。

    8.数组的类型为Object。

    如何删除数组的成员?

    var a=["12","2","3"];
    delete a[0]; true 这样不对,应该a.splice(0,1); a ["2", "3"] 

    可以给Array原型上添加方法

    Array.prototype.remove = function (val) {
          var index = this.indexOf(val);
           if (index > -1) {
                this.splice(index, 1);
           }
    };

    a.remove("3"); //移除数组a中的“”3“”;

    9.一个数组的的成员类型里可以有字符串,数字,方法,空。

    10.NaN 数字 表示非数字,

    返回True 就不是数字,可以判断一个变量是否为数字类型。 alert(typeof(a));//number

    a. not a number(不是一个数字 的数字类型) 

    b. 程序中出现:NaN肯定进行了非法的运算操作 alert('200px'-100);

    c.NaN 是false if(NaN)

    d.NaN与自己都不相等  var a = Number('abc'); alert(a===a )//false;

    11.parseInt() 函数可解析一个字符串,并返回一个整数。

    12.Array.push(item),push 方法把一个或多个参数item附加到一个数组的尾部。如果参数item是一个数组,它会把参数数组作为单个元素整个添加到数组中,并返回这个array的新长度值。

    var new_sortArray = new Array();//实例化数组

    也可以这样定义数组var new_sortArray=[];

    var obj = new Object();//实例化对象

    obj.id = accFind.New_sort.Id;
    obj.name = accFind.New_sort.Name;
    obj.typename = accFind.New_sort.LogicalName;
    new_sortArray.push(obj);//将对象添加到数组中。

    13. function add(){}  

         (1).var a = add();        输出:undefined 未定义

         (2).var a= new add();  输出:[object] {} 对象

         (3). var a = add;         输出:function add(){} 函数

    14.hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。

    15.isNaN 可以辨别数字和NaN
    isNaN(NaN) //true
    isNaN(0) //false
    isNaN('abdd') //true
    isNaN('0') //false
    isNaN(null); //false
    isNaN(undefined); //true
    isNaN(""); //false
    isNaN(true) //false
    isNaN(false) //false
    if(isNaN(str)){
    alert(str + '不是数字');
    }else
    {
    alert(str + '是数字');

    //alert(isNaN('250'));//fale

    因为Number(); '250'=> 250 => false

    判断一个值否是可用做数字的最佳方法是使用isFinite函数,因为它会筛选掉NaN和Infinity
    var isNumber = function isNumber(value)
    {
    reutn typeof value == 'number' && isFinite(value);
    }

    if (isNaN(new_total_amount))//如果值为未定义,则置为0
    {
    new_total_amount = 0;
    }

    16.创建一个对象obj,该对象包含一个名为“name”的属性,其值为“value”,有哪些方法?

      方法一:var obj = new Object(); obj["name"] = "value";

      方法二:var obj = {name : "value"};

      方法三: var obj = new function(){this.name="value";}

     注意:var obj = new Object(); obj.prototype.name = "value";此方法不行。obj用在function上,obj不存在prototype对象

     Object.prototype.name = "value";这样可以。Object是个“类”,当然可以。但JS没类这个说法。你   var obj = new Object();后的obj是个对象。function就是个“类”

    17.with 语句 为一个或一组语句指定默认对象。

    用法:with (<对象>) <语句>;

    with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中,请注意 Math 的重复使用:

    x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
    y = Math.tan(14 * Math.E);

    当使用 with 语句时,代码变得更短且更易读:

    with (Math) {
    x = cos(3 * PI) + sin(LN10);
    y = tan(14 * E);
    }

    18.

    this 对象 返回“当前”对象。在不同的地方,this 代表不同的对象。如果在 JavaScript 的“主程序”中(不在任何 function 中,不在任何事件处理程序中)使用 this,它就代表 window 对象;如果在 with 语句块中使用 this,它就代表 with 所指定的对象;如果在事件处理程序中使用 this,它就代表发生事件的对象。

    一个常用的 this 用法:

    <script>
    ...
    function check(formObj) {
    ...
    }
    ...
    </script>

    <body ...>
    ...
    <form ...>
    ...
    <input type="text" ... onchange="check(this.form)">
    ...
    </form>
    ...
    </body>

    这个用法常用于立刻检测表单输入的有效性。

    19.去除列表中选择的重复值,并将多个值拼接成"1,2"这样的形式。

    var orderCodeFilter = {};//定义一个对象,相当于new Object();
    var orderCoders = [];
    var datas = [{OrderCodeStr:"1,",id:1},{OrderCodeStr:"1,",id:2},{OrderCodeStr:"2,",id:3},{OrderCodeStr:"2,",id:4},{OrderCodeStr:"3,",id:5},{OrderCodeStr:4,id:6},{OrderCodeStr:4,id:7}];
     
    for (var i = 0; i < datas.length; i++) {
        var tempOrderCodeStr = datas[i].OrderCodeStr;
        var key;
        //找到tempOrderCodeStr最后一个字符串
        var lastStr = tempOrderCodeStr.substring(tempOrderCodeStr.length - 1, tempOrderCodeStr.length);
        if (lastStr == (",")) {
           //去除tempOrderCodeStr最后一个字符串
           key = tempOrderCodeStr.substring(0, tempOrderCodeStr.length - 1);
        }else{
           key = tempOrderCodeStr;
        } 
        //判断,不存在重复的属性值  注意 key需要去除前后空格
        if(!orderCodeFilter[key]){
           //将属性值添加到对象末尾
           orderCoders.push(key);
           //属性值赋给对象,
           orderCodeFilter[key] = key;
        }
    }
    
    var orderCodeStr = orderCoders.join(",");/"1,2,3,4"

    20.  "PayTime":"\/Date(1413532617000+0800) 这个时间格式怎么理解?

    +0800:为东八区
    1413532617000:为总毫秒数

    比如今天的时间为:2014/10/17 星期五
    var d = new Date();
    d.toDateString(); "Fri Oct 17 2014"
    d.getTime();

    则格式为"PayTime":"\/Date(1413535530809+0800)

     21.JS中允许“.”替换成“[]” 

    比如 document.getElementById("bg").style.width = '100px';

    相当于document.getElementById("bg").style['width'] = '100px';

    22.  JS中的数据类型:数字、字符串、布尔、 函数、对象(obj(window)  [](数组)  {}(JSON)  null(空) ) 、undefined(未定义)

      var a = 1;
      if(){  
      }
      typeof 判断数据类型
      */
      var i = 100;
      //alert(typeof i);
      
      var s = ' miaov';
      //alert(typeof s); //string
      //alert(s.length);//7
      //alert(s.charAt(3));'a'
      
      var b = true;//布尔值
      //alert(typeof b);//boolean
    /*  if(12 < 90){
      }*/
      
      //for(;false;){}
       var fn = function(){ alert(1);};
       //alert(fn());
       //fn
        function fn1(){
          alert(2);    
        }
        //alert(fn1);
         
      //var obj = window;
      //alert(typeof obj); //object 物体,东西,对象     
        var obj = document;
        //alert(typeof obj);
        obj.abc = 123;
        obj.onOff = true;
        //alert(document.abc); 
         obj.fn1 = function() { alert(1);};
         //obj.fn1();
         
      var arr = [1,2,3,4]
      //alert(arr.length);
      //arr[2] = 345;
      //alert(arr[2]); 
      //arr.push(5,6,7);
      //alert(arr);
      //alert(typeof arr);//object
      arr.abc = 999;
      arr.fn1 = function() { alert(1);}
      //alert(arr.abc);
      //arr.fn1();
      
      var json = { name:'maiov',age:5};
      //alert(json.name + '今年'+ json.age +'岁了');
      //alert(typeof json);json 
      
      var n = null;
      //alert(typeof n);//object 
      //n.abc = 123;//不可以
      //alert(n.abc);//不可以
      var u;
      alert(u);//typeof 
      //alert(typeof u);//undefined(未定义)
      //表示你写的程序出问题了

     23. 显示类型转换(强制类型转换)

    Number();
    parseInt();
    parseFloat()

    var num = '200.345';
    if(parseInt(num) == parseFloat(num)){
    alert(num +'是整数');
    }else
    { alert(num +'小数');
    }

    24.隐式类型转换  

    - * / %  '200' - 3 变成数字 2003
    +          '200'+ 3 变成字符串 197

    ++ --      变成数字
    > <       数字的比较和字符串的比较

    ! 取反     把右边的数据类型转成布尔值

    ==  

    alert('10' > '9');//false
    alert('10' > 9) true

    */

    25.作用域

    1) ”找一些东西“:var function 参数

          a=1 所有的变量,在正式运行代码之前,都提前赋了一个值:未定义

          fn1 = function fn1(){ alert(2);}

         所有的函数,在正式运行代码之前,都是整个函数块。

         遇到重命名的:只留一个。

         变量和函数重名了,只留函数。

      2)逐行解读代码

          表达式:= + - * / % ++ -- ! 参数.....

          表达式可以修改预解析的值.

       3)题目:

    alert(a);
    var a = 1;
    alert(a);
    function a(){ alert(2);}
    alert(a);
    var a = 3;
    alert(a);
    function a() { alert(4);};
    alert(a); 弹出的值为什么?

    1)预解析:var function 参数 ......
               剔除 a= undefined
               剔除 a = function a() { alert(2);}
               剔除 a = undefined
                    a = function a() { alert(4);}
                
               a= 1 
    2) 逐行解读代码:
           表达式:
    
    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);};//函数声明,不能改变值。
    alert(a); //3

    var a =1;
    function fn1(){
    alert(a);//undefined
    var a = 2;
    }
    fn1();
    alert(a);//1

    26.

    真假的问题:数据类型-数字(NaN)、字符串、布尔、函数、对象(elem、[]、{}、null)、未定义
    真:非0的数字,非空字符串、true、函数,能找到的元素、[]、{}
    假:0 、('abc'-1)NaN、空字符串、false、不能找到的元素、未定义

    if('')
    {
    alert('真');
    }else
    {
    alert('假');
    }

    27.return :返回值

    1)函数名+括号:fn1()==>return 后面的值;
    2)所有函数默认返回值:未定义;
    3)return 后面的任何代码都不执行了;

    28.

    //当函数的参数个数无法确定的时候:用arguments
    function sum(){
    var n = 0;
    for(var i=0;i<arguments.length;i++){
    n += arguments[i];
    }
    return n;
    }

    29.

    background: url() red …… 复合样式(不要获取)
    backgroundColor 单一样式(不要用来做判断)

    不要有空格

    不要获取未设置后的样式:不兼容

     function $(v){
         if(typeof v === 'function'){
           window.onload = v;
         }else if(typeof v === 'string')
         {
            return document.getElementById(v);     
         }
         else if(typeof v === 'object')
         {
            return v;
         }
     }
    
    getComputedStyle // IE6 7 8 不兼容(获取到的是计算机(浏览器)计算后的样式)
    currentStyle    //标准浏览器不兼容
    function getStyle(obj,attr)
    {
      return obj.currentStyle ? obj.currentStyle:getComputedStyle(obj)[attr];
    }

     30.定时器

    定时器:时间概念
    var timer = setInterval(函数,毫秒); //重复执行
    clearInterval(timer);//清除

    var timer = setTimeout(函数,毫秒);//执行一次

    31.

    //x~y 之间的随机数
    Math.round(Math.random()*(y-x) +x);

     32.数组去重

    var arr = [ 1,2,2,4,2 ];

    for ( var i=0; i<arr.length; i++ ) {
    for ( var j=i+1; j<arr.length; j++ ) {
    if ( arr[i] == arr[j] ) {
    arr.splice( j, 1 );
    j--;
    }
    }
    }
    alert( arr );

     33. for in (相当于C#中的foreach)

    var str = '';
    var num = 0;
    for ( var attr in document ) {
    str += num + '. ' + attr + ':' +document[attr] + '<br />';
    num ++;
    }
    document.body.innerHTML = str;
    </script>

    34、 减少Dom 操作的方法

     1.节点克隆 --cloneNoew。

    window.onload = function(){
       var oUl = document.getElementById('ul1');
       var str = '';
       console.time('hello');
       for(var i=0;i<5000;i++){
          var oLi = document.createElement('li');
          oLi.innerHTML = 'li';
          oUl.appendChild(oLi);
       }
       console.timeEnd('hello');
      
       console.time('hello');
       var oLi = document.createElement('li');
       oLi.innerHTML = 'li';
       for(var i=0;i<5000;i++){
          
          
          var newLi = oLi.cloneNode(true);
          
          oUl.appendChild(newLi);
        }
        console.timeEnd('hello');
    
    }

       2.访问集合 -- 尽量使用局部变量。

    var doc = document;
    var odiv = doc.getElementById();
    var oInput = doc.getElementById();
    window.onload = function(){
      var oDiv = document.getElementById('div1');
      
      var L = oDiv.offsetHeight;
      var T = oDiv.offsetTop;    
      setInterval(function(){
        L ++;
        T ++;
    
          oDiv.style.left = L + 1 +'px';
          oDiv.style.top = T + 1 +'px';
         
      },30)
    };

    3.元素节点 -- 尽量用只获取元素的节点方法 

    appendChild
    childNodes -> 元素节点,文本节点
    children -> 元素节点
    firstChild
    firstElementChild

      4.选择器 API --利用querySelector,querySelectorAll

    var oUl = document.getElementById('ul');
    var aLi = oUl.getElementsByTagName('li');
    
    //IE 8以下不支持
    var aLi = document.querySelectorAll('#ul li');

    5.   Chrome: dom方法要比innerHTML性能要好,IE浏览器

    6. createDocumentFragment 的使用

    window.onload = function(){
      var oUl = document.getElementById('ul1');
      var oFrag = document.createDocumentFragment();//作为缓存
      
      console.time('hello');//Firefox测试输出的时间
    for(var i= 0;i<5000;i++) { var oLi = document.createElement('li'); oFrag.appendChild(oLi); } oUl.appendChild(oFrag); console.timeEnd('hello');//Firefox输出的时间 };

    7.cssText代替 oLi.style.width 

    window.onload = function(){
       var oUl = document.getElementById('ul1');
    
       console.time('hello');
       for(var i =0; i < 5000;i++)
       {
          var oLi = document.createElement('li'); 
          oLi.style.width = '100px';
          oLi.style.height = '100px';
          oLi.style.background = 'red';
          //oLi.style.cssText ='100px;height:100px;background:red';
          oUl.appendChild(oLi);
          
       }    
       console.timeEnd('hello');   
    }

    35、快速排序

    1.找一个基准点.
    2.建立两个数组、分别存储左边和右边的数组. 3.利用递归进行下次比较.
    // 快速排序
    function quickSort(arr){    
       if(arr.length <= 1){
          return arr;
       }
        
       var num = Math.floor(arr.length/2);
       var numValue = arr.splice(num,1);
       
       var left = [];
       var right = [];
       
       for(var i =0;i < arr.length;i++){
           if(arr[i] < numValue){
              left.push(arr[i]);
           }else {
              right.push(arr[i]);
           }
       }
        
       return quickSort(left).concat([numValue],quickSort(right));    
       
    }
    
    alert(quickSort([12,5,37,6,22,40]));

     也可以用sort()来处理

      var arrWidth = ['345px','23px','10px','1000px'];
      arrWidth.sort(function(a,b){
        return parseInt(a) - parseInt(b);      
      });
      //alert(arrWidth);
      
      var arr =[1,2,3,4,5,6,7,8];
      arr.sort(function(a,b){
        return Math.random() - 0.5;
      });
      
      alert(arr);

     36、函数声明与表达式

     函数声明:function 函数名(){}

     函数表达式:function 函数名(可写可不写)(){} :命名函数表达式 匿名函数表达式
    function aaa(){} :函数声明

    var a = function aaa() {} :命名函数表达式
    var a = function() {} :匿名函数表达式

     {function aaa(){}}:表达式
    区别:
    1. 函数表达式可以直接后面加括号执行,而函数声明是不可以的。
    2.函数声明可以被提前解析出来的 
     function aaa(){ alert(1);}();

    var a = function aaa(){ alert(1)}();
    ~function aaa() { alert(1)}();

    37、JS操作IFrame

      1. contentDocument

      2.contentWindow.document

      3.window.parent

      4.window.top

    /document 操作iframe
    window.onload = function(){
    var oInput = document.getElementById('input1');
    var oIframe = document.getElementById('iframe1'); 
    
    oInput.onclick = function(){
    //oIframe.contentWindow.document.getElementById('div1').style.color = 'red'; //所有的浏览器都支持
    
    oIframe.contentDocument.getElementById('div1').style.background = 'red'; //IE6,7不支持
    }; 
    };
    
    var oIframe = document.createElement('iframe');
    oIframe.src = 'iframe1.html';
    document.body.appendChild(oIframe);
    
    /* oIframe.onload = function()
    {
    alert(123); 
    };*/
    
    //ie 下的iframe 的onload事件只能用绑定的形式
    oIframe.attachEvent('onload',function(){
    alert(123); 
    });

    iframe 改变高度:

    window.onload = function(){
        var aInput = document.getElementsByTagName('input');
        var oIframe = document.getElementById('iframe1');
        
        function changeHeight(){
           setTimeout(function(){
                oIframe.height = oIframe.contentWindow.document.body.offsetHeight;
               },100);    
        }
          
        changeHeight();  
        
        aInput[0].onclick = function(){
            oIframe.src = 'iframe4.html';
            changeHeight();  
        };
        
        aInput[1].onclick = function(){
            oIframe.src = 'iframe5.html';
            changeHeight();  
        };
    };

    <input type="button" value="切换1"/>
    <input type="button" value="切换2"/>
    <iframe id="iframe1" src="iframe4.html" scrolling="no"></iframe>

    5.iframe的高度随嵌套页面高度的变化为变化

    $(window.frames["iframe1"].document).height() //iframe1为iframe的名称

    如果同个页面不在同一个站点下,会出现跨域问题,报:Blocked a frame with origin  from accessing a cross-origin frame

    解决方法如下:

    parent page:
    window.addEventListener('message', function (event) {
        if (event.data.viz == "Dis") {
            var data = event.data;
            document.getElementById('emViz_disparities').height = data.height;
        }
    }, false);
    
    child page:
    
    window.parent.postMessage({
        'height': framewidth + 180,
        'viz': 'Dis',
        'location': window.location.href
    }, "*");

    参考:https://forums.asp.net/t/2119174.aspx?Blocked+a+frame+with+origin+from+accessing+a+cross+origin+frame+

    38.js获取最顶层Id的html

    $("#顶级框架的id",top.window.document).html();

    39.获取URL的参数

    function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }

    获取url后?的参数

    var getRequest = function () {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    40.javascript:void(0)表示不做任何动作

    <a href="javascript:;">Test</a>
    可以用javascript:;代替 javascript:void(0);

     41.去掉js数组中的重复项  http://www.jb51.net/article/82293.htm

    Array.prototype.unique3 = function(){  
        var res = [];
        var json = [];
        for(var i=0,len = this.length;i<len;i++)
        {
           if(!json[this[i]]){
                  res.push(this[i]);
                  json[this[i]] = 1;
           }
        }
        return res;
    };
    var arr2 = [1, 1, 3];
    arr2.unique3();
    var Uniue =  function(arr)
        {
            var result = [], hash = {};
            for (var i = 0, elem; (elem = arr[i]) != null; i++) {
            if (!hash[elem]) {
            result.push(elem);
            hash[elem] = true;
            }
            }
            return result;
        };

     42.javascript 实现嵌套页面(内容很多,出现滚动条)的打印。 主要代码如下:

       父页面代码:

    <script>
    function printdiv() {
        window.open("/Print.html?t=" + Math.random(),"newwindow", "height=2000, width=1024, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
    }
    </script>
    <a  onclick="printdiv();">预览</a>
    <div id="div_print">
        打印内容
    </div>
           

    子页面代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>打印test</title>
        <script language="javascript">
            window.onload = function () {
                var opn = window.opener;
                var printpage = opn.document.getElementById("div_print").innerHTML;//获取父页面标签的值
    
                var newstr = document.getElementById("printidiv").innerHTML = printpage;
            }
        </script> 
    </head>
    <body>
        <a href="javascript:window.print();">打印</a>
       <div id="printidiv">
    
       </div>
    </body>
    </html>

    另外设置打印的css代码,通过media="print"来区分 

    <style type="text/css" media="print">
    * {padding: 0; margin: 0;} a {text-decoration: none; }
    </style>

    这样打印会有问题:1.会出现url地址,手动设置去掉页眉页脚,会把页码也去掉;2.预览之后打印页面需要重新写JS和CSS  可以使用Jquery 的print 来实现打印。

    2.window.print打印指定网页区域的方法 http://www.52jb.net/biancheng/517.html 

       https://stackoverflow.com/questions/9616426/javascript-print-iframe-contents-only

    43.隐私信息用**代替 

     return function (input, begin, charLen) {//charLen代替*的个数,begin是从1开始
                if (!input) return '';
                var len = input.length;
                if (begin <= 0) {
                    begin = 1;
                }
                if (begin > len) {
                    return input;
                }
                var char = '*';
                var fstStr = input.substring(0, begin - 1);
                var lstStr = "";
                if(charLen<0) {
                    charLen = 1;
                }
                if (!charLen) {
                    charLen = len - begin+1;
                }
                var end = begin + charLen;
                var scdStr = input.substr(begin-1, charLen);
                if (end <= len) {
                    lstStr = input.substr(end - 1);
                }
                var output = fstStr + scdStr.replace(/[u4E00-u9FA5A-Za-z0-9_]/g, char) + lstStr;
                return output;
            };
    44.数组方法合集
    1).一维数组去重
    方法一
    //去除前后空格
    function Trim(str)
     { 
      return str.replace(/(^s*)|(s*$)/g, ""); 
    }
    //一维数组去重
    var unique = function(array){
       array = array || [];
       for (var i = 0, len = array.length; i < len; i++) {
          for(var j = i+1;j< array.length;j++){
             if(Trim(array[i]) === Trim(array[j])){
                 array.splice(j,1);
                 j--;
             }
          }
       }
       return array;
    }
    var arrt = ['1','2','3','1','2','3'," 1"," 2"," 3"];
    var t2 = unique(arrt);//['1','2','3']

     方法二

    /*
    *对数组进行去重操作,返回一个没有重复元素的新数组
    */
    function unique(target) {
        var result = [];
        loop: for (var i = 0, n = target.length; i < n; i++) {
            for (var x = i + 1; x < n; x++) {
                if (target[x] === target[i]) {
                    continue loop;
                }
            }
            result.push(target[i]);
        }
        return result;
    }

    方法三

    Array.prototype.distinct = function () {
        var newArr = [],obj = {};
        for(var i=0, len = this.length; i < len; i++){
            if(!obj[typeof(this[i]) + this[i]]){
                newArr.push(this[i]);
                obj[typeof(this[i]) + this[i]] = 'new';
            }
        }
        return newArr;
    }

    其实最优的方法是这样的

    方法四

    Array.prototype.distinct = function () { 
        var sameObj = function(a, b){ 
            var tag = true; 
            if(!a || !b) return false; 
            for(var x in a){ 
                if(!b[x]) return false; 
                if(typeof(a[x]) === 'object'){ 
                    tag = sameObj(a[x],b[x]); 
                } else { 
                    if(a[x]!==b[x]) 
                    return false; 
                } 
            } 
            return tag; 
        } 
        var newArr = [], obj = {}; 
        for(var i = 0, len = this.length; i < len; i++){ 
            if(!sameObj(obj[typeof(this[i]) + this[i]], this[i])){ 
            newArr.push(this[i]); 
            obj[typeof(this[i]) + this[i]] = this[i]; 
            } 
        } 

    方法五

    //可传参的类似C#的distinct去重
    Array.prototype.distinct = function () {
        var callback = arguments[0] || function (n) { return n; };
        var arr = [];
        var resultArr = [];
        for (var i = 0, len = this.length; i < len; i++) {
            var resultItem = callback(this[i]);
            if (!~resultArr.indexOf(resultItem)) {
                resultArr.push(resultItem);
                arr.push(this[i]);
            }
        }
        return arr;
    };

    使用

    var arr=[{name:"tom",age:12},{name:"lily",age:22},{name:"lilei",age:12}];
    var newArr=arr.distinct(function(ele){
      return ele.age;
    });

     参考:http://www.cnblogs.com/liyunhua/p/4558621.html

    2).获取数组中最大的项

    Math.max.apply(null, array);

     3).获取数组中最小的项

    Math.min.apply(null, array);

     4).清空数组

    (array || []).length = 0;

     5).获取两个数组之间相同的,不同的和合并之后去掉重复的数组

    var getSampleArr = function (newValue, oldValue) {
        var arry3 = new Array();
        var j = 0;
        for (var i = 0; i < newValue.length; i++) {
            for (var k = 0; k < oldValue.length; k++) {
                if (newValue[i] == oldValue[k]) {
                    arry3[j] = newValue[i];
                    ++j;
                }
            }
        }
        return arry3;
    };
    var getDiffArr = function (newValue, oldValue) {
        var newArr = [];
        if (newValue.length > 0 && oldValue.length <= 0) {
            newArr = newValue;
        }
        var arr3 = [];
        for (var i = 0; i < newValue.length; i++) {
            if (oldValue.indexOf(newValue[i]) === -1)
                arr3.push(newValue[i]);
        }
        var arr4 = [];
        for (var j = 0; j < oldValue.length; j++) {
            if (newValue.indexOf(oldValue[j]) === -1)
                arr4.push(oldValue[j]);
        }
        newArr = arr3.concat(arr4);
        return newArr;
    };
    var getUniqueArr = function (newValue, oldValue) {
        var arr = newValue.concat(oldValue);
        var result = [], hash = {};
        for (var i = 0, elem; (elem = arr[i]) != null; i++) {
            if (!hash[elem]) {
                result.push(elem);
                hash[elem] = true;
            }
        }
        return result;
    };

    45. 前端处理倒叙问题

     //一般这样写
     for (var i = 0; i < data.Data.length; i++) {
     
     }
    //如果要倒叙
    for (var i = data.Data.length - 1; i >= 0; i--) {
        
    }

    46.JS中(function(){xxx})(); 这种写法是什么意思  :https://segmentfault.com/q/1010000000135703

    自执行匿名函数:

    • 常见格式:(function() { /* code */ })();
    • 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数。
    • 作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访问,除非你允许(变量前加上window,这样该函数或变量就成为全局)。各JavaScript库的代码也基本是这种组织形式。

    总结一下,执行函数的作用主要为 匿名 和 自动执行,代码在被解释时就已经在运行了。

    其他写法

    (function () { /* code */ } ()); 
    !function () { /* code */ } ();
    ~function () { /* code */ } ();
    -function () { /* code */ } ();
    +function () { /* code */ } ();

    推荐阅读:立即调用的函数表达式

    47. 原型和闭包

    原型就是C#中类的公有方法

    闭包就是C#中类的私有属性

    (function(){……………}())最简单的闭包

     什么情况使用闭包

     防止方法里面的变量被外面的变量改变。
     

    48.不声明第三个变量的值交换
    var a = 1, b = 2; a = [b, b = a][0];

    49.循环中使用标签

    有时候循环当中嵌套循环,你可能想要退出某一层循环,之前总是用一个标志变量来判断,现在才知道有更好的方法

    outerloop:
    for (var iI=0;iI<5;iI++) {
      if (somethingIsTrue()) {
      // Breaks the outer loop iteration
      break outerloop;
      }
      innerloop:
      for (var iA=0;iA<5;iA++) {
        if (somethingElseIsTrue()) {
        // Breaks the inner loop iteration
        break innerloop;
      }
      }
    }
    
    

    50.基础数据类型(Null,Undefined,Number,Boolean,String)不可以改变,对象可以改变;(只能引用类型值动态的添加属性)

    var a ='abcd';
    undefined
    a.len = 4;
    4
    alert(a.len) undefined 只有对象才有方法
    undefined
    a.toUpperCase() 转为大写
    "ABCD"
    alert(a);还是小写的abcd
    undefined
    a = a.toUpperCase();是大写的ABCD
    "ABCD"
    alert(a);
    undefined

    如下图:

    51. 当你用if去判断时, null、undefined、''、0会自动转换为false 。三元表达式也是一样的

     52. push()  往数组最后面添加一个元素,成功返回当前数组的长度
          pop()  删除数组的最后一个元素,成功返回删除元素的值
          shift()  删除数组的第一个元素,成功返回删除元素的值
          unshift()  往数组最前面添加一个元素,成功返回当前数组的长度
         splice()  有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除后想要在原位置替换的值(可选)
         sort()  使数组按照字符编码默认从小到大排序,成功返回排序后的数组
         reverse()  将数组倒序,成功返回倒序后的数组

     53.
    按拉计算,先是转换成二进制,0和1
    按位非(NOT !)  是将所有的0转成1,1转成0
    按位与(AND &)  是 1和1转成1; 1和0,0和1,0和0转成0 
    按位或(OR | )  是 1和1,1和0,0和1转成1,0和0转成0 
    按位异或(XOR ^ ) 是 1和1,0和0转成0;1和0,0和1都转成1

    54.判断点击第几个按钮JS代码的三种方法
    方法一:使用下标实现
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                window.onload = function () {
                    var btns = document.getElementsByTagName("button");
                    for (var i=0, length=btns.length; i<length; i++) {
                        var btn = btns[i];
                        //将btn所对应的下标保存在btn上
                        btn.index = i;
                        btn.onclick = function () {
                            alert('第'+(this.index+1)+'个');
                        };
                    }
                }
            </script>
        </head>
        <body>
            <button>测试1</button>
            <button>测试2</button>
            <button>测试3</button>
        </body>
    </html>
    
    方法二:使用闭包实现(闭包的作用可以延长局部变量的生命周期)
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                window.onload = function () {
                    var btns = document.getElementsByTagName("button");
                    //利用闭包实现循环遍历+监听
                    for (var i=0, length=btns.length; i<length; i++) {
                        (function(i) {
                            var btn = btns[i];
                            btn.onclick = function () {
                                alert('第'+(i+1)+'个');
                            };
                        })(i)
                    }
                }
            </script>
        </head>
        <body>
            <button>测试1</button>
            <button>测试2</button>
            <button>测试3</button>
        </body>
    </html>
    
    方法三:利用ES6实现(let有自己的块作用域)
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                window.onload = function () {
                    var btns = document.getElementsByTagName("button");
                    //利用let定义i
                    for (let i=0, length=btns.length; i<length; i++) {
                            var btn = btns[i];
                            btn.onclick = function () {
                                alert('第'+(i+1)+'个');
                            };
                    }
                }
            </script>
        </head>
        <body>
            <button>测试1</button>
            <button>测试2</button>
            <button>测试3</button>
        </body>
    </html>

     5.indexOf和lastIndexOf

    第二个参数是搜索的起始位置,注意在javascript中利用indexOf和lastIndexOf对数组搜索,即使设置了第二个参数,也不是说搜索到数组最后一个元素就停止,而是会循环搜索(相当于把前面的元素接到后面继续搜索),即无论如何都会对所有的元素搜索一遍
    我在多种浏览器中(IE、firefox和chrome中输出都是3、5、5、3,你怎么会是3、5、3、3?)

    var a=[1,2,3,4,5,4,3,2,1]

    console.log(a.indexOf(4)) //3
    console.log(a.lastIndexOf(4)) //5
    console.log(a.indexOf(4,4))//5,从位置4开始搜索,位置5元素就是4,搜索停止,故输出5
    console.log(a.lastIndexOf(4,4))//3,从位置4开始搜索,先搜索位置5元素符合,最后搜索到位置3元素符合,故输出3

    数组的.indexOf方法,对于引用型的对象,是按对象的引用比较的

    morePeople[0]与person是同一个对象的引用

    people[0]与person是两个不同的对象,虽然对象的内容一样

    var person ={name:"n"}
    var people=[{name:"n"}];
    var morePeople=[person];

    alert(people.indexOf(person)) ; //-1
    //people里没有person对象,当然返回-1

    alert(morePeople.indexOf(person)); //0
    //morePeople里第0个元素就是person,所以返回所在位置0

     6.window.top/window.self

    if (window.top !== window.self) { window.top.location = window.location; }
    判断当前的窗口是不是顶层窗口
    换句话说,判断当前的窗口有没有被嵌套在别的窗口中
    如果window.top = window.self 没嵌套
    当前窗口就是顶层窗口

    top.location != self.location 就是说当前窗体的url和父窗体的 url是不是相同
    如果相同执行top.location=self.location;},把窗体的url设成和本窗体一样。这个是为了防止别的网站嵌入你的网站的内容(比如用iframe嵌入的你的网站的页面)

    7.引入的js 需要加入版本号 ?(new Date()).getTime()

    8.var book=function(){}  https://zhuanlan.zhihu.com/p/83691879
    book.name="2"
    var book=function(){}
    book.prototype.name="1"
    这个有啥区别?

    prototype 是全局的,book.name="2" 是单个的

    book.name="2" 是本地属性
    book.prototype.name="1" 是给原型链加属性

     使用 prototype 时在当前 book 对象没有找到 name 时会到父级去找,没有找到一直往上找,直到最后一个 ;
     如果book没有父级的话,就没有区别;
     没找到就是 undefined 呀;
    不要给原生对象加原型方法,因为加到原型链上,会在整个js环境都发生改变 ,那怎么处理?你自己写一个方法,调用原生函数再处理数据 ;
    原生函数:
     在子类中可以使用父类的属性 
    不需要在子类中再定义
     
    使用prototype的好处是不会产生额外的内存,所有实例化后的对象都会从原型上继承这个属性或方法。当一个子类需要拥有父类的某些属性或方法,该属性或方法可以覆盖,又可以添加自己的属性和方法,这个操作不影响父类,这个时候使用prototype。

    推荐书籍 《JavaScript 语言精粹》 电子工业出版社 Douglas Crockford 著 赵泽欣  鄢学鹍译

    你自己写一个方法,调用原生函数再处理数据

  • 相关阅读:
    SPOJ 8093 JZPGYZ
    UVA1030 Image Is Everything
    UVA11996 Jewel Magic
    UVA11922 Permutation Transformer
    UVA1479 Graph and Queries
    P3224 [HNOI2012]永无乡
    UVA11020 Efficient Solutions
    UVA12206 Stammering Aliens
    UVA11107 Life Forms
    UVA11019 Matrix Matcher
  • 原文地址:https://www.cnblogs.com/allenhua/p/3579571.html
Copyright © 2020-2023  润新知