javascript鼠标事件-JavaScript 风暴-鼠标风暴

2023-08-20 0 2,615 百度已收录

当您在元素中单击鼠标时javascript鼠标事件,同时按下一个或多个功能键,您可以检查控制台以查看您按下的是哪个功能键。

Mousestorm中的相关元素

鼠标悬停和鼠标移出干扰是当键盘指针从一个元素连接到另一个元素时发生的干扰。 对于mouseover,事件的主要目标是获得光标的元素,相关元素是失去光标的元素。 同样,对于 mouseout,事件的主要目标是失去光标的元素,相关元素是获得光标的元素。

javascript鼠标事件-JavaScript 风暴-鼠标风暴

DOM 通过事件对象的 relatedTarget 属性提供有关相关元素的信息。 该属性仅对 mouseover 和 mouseout 事件有值,对于其他键盘事件,该属性值为 null。

IE 不支持 relatedTarget 属性,但 IE 提供了不同的属性。 当触发 mouseover 事件时,IE 的 fromElement 属性会保存相关元素; 当触发 mouseout 干扰时,IE 的 toElement 属性会存储相关元素。

我们可以写一个方法来实现跨浏览器访问键盘风暴相关元素。

javascript鼠标事件-JavaScript 风暴-鼠标风暴

/* 跨浏览器获取鼠标事件的相关元素 */
function getRelatedTarget(event){
    if(event.relatedTarget){
        return event.relatedTarget;
    }else if(event.fromElement){
        return event.fromElement;
    }else if(event.toElement){
        return event.toElement;
    }else{
        return null;
    }
}

下面是一个具体的例子。 这种情况下,用户将键盘移出divjavascript鼠标事件,在控制面板中就可以看到键盘移入移出元素的信息。

function addEventHandler(element,type,handler){
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,handler);
    }else{
        element["on" + type] = handler;
    }
}
function getTarget(event){
    return event.target ? event.target : event.srcElement;
}
function getRelatedTarget(event){
    if(event.relatedTarget){
        return event.relatedTarget;
    }else if(event.fromElement){
        return event.fromElement;
    }else if(event.toElement){
        return event.toElement;
    }else{
        return null;
    }
}
var div = document.getElementById("myDiv");
addEventHandler(div,"mouseout",function(event){
    event = event || window.event;
    var target = getTarget(event);
    var relatedTarget = getRelatedTarget(event);
    console.info("鼠标从"+target.tagName+"移出,进入到"+relatedTarget.tagName);
});

鼠标按钮

在 mousedown 和 mouseup 事件中,它们的事件对象持有一个 Button 属性,表示键盘按键被按下或释放。

DOM的button属性有以下三个值:0表示主键盘键,1表示键盘中键,2表示辅助键盘键。 默认情况下,主键盘键是键盘的左键,辅助键盘键是键盘的右键。

IE 中也提供了按钮属性。 该属性与DOM的按钮属性不同。 它由 7 个值组成:

我们可以通过以下方式实现跨浏览器获取按钮属性。

function getButton(event){
    if(document.implementation.hasFeature("MouseEvents","2.0")){
        return event.button;
    }else{
        switch(event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 4:
                return 2;
            case 6:
                return 1;
        }
    }
}

javascript鼠标事件-JavaScript 风暴-鼠标风暴

上面的代码使用MouseEvents属性来测量它是否是DOM中的按钮属性。 这是一个实用的反例,当您按下 DIV 元素内的键盘键时,它会在控制台上打印您按下的键。

function addEventHandler(element,type,handler){
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,handler);
    }else{
        element["on" + type] = handler;
    }
}
function getButton(event){
    if(document.implementation.hasFeature("MouseEvents","2.0")){
        return event.button;
    }else{
        switch(event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 4:
                return 2;
            case 6:
                return 1;
        }
    }
}
var div = document.getElementById("myDiv");
addEventHandler(div,"mousedown",function(event){
    event = event || window.event;
    var buttonKey = getButton(event);
    var info = "";
    if(buttonKey == 0){
        info = "鼠标左键被按下";
    }else if(buttonKey == 1){
        info = "鼠标中键被按下";
    }else if(buttonKey == 2){
        info = "鼠标右键被按下";
    }
    console.info(info);
});

