智能社JavaScript学习笔记第五课

深入JavaScript

 

返回值

函数执行结果,也可以没有return。 没有return的话该函数结果就是undefined。

一个函数应该只返回一种类型的值。

 

 

arguments :可变参 、不定参(参数的个数可变,参数数组)

 

例子1:求所有参数和

<script>

function sum() {

    //alert(arguments.length);

    //alert(arguments[0]);

    var result = 0;

    for (var i = 0;i<arguments.length;i++) {

        result += arguments[i] ; 

    }

    return result;

}

 

</script>
扫描二维码关注公众号,回复: 1857517 查看本文章

 

例子2:

jQuery有这个函数。

写一个函数,当参数为两个时, 获取oDiv的行间样式值,例如 css(oDiv,’width’); 当参数为三个时,设置oDiv的行间样式值,例如css(oDiv,’width’,’200px’)

注意要判断arguments的length来确定是实现获取还是设置的功能。

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <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-color','green')

        }

 

    </script>

</head>

 

<body>

 

<div id = "div1" style = "width:200px; height:200px;background-color: azure;">

</div>

 

</body>

</html>

 

这样参数写的不够清楚,不如把给参数取名字增强可读性,(obj,name,value)

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <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-color','green')

        }

 

    </script>

</head>

 

<body>

 

<div id = "div1" style = "width:200px; height:200px;background-color: azure;">

</div>

 

</body>

</html>

 

 

取非行间样式

 

因为ie和ff chrome用不同的方法获取行间样式,为了解决兼容性问题一下方法获取行间样式:

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #div1 {width:200px;height:200px;background-color: aqua}

    </style>

    <script>

        window.onload = function () {

            var oDiv = document.getElementById('div1');

            //IE下用此方法获取行间样式

            //alert(oDiv.currentStyle.width);

 

            //chrome、FF 下用此方法

            //alert(getComputedStyle(oDiv,false).width);

 

            if(oDiv.currentStyle) { //IE下该返回值为一个object,即true说明可以用ie的方法获取行间样式

                alert(oDiv.currentStyle.width);

            }else {//chrome和FF 下返回值为undefined,即false,那么就用一下方法获取行间样式

                alert(getComputedStyle(oDiv,false).width);

            }

        }

 

    </script>

</head>

 

<body>

 

<div id = "div1" >

</div>

 

</body>

</html>

 

可以将以上的方法封装在一个getStyle函数中,方便以后调用:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #div1 {width:200px;height:200px;background-color: aqua}

    </style>

    <script>

        function getStyle(obj,name){

            if (obj.currentStyle) {

                return obj.currentStyle[name];

            } else{

                return getComputedStyle(obj,false)[name];//false在此处没什么作用,写null也行,记住就好

            }

        }

        window.onload = function () {

            var oDiv = document.getElementById('div1');

            //IE

            //alert(oDiv.currentStyle.width);

 

            //chrome、FF

            //alert(getComputedStyle(oDiv,false).width);

            alert(getStyle(oDiv,'width'));

        }

 

    </script>

</head>

 

<body>

 

<div id = "div1" >

</div>

 

</body>

</html>

 

 

此处注意一个小点,如果getStyle(oDIv,background)的话可能会出错,因为background是复合样式包括背景颜色、图片等等。

复合样式:background,border

单一样式:width,height,position

要取背景颜色的话可以写作 getStyle(oDiv,background-color)

 

数组基础

两种定义方法

<script>

//var arr =[1,2,3]

var arr =new Array[1,2,3]

</script>

 

 

数组属性:

length可以直接用来设置 比如 本来arr =[1,2,3,4]

arr.length =2 ;此时数组就位【1,2】

 

一些数组操作

arr.push(4);//往数组尾部添加

arr.pop();//数组尾部删除

arr.shift();//数组头部删除

arr.unshift(5);//数组头部添加

 

插入、删除

1.splice

var arr = [1,2,3,4,5,6]

 

//删除:splice(起点,长度)

//arr.splice(2,3)  返回【1,2,6】从第2个位置,删掉3个元素

 

//插入:splice(起点,长度,元素)

//arr.splice(2,0,’a’,’b’)  返回【1,2,a,b,3,4,5,6】从第2个位置,删掉零个元素,再插入a,b

 

//arry.splice(2,2,’a’,’b’) 返回【1,2,a,b,5,6】从第2个位置删掉2个元素加入ab

alert(arr);

 

 

2.concat 连接

var a = [1,2,3]

var b = [4,5,6]

alert(a.concat(b));  //把数组b接在a后面

//alert(b.concat(a));

 

3.join 分隔符 (将来ajax会用)

var arr = [1,2,3,4]

alert(arr.join(‘-’));

 

用’-’ 连接数组中元素变成字符串

 

4.sort 排序

排序一个字符串数组;

排序一个数字数组;

 

 

引用自脚本之家:

 

JavaScript中数组的sort()方法主要用于对数组的元素进行排序。其中,sort()方法有一个可选参数。但是,此参数必须是函数。 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编码顺序)对数组中的元素进行排序,如果想按照其他标准进行排序,就需要进行传一个参数且为函数,该函数要比较两个值,并且会返回一个用于说明这两个值的相对顺序的数字。

 

1、对数字数组进行由小到大的顺序进行排序。

 

代码:

 

var arr = [22,12,3,43,56,47,4];

arr.sort();

console.log(arr); // [12, 22, 3, 4, 43, 47, 56]

arr.sort(function (m, n) { // 可以直接写作 return m - n;

 if (m < n) return -1

 else if (m > n) return 1

 else return 0

});

console.log(arr); // [3, 4, 12, 22, 43, 47, 56]

2、对字符串数组执行不区分大小写的字母表排序。

 

代码:

 

var arr = ['abc', 'Def', 'BoC', 'FED'];

console.log(arr.sort()); // ["BoC", "Def", "FED", "abc"]

console.log(arr.sort(function(s, t){

 var a = s.toLowerCase();

 var b = t.toLowerCase();

 if (a < b) return -1;

 if (a > b) return 1;

 return 0;

})); // ["abc", "BoC", "Def", "FED"]

猜你喜欢

转载自www.cnblogs.com/jimmyrockcode/p/9260728.html