浅谈javascript中箭头函数（=）及（filter）（indexOf）（!!~）的含义这段时间在hexo上看见⼀种 object.filter(event => !!~array.indexOf(event.item)) 的语法
举个栗⼦
deleteImage(){
const oldPhotos =[]// 原来的照⽚数组[]
const oldAlbums = app.globalData.allData.albums // 原来的照⽚集合[{x1,y1},{x2,y2},{x3,y3}]
for(var i =0; i < oldAlbums.length; i++){
oldPhotos[i]= oldAlbums[i].src // 添加原来的照⽚[x1,x2,x3]
}
const newPhotos = oldPhotos.filter(src => src !=IMG_OLD_SRC)// 添加所有不等于IMG_OLD_SRC的照⽚[x1,x3]
const newAlbums = oldAlbums.filter(albums =>!!~newPhotos.indexOf(albums.src))// 添加新照⽚集合[{x
1,y1},{x3,y3}]
app.globalData.allData.albums = newAlbums // 将新照⽚集赋值给全局变量
}
1.箭头函数（=>）
⾸先，我们先改写⼀下上述代码中的箭头函数，箭头函数相当于匿名函数，并且简化了函数定义。
好⽐ const newPhotos = oldPhotos.filter(src => src != IMG_OLD_SRC)这句话，可以写成如下形式：
deleteImage(){
......
const newPhotos =wPhotos(oldPhotos)
......
}
function newPhotos(oldPhotos){
return oldPhotos.filter(function(src){
if(src !=IMG_OLD_SRC){
return-1;
}
return0;
});
}
于是上述代码可以改写成如下形式：
deleteImage(){
const oldPhotos =[]
const oldAlbums = app.globalData.allData.albums
for(var i =0; i < oldAlbums.length; i++){
oldPhotos[i]= oldAlbums[i].src
}
const newPhotos =wPhotos(oldPhotos)
const newAlbums =wAlbums(oldAlbums, newPhotos)
app.globalData.allData.albums = newAlbums
}
function newPhotos(oldPhotos){
return oldPhotos.filter(function(src){
if(src !=IMG_OLD_SRC){
return-1;
}
return0;
});
}
function newAlbums(oldAlbums, newPhotos){
return oldAlbums.filter(function(albums){
if(!!~newPhotos.indexOf(albums.src)){
console.log(albums.src)
return-1;
}
return0;
});
}
2.滤波器（filter）
filter⽤于把Array的某些元素过滤掉，然后返回剩下的元素。
语法：
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
参数：
1. callback
⽤于测试数组的每个元素，返回true保留元素，否则返回false。
它接受三个参数：
1. element
数组中正在处理的当前元素。
2. index
数组中正在处理的当前元素的索引。
3. array
召唤出滤波器的这个数组。
2. thisArg
执⾏回调时⽤作此值的值。
返回值：包含通过测试的元素的新数组。如果没有元素通过测试，则返回空数组。依旧拿 const newPhotos = oldPhotos.filter(src => src != IMG_OLD_SRC)这句话来分析
// oldPhotos = [x1,x2,x3] -> 原来的元素集合
// IMG_OLD_SRC = x2 -> 需要被过滤掉的元素
function newPhotos(oldPhotos){
return oldPhotos.filter(function(src){
if(src !=IMG_OLD_SRC){
return-1;
}
return0;
});
}
/* 不⽤ filter 来实现相同功能 */
function newPhotos(oldPhotos){
const newPhotos =[]javascript全局数组
for(var i =0; i < oldPhotos.length; i++){
if(oldPhotos[i]!=IMG_OLD_SRC){
newPhotos.push(oldPhotos[i])
}
}
return newPhotos;
}
由此可见 .filter() 在执⾏过程中会对数组内的元素进⾏遍历，
⽽这⾥⾯的 src 为 oldPhotos ⾥各个元素的值，滤波器（filter）当值为-1（假）时保留；0（真）时不保留。
PS：利⽤filter结合indexOf，可以巧妙地去除Array的重复元素：
deleteRepElements(){
var newPhotos, oldPhotos =['x1','x2','x3','x2','x3','x4'];
newPhotos = oldPhotos.filter(function(element, index, self){
return self.indexOf(element)=== index;
});
console.log(newPhotos)
}
因为indexOf总是返回第⼀个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。
运⾏结果：
(4)["x1","x2","x3","x4"]
接下来我们看 const newAlbums = oldAlbums.filter(albums => !!~newPhotos.indexOf(albums.src)) 这段代码
3.检索的字符串（indexOf）
indexOf()的意思：查⼀个字符串中，第⼀次出现指定字符串的位置。
语法：
arr.indexOf(searchElement[, fromIndex])
参数：
searchElement
要在数组中定位查的元素。
fromIndex
开始搜索的索引值。如果索引值⼤于或等于数组的长度，则返回-1，这意味着不会搜索数组。如果提供的索引值是负数，则将其作为从数组末尾开始的偏移量。注意：如果提供的索引为负，则仍然从前⾯到后⾯搜索数组。如果提供的索引为0，则将搜索整个数组。默认值：0（搜索整个数组）。
返回值：数组中元素的第⼀个索引值；如果不到，则为-1。
于是在 const newAlbums = oldAlbums.filter(albums => !!~newPhotos.indexOf(albums.src)) 这段代码中：
newPhotos.indexOf(albums.src) 的值为 int 类型
当 newPhotos 数组⾥有名字叫 albums.src 的元素时，返回值⼤于等于0
当 newPhotos 数组⾥没有名叫 albums.src 的元素时，返回值等于-1
function newPhotos(oldAlbums, newPhotos){
return oldAlbums.filter(function(albums){
console.log("在外⾯："+ newPhotos.indexOf(albums.src))
if(!!~newPhotos.indexOf(albums.src)){
console.log("在⾥⾯："+ newPhotos.indexOf(albums.src))
return-1;
}
return0;
});
}
运⾏结果：
在外⾯：0
在⾥⾯：0
在外⾯：-1
在外⾯：1
在⾥⾯：1
4.强制转换为布尔型后加⼀取反（!!~）
4.1 强制转换为布尔型（!!）
!
!⼀般⽤来将后⾯的表达式转换为布尔型的数据（boolean）
因为javascript是弱类型的语⾔（变量没有固定的数据类型）所以有时需要强制转换为相应的类型类似的如:
a =parseInt("1234")//转换为数字
a ="1234"+0//转换为数字
b =1234+""//转换为字符串
c = String()//将对象转换为字符串
其中：
第1种、第4种为显式转换
第2种、第3种为隐式转换
布尔型的转换，javascript约定和c类似，规则为：
false、undefinded、null、0、“” 为 false
true、1、“somestring”、[Object] 为 true
回来看 newPhotos.indexOf(albums.src) 这句话，
当 newPhotos.indexOf(albums.src) 的值不为-1时，需要添加此元素，即在filter中 return -1当 newPhotos.indexOf(albums.src) 的值等于-1时，需要过滤此元素，即在filter中 return 0
如果是写成 !!newPhotos.indexOf(albums.src) 的话
当 newPhotos.indexOf(albums.src) 的值不为0时，添加此元素，即返回值为 true 执⾏ if判断当 newPhotos.indexOf(albums.src) 的值等于0时，过滤此元素，即返回值为 false 跳过 if判断很显然，if⾥⾯只要写成 !!newPhotos.indexOf(albums.src) + 1 就可以达到相同的效果
function newAlbums(oldAlbums, newPhotos){
return oldAlbums.filter(function(albums){
if(!!newPhotos.indexOf(albums.src)+1){
console.log(albums.src)
return-1;
}
return0;
});
}
4.2 按位取反（~）
~是按位取反的意思，表现出来的现象是 ~X = -(X+1)
引⽤某位评论区⼤佬的栗⼦：~1999 = -2000
1999 = [0111 1100 1111]原 = [0111 1100 1111]反 = [0111 1100 1111]补
然后按位取反：
[0111 1100 1111]补 => [1000 0011 0000]补
最后，转换为原码：
[1000 0011 0000]补 =>[1000 0011 0000]补 - 1 = [1000 0010 1111]反 = [1111 1101 0000]原 = -2000因此：~(-1) = -(-1+1) = 0
于是 !!newPhotos.indexOf(albums.src) + 1 即可以写为 !!~newPhotos.indexOf(albums.src)
⾄此，object.filter(event => !!~array.indexOf(event.item)) 的语法形式终于看懂个⼀⼆了~
参考⽂献
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论