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