高階函數(shù)
1碧绞、map/reduce
map:如果我們有一個函數(shù)f(x)=x2许蓖,要把這個函數(shù)作用在一個數(shù)組[1,2,3,4,6,5]上罪塔,就可以使用map實現(xiàn)角骤。
'use strict';
function pow(x) {
return x * x
}
var arr = [1,2,3,4]
var results = arr.map(pow)
// [1,4,9,16]
map() 作為高階函數(shù)隅忿,實質(zhì)是對數(shù)組中的每一項做計算,然后重新保存到新的數(shù)組中邦尊。
reduce:和map一樣也是作用在數(shù)組的每一項上背桐,但是函數(shù)必須接受2個參數(shù),將上一個元素的計算結(jié)果累計到下一個元素中胳赌。效果其實就是:
[x1,x2,x3,x4].reduce(f) = f(f(f(x1,x2),x3),x3)
對于數(shù)組:
var arr = [1,2,3,7,4]
function sum(x,y) {
return x + y
}
arr.reduce(sum)
// 17
function h(x,y){
return x * y
}
arr.reduce(h)
// 168
2牢撼、filter
filter也是一個常用的操作,它用于把Array的某些元素過濾掉疑苫,然后返回剩下的元素熏版。
和map()類似纷责,Array的filter()也接收一個函數(shù)。和map()不同的是撼短,filter()把傳入的函數(shù)依次作用于每個元素再膳,然后根據(jù)返回值是true還是false決定保留還是丟棄該元素。
例如曲横,在一個Array中喂柒,刪掉偶數(shù),只保留奇數(shù)禾嫉,可以這么寫:
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
return x % 2 !== 0;
});
// [1, 5, 9, 15]
filter()接收回調(diào)函數(shù)可以有多個參數(shù)灾杰,f(element, index, self){}
element: 當前元素
index: 當前元素索引值
self: 數(shù)組本身
filter去重
'use strict'
var
r,
arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self) {
return self.indexOf(element) === index;
});
console.log(r);
3、sort()
算法排序:對于兩個元素x和y熙参,如果認為x < y艳吠,則返回-1,如果認為x == y孽椰,則返回0昭娩,如果認為x > y,則返回1
如果對數(shù)組直接進行排序黍匾,發(fā)現(xiàn)結(jié)果:
// 看上去正常的結(jié)果:
['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];
// apple排在了最后:
['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']
// 無法理解的結(jié)果:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]
這是因為Array的sort()方法默認把所有元素先轉(zhuǎn)換為String再排序栏渺,apple在最后,是因為a的ASCI碼在大學字母后面锐涯,結(jié)果'10'排在了'2'的前面磕诊,因為字符'1'比字符'2'的ASCII碼小。
幸運的是全庸,sort()方法也是一個高階函數(shù)秀仲,它還可以接收一個比較函數(shù)來實現(xiàn)自定義的排序。
要按數(shù)字大小排序壶笼,我們可以這么寫:
'use strict'
var arr = [1,4,11,6,3,6,]
arr.sort(function(x, y) {
return x - y
})
console.log(arr) //[1, 3, 4, 6, 6, 11]
arr.sort(function(x, y) {
return y - x
})
console.log(arr) //[11, 6, 6, 4, 3, 1]
如果需要忽略大小寫進行字符串排序神僵,我們需要在函數(shù)中將x, y 統(tǒng)一轉(zhuǎn)換為大寫或小寫進行比較,返回的才能正確
使用方法
1覆劈、兩個或多個數(shù)組合并去重
var arr0 = [1,2,3,4,5]
var arr1 = [2,4,6,8,0]
var arr2 = [5,6,7,8,9]
function arrFilter() {
var arr = Array.prototype.slice.apply(arguments)
arr = arr.reduce(function(x, y){
return x.concat(y)
})
arr = arr.filter(function(ele, index, self){
return self.indexOf(ele) === index
})
return arr
}
console.log(arrFilter(arr0,arr1,arr2))
//[1, 2, 3, 4, 5, 6, 8, 0, 7, 9]
2保礼、兩個或多個數(shù)組選擇沒有重復的元素組成一個新數(shù)組
var arr0 = [1,2,3,4,5]
var arr1 = [2,4,6,8,0]
var arr2 = [5,6,7,8,9]
function newArr() {
var arr = Array.prototype.slice.apply(arguments)
var newArr = []
arr = arr.reduce(function(x, y){
return x.concat(y)
})
arr = arr.filter(function(ele, index, self){
var length = self.length
var canReturn = self.includes(ele, index+1) || self.indexOf(ele) !== index
return !canReturn
})
return arr
}
console.log(newArr(arr0,arr1,arr2))
// [1, 3, 0, 7, 9]
3、includes() 判斷一個數(shù)組是否包含一個指定的值责语,返回布爾值
let a = [1,2,3]
a.includes(2) //true
a.includes(4) //false
語法:
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
searchElement: 需要查找的元素
fromIndex|可選: 從該索引處開始查找searchElement炮障。如果為負值,則按升序從array.length + fromIndex的索引開始搜索坤候。默認為0胁赢。
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
如果fromIndex 大于等于數(shù)組長度 ,則返回 false 白筹。該數(shù)組不會被搜索智末。
4谅摄、樹節(jié)點過濾
var tree = [{
id: 1,
text: '中國',
children: [
{
id: 2,
text: '浙江',
children: [
{
id: 3,
text: '杭州',
},
{
id: 4,
text: '麗水',
children: [
{
id: 5,
text: '慶元'
},
{
id: 6,
text: '龍泉'
}
]
},
{
id: 7,
text: '溫州',
children: [
{
id: 8,
text: '泰順'
}
]
},
]
},
{
id: 9,
text: '重復測試',
children: [
{
id: 10,
text: '溫州'
}
]
}
]
}]
function filter(arr, val) {
let node = []
arr.map(item => {
if (item.text.indexOf(val) >= 0) {
node.push(item)
return
}
if (item.children && item.children.length > 0) {
let child = filter(item.children, val)
if (child.length > 0) {
item.children = child
node.push(item)
}
return
}
return
})
return node
}
console.log(filter(tree, '溫州'))