javascript 數組 filter使用方法
和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使用快速排序。在數組較短時插入排序更有效率。