智能社JavaScript学习笔记第五课

it2022-05-05  112

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

 

 

例子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"]

转载于:https://www.cnblogs.com/jimmyrockcode/p/9260728.html


最新回复(0)