JavaScript 基础注意事项

JavaScript语法

• 除0之外的所有数字，转换为布尔型都为true

• 除“” 之外的所有字符，转换为布尔型都为true

• nll和undefined转换为布尔型为false

• &&与（只要有一个条件不成立，返回false），说明：在有一个操作数不是布尔值的情况，逻辑与操作就不一定返回值，此时它遵循下列规则：

  1）如果第一个操作数隐式类型转换后为true，则返回第二个操作数 （有多个操作数就返回最后一个操作数）

  2）如果第一个操作数隐式类型转换后为false，则返回第一个操作数

  3）操作数中有一个结果是null，最后结果就是null；有一个是NaN最后结果就是NaN，有一个是undefined那结果就是undefined

• ||或（只要有一个条件成立，返回true），说明：在有一个操作数不是布尔值的情况，逻辑或操作就不一定返回值，此时它遵循下列规则：

  1）如果第一个操作数隐式类型转换后为true，则返回第一个操作数

  2）如果第一个操作数隐式类型转换后为false，则返回第二个操作数，如果第二个为false，以此类推

  3）如果两个操作数都是null，则返回null；如果两个操作数都是NaN，则返回NaN；如果两个操作数都是undefined，则返回undefined

• for：适合已知循环次数的循环体；while适合未知循环次数的循环体

DOM基础

• ele.className:是重新设置类，替换元素本身的class

• ele.getAttribute("attribute")获取ele元素的attribute属性；ele.setAttribute("attribute")设置ele元素的attribute属性；ele.removeAttribute("attribute")删除ele元素上的attribute属性

DOM事件

• btn.onclick = clickBtn;点击按钮调用clickBtn这个函数，这种情况下函数后面不要加括号；

• onfocus事件用于：input标签type为text、password、textarea标签

• onsubmit事件不是加在按钮上而是加在表单上点击确认按钮时发生；onmousedown鼠标按钮在元素上按下时触发；onmousemove在鼠标指针移动时发生；onmouseup在元素上松开鼠标按钮时触发；onresize当调整浏览器窗口的大小时触发；onscroll拖动滚动条滚动时触发

• onkeydown在用户按下一个键盘按键时发生；onkeypress在键盘按键被按下并释放一个键时发生；onkeyup在键盘按键被松开时发生；keyCode:返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码

BOM浏览器对象模型

• window所有的全局变量和全局方法都被归在window上；alert()、confirm()、prompt()文字换行用\n