返回javascript教程主目录>>

数组的数据类型在任何语言中都非常重要。 JavaScript是弱类型语言,随着ES6的加入,链表的操作也逐渐建立起来。 作为一名合格的开发人员,我们需要在适当的场合运行适当的处​​理方法,使代码达到最佳的性能。

数组查找方法1:array.indexOf

该方法判断字段中是否存在值,如果存在则返回数组元素的下标,否则返回-1。

var arr=[1,2,3,4];
var index=arr.indexOf(3);
console.log(index); //2

方法2:数组.includes

该方法判断字段中是否存在某个值,存在则返回true,否则返回false

var arr=[1,2,3];
var arr=[1,2,3,4];
if(arr.includes(3))
 console.log("存在");
else
 console.log("不存在");

方法三:数组查找

返回字段中第一个满足条件的元素的值,如果没有则返回undefined

var arr=[1,2,3,4];
var result = arr.find(item =>{
 return item > 3
});
console.log(result);

方法4:array.findIndex

返回链表中第一个满足条件的元素的下标,如果没有找到,则返回-1]

var arr=[1,2,3,4];
var result = arr.findIndex(item =>{
 return item > 3
});
console.log(result);

改变原链表的方法(九):

 let a = [1,2,3];
 ES5:
 a.splice()/ a.sort() / a.pop()/ a.shift()/ a.push()/ a.unshift()/ a.reverse()
 ES6:
 a.copyWithin() / a.fill

对于这种改变原始链表的方法,要注意防止在循环遍历的过程中改变原始链表的选项,例如:改变链表的宽度会导致遍历的宽度出现问题。

splice() 添加/删除数组元素

定义: splice() 方法向链表添加/删除项,然后返回删除的项

语法: array.splice(索引,多少,item1,...,itemX)

范围:

索引:必填。 整数指定在何处添加/删除项目,使用正数指定从链表末尾开始的位置。 多少:可选。 要删除的项目数。 如果设置为 0,则不会删除项目。 item1、...、itemX:可选。 链接列表中添加了一个新项目。

返回值:如果有元素被删除,则返回一个包含被删除项的新链表。

例如1:删除元素

 let a = [1, 2, 3, 4, 5, 6, 7];
 let item = a.splice(0, 3); // [1,2,3]
 console.log(a); // [4,5,6,7]
 // 从数组下标0开始,删除3个元素
 let item = a.splice(-1, 3); // [7]
 // 从最后一个元素开始删除3个元素,因为最后一个元素,所以只删除了7

eg2:删除和添加

 let a = [1, 2, 3, 4, 5, 6, 7];
 let item = a.splice(0,3,'添加'); // [1,2,3]
 console.log(a); // ['添加',4,5,6,7]
 // 从数组下标0开始,删除3个元素,并添加元素'添加'
 let b = [1, 2, 3, 4, 5, 6, 7];
 let item = b.splice(-2,3,'添加1','添加2'); // [6,7]
 console.log(b); // [1,2,3,4,5,'添加1','添加2']
 // 从数组最后第二个元素开始,删除3个元素,并添加两个元素'添加1'、'添加2'

eg3:不要删除,但添加:

 let a = [1, 2, 3, 4, 5, 6, 7];
 let item = a.splice(0,0,'添加1','添加2'); // [] 没有删除元素,返回空数组
 console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7]
 let b = [1, 2, 3, 4, 5, 6, 7];
 let item = b.splice(-1,0,'添加1','添加2'); // [] 没有删除元素,返回空数组
 console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素

从上面三个栗子可以得出这样的结论:

如果数组中元素不够,则删除一直到最后一个元素操作的元素,包括第一个元素,还可以添加很多元素。 添加的是sort()数组排序添加在第一个元素上

定义:sort()方法对数组元素进行排序并返回该字段。

