JS之关于数组的小知识

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>数组笔记</title>
    <script type="text/javascript">
    // arguments 可变参数，arguments是一个数组，用于存放函数所接收的参数，也就是
    // arguments[0]表示第一个参数，这样函数就不用指定有多少参数，而是可以根据不同数量的传参做不同的事情
    // function sum(){
    //   alert(arguments.length);  //返回3
    //   alert(arguments[0]);  //返回12
    //
    //   var result=0;                      //用arguments实现一个可变参数的和函数
    //   for(var i=0;i<arguments.length;i++){
    //     result=result+arguments[i];
    //   }
    //   return result;
    // }
    // alert(sum(12,4,6));


    // function css(){    //arguments用法举例二：根据不同的参数个数，函数提供不同的操作
    //   if(arguments.length==2){   //如果参数个数为2，就获取指定元素的样式
    //     return arguments[0].style[arguments[1]];
    //   }
    //   else{
    //     arguments[0].style[arguments[1]]=arguments[2];
    //   }
    // }
    // oDiv=document.getElementById('div1');
    // alert(css(oDiv,'width'));  //返回200px;
    // alert(css(oDiv,'background','green')); //背景就变成绿色啦


    //上述函数也可以改写成下面的样子，具有更好的易读性
    // function css(obj,name,value){    //arguments用法举例二：根据不同的参数个数，函数提供不同的操作
    //   if(arguments.length==2){   //如果参数个数为2，就获取指定元素的样式
    //     return obj.style[name];
    //   }
    //   else{
    //     obj.style[name=value;
    //   }
    // }
    // oDiv=document.getElementById('div1');
    // alert(css(oDiv,'width'));  //返回200px;
    // alert(css(oDiv,'background','green')); //背景就变成绿色啦


    //如何取非行间样式
    // oDiv=document.getElementById('div1');
    // alert(oDiv.currentStyle.width);   //只支持IE
    // alert(getComputedStytle(oDiv,false).width); //支持Chrome,FF
    //getComputedStytle(oDiv,false)第一个参数表示你想要获取的元素名称，第二个参数随便写个什么都行，没啥用


    //如何解决获取非行间样式浏览器的兼容性问题，主要用到if else结构，很多解决兼容性问题的方法基本都用这个结构
    // if(oDiv.currentStyle){  //在非IE浏览器下，oDiv.currentStyle是undefined
    //   //IE
    //   alert(oDiv.currentStyle.width);
    // }
    // else{
    //   //Chrome FF
    //     alert(getComputedStytle(oDiv,false).width);
    //   }
    // }
    //注：以上方法只能获取单一样式，比如 width,height,不能获取复合样式，比如：background,如果想要获得背景颜色
    //要写成：backgroundColor


    //数组的使用 以下两种方法是等价的，常用第一种
    // var arr=[12,4,7];
    // var arr1=new Array(12,4,7);

    //数组的属性 length 既可以获取又可以设置
    // alert(arr.length); //返回3
    // arr.length=0; //数组元素被清空
    // arr.length=1; //数组中只剩下第一个元素

    //添加、删除数组元素
    // arr.push(5); //从尾部添加，返回arr[12,4,7,5]
    // arr.unshift(5); //从头部添加，返回arr[5,12,4,7]
    // arr.pop(); //删除尾部的第一个元素，返回arr[12,4]
    // arr.shift(); //删除头部的第一个元素，返回arr[4,7]

    // //数组的方法之 splice()
    // var arr=[1,2,3,4,5,6];
    // //删除：splice(起点，长度）
    // arr.splice(2,3); //返回 arr[1,2,6] 这里删除了第二个位置（包含第二个位置）之后的三个元素
    // //插入 splice(起点，长度，元素)
    // arr.splice(2,0,'a','b','c'); //返回arr[1,2,a,b,c,3,4,5,6] ,先从第二个位置删除了0个元素，再从第二个位置插入元素
    // arr.splice(2,3,'a','b','c'); //返回arr[1,2,a,b,c,6] 也可以看作是替换操作


    //数组排序 sort();默认是可以将字符串进行排序，但是如果要给数字进行排序的时候，要带一个排序函数作为参数
    //字符串排序
    // var arr=['float','width','alpha'];
    // alert(arr.sort()); //返回 alpha，float，width
    //数字排序
    // var arr=[12,33,2,109];
    // arr.sort(function(n1,n2){
    //   return n1-n2;
    // })



    //数组的连接，contact()
    // var arr1=[1,2,3];
    // var arr2=[a,b,c];
    // alert(arr1.contact(arr2)); //返回 1，2，3，a,b,c
    // alert(arr2.contact(arr1)); //返回 a,b,c,1，2，3

    //join分隔符，用分隔符分隔元素，生成字符串
    // var arr=[1,2,3];
    // alert(arr.join('-'));  //返回1-2-3 最后得到的是一个字符串

    </script>
    <style>
    #div1 {         //非行间样式
      width=200px;
      height=200px;
      background=red;
    }
    </style>
  </head>
  <body>
     <!-- 行间样式 -->
    <div id='div1' style="width:200px;height:200px;background:red;"></div>
  </body>
</html>
JS之关于数组的小知识

猜你喜欢
