JavaScript基础

最新推荐文章于 2022-11-02 12:49:00 发布

可芭乐

最新推荐文章于 2022-11-02 12:49:00 发布

阅读量214

点赞数

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/a839371666/article/details/54617878

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

函数返回值、函数传参、数组基础

函数返回值

    function show(){
        return 'asdf';
    }
    var a = show();
    alert(a);

alert（a）与alert（show()）的结果相同
将字符串asdf返回到show()函数中，同数字

    function show(a,b){
        return a+b;
    };
    alert(show(3,5));

若return后年没有值或函数中没有return，就相当于underfined没有定义
一个函数应该只有一个返回值（除json）

函数传参（arguments）

function sum(){
    var result = 0;
    for (var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
}
alert(sum(11,45,1,2,6,8,6,2,6,6,2,5,9,6,9));

argument相当于一个数组，无论sum（）函数中有多少元素，都能计算出结果

css(oDiv,’width’) 获取样式
css(oDiv,’width’,’200px’) 设置样式

传统方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
    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','blue');
    }
</script>
</head>
<body>
    <div id="div1" style="width:200px;height:200px;background:red;"></div>
</body>
</html>

升级版：

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','blue');
    }

获取非行间样式

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        alert(oDiv.currentStyle.width);
    }
</script>

alert(oDiv.currentStyle.width);可以获得非行间行间的样式，但是不兼容，只能在高版IE下运行
在火狐、Chrome下可以使用alert(getComputedStyle(oDiv,null).width);

兼容方法：

if (oDiv.currentStyle) {
            alert(oDiv.currentStyle.width);
        }else{
            alert(getComputedStyle(oDiv,null).width);
        }

由此可以解决兼容性问题！

为了更快地编写代码，我们可以将其分装成函数：

function getStyle(obj, name){
        if (obj.currentStyle) {
            return obj.currentStyle[name];
        }else{
            return getComputedStyle(obj,null)[name];
        }
    }

只能获取单一样式：width、height等
不能获取复合样式：background、border等（可使用backgroundColor等）

数组基础
数组定义方法：
1、var a = [1,2,3];
2、var a = new Array(1,2,3);
两种方法相同
length不仅可以获取，也可以设置
例如原数组有10个元素，alert（XXX.length）天出结果为10；若果设置XXX.length=7，则数组会清空之后的元素
一个数组里面只有一个类型
在数组中加入元素：
XXX.push(元素)在数组最后加入元素
XXX.unshift(元素)在数组头部加入元素
在数组中删除元素：
XXX.pop()在数组最后删除元素
XXX.shift()在数组头部删除元素

splice
删除元素：splice（起点，长度）——数组中的下标为起点
插入元素：splice（起点，长度，元素）——数组中的下标为起点

var arr = [1,2,3,4,5,6];
    arr.splice(2,3);
    alert(arr);

弹出结果为1,2,6
arr.splice(2,0)表示数组不发生变化；arr.splice(2,0,’a’,’b’);弹出结果为1,2,a,b,3,4,5,6，从下标位置为2的地方插入a,b两个元素；arr.splice(2,2,’a’,’b’);弹出结果为1,2,a,b,5,6

contact
字符串的连接

var a = [1,2,3];
    var b = [4,5,6];
    alert(a.concat(b));

弹出结果为1,2,3,4,5,6
若将alert(a.concat(b))改为alert(b.concat(a))
弹出结果为4,5,6,1,2,3

join
数组元素间的分隔符

    var a = [1,2,3];
    alert(a.join('-'));

弹出结果为1-2-3

sort
排序数组
字符串排列：

var a = ['float','width','height','top','zoom','left'];
a.sort();
alert(a);

输出结果按照字母排列顺序排列
数字排列：

var b = [8,45,12,16,21,79,112];
    b.sort(function (n1,n2){
        if (n1<n2) {
            return -1;
        }else if(n1>n2) {
            return 1;
        }else {
            return 0;
        }
    });
    alert(b);

能能出正确的数字排列
sort只能对字符串进行排列；对数字排列需要加入函数b.sort(function (n1,n2){ if (n1<n2) { return -1; }else if(n1>n2) { return 1; }else { return 0; } });也可以写成b.sort(function (n1,n2){return n1-n2;}

可芭乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础

函数返回值、函数传参、数组基础函数返回值 function show(){ return 'asdf'; } var a = show(); alert(a);alert（a）与alert（show()）的结果相同将字符串asdf返回到show()函数中，同数字 function show(a,b){ return a+b;
复制链接

扫一扫

专栏目录