03.深刻javascript

函數返回值

函數返回值和函數傳參正好相反，函數傳參是咱們能夠把一些東西傳到函數裏面去，函數返回值是函數能夠把一些東西傳到外面來。

<script>
function show()
{
return 12;
}
alert(show());// 彈出12 在哪調用返回到哪
</script>

<script>
function show(a, b)
{
return a+b;
}

alert(show(3, 5));//彈出8
</script>

 

一個函數應該只返回一種類型的值

<script>
function show()
{
}
alert(show());
</script>

//彈出 undifined 函數也能夠沒有返回值

 

函數傳參

可變參（不定參）：arguments 是一個數組，參數的個數可變，參數數組
例子 求和

<script>
function sum()
{
var result=0;
for(var i=0;i<arguments.length;i++)
{
result=result+arguments[i];
}    
return result;
}
alert(sum(12, 6, 8, 6, 8,8));

 

css(oDiv, 'width') 獲取樣式 

arguments[0]   oDiv

arguments[1]   width

arguments[2]    200px

css(oDiv, 'width', '200px') 設置樣式

<div id="div1" style="width:200px; height:200px; background:red;">  </div>

<script>

function css()
{
    if(arguments.length==2)    //獲取
    {
        return arguments[0].style[arguments[1]];
    }
    else
    {
        arguments[0].style[arguments[1]]=arguments[2];  //設置
    }
}

window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    //alert(css(oDiv, 'width'));
    
    css(oDiv, 'background', 'green');
};
</script>

用傳參的方式 obj, name, value

<script>
function css(obj, name, value)
{
    if(arguments.length==2)    //獲取
    {
        return obj.style[name];
    }
    else
    {
        obj.style[name]=value;
    }
}

window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    alert(css(oDiv, 'width'));
    
    //css(oDiv, 'background', 'green');//設置
};
</script>

取非行間樣式(不能用來設置)：
obj.style用來獲取行間樣式
obj.currentStyle[attr] 用來獲取非行間樣式 不過只能兼容ie 火狐谷歌不兼容
getComputedStyle(obj, false)[attr]  兼容火狐谷歌 不兼容ie

複合樣式：background、border
單同樣式：width、height、position

#div1 {width:200px; height:200px; background:red;}
<script>
function getStyle(obj, name)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[name];
    }
    else
    {
        return getComputedStyle(obj, false)[name];
    }
}

window.onload=function ()
{
    var oDiv=document.getElementById('div1');
        
    alert(getStyle(oDiv, 'backgroundColor'));//background、border屬於複合樣式須要寫成backgroundColor, borderWidth

};

</script> 

<div id="div1"></div>

 數組的使用

數組定義的兩種方法
var arr=[12, 5, 8, 9];
var arr=new Array(12, 5, 8, 9); 沒有任何差異，[]的性能略高，由於代碼短

數組的屬性 length
既能夠獲取，又能夠設置
例子：快速清空數組

<script>
var arr=[1,2,3];
//alert(arr.length); //彈出數組的長度 
alert(arr.length=0);//設置數組的長度爲0，即清空數組
</script>
數組使用原則：數組中應該只存一種類型的變量
數組添加、刪除元素

添加
push(元素)，從尾部添加
unshift(元素)，從頭部添加
刪除
pop()，從尾部彈出
shift()，從頭部彈出

插入、刪除
splice (開始,長度)             刪除
splice(開始, 長度,元素…)   先刪除，後插入

splice (開始,長度)             刪除
<script>
var arr=[1,2,3,4,5,6];
arr.splice(2, 3); //刪除：splice(起點, 長度)從第二個位置開始即從數字3開始，刪除三個
alert(arr);  //彈出的是 1,2,6 
</script>

splice(開始, 長度,元素…)   先刪除，後插入
<script>
var arr=[1,2,3,4,5,6];
arr.splice(2,0,7,8,9); //先刪除在加入：splice(起點, 長度,元素...)從第二個位置開始即從數字3開始，刪除0個插入7,8,9
alert(arr);  //彈出的是 1,2,7,8,9,3,4,5,6 
</script>

 

轉換類

concat(數組2)  鏈接兩個數組

<script>
var a=[1,2,3];
var b=[4,5,6];
//alert(a.concat(b));  //彈出1,2,3,4,5,6   a在左邊彈出來的a也在左邊
alert(b.concat(a));    //彈出4,5,6,1,2,3    b在左邊彈出來的b也在左邊
</script>

 

join(分隔符)

<script>
var arr=[1,2,3,4];
//alert(arr);//彈出的是1,2,3,4
alert(arr.join('-'));//彈出的是1-2-3-4
</script>

排序sort

排序一個字符串數組
排序一個數字數組

排序一個字符串數組 
<script>
var arr=['about', 'class', 'die', 'best', 'embed'];
arr.sort();
alert(arr);  //彈出的是about,best,class,die,embed
</script>

比較函數 排序一個數字數組
<script>
var arr=[12, 8, 99, 19, 112];

arr.sort(function (n1, n2){
        return n1-n2;    //按照從小到大排列 彈出112,99,19,12,8
        //return n2-n1;    //按照從大到小排列 彈出8,12,19,99,112
});
alert(arr);
</script>