03.深入javascript

Posted 2020-08-17 Cutelady0927

函数返回值

函数返回值和函数传参正好相反，函数传参是我们可以把一些东西传到函数里面去，函数返回值是函数可以把一些东西传到外面来。

<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>

 

 

 

 

 

数组添加、删除元素数组添加
、删除元素数组添加、删除元素