javascript 数组 filter使用方法
filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；若返回值为false，则该元素不保存到新数组中；原数组不发生改变。
和map类似，Array的filter也接收一个函数。但是和map不同的是， filter把传入的函数依次作用于每个元素，然后根据返回值是 true 还是false决定保留还是丢弃该元素。
fiter()；该回调函数接受三个参数
1.表示arr的某个元素。
2.表示arr每一位的下标
3.表示arr自身 常用 self表示
实例1 在一个数组中 删除偶数
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
r; // [1, 5, 9, 15]
实例2 删除数组中的空字符串
var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
});
arr; // ['A', 'B', 'C']
实例3 数组去重方法
var arr = [7,6,5,214,5,9,7,80,3,6,45,48,46,24,26];
var a = arr.filter(function(x,item,arr){
return arr.indexOf(x) ===item;
})
console.log(a.toString())
去重主要依靠的是indexOf方法 总是返回第一个元素的位置，后续重复元素位置与 indexOf 的位置不相等 因此被filter过滤掉
ps:在Vue中的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06_列表渲染_过滤与排序</title> </head> <body> <!-- 1. 列表过滤 2. 列表排序 --> <div id="demo"> <input type="text" v-model="searchName"> <ul> <li v-for="(p, index) in filterPersons" :key="index"> {{index}}--{{p.name}}--{{p.age}} </li> </ul> <div> <button @click="setOrderType(2)">年龄升序</button> <button @click="setOrderType(1)">年龄降序</button> <button @click="setOrderType(0)">原本顺序</button> </div> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { searchName: '', orderType: 0, // 0代表不排序, 1代表降序, 2代表升序 persons: [ {name: 'Tom', age:18}, {name: 'Jack', age:17}, {name: 'Bob', age:19}, {name: 'Mary', age:16} ] }, computed: { filterPersons () { // debugger // 取出相关数据 const {searchName, persons, orderType} = this let arr = [...persons] // 过滤数组 if(searchName.trim()) { arr = persons.filter(p => p.name.indexOf(searchName)!==-1) } // 排序 if(orderType) { arr.sort(function (p1, p2) { if(orderType===1) { // 降序 return p2.age-p1.age } else { // 升序 return p1.age-p2.age } }) } return arr } }, methods: { setOrderType (orderType) { this.orderType = orderType } } }) </script> </body> </html>
sort的使用
JavaScript数组sort()方法小结
sort语法:arrayObject.sort(sortby);参数sortby可选。规定排序顺序。必须是函数。
由于sort方法是先将数组元素转换为字符串进行比较，根据字符串首字符的ASCII码排序进行比较，所以有时候不能满足我们对数组数字集合的排序要求，但是sort()方法可以采用函数，利用冒泡法对数组进行排序，我个人的理解是如果要对其进行排序给定函数有以下两种格式:
Array.sort(function(a,b){
a-b;
})
此种方法实现由小到大排序。
Array.sort(function(a,b){
return b-a;
})
此种方法可以实现由大到小排序。
如果对多维数组进行排序，应给定排序的下标.
对象数组排序
可以选择它的某一属性进行比较
var arr = [
{ name:"小明", age:12 },
{ name:"小红", age:11 },
{ name:"小刚", age:15 },
{ name:"小华", age:13 }
];
function compare(p){ //这是比较函数
return function(m,n){
var a = m[p];
var b = n[p];
return a - b; //升序
}
}
arr.sort(compare("age"));
console.log(arr);
//结果如下：
//[{name: "小红", age: 11},
//{name: "小明", age: 12},
//{name: "小华", age: 13},
//{name: "小刚", age: 15}]
数组排序
var arr = [2,3,13,17,4,19,1];
arr.sort() // 结果：[1, 13, 17, 19, 2, 3, 4]
若想对数组按照大小进行排序，则需要在sort()方法中添加比较函数
var arr = [2,3,13,17,4,19,1];
arr.sort(function(a,b){ // 这是比较函数
return b - a; // 降序
})
console.log(arr) // 结果：[19, 17, 13, 4, 3, 2, 1]
ps:sort在Vue中的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06_列表渲染_过滤与排序</title> </head> <body> <!-- 1. 列表过滤 2. 列表排序 --> <div id="demo"> <input type="text" v-model="searchName"> <ul> <li v-for="(p, index) in filterPersons" :key="index"> {{index}}--{{p.name}}--{{p.age}} </li> </ul> <div> <button @click="setOrderType(2)">年龄升序</button> <button @click="setOrderType(1)">年龄降序</button> <button @click="setOrderType(0)">原本顺序</button> </div> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#demo', data: { searchName: '', orderType: 0, // 0代表不排序, 1代表降序, 2代表升序 persons: [ {name: 'Tom', age:18}, {name: 'Jack', age:17}, {name: 'Bob', age:19}, {name: 'Mary', age:16} ] }, computed: { filterPersons () { // debugger // 取出相关数据 const {searchName, persons, orderType} = this let arr = [...persons] // 过滤数组 if(searchName.trim()) { arr = persons.filter(p => p.name.indexOf(searchName)!==-1) } // 排序 if(orderType) { arr.sort(function (p1, p2) { if(orderType===1) { // 降序 return p2.age-p1.age } else { // 升序 return p1.age-p2.age } }) } return arr } }, methods: { setOrderType (orderType) { this.orderType = orderType } } }) </script> </body> </html>
对象数组排序 https://www.cnblogs.com/taohuaya/p/10049341.html
JS-数组sort方法用的是哪种排序算法
JS数组的排序方法大家肯定用的太多了，那sort用的是什么排序算法呢？
说明一下，ECMAScript没有定义使用哪种排序算法，各个浏览器的实现方式会有不同。火狐中使用的是归并排序，下面是Chrome的sort排序算法的实现
Chrome：sort使用的是插入排序和快速排序结合的排序算法。数组长度不超过10时，使用插入排序。长度超过10使用快速排序。在数组较短时插入排序更有效率。