可选参数:指定排序顺序的比较函数。

默认情况下,如果sort()方法没有传递比较函数,则默认按字母顺序反转。 如果元素不是字符串,则会调用toString()方法将元素转换为字符串的Unicode(通用码)位置,然后进行字符比较。

 // 字符串排列 看起来很正常
 var a = ["Banana", "Orange", "Apple", "Mango"];
 a.sort(); // ["Apple","Banana","Mango","Orange"]
 // 数字排序的时候 因为转换成Unicode字符串之后,有些数字会比较大会排在后面 这显然不是我们想要的
 var	a = [10, 1, 3, 20,25,8];
 console.log(a.sort()) // [1,10,20,25,3,8];

比较函数的两个参数:

sort的比较函数有两个默认参数。 函数中接收这两个参数,这两个参数就是链表中要比较的两个元素。 通常我们使用 a 和 b 来接收两个要比较的元素:

对于sort()方法更深入的内部实现和处理机制,可以阅读这篇文章,详细了解javascript的sort方法

sort排序的常见用法:

数组元素按数字的倒序和降序排列:

var array = [10, 1, 3, 4,20,4,25,8]; // 升序 a-b < 0 a将排到b的前面,按照a的大小来排序的 // 比如被减数a是10,减数是20 10-20 0 被减数b(20)在减数a(10)的前面 array.sort(function(a,b){ return b-a; }); console.log(array); // [25,20,10,8,4,4,3,1];

具有多个条件的数组排序

