<!DOCTYPE html>
<html>
<head>
<title>01_define.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
console.log('根据函数的返回值来实现了函数的排序');
window.onload = show;
//通过数字来排序
var as = [1,2,10,6,8,20];
console.log(as.sort()); //[1, 10, 2, 20, 6, 8] 是根据字符串来排序的,想要通过数字来排序需要传一个函数对象
console.log('11'+1); //111
console.log('11'-1); //10 动态语言的灵活性,当进行减法的时候会自动完成转化。
var sortByNumber = function(a,b){
return a-b; //所以这里可以自动完成转化,就算as中有字符串"10","22"之类的都可以自动转化。但是"12px"这种就不行了,可以用parseInt来转化return parseInt(a)-parseInt(b)
}
console.log(as.sort(sortByNumber)); //[1, 2, 6, 8, 10, 20] 这个函数对象会直接调用
//通过对象来排序
var Person = function(name,age){
this.name = name;
this.age = age;
}
var p1 = new Person('evy',18);
var p2 = new Person('lin',15);
var p3 = new Person('hurk',20);
var pp = [p1,p2,p3];
/**
通过以下两个方法虽然可以排序,但是需要为每一个属性都设置一个函数,显然不灵活
但是如果通过函数的返回值调用就不一样了
*/
/* function sortByName(obj1,obj2){
if (obj1.name>obj2.name) { //因为上面是根据数字来排序,所以a-b就可以得到一个值,或者大于0,等于0,小于0,然后浏览器会根据这个值来排序.但是这里是通过对象来排序,obj1.name-obj2.name浏览器并不知道这个值是大于0的数还是小于0的数或者等于0,所以需要return一个数字来表明。
return 1;
}else if(obj1.name==obj2.name){
return 0;
}else{
return -1;
}
}
function sortByAge(obj1,obj2){
return obj1.age-obj2.age; //因为obj1.age和obj2。age是两个数字,所以可以得到一个值,并且可以知道这个值是不是大于0的数
} */
//pp.sort(sortByAge); //会自动执行sortByAge这个方法(注:事件xx.onclick=init、xx.onmouseover=init等等和window.onload=init都可以直接调用init()函数)
//pp.sort(sortByName);
function sortByProperty(propertyName){
var sortFun = function(obj1,obj2){
if (obj1[propertyName]>obj2[propertyName]) {
return 1;
}else if(obj1[propertyName]==obj2[propertyName]){
return 0;
}else{
return -1;
}
}
return sortFun;
}
pp.sort(sortByProperty('age'));
function show(){
var content = document.getElementById('content');
for ( var int = 0; int < pp.length; int++) {
content.innerHTML += pp[int].name+','+pp[int].age+'<br/>';
}
//
}
</script>
</head>
<body>
This is my HTML page. <br>
<span id="content"></span>
</body>
</html>
JS 函数sort
最新推荐文章于 2024-09-21 09:04:46 发布