• setTimeout(函数,毫秒数):在指定的毫秒数后调用函数或计算表达式；setInterval(函数，毫秒数）每隔指定的时间执行一次代码

• location对象提供了与当前窗口中加载的文档有关的信息；location.href等于window.location返回当前加载页面的完整URL；location.hash="#top" 页面滚动到顶部锚点位置；location.host返回服务器名称和端口号（如果有）；location.hostname返回不带端口号的服务器名称；location.pathname返回URL中的目录（或）文件名；location.prot返回URL中指定的端口号；location.protocol返回页面使用的协议；location.search返回URL的查询字符串;location.reload(true)重新加载当前显示的页面，不加true有可能从缓存中加载，加true是从服务器重新加载；

• history对象保存了用户在浏览器中访问页面的历史记录

• screen.availWidth返回可用的屏幕宽度；screen.availHeight返回可用的屏幕高度

• Navigator对象的userAgent属性1）判断浏览器类型2）判断设备的终端是移动还是pc，用来识别浏览器名称、版本、引擎以及操作系统等信息的内容

    //检测浏览器类型
    function getBrowser(){
        //获取userAgent属性
        var explorer = navigator.userAgent.toLowerCase(),browser;
        if(explorer.indexOf('msie') > -1){
            browser = "IE";
        }else if(explorer.indexOf('chrome') > -1){
            browser = "chrome";
        }else if(explorer.indexOf('opera') > -1){
            browser = "opera";
        }else if(explorer.indexOf('safari') > -1){
            browser = "safari";
        }
        return browser;
    }
    var explorer = getBrowser();
    alert("您当前使用的是："+explorer+"浏览器");
  

JavaScript内置对象

数组

• 数组的长度等于最后一项索引加1

• 数组的栈方法：push()把参数添加到数组的尾部，返回的值是把指定的值添加到数组后的新长度；unshift()把参数添加到数组的开头，返回值是把指定的值添加到数组后的新长度；pop()删除数组的最后一个元素，返回值是被删除的那个元素； shift()删除数组中的第一个元素，返回值是被删除的那个元素；

• 数组的转换方法：join()用于把数组中的所有元素放入一个字符串，返回值是字符串；

• 数组重排序方法：reverse()用于颠倒数组中元素的顺序，返回值是数组；sort()用于对数组的元素进行排序，返回值是数组，sort会把数组中的每一项转化为字符串进行排序；

    //sort（）方法可以接收一个比较函数作为参数
    //降序
    arr.sort(function(a,b){
        return b-a
    });
    //升序
    arr.sort(function(a,b){
        return a-b
    });
  

• 数组的操作方法：concat()用于连接两个或多个数组，返回值是新数组；

• 数组的操作方法：slice(start,end)从已有的数组中返回选定的元素,start(必须)规定从何处开始选取，如是负数，从数组尾部开始算起；end(可选)规定从何处结束选取，是数组片段结束处的数组下标

  1.如果没有指定end,切分数组包含从start到数组结束的所有元素。

  2.如slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。返回值是数组。

  3.start和end指的是数组中的索引值，截取从start和end-1的元素。

    //完成以下代码段，实现b数组对a数组的拷贝，方法越多越好
    var a = [1,"yes",3];
    var b;
    //1、数组遍历push
    b = new Array();
    for(var i=0; i<a.length; i++){
        b.push(a[i]);
    }
    //2、concat()
    b = [].concat(a); 

• splice(index,count)删除从index处开始的零个或多个元素。返回值是含有被删除的元素的数组，count是要删除的项目数量，如果设置为0，则不会删除项目，如果不设置，则删除从index开始的所有值。

• splice(index,0,item1,....,itemX)在指定位置插入值，index是起始位置，0要删除的项数，item1...itemX是要插入的项，返回值是数组

• splice(index,count,item1,..itemX)在指定位置插入值（替换），且同时删除任意数量的项，index起始位置，count要删除的项数，item1....itemX要插入的项，返回值是从原始数组中删除的项（如果没有删除任何项，则返回空数组）

• 位置方法（IE9以上的浏览器支持）：indexOf(searchvalue,startIndex)从数组的开头（位置0）开始向后查找，searchvalue（必需，要查找的项），startIndex(可选，起点位置的索引），返回值是number（查找的项在数组中的位置，没有找到的情况下返回-1）；lasetIndexOf(searchvalue, startIndex)从末尾开始向前查找，没有找到返回-1；

    //封装一个方法实现indexOf的功能，可以兼容ie9以下浏览器
    var nums=[1,7,5,8,8,1,6,9];
    function ArrayIndexOf(arr,value){
        //检测value在arr中出现的位置
        for(var i=0;i<arr.length;i++){
            if(arr[i]===value){
                return i;
            }
        }
        return -1;
    }
    var pos2= ArrayIndexOf(nums,8);
    console.log(pos2);
  

String 字符串

• stringObject.charAt(index)返回stringObject中index位置的字符。

• charCodeAt(index)返回index位置字符的字符编码

• stringObject.indexOf("0")从一个字符串中搜索给定的子字符串，返回子字符串的位置，如果没有找到返回-1，从字符串最左边开始检测遇到第一个要检测的字符返回其位置；lastIndexOf()从最后开始检测；

• 字符串截取方法

  1.slice(start,end)截取字符串,start必需，指定子字符串开始位置；end可选，表示自字符串到哪里结束，end本身不在截取范围之内，省略时截取至字符串的末尾。当参数为负数时，将传入的负值与字符串的长度相加。

  2.substring()语法及功能同slice()完全一样，区别在于：当参数为负数时，自动将参数转换为0,自动把小的数字变成起始位置。

  3.substr(start,len)截取字符串，start必需，指定字符串的开始，len可选，表示截取的字符总数，省略时截取至字符串的末尾；当start为负数时，会将传入的负值与字符串的长度相加；当len为负数时，返回空字符串。

• split(separator)把一个字符串分割成字符串数组，返回Array，separator必需，分隔符。

    var str='welcome-to-beijing';
    //使用split将str转换为数组
    var arr=str.split("-");
    console.log(arr)//["welcome","to","beijing"]
  

• replace(regexp/substr,replacement)在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。返回被替换之后的字符串；regexp必需，规定子字符串或要替换的模式的RegExp对象；replacement必需，替换成什么的新的内容。

    var tel='010-62971268,400-100-9098,010-86789889';
    //newTel被替换之后的字符串
    var newTel=tel.replace(/,/g," ");
    console.log(newTel)
  

• stringObject.toUpperCase()把字符串转化为大写

• stringObject.toLowerCase()把字符串转换为小写

    function camelback(str){
        //通过-这个分隔符降str拆分成数组
        var arr=str.split("-");
        var newStr = arr[0];
        //console.log(arr);//['border','left','color']
        for(var i=1,len=arr.length;i<len;i++){
            var word=arr[i];
            //将每一个单词的首字母转换为大写
            newStr += word.charAt(0).toUpperCase()+word.substr(1);
            console.log(newStr);
        }
        return newStr;
    }
    var camelFormat=camelback('border-left-color');
    console.log(camelFormat);