var array = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}]; array.sort(function(a,b){ if(a.id === b.id){// 如果id的值相等,按照age的值降序 return b.age - a.age }else{ // 如果id的值不相等,按照id的值升序 return a.id - b.id } }) // [{"id":2,"age":8},{"id":5,"age":4},{"id":6,"age":10},{"id":9,"age":6},{"id":10,"age":9},{"id":10,"age":2}]

自定义比较功能,天空是你的极限

类似:利用好返回值,我们可以编写任何满足我们需求的比较函数

 var array = [{name:'Koro1'},{name:'Koro1'},{name:'OB'},{name:'Koro1'},{name:'OB'},{name:'OB'}];
 array.sort(function(a,b){
 if(a.name === 'Koro1'){// 如果name是'Koro1' 返回-1 ,-1<0 a排在b的前面
 return -1
 }else{ // 如果不是的话,a排在b的后面
 return 1
 }
 })
 // [{"name":"Koro1"},{"name":"Koro1"},{"name":"Koro1"},{"name":"OB"},{"name":"OB"},{"name":"OB"}] 

javascript鼠标事件-JavaScript 风暴-鼠标风暴

pop() 删除链表中的最后一个元素

定义:pop()方法删除链表中的最后一个元素并返回该元素。

参数:无。

 let a = [1,2,3];
 let item = a.pop(); // 3
 console.log(a); // [1,2]

shift() 删除链表的第一个元素

定义:shift()方法删除链表的第一个元素并返回该元素。

参数:无。

 let a = [1,2,3];
 let item = a.shift(); // 1

push() 在链表末尾添加一个元素

定义:push()方法将一个或多个元素添加到链表末尾并返回新的厚度。

参数: item1, item2, ..., itemX ,要添加到链表末尾的元素

 let a = [1,2,3];
 let item = a.push('末尾'); // 4
 console.log(a); // [1,2,3,'末尾']

取消移位()

定义:unshift()方法将一个或多个元素添加到链表的开头并返回新的厚度。

参数: item1, item2, ..., itemX ,要添加到链表开头的元素

 let a = [1,2,3];
 let item = a.unshift('开头'); // 4
 console.log(a); // ['开头',1,2,3]

reverse() 反转链表中元素的顺序

定义:reverse()方法用于反转链表中元素的顺序。

参数:无

 let a = [1,2,3];
 a.reverse(); 
 console.log(a); // [3,2,1]

ES6: copyWithin() 将指定位置的成员复制到其他位置

定义:在当前链表中,将指定位置的成员复制到其他位置javascript排序,并返回该字段。

语法:

 array.copyWithin(target, start = 0, end = this.length)

范围:

这三个参数都是值,如果不是,会手动转换为值。

target(必需):开始替换数据的位置。 如果是负值,则表示倒数。 start(可选):从该位置开始读取数据,默认为0。如果为负值,则表示倒数。 end(可选):在到达此位置之前停止读取数据,默认情况下等于场厚度。 使用正数指定从链表末尾开始的位置。

浏览器兼容性(MDN):chrome 45、Edge 12、Firefox32、Opera 32、Safari 9、IE不支持

例如:

 // -2相当于3号位,-1相当于4号位
 [1, 2, 3, 4, 5].copyWithin(0, -2, -1)
 // [4, 2, 3, 4, 5]
 var a=['OB1','Koro1','OB2','Koro2','OB3','Koro3','OB4','Koro4','OB5','Koro5']
 // 2位置开始被替换,3位置开始读取要替换的 5位置前面停止替换
 a.copyWithin(2,3,5)
 // ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"] 

从上面的栗子来看:

第一个参数是要替换的元素的位置。 待替换数据的位置范围:第二个参数是开始读取的元素,第三个参数上面的元素停止读取,链表的宽度不会改变。 从第一个元素被替换的地方开始替换几个元素 ES6: fill() 填充链表

定义:用给定值填充链表。

范围:

第一个元素(必填):填充链表的值

第二个元素(可选):padding的起始位置,默认值为0

第三个元素(可选):padding的结束位置,默认是this.length

MDN 浏览器兼容

 ['a', 'b', 'c'].fill(7)
 // [7, 7, 7]
 ['a', 'b', 'c'].fill(7, 1, 2)
 // ['a', 7, 'c']

不改变原链表的方法(八):

 ES5:
 slice、join、toLocateString、toStrigin、cancat、indexOf、lastIndexOf、
 ES7:
 includes

slice() 浅复制链表的元素

定义:该方法将选取的链表从头到尾(不包括尾部)的一部分浅拷贝返回给新的链表对象,原链表不会改变。

注意:字符串还有一个slice()方法,用于提取字符串,别搞错了。

语法:

 array.slice(begin, end);

范围:

begin(可选):索引值,接受负值,并从此索引中提取原始链表中的元素,默认值为0。

end(可选):索引值(不包括),接受负值,原链表元素的提取在索引之前结束,默认值为链表末尾(包括最后一个元素) 。

 let a= ['hello','world'];
 let b=a.slice(0,1); // ['hello']
 a[0]='改变原数组';
 console.log(a,b); // ['改变原数组','world'] ['hello']
 b[0]='改变拷贝的数组';
 console.log(a,b); // ['改变原数组','world'] ['改变拷贝的数组']

如上:新的链表是浅拷贝,元素都是简单数据类型,改变后不会互相干扰。

如果是复杂的数据类型(对象、数组),改变其中一个就会改变另一个。

 let a= [{name:'OBKoro1'}];
 let b=a.slice();
 console.log(b,a); // [{"name":"OBKoro1"}] [{"name":"OBKoro1"}]
 // a[0].name='改变原数组';
 // console.log(b,a); // [{"name":"改变原数组"}] [{"name":"改变原数组"}]
 // b[0].name='改变拷贝数组',b[0].koro='改变拷贝数组';
 // [{"name":"改变拷贝数组","koro":"改变拷贝数组"}] [{"name":"改变拷贝数组","koro":"改变拷贝数组"}]

定义中提到了原因:slice()是浅拷贝。 对于复杂数据类型的浅拷贝来说,只是复制指向原链表的指针,所以无论改变原链表还是浅复制链表,都是改变了原链表。 数据。

join() 数组到字符串

定义:join()方法用于将链表中的所有元素以指定分隔符分隔成一个字符串,并返回生成的字符串。

语法:

 array.join(str)

范围:

str(可选):指定要使用的分隔符,默认使用冒号作为分隔符。

 let a= ['hello','world'];
 let str=a.join(); // 'hello,world'
 let str2=a.join('+'); // 'hello+world'

使用下面提到的 join 方法或 toString 方法时,当字段中的元素也是链表或对象时会发生什么情况?

 let a= [['OBKoro1','23'],'test'];
 let str1=a.join(); // OBKoro1,23,test
 let b= [{name:'OBKoro1',age:'23'},'test'];
 let str2 = b.join(); // [object Object],test
 // 对象转字符串推荐JSON.stringify(obj);

因此,当数组元素是链表时,join()/toString()方法也会对上面的链表调用join()/toString()。 如果是一个对象,该对象将被转换为 [object Object] 字符串。

toLocaleString() 数组转字符串

定义:返回表示数组元素的字符串。 该字符串由通过调用 join() 方法连接(以冒号分隔)的链表中每个元素的 toLocaleString() 返回值组成。

语法:

 array.toLocaleString()

参数:无。

 let a=[{name:'OBKoro1'},23,'abcd',new Date()];
 let str=a.toLocaleString(); // [object Object],23,abcd,2018/5/28 下午1:52:20 

如上面栗子:调用链表的toLocaleString方法,数组中的每个元素都会调用自己的toLocaleString方法,对象调用对象的toLocaleString,Date调用Date的toLocaleString。

不推荐使用 toString() 数组转字符串

定义:toString()方法将链表转换为用冒号链接的字符串。

语法:

 array.toString()

参数:无。

该方法的疗效与join方法相同,用于将链表转换为字符串,但与join方法相比没有优势,而且字符串的分隔符无法自定义,所以不适用受到推崇的。

值得注意的是,当操作字段和字符串时,js会调用该方法手动将链表转换为字符串

 let b= [ 'toString','演示'].toString(); // toString,演示
 let a= ['调用toString','连接在我后面']+'啦啦啦'; // 调用toString,连接在我后面啦啦啦

坎卡特

定义:该方法用于组合两个或多个字段并返回一个新的链表。

语法:

 var newArr =oldArray.concat(arrayX,arrayX,......,arrayX)

范围:

arrayX(必填):该参数可以是具体值,也可以是链表对象。 可以是任意数字。

例如1:

 let a = [1, 2, 3];
 let b = [4, 5, 6];
 //连接两个数组
 let newVal=a.concat(b); // [1,2,3,4,5,6]
 // 连接三个数组
 let c = [7, 8, 9]
 let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9]
 // 添加元素
 let newVal3 = a.concat('添加元素',b, c,'再加一个'); 
 // [1,2,3,"添加元素",4,5,6,7,8,9,"再加一个"]
 // 合并嵌套数组 会浅拷贝嵌套数组
 let d = [1,2 ];
 let f = [3,[4]];
 let newVal4 = d.concat(f); // [1,2,3,[4]]

ES6 扩充运算符...合并链表:

因为ES6的句型比较简单易懂,所以现在我大多用...来处理合并链表。 ...操作符可以实现cancat中的每一个栗子,而且更加简洁,具有高度自定义数组元素位置的效果。 。

 let a = [2, 3, 4, 5]
 let b = [ 4,...a, 4, 4]
 console.log(a,b); // [2, 3, 4, 5] [4,2,3,4,5,4,4]

关于扩展更详细的内容可以参考阮一峰大师的《ECMAScript 6入门》

indexOf() 查找字段中是否存在元素并返回下标

定义:返回链表中可以找到给定元素的第一个索引,如果不存在则返回-1。

语法:

 array.indexOf(searchElement,fromIndex)

范围:

searchElement(必填):要搜索的元素

fromIndex(可选):搜索的起始位置(不能小于或等于链表的宽度javascript排序,返回-1),接受负值,默认值为0。

严格相等搜索:

数组的indexOf 搜索与字符串的indexOf 不同。 数组的indexOf使用严格相等===来查找元素,即数组元素必须完全匹配才能查找成功。

注意:indexOf() 不识别 NaN

例如:

 let a=['啦啦',2,4,24,NaN]
 console.log(a.indexOf('啦')); // -1 
 console.log(a.indexOf('NaN')); // -1 
 console.log(a.indexOf('啦啦')); // 0

使用场景:

数组去重根据获取到的字段下标、改变链表中的值等进行操作,判断是否存在并进行操作。 lastIndexOf() 查找链表中指定元素的最后一个位置

定义:该方法返回指定元素,即链表中最后一个元素的索引,如果不存在则返回-1。 (从链表前面向后查找)

语法:

 arr.lastIndexOf(searchElement,fromIndex)

范围:

searchElement(必填):要搜索的元素

fromIndex(可选):反向搜索的起始位置,默认值字段的宽度为-1,即搜索整个链表。

fromIndex 有 3 个规则:

正值。 如果该值小于或等于链表的宽度,则搜索整个字段。 负值。 可以将其视为从列表末尾到前面的倾斜。 (例如-2,从链表的最后第二个元素开始向前查找)

负值。其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。 let a=['OB',4,'Koro1',1,2,'Koro1',3,4,5,'Koro1']; // 数组长度为10 // let b=a.lastIndexOf('Koro1',4); // 从下标4开始往前找 返回下标2 // let b=a.lastIndexOf('Koro1',100); // 大于或数组的长度 查找整个数组 返回9 // let b=a.lastIndexOf('Koro1',-11); // -1 数组不会被查找 let b=a.lastIndexOf('Koro1',-9); // 从第二个元素4往前查找,没有找到 返回-1

ES7 include() 查找链表是否包含元素并返回布尔值

定义:返回一个布尔值,指示字段是否包含给定值

语法:

 array.includes(searchElement,fromIndex=0)

范围:

searchElement(必填):要搜索的元素

fromIndex(可选):默认值为0,该参数表示搜索的起始位置,接受负值。 如果正值超过字段宽度,则不会搜索数组并返回 false。 如果负值的绝对值超过了long数组的度数,则从0开始查找。

include 方法的出现填补了indexOf 方法的缺陷:

indexOf方法无法识别NaNindexOf方法检测是否包含某个值语义不够,需要判断是否不等于-1,表达不够直观

例如:

 let a=['OB','Koro1',1,NaN];
 // let b=a.includes(NaN); // true 识别NaN
 // let b=a.includes('Koro1',100); // false 超过数组长度 不搜索
 // let b=a.includes('Koro1',-3); // true 从倒数第三个元素开始搜索 

兼容性 (MDN):chrome47、Firefox 43、Edge 14、Opera 34、Safari 9、IE 未实现。

遍历方式(12):

js中遍历字段而不改变原有字段的方式一共有12种:

 ES5:
 forEach、every 、some、 filter、map、reduce、reduceRight、
 ES6:
 find、findIndex、keys、values、entries

关于遍历:forEach

定义:对字段中具有有效值的每个项目执行一次回调函数,按降序排列。

语法:


范围:

function(必需):为数组中的每个元素调用的函数。

javascript鼠标事件-JavaScript 风暴-鼠标风暴

 // 回调函数的参数
 1. currentValue(必须),数组当前元素的值
 2. index(可选), 当前元素的索引值

thisValue(可选):执行回调函数时此绑定对象的值,默认值未定义

关于 forEach() 您需要了解的内容:

这条规则也适用于下列类似的句子

 1. 对于空数组是不会执行回调函数的
 2. 对于已在迭代过程中删除的元素,或者空元素会跳过回调函数
 3. 遍历次数再第一次循环前就会确定,再添加到数组中的元素不会被遍历。
 4. 如果已经存在的值被改变,则传递给 callback 的值是遍历到他们那一刻的值。

例如:

 let a = [1, 2, ,3]; // 最后第二个元素是空的,不会遍历(undefined、null会遍历)
 let obj = { name: 'OBKoro1' };
 let result = a.forEach(function (value, index, array) { 
 a[3] = '改变元素';
 a.push('添加到尾端,不会被遍历')
 console.log(value, 'forEach传递的第一个参数'); // 分别打印 1 ,2 ,改变元素
 console.log(this.name); // OBKoro1 打印三次 this绑定在obj对象上
 // break; // break会报错
 return value; // return只能结束本次回调 会执行下次回调
 console.log('不会执行,因为return 会执行下一次循环回调')
 }, obj);
 console.log(result); // 即使return了一个值,也还是返回undefined
 // 回调函数也接受接头函数写法

every 检查该字段的所有元素是否满足条件

定义:该方法用于衡量链表的所有元素是否满足函数定义的条件

语法:

 array.every(function(currentValue, index, arr), thisValue)

参数:(这些方法的参数语法类似)

function(必需):为数组中的每个元素调用的函数。

 // 回调函数的参数
 1. currentValue(必须),数组当前元素的值
 2. index(可选), 当前元素的索引值

thisValue(可选):执行回调函数时此绑定对象的值,默认值未定义

方法返回值规则:

如果链表中的某个元素不满足,则整个表达式返回 false,并且不会测量其余元素。 如果所有元素都满足条件,则返回 true。 =

例如:

 function isBigEnough(element, index, array) { 
 return element >= 10; // 判断数组中的所有元素是否都大于10
 }
 let result = [12, 5, 8, 130, 44].every(isBigEnough); // false
 let result = [12, 54, 18, 130, 44].every(isBigEnough); // true
 // 接受箭头函数写法 
 [12, 5, 8, 130, 44].every(x => x >= 10); // false
 [12, 54, 18, 130, 44].every(x => x >= 10); // true

some数组中是否存在满足判断条件的元素

定义:数组中是否存在满足判断条件的元素

语法:

 array.some(function(currentValue, index, arr), thisValue)

参数:(这些方法的参数语法类似)

function(必需):为数组中的每个元素调用的函数。

 // 回调函数的参数
 1. currentValue(必须),数组当前元素的值
 2. index(可选), 当前元素的索引值
 3. arr(可选),数组对象本身

thisValue(可选):执行回调函数时此绑定对象的值,默认值未定义

方法返回值规则:

如果一个元素满足条件,则表达式返回 true,并且不检查其余元素。

如果没有满足条件的元素,则返回false。 function isBigEnough(element, index, array) { return (element >= 10); //数组中是否有一个元素大于 10 } let result = [2, 5, 8, 1, 4].some(isBigEnough); // false let result = [12, 5, 8, 1, 4].some(isBigEnough); // true 

filter 对原始字段进行过滤,返回一个新的链表

定义:返回一个新的链表,其中包含通过所提供函数实现的测试的所有元素。

语法:

 let new_array = arr.filter(function(currentValue, index, arr), thisArg)

参数:(这些方法的参数语法类似)

function(必需):为数组中的每个元素调用的函数。

 // 回调函数的参数
 1. currentValue(必须),数组当前元素的值
 2. index(可选), 当前元素的索引值
 3. arr(可选),数组对象本身

thisValue(可选):执行回调函数时此绑定对象的值,默认值未定义

例如:

 let a = [32, 33, 16, 40];
 let result = a.filter(function (value, index, array) {
 return value >= 18; // 返回a数组中所有大于18的元素
 });
 console.log(result,a);// [32,33,40] [32,33,16,40]

map处理链表中的每个元素并返回一个新的链表

定义:创建一个新的链表,其结果是为字段中的每个元素调用提供的函数的结果。

语法:

 let new_array = arr.map(function(currentValue, index, arr), thisArg)

参数:(这些方法的参数语法类似)

javascript鼠标事件-JavaScript 风暴-鼠标风暴

function(必需):为数组中的每个元素调用的函数。

 // 回调函数的参数
 1. currentValue(必须),数组当前元素的值
 2. index(可选), 当前元素的索引值
 3. arr(可选),数组对象本身

thisValue(可选):执行回调函数时此绑定对象的值,默认值未定义

例如:

let a = ['1','2','3','4'];
let result = a.map(function (value, index, array) {
 return value + '新数组的新元素'
});
console.log(result, a); 
// ["1新数组的新元素","2新数组的新元素","3新数组的新元素","4新数组的新元素"] ["1","2","3","4"]

reduce 为链表提供累加器,合并为一个值

定义:reduce() 方法将函数应用于累加器和字段中的每个元素(从左到右),从而产生单个值。

语法:

 array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

范围:

function(必需):为数组中的每个元素调用的函数。

 // 回调函数的参数
 1. total(必须),初始值, 或者上一次调用回调返回的值
 2. currentValue(必须),数组当前元素的值
 3. index(可选), 当前元素的索引值
 4. arr(可选),数组对象本身

初始值(可选):指定第一次反弹的第一个参数。

当回调第一次执行时:

例如:

 // 数组求和 
 let sum = [0, 1, 2, 3].reduce(function (a, b) {
 return a + b;
 }, 0);
 // 6
 // 将二维数组转化为一维 将数组元素展开
 let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 (a, b) => a.concat(b),
 []
 );

reduceRight从右向左累加

这种方法不仅与reduce的执行方向相反,而且完全一致。 请参考上面reduce方法的介绍。

ES6:find() & findIndex() 根据条件查找字段成员

find() 定义:用于查找第一个符合条件的字段成员并返回该成员,如果没有符合条件的成员,则返回 undefined。

findIndex() 定义:返回第一个满足条件的字段成员的位置,如果所有成员都不满足条件,则返回 -1。

这两种方式

语法:

 let new_array = arr.find(function(currentValue, index, arr), thisArg)
 let new_array = arr.findIndex(function(currentValue, index, arr), thisArg)

参数:(这些方法的参数语法类似)

function(必需):为数组中的每个元素调用的函数。

 // 回调函数的参数
 1. currentValue(必须),数组当前元素的值
 2. index(可选), 当前元素的索引值
 3. arr(可选),数组对象本身

thisValue(可选):执行回调函数时此绑定对象的值,默认值未定义

这两种方法都可以识别NaN,弥补了indexOf的不足。

例如:

 // find
 let a = [1, 4, -5, 10].find((n) => n  Object.is(NaN, n)); // 返回元素NaN
 // findIndex
 let a = [1, 4, -5, 10].findIndex((n) => n  Object.is(NaN, n)); // 返回索引4

浏览器兼容性 (MDN):Chrome 45、Firefox 25、Opera 32、Safari 8、Edge 是,

ES6 keys()&values()&entries() 遍历键值、遍历通配符、遍历键名+键值

定义:这三个方法都返回一个新的ArrayIterator对象,该对象根据不同的方法包含不同的值。

语法:

 array.keys()
 array.values()
 array.entries()

参数:无。

遍历栗子(摘自 ECMAScript 6 入门):

 for (let index of ['a', 'b'].keys()) {
 console.log(index);
 }
 // 0
 // 1
 
 for (let elem of ['a', 'b'].values()) {
 console.log(elem);
 }
 // 'a'
 // 'b'
 
 for (let [index, elem] of ['a', 'b'].entries()) {
 console.log(index, elem);
 }
 // 0 "a"
 // 1 "b"

在for..of中,如果想在遍历中途退出,可以使用break退出循环。

如果不使用for...of循环,可以自动调用遍历器对象的next方法进行遍历:

 let letter = ['a', 'b', 'c'];
 let entries = letter.entries();
 console.log(entries.next().value); // [0, 'a']
 console.log(entries.next().value); // [1, 'b']
 console.log(entries.next().value); // [2, 'c']

Entry() 浏览器兼容性 (MDN):Chrome 38、Firefox 28、Opera 25、Safari 7.1

key() 浏览器兼容性 (MDN):Chrome 38、Firefox 28、Opera 25、Safari 8、

注:目前仅Safari 9支持,其他浏览器尚未实现,babel转码器尚未实现

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 javascript javascript鼠标事件-JavaScript 风暴-鼠标风暴 https://www.wkzy.net/game/127124.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务